過去7日以内の新着記事に「NEW」の文字を追加する方法：賢威7.0

ウェブサイトを見ていると、トップページの記事一覧の中に「NEW」という文字やアイコンが入っているサイトがたまにありますよね。
目立つようにはっきりとした色で表示され、特に企業サイトや飲食サイトの新着情報に多い気がします。

見る側にとってはサイトが賑わっている感じがしますし、何と言っても新しい記事を探しやすくなるので、特に更新頻度の高いサイトや即時性の高いサイトに効果がありそうです。

今回の記事ではそんな「NEW」という文字を賢威7 の最新情報リストに追加する方法をご紹介します。

1 カスタマイズ前
2 カスタマイズ後
3 1. 管理画面から最新情報リストを有効化
4 2. 親テーマの functions.php を編集
5 3. CSSで「NEW」の文字を目立たせる
- 5.1 3-1. 赤い背景で「NEW」を強調
- 5.2 3-2. 黄色い背景で目立たせる

カスタマイズ前

↓ 最新情報リストを有効化しただけの状態

カスタマイズ後

カスタマイズ 1

↓ 「NEW」の文字に赤い背景を付けて強調

カスタマイズ 2

↓ 「NEW」の文字に黄色い背景を付け、文字と境界線を少し太めにして強調

[ad]

今回はPHPファイルを編集するので、バックアップを取ってから作業するようにして下さい。
画面が真っ白になることもあるので、小さいものでもPHPコードのミスには要注意です。

1. 管理画面から最新情報リストを有効化

賢威7をインストールしたばかりの状態では最新情報リストが無効になっているので、まずは管理画面から有効化しましょう。

賢威の設定 > トップページにある「最新情報を表示しない」というチェックを外します。

2. 親テーマの functions.php を編集

最新情報リストのコードは、親テーマ（賢威7のテーマ自体）の functions.php に書かれているので、まずは fucntions.php を編集します。

285行目付近に書かれている以下のコードが今回編集する関数です。

function newposts_keni

まず 330行目付近の while の上に以下のコードを追加します。

global $post;

次に、 while の下の

if (get_the_post_thumbnail()...

と

$res_data .= "<div class="\"news-date\"">...

の間に以下のコードを追加します。

if (strtotime( $post->post_date ) > strtotime('-7 days')) $res_data .= "<span class="new-entry">NEW</span>";

↓ whileから $res_data... までのコード（編集後）

    global $post;
    while ($r->have_posts()) : $r->the_post();

        $res_data .= "<article class=\"news-item\">\n";
        $res_data .= "<h3 class=\"news-title\"><a href=\"".esc_attr(get_permalink())."\">".esc_html(get_the_title())."</a></h3>\n";

        if (get_the_post_thumbnail(get_the_ID())) $res_data .= "<div class=\"news-thumb\">\n<a href=\"".esc_attr(get_permalink())."\">".get_the_post_thumbnail(get_the_ID(), 'small_thumb')."</a>\n</div>\n";

        if (strtotime( $post->post_date ) > strtotime('-7 days')) $res_data .= "<span class='new-entry'>NEW</span>";

        $res_data .= "<div class=\"news-date\"><time datetime=\"".get_the_time("Y-m-d")."\">";

これで最新情報リストに「NEW」という文字が追加されるようになりました。

何もスタイリングしていないので少し分かりにくいかもしれませんが、ちゃんと7日以内の投稿に「NEW」という文字が追加されています。

3. CSSで「NEW」の文字を目立たせる

このままではさすがに地味すぎるので、最後にCSSでスタイリングして目立たせましょう。
NEW という文字を new-entry というクラスを付けたspanタグで囲んでおいたので、これをターゲットにしてスタイリングします。

以下のコードを親テーマ（賢威7本体）の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加すれば完成です！

3-1. 赤い背景で「NEW」を強調

.new-entry {
background: red;
margin-right: .3em;
padding: .2em .3em;
border: 1px solid #730000;
color: #fff;
}

3-2. 黄色い背景で目立たせる

.new-entry {
background: #FCFF2B;
margin-right: .3em;
padding: .2em .3em;
border: 2px solid #730000;
border-radius: 3px;
font-weight: bold;
}