
- 現役Webマーケター
(元Webディレクター) - 東証一部上場の不動産系企業で勤務
- 最高収益:月間30万円
今回は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でサーバーにアクセスし、WordPressの「fonts」があるディレクトリまで進みます。
「wp-content」→「themes」→「lionmedia」→「fonts」
「fonts」のディレクトリの中には4つのファイルが入っていますが、
必要なファイルは「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で調整します。
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";}