どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ブログの記事タイトル下に表示されていることが多い「投稿日・更新日」は、その記事が最新のものなのか、古いものなのかをユーザーがすぐに判断できる大事な情報です。
この「投稿日・更新日」の表示は非表示にすることもでき、その場合は投稿者側からすれば古い記事であっても閲覧されるというメリットがあります。
しかし、ユーザー側からすると最新なのか古いのかが判断できないので、ユーザーの為に役立つコンテンツを提供していく上で日付の表示は必要です。
STINGER8でもデフォルトで表示されていますが、もう少しわかりやすく表示させたかったことと、ちょっとした不都合もあったのでその部分をカスタマイズして変更していこうと思います。
「投稿日・更新日」のカスタマイズ
「投稿日・更新日」の日付の表記は、ワードプレスの管理画面メニューから「設定」⇒「一般」内の「日付のフォーマット」で指定できます。
一般設定で「Y/m/d」と設定すると以下のような表記になります。
投稿日と更新日をフォントアイコンに変更したかったので、STINGER8のテーマ内のファイルを編集していきます。
フォントアイコンに変更する
フォントアイコンの変更には、子テーマの「個別投稿 (single.php)」を使います。
「single.php」ファイルが子テーマにない場合は、無料で使えるFTPソフトなどで親テーマのファイルからアップロードして下さい。
まずは管理画面メニューの「外観」⇒『テーマの編集』をクリックします。
「STINGER8 Child」が選択されていることを確認し、「single.php」ファイル内から以下のコードを探しましょう。
<div class="blogbox"> <p><span class="kdate"> <?php if ( get_the_date() != get_the_modified_date() ) : //更新がある場合 ?> 投稿日：<?php echo esc_html( get_the_date() ); ?> 更新日：<time class="updated" datetime="<?php echo esc_attr( get_the_modified_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_modified_date() ); ?></time> <?php else: //更新がない場合 ?> 投稿日：<time class="updated" datetime="<?php echo esc_attr( get_the_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_date() ); ?></time> <?php endif; ?> </span></p> </div>
キーボードの「Ctrl+F」で「blogbox」と検索すればすぐに見つかるかと思います。
４列目の「投稿日：<?php～」の上と、５列目の「更新日：<time～」の上に以下のコードを追加して下さい。
４列目用コード⇒ <i class=”fa fa-clock-o”></i>
５列目用コード⇒ <i class=”fa fa-history”></i>
上記コードは「Font Awesome」のサイトにあるアイコンコードで、追加した変更後の「single.php」が以下のものになります。
<div class="blogbox"> <p><span class="kdate"> <?php if ( get_the_date() != get_the_modified_date() ) : //更新がある場合 ?> <i class="fa fa-clock-o"></i> 投稿日：<?php echo esc_html( get_the_date() ); ?> <i class="fa fa-history"></i> 更新日：<time class="updated" datetime="<?php echo esc_attr( get_the_modified_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_modified_date() ); ?></time> <?php else: //更新がない場合 ?> 投稿日：<time class="updated" datetime="<?php echo esc_attr( get_the_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_date() ); ?></time> <?php endif; ?> </span></p> </div>
追加したコードの前に全角スペースを入れると、投稿日と更新日の間隔や左からの位置を調整できます。
最後に５列目と７列目の「投稿日：」「更新日：」を削除し、ファイルを更新すると以下のようにアイコンが追加されます。
文字サイズや配色を変更する
文字のサイズや色、背景色などを変更する際は、「スタイルシート(style.css)」の方にコードを追記します。
/*-- 投稿日・更新日 --*/
.blogbox p {
font-size: 14px;/*文字サイズ*/
margin: 0px;/*全体の位置*/
color: #808080;/*文字色*/
line-height: 25px;/*上下幅*/
margin-bottom: 20px;/*下の間隔*/
background-color: #f5f5f5;/*背景色*/
}
ここは必要であればブログにあったものをお好みで使用して下さい。
予約投稿による更新日に注意！
ワードプレスブログでは、作成した記事を予約機能を使って指定した日付に投稿日を設定することができます。
ただし、「STINGER8」では記事を予約した日が更新日となるので、投稿日より更新日の方が古くなってしまいます。
一般的な更新日の解釈は、投稿された記事がその後に更新されたことを意味しているので、その場合は更新された日付の方が古いというのは、ユーザー側からしても混乱を招く原因となりかねません。
予約した記事が公開されるたびに更新を行うのも面倒なことなので、更新日の概念を変更して公開された記事が更新された時に、更新日を表示するようにカスタマイズしておきましょう。
「functions.php」を変更する
「functions.php」ファイルの編集では少しでも間違ったコードを追加すると、ワードプレスにアクセスできなくなってしまうので、事前に必ずバックアップファイルを用意しておくようにしましょう。
もしアクセスできなくなってしまった時は、以下の記事を参考にして下さい。
| 参考：「functions.php」の編集後に画面が真っ白！原因とエラーを直す方法 |
子テーマ内「functions.php」の一番下に、以下のコードをコピー＆ペーストします。
/*
get_the_modified_time()の結果がget_the_time()より古い場合はget_the_time()を返す。
同じ場合はnullをかえす。
それ以外はget_the_modified_time()をかえす。
*/
function get_mtime($format) {
$mtime = get_the_modified_time('Ymd');
$ptime = get_the_time('Ymd');
if ($ptime > $mtime) {
return get_the_time($format);
} elseif ($ptime === $mtime) {
return null;
} else {
return get_the_modified_time($format);
}
}
コードを貼り付けたらファイルを更新して次の作業に進みます。
「single.php」を変更する
先程のフォントアイコンに変更する際の「更新日：」に続く以下のコードがあることを確認します。
<time class="updated" datetime="<?php echo esc_attr( get_the_modified_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_modified_date() ); ?></time>
確認ができたら上記コードを削除して、代わりに以下のコードを追記して下さい。
<?php if ($mtime = get_mtime('Y/m/d')) echo ' ', $mtime; ?>
変更コードを追加できたらファイルを更新して作業は完了となります。
これで予約投稿をしても、更新日が投稿日より古くなることはありません。
「投稿日・更新日」を非表示にする
「single.php」ファイルでカスタマイズした部分の「投稿日：」「更新日：」に続くコードを、削除するだけで簡単に非表示にすることができます。
ただし、また復活させたい場合にコードを探すのは面倒なので、「<!– 対象コード –>」で囲って非表示にする「コメントアウト」の方法が便利です。
これなら「<!– –>」の部分を削除するだけで、またすぐに表示させることが可能です。
以上がSTINGER8の「投稿日・更新日」の部分をカスタマイズして、最適化表示する方法になります。
「投稿日・更新日」のカスタマイズまとめ
「投稿日・更新日」の部分に関するカスタマイズについては、ここでご紹介した内容をご覧になって頂ければ、大抵のことは把握できるかと思います。
「style.css」「single.php」「functions.php」などのファイルは、カスタマイズで使用する機会も多いので、使い方に慣れておくと何かと役に立ちます。
また、コードを編集するといっても基本的にはコピー＆ペーストだけでできるものばかりなので、そこまで難しく考える必要もありません。
ブログやサイト内で気になっている部分があるなら、一度CSSを使ってカスタマイズしてみてはいかがでしょうか。
