WordPress のIconic One テーマでは、記事一覧が表示される場合には、その 公開日 が表示されません。そこで子テーマを編集して記事一覧表示時でも 公開日 や 更新日 を表示するよう、改変してみました。
Iconic Oneテーマにおける記事公開日表示の仕様
WordPressのIconic Oneテーマでは、記事の公開日が表示されるのは個別記事のみ。
図1.個別記事の公開日表示
カテゴリやタグ、各種アーカイブなど記事の一覧表示では日付が表示されないので、いつ書かれた記事なのか個別記事をクリックするまでは分かりません。
図2.一覧では公開日非表示
また、投稿の公開後にリライトされた投稿は、公開日の代わりに更新日を表示するオプションが用意されているものの、日付の表示形式に潜在的な問題あります。
図3.公開日と更新日の入替オプション
子テーマを作ってcontent.phpを改変
Iconic Oneテーマでは、そのどちらのページも1つのテーマファイル、 content.php が担っています。テーマファイル自体を編集するとアップデート時に上書きされてしまうので、子テーマを作ってその中へコピーした content.php を以後、編集します。
|
1 2 3 4 5 6 7 |
/wp-content └ themes ├ iconic-one │ └ content.php <--オリジナル │ └ iconic-one-child └ content.php <--コピーし編集 |
記事一覧表示でも公開日を表示するには
記事タイトル下で投稿者名や公開日、コメント数が表示される灰色のバーは、 below-title-meta と言うCSSクラスで定義されるボックス要素で、おおよそ次のような中身で構成されています。
|
1 2 3 4 5 6 7 8 9 |
<div class="below-title-meta"> <div class="adt"> . . </div> <div class="adt-comment"> <a>....</a> </div> </div> |
この div 要素を取り囲むphpの if〜endif 文（23行目と42行目）が表示させるかどうかを制御しているので、いずれもコメントアウトすることで、記事の一覧表示でも常に公開日が表示されるようになります。
|
1 2 3 4 5 6 7 |
[Line.23] <?php //if ( is_single() || ( get_theme_mod( 'iconic_one_date_home' ) == '1' ) ): //for date on single page ?> . . . [Line.42] <?php //endif; // display meta-date on single page() ?> |
公開日と更新日を併記するには
今回の変更点は次の3つ。
- 投稿者名を非表示にする。
- 更新日が公開日よりも新しい場合のみ更新日を追記。
- 日付には time タグを使う。
最後の time タグはhtml5で策定されたタグで、例えばこんな風に日付を囲むことで、検索エンジンのクローラに拾ってもらいやすくなるようです。
|
1 2 |
<time datetime="2021-07-16" itemprop="datepublished">2021年7月16日</time>公開 | <time datetime="2021-11-10" itemprop="datemodified">2021年11月10日</time>更新 |
但し、まだ新しいタグなのでネット上での情報量も乏しく、効果のほどは定かではなくこれからといったところ。
content.php の25行目以降のこの部分を、
|
25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="adt"> <?php _e('By','iconic-one'); ?> <span class="vcard author"> <span class="fn"><?php echo the_author_posts_link(); ?></span> </span> <span class="meta-sep">|</span> <?php if ( get_theme_mod( 'iconic_one_updated_date') != '1' ) { ?> <span class="date updated"><?php echo get_the_date(); ?></span> <?php } else { ?> <span class="date updated"><?php echo get_the_modified_date('F j, Y'); ?></span> <?php } ?> </div> |
次のように書き換えます。
|
25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="adt"> <?php //_e('By','iconic-one'); ?> <!-- <span class="vcard author"> <span class="fn"><?php //echo the_author_posts_link(); ?></span> </span> <span class="meta-sep">|</span> --> <span class="date updated"><time datetime="<?php echo get_the_date('Y-m-d'); ?>" itemprop="datepublished"><?php echo get_the_date(); ?></time>公開</span> <?php if (get_the_modified_date('Ymd') > get_the_date('Ymd')) { ?> <span class="meta-sep">|</span> <span class="date updated"><time datetime="<?php echo get_the_modified_date('Y-m-d'); ?>" itemprop="datemodified"><?php echo get_the_modified_date(); ?></time>更新 </span> <?php } ?> </div> |
PCでの見え方
早速、PCから開いてみると記事の一覧表示でも個別記事と同じく、日付の入った灰色のバーが現れるようになりました。
図4.一覧表示の日付表示
投稿者名が消え、公開後にリライトが入った記事にはその日付が追記されるようになったことで、SEOにも少なからず貢献してくれると良いのですが。
図5.個別記事の日付表示
モバイルデバイスでの見え方
投稿者を非表示にしたので、横幅の限られるモバイルデバイスでも、2つの日付を一行に収めることができていました。
図6.モバイルデバイス縦長表示
