Cocoonテーマで新着NEW!アイコン表示

日記

テーマを「Cocoon」に変更して最初の記事です。

いろんな機能を少しずつ使っていきたいと思います。

WordPress初心者のくせに、一丁前にカスタマイズしようとする無謀なワタクシです。

ネットを駆け巡り、表題の件、ようやく実装できたので忘れないように覚え書き。

複数のサイト様の情報で実現できたのですが、忘れないうちに自分用にまとめておきます。

またこれが、誰かのお役に立てば幸いです^^

はじめに

ブログ開設から使ってきたテーマ「Hueman」ですが、なんだかごちゃごちゃしてきたので、評判の高い「Cocoon」に変更するべくローカル環境を構築していろいろ実験しておりました。

で、前からやりたかった新着記事に「NEW!」っていうシンプルなお知らせ表示に挑戦。

いくつかのプラグインでも可能なのですが、理想通りの表示ではないんですよね。

↓こういうのがやりたかったんです。

実験中のスクショです。

イメージわかりますでしょうか?

とりあえず投稿してから7日間表示させてみます。

編集するファイル

Cocoonにおいて、今回編集するファイルはこの三つ。

  • function.php
  • entry-card.php
  • style.css

 

テーマのインストールや、php、cssファイルの編集、FTPクライアントソフトの基本的最低限の操作はできることを前提で進めます。

手順1

さて、実際の作業開始です。

テーマをいじる時は子テーマでいじるのが定石です。

上記、entry-card.phpは、親テーマ内にしかありませんので、子テーマの同階層にコピーしてやります。

\wp-content\themes\cocoon-master\tmpの中にあるentry-card.phpを

\wp-content\themes\cocoon-child-master\tmpの中へコピーしてやります。

最初、子テーマにはtmpフォルダがないので作ってからコピーしましょう。

手順2

まずは、NEW!を表示するための大事なヤツです。

グーグル先生が探し出してくれた数あるサイトの中で、一番使い勝手が良さそうという理由で決めました。

WEBDESIGNDAY様のココ↓

リンク先の目次「function.phpで関数化」をクリックして飛んだところにあるコードをそのまま使わせていただきます。

該当コードをコピーしたら、function.phpの「//子テーマ用の関数を書く」という行の下に貼り付けます。

これで、3パターンの関数が使用可能になります。

  1. keika_time($days) 投稿から〇日間New!を表示
  2. keika_num($limit) 最新の投稿〇件にNew!を表示
  3. keika_awase($days,$limit) 上ふたつの混合〇日間かつ最新〇件にNew!を表示

手順3

いよいよ、実際にNEW!を表示させたい場所に、手順2で作った関数を貼り付けます。

これが一番難儀しました><

Cocoonのどのファイルのどの位置に貼り付けるのかかなーり探しましたよ。

で、↓コチラを参考にさせていただきました。

編集するファイルは、entry-card.phpです。

結論だけ書いておきます。

今回は34行目の下(35行目)に「keika_time(7)」という関数を入れました。

これで、トップページの記事一覧のタイトルの上に念願のNEW!が表示されるようになります。

手順4

最後に、NEW!をオシャレにします。

手順3までだと普通にテキストでNEW!が表示されるだけです。せっかくなのでちゃんと目立たせたいのでCSSで装飾しましょう。

最後に編集するのは、style.cssです。

参考にしたサイトは、サルワカくんさんのサイト。

なんかテキトーにいじって、イメージしていた赤い四角にできました。(注:このスクショは最終的なコードではありません。)

WEBDESIGNDAYさんのCSSをそのまま使ったら黒い四角になってしまうんですよね^^;

無事設置完了!

ということで、設置完了です。

いろんなサイトの情報を利用させていただき、なんとか新テーマに「NEW!」を表示できました。

最後に

ちなみに、この記事に使ってるファイル編集時のスクリーンショットはサクラエディタになっております。

ローカル環境でテーマエディーターがエラーを吐き、やむなくサクラエディターで編集した始末です。

そもそもローカル環境だと直接編集できるんで^^

本番環境ではテーマエディターが問題なく使えました。

さて、新テーマ、これからまだまだいじくっていきたいと思います。

古い記事も少しずつ手直ししていく予定です。

しばらくの間、急にレイアウトが変わったり、リンクがおかしくなったり、多々ご迷惑おかけすると思いますが、どうか生温かく見守っていただけますと幸いです^^

1+

コメント 画像添付できます。