ライオンメディア（LION MEDIA）で記事に更新日（編集日）を表示する方法。（＋アイコンの追加も）

WordPressのテーマ「LION MEDIA」のタイトル下に更新日を追加する方法を、アイコンの作り方も含めて紹介します。

更新日を追加する場所

記事のタイトル下、公開日が表示されている位置

この横に、編集日が表示されるようにします。

公開日がカレンダーアイコンなので、それっぽい編集日用のアイコンがあればいいのですが、元々用意されていないので、自分で追加しないといけません。

なので、今回は編集日用のアイコンの追加と、編集日の表示を行います。

バックアップを取る（サーバ側）

WordPressのデータがあるサーバにアクセスして、これから交換・編集するファイルをバックアップします。

バックアップするファイルは以下の通り。

../wp-content/themes/lionmedia/single.php

../wp-content/themes/lionmedia/css/icon.css

../wp-content/themes/lionmedia/fonts/

• icomoon.eot
• icomoon.svg
• icomoon.ttf
• icomoon.woff

アイコンデータの追加

まずはアイコンデータのファイルを作って、既存のものと交換します。

※ 先に表示を変更すると、アイコン未表示でカッコ悪い状態になるので、必ずアイコンから作りましょう。（経験者は語る…）

① 「IcoMoon App」にアクセス

「IcoMoon App」はフリーのアイコン素材から、アイコンデータを作成できるサイトです。

既存のアイコンデータを取り込んで、追加のアイコンデータを一つのファイルとして出力できるので、このサイトを使って作ります。

下記にリンクを貼っておきます。

https://icomoon.io/app/#/select

② アイコンデータのインポートとアイコンの選択

Check 1 のimportをクリックして「icomoon.svg」をインポートする。（バックアップしたファイルでOK）

次に、既存のアイコン（Check 2）と、新しく作成するアイコン（Check 3）をクリックして選択。

Generate Font（Check 4）をクリック。

③ アイコンの確認とダウンロード

Check 5 の既存のアイコンと追加するアイコンの「見た目・名前・ユニコード」を確認する。

確認したら、Download（Check 6）をクリックしてフォントデータをダウンロード。

⑦ フォントデータをアップロード

ダウンロードしたファイルの中に「Font」フォルダがあるので、その中にある

この4つのファイルをWordPressのサーバにアップロード。

アップロード先「../wp-content/themes/lionmedia/fonts/」

テーマファイルの編集

WordPressの画面からならメニューの「テーマ→テーマの編集」から編集します。

最初、編集するテーマは「LION MEDIA Child」が選択されているので、「LION MEDIA」に切り替えて「「single.php」を選択。

icon.cssの編集

まずは「../wp-content/themes/lionmedia/css/」にある「icon.css」を編集します。

末尾に下記の一文を追加。

.icon-loop:before {content:"\ea2d";}

私と別のアイコンを設定した人は、各々書き換えてください。

single.phpの編集

「../wp-content/themes/lionmedia/」にある「single.php」を編集します。

この編集が終わると記事画面に「更新日」が表示されるようになります。

特に弄っていなければ46行目あたりから

こんな感じのタイトル表示のコードがあるので、「the_time(“Y.m.d”)」の記述がある行の下に、下記のコードを追加。

<li class="dateList__item icon-loop"><?php the_modified_date('Y.m.d') ?></li>

公開日の翌日以降に編集した場合のみ、編集日を表示するのであれば下記のように記述。

<?php if (get_the_modified_date('Y/m/d') > get_the_time('Y/m/d')) : ?>
<li class="dateList__item icon-loop"><?php the_modified_date('Y.m.d') ?></li>
<?php endif; ?>

表示の確認

では記事の更新日が表示されるか確認。

このように表示されればOK。（公開日より後に編集した時だけ表示されるようにしてるので別記事で確認しました。）

表示されない場合はどこかの手順で間違えてるので、見直してみましょう。

（最初からやり直す方が手っ取り早買ったりするのはあるある）

[amazonjs asin=”B07L3QKCNW” locale=”JP” title=” LED置き時計 アラーム 音声感知 カレンダー 温度計 付き USB給電/乾電池 (ブラウン)”]