テーマ

【LION MEDIA】投稿一覧・詳細ページ・サイドバーで更新日を表示させる方法

2020年4月19日

【LION MEDIA】投稿一覧・詳細ページ・サイドバーで更新日を表示させる方法

今回はLION MEDIAのテーマで投稿一覧・詳細に更新日を表示させる方法を解説しようと思います。

LION MEDIAではデフォルトで作成日は表示されるのですが、更新日は表示されません。更新日はユーザーが情報の鮮度を確かめる上でも重要な要素なので、LION MEDIAのテーマを利用している方はこの記事を参考に更新日を表示させてもらえたらと思います。

最終更新日を表示させる箇所

今回更新日を表示させる箇所は下記になります。

表示させる箇所

  • 投稿一覧ページ　アイキャッチ画像下
  • 投稿詳細ページ　タイトル下
  • 投稿詳細ページ　関連記事のアイキャッチ画像下
  • サイドバー

それぞれ具体的に画像で表示箇所をみていきましょう。

投稿一覧ページ　アイキャッチ画像下

投稿一覧ページ　アイキャッチ画像下

投稿詳細ページ　タイトル下

投稿詳細ページ　タイトル下

投稿詳細ページ　関連記事のアイキャッチ画像下

投稿詳細ページ　関連記事のアイキャッチ画像下

サイドバー

サイドバー

各テーマファイルを編集する

WordPressのテーマエディター

左メニューの「外観」＞「テーマエディター」を選択します。

テーマファイル

「編集するテーマを選択」で「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）を追加する必要があります。

loop2

既存のフォントデータをダウンロードする

既存のフォントデータはサーバー上にあるため、FTP接続します。

こちらもCHECK

【無料】FTPツール FileZilla の初期設定・使い方
【無料】FTPツール FileZilla の初期設定・使い方

続きを見る
FTP接続

FTPでサーバーにアクセスし、WordPressの「fonts」があるディレクトリまで進みます。

「wp-content」→「themes」→「lionmedia」→「fonts」

FTP接続

「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

最初にアイコンを追加することができるサイトにアクセスします。

IcoMoon App – Icon Font, SVG, PDF & PNG Generator

Import Icons

「Import Icons」ボタンを押して、先ほどダウンロードした「icomoon.svg」をインポートします。

Import Icons

上記のように聞かれますが、「Yes」を選択してください。

Select All

一番上の「iconmoon」が今入っているアイコンデータになります。今入っている既存のアイコンデータは必要なので、右側にあるハンバーガメニューから「Select All」で選択してください。

Select All

これで今のアイコンデータは選択できました。

loop2

次に更新日アイコン（loop2）をクリックして選択します。この時点でSelectionの数字が既存のアイコン16と更新日アイコン1で合計17になっていると思います。

generate font

最後に右下の「Generate Font」をクリックします。

download

更新日アイコン（loop2）が入っていることを確認して、「Download」ボタンをクリックしてください。

ダウンロードした「icomoon.zip」を解凍すると、次のファイルが展開されます。ここで使うのは「fonts」フォルダ内のファイルのみです。

新しいフォントデータをアップロードする

「fonts」フォルダに入っていた4つのファイルを、FTPサーバー内の元の場所に上書き保存します。

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";}

当サイトで申込みが多いプログラミングスクール・教室はこちら！

【1位】ポテパンキャンプ：Webエンジニア輩出率No1

【2位】CodeCamp：満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP：プログラマー転職成功率98%

【4位】TechAcademy：プログラミングスクール受講者数No1

【5位】GEEK JOB：満足度・転職率が高い・20代社会人経験者向け

-テーマ
-

© 2021 nukoblog