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

公開日: 更新日: Wordpress
Knowledge Base Wordpress パソコン カスタマイズ 設定




Simplicityに限らず多くのテーマで使われているアイコンフォント。作っている人なら分かるけどそうでない人だったら分かりにくいものの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?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

<?php echo $clock_icon_tag; ?>
<?php echo $history_icon_tag; ?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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

投稿や固定ページでこれらの日付を取得する部分は「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?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

      <?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?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

<?php echo $clock_icon_tag; ?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

を文字に変え

		<?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?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】