WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【Simplicity2】テーマで各投稿や投稿一覧に表示する日付アイコンを文字にする方法

公開日:2018(平成30)年12月26日/最終更新日:

WordPressのカスタマイズ情報



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

Simplicity2に限らず多くのテーマで使われているアイコンフォント。作っている人なら分かるけどそうでない人だったら分かりにくいものの1つが「記事を公開した日」と「最後に記事を更新した日」のアイコン

・・・記事を公開した日
・・・最後に記事を更新した日

こんな感じのやつです。

常々なんでこれがマークなんだろう??と疑問には思っていましたがあまり気にはしていませんでした。そんな方が恐らくほとんどなんだろうと想像してます。

でも、全く知らない人が見たら何が何だか分からないと思いませんか??

私がそう思ったきっかけは、今までブログなどを公開したことのない本当に初心者の人から「このマークって何?」と聞かれたことでした。その時は「これが公開日で更新されるとこっちも表示されて・・」と口頭で説明して済みましたが、本当に知らない人が見て聞く人がいなかったら??

それから月日が流れ、とあるページを目にしたとき、これはきちんと日本語で表示した方がいいな!と確信しました。

それはとある検索ワードであるページを見たときのことでした。ほしい情報だったのですがその記事下にコメントがあり、日を追うごとにヒドイコメントが続々・・・中には「その通りやってみたけどできんかった。古い記事はさっさと消せ!」「役に立たない記事は公開するな!」などなどちょっとコメントする人のモラルもどう?という内容でした。

まあ日頃の憂さ晴らしなのか、こういう心無いコメントする人はいるので仕方ないことではありますが、いくらモデレートしてから公開するなんて仕組みになっていてもその文面を見るだけでこちらの心が折れそうになることもありますよね?
これも含め、WordPress関連の記事を書いていると安易に質問を投げてくる人も多いことからこのサイトでは必要な時以外コメントはオフにしています。

記事の日付について案内する文字列を追加するならいろいろなサイトで紹介されているコードを使ったり、プラグインを使ったりして「古い記事です!」と表示することもできますが、その前にできることはないか??というのが今回紹介する時間アイコンを文字列に変更してしまおうという方法です。

気になる方はぜひやってみてください(テーマのバックアップは取ってから作業してくださいね)。

Simplicity2での変更方法を紹介してますが、ほかのテーマでも同じようにアイコンをつかっている場合にはソースをじっくり見れば似たような部分が出てくると思いますので、自身で調べて取り組んでみてください。

各投稿や投稿一覧に表示する日付アイコンを文字にする方法

基本的にコピペしてもらえれば大丈夫ですが、コピー環境によっては文字化けしたり改行がおかしくなったりしてうまく動作しないこともありますので注意してください。

※該当ファイルをパソコンへ一旦保存するなどバックアップはしておきましょう

今回紹介する【Simplicity2】テーマの場合、単一ページ(投稿や固定ページ)とリスト(カテゴリーやタグ一覧など)それぞれで変更する必要がありますので順に紹介します。

投稿・固定ページの日付表示を文字にする

投稿や固定ページでこれらの日付を取得する部分は「datetime.php」に書かれています。

変更前の該当する部分はこんな感じです

if ( (is_seo_date_type_update() || is_seo_date_type_update_only()) && //検索エンジンに更新日を伝える場合
$mtime ): //かつ更新日がある場合?>
<?php if ( is_create_date_visible() && is_seo_date_type_update() ): //投稿日を表示する場合?>
<span class="post-date"><?php echo $clock_icon_tag; ?><span class="entry-date date published"><?php the_time( get_theme_text_date_format() ) ;?></span><?php echo $human_time_diff; ?></span>
<?php endif; //is_create_date_visible?>
<?php if ( is_update_date_visible() ): //更新日を表示する場合?>
<span class="post-update"><?php echo $history_icon_tag; ?><time class="entry-date date updated" datetime="<?php echo get_mtime('c'); ?>"><?php echo get_mtime( get_theme_text_date_format() ); ?></time></span>
<?php endif; //is_update_date_visible?>
<?php else: //検索エンジンに投稿日を伝える場合?>
<?php if ( is_create_date_visible() ): //投稿日を表示する場合?>
<span class="post-date"><?php echo $clock_icon_tag; ?><time class="entry-date date published<?php echo ( $mtime && is_update_date_visible() ? '' : ' updated' ); ?>" datetime="<?php echo get_the_time('c');?>"><?php the_time( get_theme_text_date_format() ) ;?></time><?php echo $human_time_diff; ?></span>
<?php endif; //is_create_date_visible?>
<?php if ( is_update_date_visible() && //更新日を表示する場合
$mtime ) : //更新日があるどき?>
<span class="post-update"><?php echo $history_icon_tag; ?><span class="entry-date date updated"><?php echo get_mtime( get_theme_text_date_format() ); ?></span></span>
<?php endif; //is_update_date_visible?>

