LION Mediaで更新日を表示させる方法（IcoMoonでウェブフォントを追加） │ ここつぶ

1. LION Mediaで使用しているアイコンを追加する方法
2. ウェブフォントの修正
3. icon.cssの修正
4. 個別投稿下の関連する記事に更新日を追加する
- 4.1. content.cssの修正
  - 4.1.1. 修正前
  - 4.1.2. 修正後
- 4.2. page.phpの修正
5. 個別投稿に更新日を追加する
- 5.1. 追加する更新日
6. おすすめカテゴリとランキングに更新日を追加する

LION Mediaで使用しているアイコンを追加する方法

投稿記事の更新日をブログに表示したいなぁと思っていたのですが、ついつい後回しにしていました。

記事もだんだん増えてきて、以前書いた記事を更新していくことが増えてきたので、今回やっとLION Mediaに更新日をつけたので、こちらでもまとめておきたいと思います。

今回更新日を追加したのは、以下の箇所になります。

・個別投稿下の関連する記事
・個別投稿
・トップページ下のおすすめカテゴリ
・ランキング記事一覧

※トップページの新着一覧、各カテゴリ一覧（新着順）は表示要素が多くなるのが嫌だったので私は今回はつけませんでしたが、表示させたい場合はloop.php内に追加させれば表示されます。

LION Media内のブログのアイコンはIcoMoonでウェブフォント化して使用されています。

このウェブフォントに更新マーク（icon-loop）を追加しました。

以下デモページから確認できます。

DEMO

IcoMoonの使い方はまた別途まとめたいと思います。

デモページの、更新マーク（icon-loop）を追加したウェブフォントを使いたい方は、以下ボタンからzipデータをダウンロードしてください。

ダウンロードはこちら

ウェブフォントの修正

ダウンロードしたzipファイル内のデータを、FTPで以下にアップします。

wp-content/themes/lionmedia/fonts/

更新するファイル：icomoon.eot / icomoon.svg / icomoon.ttf / icomoon.woff

※作業前に、必ず元データはすべてバックアップをとっておいてください。

icon.cssの修正

icon.cssを以下に修正します。

icon.cssはWordpressの管理画面側からも更新できます。

外観 / テーマエディター / css / icon.css

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?fmxncg');
  src:  url('../fonts/icomoon.eot?fmxncg#iefix') format('embedded-opentype'),
  url('../fonts/icomoon.ttf?fmxncg') format('truetype'),
  url('../fonts/icomoon.woff?fmxncg') format('woff'),
  url('../fonts/icomoon.svg?fmxncg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.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-quotation:before {
  content: "\e909";
}
.icon-line:before {
  content: "\e90a";
}
.icon-pocket:before {
  content: "\e90b";
}
.icon-hatebu:before {
  content: "\e90c";
}
.icon-instagram:before {
  content: "\e90d";
}
.icon-close:before {
  content: "\e90e";
}
.icon-menu:before {
  content: "\e90f";
}
.icon-loop:before {
  content: "\e910";
}

個別投稿下の関連する記事に更新日を追加する

content.cssの修正

個別投稿ページ（page.php）のページ下部にある、「関連する記事」のみhtmlの記述方法が違いますので、content.cssに以下を追加してください。

修正前

.related__title .icon-calendar::before{
    margin-right: 5px;
    line-height: 1;
}

修正後

.related__title .icon-calendar::before,
.related__title .icon-loop::before{
    margin-right: 5px;
    line-height: 1;
}

page.phpの修正

個別投稿ページ（page.php）内の「関連する記事」の投稿日を探します。

投稿日

<span class="icon-calendar"><?php the_time('Y.m.d'); ?></span>
<?php endif; ?>

下に更新日を追加

<!-- 履歴追加 -->
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<span class="icon-loop"><?php the_modified_date('Y.m.d') ?></span>
<?php endif; ?>
<!-- 履歴追加 -->

個別投稿に更新日を追加する

個別投稿ページ（page.php）のタイトル下の投稿日横に更新日を追加します。

page.php内の、投稿日 <li class=”dateList__item icon-calendar”> 〜 </li>の下に更新日を追加します。

追加する更新日

<!-- 履歴追加 -->
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<li class="dateList__item icon-loop"><?php the_modified_date('Y.m.d') ?></li>
<?php endif; ?>
<!-- 履歴追加 -->