WordPressテーマUnderStrapで投稿日時を日本語にしてカテゴリーと更新日時を表示する

初期表示が英語圏向けすぎるUnderStrap

英語圏のテーマとしては特別悪いと言うこともないのですが、UnderStrapの初期状態の投稿日時表示はさすがに質素すぎます。

Font Awesomeのアイコンを使用してカテゴリーと投稿日時、更新日時を表示して少し華を添えたいと思います。

Font Awesomeアイコンでカテゴリーと投稿日時、更新日時を表示

https://github.com/understrap/understrap-child

UnderStrapは子テーマの使用を推奨しているので、子テーマのfunctions.phpに以下の記述をします。

add_filter('understrap_posted_on', 'mypostedon');

function postedOn() {
    $posted_on = sprintf('<time datetime="%s"><i class="fa fa-calendar pl-2 pr-1"></i>%s</time>', get_the_date('c'), esc_attr(get_the_date()));
    if (get_the_modified_date('Ymd') !== get_the_date('Ymd')) {
        $posted_on = sprintf('<time datetime="%s"><i class="fa fa-refresh pl-2 pr-1"></i>%s</time>', get_the_modified_date('c'), esc_attr(get_the_modified_date())) . $posted_on;
    }
    $categories = get_the_category($post->ID);
    if ($categories) {
        $category = reset($categories);
        $posted_on = sprintf('<i class="fa fa-folder pr-1"></i><a href="%s">%s</a>', get_category_link($category->term_id), $category->cat_name) . $posted_on;
    }
    echo '<span class="posted-on">' . $posted_on . '</span>';
}

子テーマをクラス化している場合は以下のようになります。

add_filter('understrap_posted_on', [$this, 'myPostedon']);

public function myPostedOn() {
    $posted_on = sprintf('<time datetime="%s"><i class="fa fa-calendar pl-2 pr-1"></i>%s</time>', get_the_date('c'), esc_attr(get_the_date()));
    if (get_the_modified_date('Ymd') !== get_the_date('Ymd')) {
        $posted_on = sprintf('<time datetime="%s"><i class="fa fa-refresh pl-2 pr-1"></i>%s</time>', get_the_modified_date('c'), esc_attr(get_the_modified_date())) . $posted_on;
    }
    $categories = get_the_category($post->ID);
    if ($categories) {
        $category = reset($categories);
        $posted_on = sprintf('<i class="fa fa-folder pr-1"></i><a href="%s">%s</a>', get_category_link($category->term_id), $category->cat_name) . $posted_on;
    }
    echo '<span class="posted-on">' . $posted_on . '</span>';
}

Googleの検索結果はtimeタグを拾うらしいので、更新日時を優先的に読み込ませるようにしています。

この変更でGoogle検索結果に更新日時が優先的に表示されるようになりました。

WordPress関連記事

• WordPressテーマUnderStrapで投稿者名を非表示にする
• UnderStrapで投稿日時を日本語にしてカテゴリーと更新日時を表示する
• UnderStrapの寸詰まりなUIを改善するCSS
• UnderStrapの『Posted in WordPress/コメントする』を非表示にする
• Understrapのアイキャッチ画像を小さくし、記事個別ページでは非表示にする
• WordPressのメディアや記事全文の文字を置換して日付も更新するSQL