そして表示を日本語文字列に変更した後はこんな感じになります

if ( (is_seo_date_type_update() || is_seo_date_type_update_only()) && //検索エンジンに更新日を伝える場合
$mtime ): //かつ更新日がある場合?>
<?php if ( is_create_date_visible() && is_seo_date_type_update() ): //投稿日を表示する場合?>
<span class="post-date">公開日:<span class="entry-date date published"><?php the_time( get_theme_text_date_format() ) ;?></span><?php echo $human_time_diff; ?></span>
<?php endif; //is_create_date_visible?>
<?php if ( is_update_date_visible() ): //更新日を表示する場合?>
<span class="post-update">最終更新日:<time class="entry-date date updated" datetime="<?php echo get_mtime('c'); ?>"><?php echo get_mtime( get_theme_text_date_format() ); ?></time></span>
<?php endif; //is_update_date_visible?>
<?php else: //検索エンジンに投稿日を伝える場合?>
<?php if ( is_create_date_visible() ): //投稿日を表示する場合?>
<span class="post-date">公開日:<time class="entry-date date published<?php echo ( $mtime && is_update_date_visible() ? '' : ' updated' ); ?>" datetime="<?php echo get_the_time('c');?>"><?php the_time( get_theme_text_date_format() ) ;?></time><?php echo $human_time_diff; ?></span>
<?php endif; //is_create_date_visible?>
<?php if ( is_update_date_visible() && //更新日を表示する場合
$mtime ) : //更新日があるどき?>
<span class="post-update">最終更新日:<span class="entry-date date updated"><?php echo get_mtime( get_theme_text_date_format() ); ?></span></span>
<?php endif; //is_update_date_visible?>

要するにアイコン表示されている部分である

<?php echo $clock_icon_tag; ?>
<?php echo $history_icon_tag; ?>

を文字に変えるだけ!!です。

一覧の日付アイコンを文字にする

投稿や固定ページでこれらの日付を取得する部分は「entry-card-content.php」に書かれています。

変更前の該当する部分はこんな感じです

<?php if ( is_create_date_visible() ): //投稿日を表示する場合?>
<span class="post-date"><span class="fa fa-clock-o fa-fw"></span><span class="published"><?php the_time( get_theme_text_date_format() ) ;?></span></span>
<?php endif; //is_create_date_visible?>

そして表示を日本語文字列に変更した後はこんな感じになります

<?php if ( is_create_date_visible() ): //投稿日を表示する場合?>
<span class="post-date">公開日:<span class="published"><?php the_time( get_theme_text_date_format() ) ;?></span></span>
<?php endif; //is_create_date_visible?>

<?php $mtime = get_mtime('c'); ?>
<?php if ( is_update_date_visible() && //更新日を表示する場合
$mtime ) : //更新日があるどき?>
<span class="post-update">最終更新日:<span class="entry-date date updated"><?php echo get_mtime( get_theme_text_date_format() ); ?></span></span>
<?php endif; //is_update_date_visible?>

こちらも同じようにアイコン表示されている部分である

<?php echo $clock_icon_tag; ?>

を文字に変え

<?php $mtime = get_mtime('c'); ?>
<?php if ( is_update_date_visible() && //更新日を表示する場合
$mtime ) : //更新日があるどき?>
<span class="post-update">最終更新日:<span class="entry-date date updated"><?php echo get_mtime( get_theme_text_date_format() ); ?></span></span>
<?php endif; //is_update_date_visible?>

標準では公開日のみ表示される部分に更新日を表示するよう↑のコードを追記するだけです。

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)