賢威7の投稿(記事本文)で公開日/更新日をアイコン(Webフォント)に変更する方法

どうも。葉です。

この記事では、賢威7の投稿(記事本文)内の公開日/更新日をアイコン(Webフォント)に変更する方法を解説していきます。

1.この記事を読んでできるようになること

まずは、この記事を読むことでできるようになることを確認してください。

下図の「変更前」→「変更後」のように、記事本文の公開日、更新日の表示をアイコン表示に変更することができます。

変更前

デフォルトの公開日

デフォルトの公開日、更新日

変更後

公開日がアイコンで表示される

公開日、更新日がアイコンで表示される

では、実際にコードを編集して、公開日、更新日をアイコン表示に変更していきましょう。

2.公開日/更新日をアイコン(Webフォント)に変更する手順

WordPress管理画面の左メニューより「外観→テーマの編集」をクリックしてください。

公開日/更新日をアイコン(Webフォント)に変更する手順1

「個別投稿(single.php)」をクリックしてください。

公開日/更新日をアイコン(Webフォント)に変更する手順2

ここから、「個別投稿(single.php)」を編集して、公開日/更新日をアイコン(Webフォント)に変更していきます。

変更箇所は、次の3箇所です。

※変更前に必ず「個別投稿(single.php)」のバックアップを取ってください。

1箇所目

変更前

<?php _e('Published on','keni') ?> : 

変更後

<i class="fa fa-calendar"></i>:

公開日/更新日をアイコン(Webフォント)に変更する手順3

2箇所目

変更前

<?php _e('Last modified on','keni') ?> : 

変更後

<i class="fa fa-refresh"></i>:

公開日/更新日をアイコン(Webフォント)に変更する手順4

3箇所目

変更前

<p class="post-date"><time datetime="<?php the_time('Y-m-d'); ?>"

変更後

<p class="post-date"><i class="fa fa-calendar"></i>:<time datetime="<?php the_time('Y-m-d'); ?>"

公開日/更新日をアイコン(Webフォント)に変更する手順5

上記の変更が完了したら、「1.この記事を読んでできるようになること-変更後」のように、公開日/更新日がアイコン(Webフォント)に変更されているはずです。

3.まとめ

この記事では、賢威7記事本文の公開日、更新日をアイコン(Webフォント)に変更する方法を解説しました。

この他にも、公開日、更新日のデザインを変更したい場合は、下記の記事を参考にしてください

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします