当記事の信頼性
- 現役Webマーケター
（元Webディレクター） - 東証一部上場の不動産系企業で勤務
- 最高収益：月間30万円
【LION MEDIA】投稿一覧・詳細ページ・サイドバーで更新日を表示させる方法
2020年4月19日
今回はLION MEDIAのテーマで投稿一覧・詳細に更新日を表示させる方法を解説しようと思います。
LION MEDIAではデフォルトで作成日は表示されるのですが、更新日は表示されません。更新日はユーザーが情報の鮮度を確かめる上でも重要な要素なので、LION MEDIAのテーマを利用している方はこの記事を参考に更新日を表示させてもらえたらと思います。
目次
最終更新日を表示させる箇所
今回更新日を表示させる箇所は下記になります。
- 投稿一覧ページ アイキャッチ画像下
- 投稿詳細ページ タイトル下
- 投稿詳細ページ 関連記事のアイキャッチ画像下
- サイドバー
それぞれ具体的に画像で表示箇所をみていきましょう。
投稿一覧ページ アイキャッチ画像下
投稿詳細ページ タイトル下
投稿詳細ページ 関連記事のアイキャッチ画像下
サイドバー
各テーマファイルを編集する
左メニューの「外観」＞「テーマエディター」を選択します。
「編集するテーマを選択」で「LION MEDIA」を選択して、隣の選択ボタンをクリックしてください。
※LION MEDIAしかテーマをダウンロードされていない方は不要です。
すぐ下のテーマファイルで編集するファイルを指定することができます。指定することで、左側にファイルのソースコードが表示されます。
投稿一覧ページ アイキャッチ画像下
テーマファイルで「loop.php」を選択します。25行目あたりに、下記のコードを追加します。
追加するソースコード
<li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<li class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d') ?></li>
<?php endif; ?>追加後のソースコード（25行目あたり）
<?php if (get_post_type($post->ID) == 'post') :
if (get_option('fit_post_time') != 'value2' || has_tag() == true ) : ?>
<ul class="dateList dateList-archive">
<?php if (get_option('fit_post_time') != 'value2' ) : ?>
<li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<li class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d') ?></li>
<?php endif; ?>
<?php endif; ?>
<?php if(has_tag()==true) : ?>
<li class="dateList__item icon-tag"><?php
if (get_option('fit_theme_tagNumber')){
$number = get_option('fit_theme_tagNumber');
}else{
$number = '5';
}投稿詳細ページ タイトル下
テーマファイルで「個別投稿(single.php)」を選択します。50行目あたりに、下記のコードを追加します。
追加するソースコード
<li class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d'); ?></li>追加後のソースコード（50行目あたり）
<div class="singleTitle__heading">
<h1 class="heading heading-singleTitle u-txtShdw"><?php the_title(); ?></h1>
<ul class="dateList dateList-singleTitle">
<li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
<li class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d'); ?></li>
<li class="dateList__item icon-folder"><a class="hc<?php if (isset($cat_meta[$cat_id])) { echo esc_html($cat_meta[$cat_id]);} ?>" href="<?php echo $cat_link; ?>" rel="category"><?php echo $cat_name; ?></a></li><?php if(has_tag() == true) : ?>
<li class="dateList__item icon-tag"><?php the_tags(''); ?></li><?php endif; ?></ul>投稿詳細ページ 関連記事のアイキャッチ画像下
テーマファイルで「個別投稿(single.php)」を選択します。360行目あたりに、下記の既存ソースコードを変更します。
追加後のソースコード（360行目あたり）
<h3 class="related__title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php if (get_option('fit_post_time') != 'value2' ) : ?>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<span class="icon-calendar"><?php the_time('Y.m.d'); ?> <li class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d') ?></li></span>
<?php else :?>
<span class="icon-calendar"><?php the_time('Y.m.d'); ?></span>
<?php endif; ?>
<?php endif; ?>
</h3>サイドバー
テーマファイルで「テーマのための関数 (functions.php)」を選択します。5120行目あたりに、下記のソースコードを追加します。
追加するソースコード
<span class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d'); ?></span>追加後のソースコード（5120行目あたり）
<h3 class="rankListWidget__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="dateList dateList-widget<?php if ( get_option('fit_post_eyecatch') == 'value2' ) : ?> dateList-noeye<?php endif; ?>">
<?php if(!empty($instance['time'])) :?>
<span class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></span>
<span class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d'); ?></span>
<?php endif; ?>アイコン画像を追加する
PHPファイルを編集しただけでは、他の項目と同じようにアイコンは表示されません。
「LION MEDIA」のテーマにデフォルトで入っているアイコンには更新日を示すようなアイコンがないため、既存のアイコンに更新日アイコン（loop2）を追加する必要があります。
既存のフォントデータをダウンロードする
既存のフォントデータはサーバー上にあるため、FTP接続します。
あわせて読みたい
【無料】FTPツール FileZilla の初期設定・使い方
ブログなどのWebサイトの運営を始めると、少しずつWebの知識が溜まってきてテンプレートだけで物足りずになってきて、独自のコンテンツなどを作りたくなったり、サイト…
FTPでサーバーにアクセスし、WordPressの「fonts」があるディレクトリまで進みます。
「wp-content」→「themes」→「lionmedia」→「fonts」
「fonts」のディレクトリの中には4つのファイルが入っていますが、
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
必要なファイルは「icomoon.svg」だけなので、「icomoon.svg」だけダウンロードします。わかりやすいように、ダウンロードフォルダかデスクトップにダウンロードしてください。
更新日用のフォントデータを追加する
これから「icomoon.svg」のデータの中に入っているアイコンデータと更新日アイコン（loop2）を追加したバージョンのアイコンデータを作成していきます。
最初にアイコンを追加することができるサイトにアクセスします。
IcoMoon App – Icon Font, SVG, PDF & PNG Generator
「Import Icons」ボタンを押して、先ほどダウンロードした「icomoon.svg」をインポートします。
上記のように聞かれますが、「Yes」を選択してください。
一番上の「iconmoon」が今入っているアイコンデータになります。今入っている既存のアイコンデータは必要なので、右側にあるハンバーガメニューから「Select All」で選択してください。
これで今のアイコンデータは選択できました。
次に更新日アイコン（loop2）をクリックして選択します。この時点でSelectionの数字が既存のアイコン16と更新日アイコン1で合計17になっていると思います。
最後に右下の「Generate Font」をクリックします。
更新日アイコン（loop2）が入っていることを確認して、「Download」ボタンをクリックしてください。
ダウンロードした「icomoon.zip」を解凍すると、次のファイルが展開されます。ここで使うのは「fonts」フォルダ内のファイルのみです。
新しいフォントデータをアップロードする
「fonts」フォルダに入っていた4つのファイルを、FTPサーバー内の元の場所に上書き保存します。
CSSでデザインを調整する
最後にアップロードした更新日アイコンを表示させるためにCSSで調整します。
WordPressのダッシュボードから「外観」＞「テーマエディター」をクリックします。テーマファイルで「icon.css」を選択します。下記のソースコードを一番下に追加します。
追加するソースコード
.icon-loop2:before {content:"\ea2e";} 追加後のソースコード
/*アイコンフォント
/************************************************************/
@font-face {
font-family: "icomoon";
src: url("../fonts/icomoon.eot?gizg5m");
src: url("../fonts/icomoon.eot?gizg5m#iefix") format("embedded-opentype"),
url("../fonts/icomoon.ttf?gizg5m") format("truetype"),
url("../fonts/icomoon.woff?gizg5m") format("woff"),
url("../fonts/icomoon.svg?gizg5m#icomoon") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: "icomoon";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-close:before {content:"\e90e";}
.icon-menu:before {content:"\e90f";}
.icon-instagram:before {content:"\e90d";}
.icon-hatebu:before {content:"\e90c";}
.icon-quotation:before {content:"\e909";}
.icon-line:before {content:"\e90a";}
.icon-pocket:before {content:"\e90b";}
.icon-calendar:before {content:"\e900";}
.icon-facebook:before {content:"\e901";}
.icon-folder:before {content:"\e902";}
.icon-google:before {content:"\e903";}
.icon-home:before {content:"\e904";}
.icon-rss:before {content:"\e905";}
.icon-search:before {content:"\e906";}
.icon-tag:before {content:"\e907";}
.icon-twitter:before {content:"\e908";}
.icon-loop2:before {content:"\ea2e";}