ストークで新着記事にNEWのアイコンが付くようにする方法

ちょっとした小ネタですが、ブロガー専用テーマ「stork(ストーク)」で新着記事に「NEW」とアイコンが付くようにカスタマイズをしてみました。

1日に何記事も書いたり、更新頻度が高いブログなどで新着記事がサッとわかってオススメです。

ストークで新着記事にNEWのアイコンが付くようにする方法

参考指定期間or時間だけ記事タイトルに「NEW」マークをつけるコピペ方法

▲コチラのサイトを参考にさせていただきました。

ただ、どこに貼ったら良いのかわからなかったので、ここから独自に補足させていただきます。

アイコンを貼りたい場所を選択する。

まず、「NEW」アイコンを貼りたい場所を選びます。

設置したい場所
  • 各個別記事
  • トップページの記事一覧

の2ヶ所に設置したいと思いました。

まず、子テーマに各対応するファイルをコピーします。

子テーマって何って方はコチラをご参照ください。

個別記事は、「single.php」になります。

トップページの記事一覧は「カスタマイズ」で設定しているトップページの選択しているレイアウトごとにことなるのでご注意ください。 (これはブログテーマのストークの設定となります。)

例えば、
  • 「シンプル」→「parts_archive_simple.php」
  • 「カード型」→「parts_archive_card.php」
  • 「マガジン型」→「parts_archive_magazine.php」
  • 「ビッグ」→「parts_archive_big.php」

以上のようになります。

PCもモバイル共に「シンプル」なので「parts _ archive _ simple.php」を子テーマにコピーします。

各ファイルにコードをコピペする。

子テーマに各ファイルをコピーしたら、コードを足します。

< ?php
    $days=2;
    $today=date('U'); $entry=get_the_time('U');
    $diff1=date('U',($today - $entry))/86400;
    if ($days > $diff1) {
  echo 'NEW';
  }
  ?>

出典指定期間or時間だけ記事タイトルに「NEW」マークをつけるコピペ方法より引用。

▲加えるコードは以下のコードなります。

WordPressの「ダッシュボード→外観→テーマ編集」まで移動します。

single.php、parts_archive_simple.phpでそれぞれ

< ?php echo get_the_date('Y.m.d'); ?>

▲というコードを探して、その後に上記のコードをコピペします。

これで、完成ですがそのまま黒字で表示でもあまり目立たないので、フォントの色を変えたりCSSで装飾したりするのも良いでしょう。

参考STORKカスタマイズ!「第4弾:リンク用ボックス・マーク」

ぼくは、CSSでアイコンを装飾してみました、コチラのサイトの参考にさせていただきました。

☞まとめ

実際に表示を見てみると、「あっ、あるね〜」と気付くほどの内容ですが、ワンポイントになって良いかなと思います。

ストークを使っている方は、この機会に設置してみてはいかがでしょうか!?

以上、「ストークで新着記事にNEWのアイコンが付くようにする方法」と題して記事をお送りしました!!

[relationId head=”こちらもどうぞ!” postid=”10788,10905,10688″ color=””]



ABOUTこの記事をかいた人

ブロガー、介護福祉士、社会福祉士。エニアグラム:タイプ6(堅実家)。ストレングスファインダー:最上志向、共感性、戦略性、ポジティプ、適応性。福祉施設に勤めていた時にブログを開設。2016年4月〜2018年3月まで高知県に移住を経て故郷の埼玉県に帰郷。アニメ、読書、心のことが大好きです!詳しいプロフィールはコチラ!!