LION MEDIAに更新日を表示する

LION MEDIAに更新日を表示する

WordPressテーマLION MEDIAに更新日を表示するやり方を説明します。

更新日と公開日を表示する場合」と「更新日だけを表示する場合」の2パターンのPHPコードをLION MEDIAの各テンプレートごとに使い分けて更新日を表示します。

また、LION MEDIAの更新日をマークアップするタグはHTML5のtimeタグをマークアップすることで、クローラーに更新日を示しやすくなるようにするやり方です。

 

LION MEDIAに更新日を表示するPHPコード

 

LION MEDIAに更新日を表示するPHPコードは2つ作成しました。

1つ目

LION MEDIAに更新日だけ表示するPHPコード

 

 

<time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date('Y.m.d'); ?></time>

 

更新をしている投稿は、最後に更新した日付を更新日として表示します。

更新をしてない投稿も最終更新日を表示しますが、一度も更新してない場合は、投稿を公開した日付を最終更新日として表示します。

修正作業が楽なのと、LION MEDIA既存のアイコンを使うのでアイコンを追加する必要がないPHPコードです。

 

2つ目

LION MEDIAに公開日と更新日を表示するPHPコード

 

 

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

 

LION MEDIAの公開日のPHPコードを残したまま、公開日と更新日を表示するように書いたPHPコードです。

 

Advertisement

 

公開日と更新日を表示するPHPコードの場合は、if文の条件式で投稿の公開日と更新日が同じ日ではない場合に更新日が表示するようにPHPコードを書いています。

修正作業は楽ですが、更新日アイコンを追加する必要があるPHPコードです。

また、LION MEDIAの「更新日だけ表示するPHPコード」と「公開日と更新日を表示するPHPコード」のどちらにも更新日を表示するHTMLのタグをtimeタグでマークアップするようにしています。

 

2つのPHPコードはLION MEDIAのテンプレートごとに使い分けて更新日を表示させても大丈夫ですし、どちらか1つに統一した表示にしても大丈夫です。

 

更新日を表示するLION MEDIAのテンプレート

 

前述したPHPコードを記述して更新日を表示するLION MEDIAのテンプレートは4つです。

 

 

  • single.php
  • loop.php
  • index.php
  • functions.php

 

loop.phpは1箇所

アーカイブの更新日

 

single.phpの更新日は3箇所

  • 投稿ページタイトル直下の更新日
  • 記事下の「関連する記事」の更新日
  • 記事下の最新カテゴリ一記事一覧の更新日

 

index.phpは1箇所

トップページのカテゴリー一覧記事の更新日

 

functions.phpは2箇所

ウィジェットから追加できる「ランキング記事」と「最新の記事」の更新日になります。

 

またsingle.php、loop.php、index.phpの3つはLION MEDIAのlionmedia-childに複製した子テーマを修正テンプレートとして使用しました。functions.phpは親テーマを使っています。

更新日を表示するLION MEDIAのテンプレートへのPHPの記述例を次で紹介します。

 

loop.php

 

LION MEDIAのアーカイブに更新日を表示する場合です。修正前のPHPコードと修正後のPHPコードを照らし合わせながら更新日をLION MEDIAに表示してみてください。

 

修正前のPHPコード

<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 endif; ?>

 

loop.phpのテンプレート22行目前後の場所を修正します。記述場所はloop.php内で<ul class=”dateList dateList-archive”>で検索すると記述位置が特定しやすいです。

 

修正後のPHPコード

<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_time('Y.m.d') != get_the_modified_date('Y.m.d')):?>
    <li class="dateList__item icon-loop"><!--更新日アイコン変更の場合はicon-calendarクラスを変更-->
        <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date('Y.m.d'); ?></time>
    </li>
    <?php endif; ?>
  <!--ここまでアーカイブ-->
    <?php endif; ?>

 

修正後は公開日と更新日を表示するPHPコードを記述しています。記述することによりLION MEDIAのトップページの投稿一覧やカテゴリー記事一覧に更新日を表示することができます。

修正後の更新日を表示する開始タグは既存の<li class=”dateList__item icon-calendar”>のicon-calendarクラスをicon-loopに変更して<li class=”dateList__item icon-loop”>にしています。

今の時点ではicon-loopクラスでアイコンは表示しませんので、<li class=”dateList__item icon-calendar”>で記述しておくと修正後の表示確認はしやすいです。

LION MEDIAのアーカイブに更新日だけを表示する場合は以下の記述にします。

 

<li class="dateList__item icon-calendar">
    <!--投稿下の最新カテゴリー更新日-->
    <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date('Y.m.d'); ?></time>
    <!--ここまで投稿下の最新カテゴリー-->
</li>

 

こんな感じの作業手順でLION MEDIAの更新日を各テンプレートファイルで表示していきます。

 

single.php

 

LION MEDIAの投稿ページで投稿タイトル直下に更新日を表示する場合です。

single.phpのテンプレート46行目を修正します。

 

修正前のPHPコード

<!-- タイトル -->
<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-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>
</div>
<!-- /タイトル -->

 

LION MEDIAのsingle.php内では<!– タイトル –>のコメントアウトを目印にすると修正場所が分かりやすいです。

 

修正後のPHPコード

<!-- タイトル -->
<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>
        <!--投稿記事更新日-->
        <?php if(get_the_time('Y.m.d') != get_the_modified_date('Y.m.d')):?>
        <li class="dateList__item icon-loop">
            <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date('Y.m.d'); ?></time>
        </li>
        <?php endif; ?>
        <!--ここまで投稿記事-->
        <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>
</div>
<!-- /タイトル -->

 

使用したのは更新日と公開日を表示するPHPコードです。

 

Advertisement

 

次にLION MEDIAの投稿ページ記事下の「関連する記事」の更新日を表示する場合です。

テンプレートはsingle.phpです。single.php内の357行目付近で更新日を表示します。

 

修正前のPHPコード

<h3 class="related__title">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <?php if (get_option('fit_post_time') != 'value2' ) : ?>
    <span class="icon-calendar"><?php the_time('Y.m.d'); ?></span>
    <?php endif; ?>
</h3>

 

<span class=”icon-calendar”>でsingle.php内を検索すると該当の修正場所がすぐ見つかります。

 

修正後のPHPコード

<h3 class="related__title">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <?php if (get_option('fit_post_time') != 'value2' ) : ?>
    <span class="icon-calendar">
        <!--記事下関連する記事更新日-->
        <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date('Y.m.d'); ?></time>
        <!--ここまで関連する記事-->
    </span>
    <?php endif; ?>
</h3>

 

使用したPHPコードは更新日だけ表示するPHPコードです。

 

お次はLION MEDIAのsingle.phpで更新日を表示する最後の記述場所です。

記事下の最新カテゴリ一記事一覧の更新日を表示する修正です。

 

修正前のPHPコード

<?php 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 endif; ?>

 

single.phpのテンプレート内447行目前後、目印がなかったので447行目まで自力で辿り着きます。

 

修正後のPHPコード

<?php 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">
        <!--投稿下の最新カテゴリー更新日-->
        <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date('Y.m.d'); ?></time>
        <!--ここまで投稿下の最新カテゴリー-->
    </li>
<?php endif; ?>

 

使用したPHPコードは更新日だけ表示するPHPコードです。

single.phpでLION MEDIAの更新日を表示するのは完成です。

 

index.php

 

LION MEDIAのトップページのカテゴリー最新記事一覧に更新日を表示する場合です。

index.phpのテンプレート210行目のPHPコードを修正します。

 

修正前のPHPコード

<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 endif; ?>

 

修正後のPHPコード

<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>
  <!--TOPカテゴリー最新記事の更新日-->
    <?php if(get_the_time('Y.m.d') != get_the_modified_date('Y.m.d')):?>
    <li class="dateList__item icon-loop">
        <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date('Y.m.d'); ?></time>
    </li>
    <?php endif; ?>
  <!--ここまでTOPカテゴリー最新記事の-->
<?php endif; ?>

 

使用したPHPコードは更新日だけ表示するPHPコードです。

index.phpのテンプレートでLION MEDIAの更新日を表示するのは1箇所で完成です。

 

functions.php

 

LION MEDIAのウィジェットから追加する「ランキング」と「最新の投稿」に更新日を表示する場合です。

LION MEDIAのfunctions.phpを修正します。

ランキング更新日から作業を進めます。

functions.phpの5116行目にランキングに使われている記述があります。

 

修正前のPHPコード

<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><?php endif; ?>
    <span class="dateList__item icon-folder"><?php the_category(' ');?></span>
</div>

<span class=”dateList__item icon-calendar”>でfunctions.php内を検索すると見つけやすいです。

 

修正後のPHPコード

<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">
        <!--ウィジェットランキング更新日-->
        <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date('Y.m.d'); ?></time>
        <!--ここまでウィジェットランキング-->
    </span>
    <?php endif; ?>
    <span class="dateList__item icon-folder"><?php the_category(' ');?></span>
</div>

 

使用したPHPコードは更新日だけ表示するPHPコードです。

 

Advertisement

 

続いてウィジェットで追加して表示するLION MEDIAの「最新の投稿」の更新日を表示する場合です。

functions.phpの5158行目を修正します。

 

修正前のPHPコード

<h3 class="imgListWidget__title">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <?php if( !empty( $instance['show_date'] )): ?><span class="post-date"><?php the_time('Y.m.d'); ?></span><?php endif; ?>
</h3>

 

<span class=”post-date”>でfunctions.php内を検索すると修正場所が見つかります。

 

修正後のPHPコード

<h3 class="imgListWidget__title">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        <?php if( !empty( $instance['show_date'] )): ?>
        <span class="post-date">
            <!--ウィジェット最近の記事更新日-->
            <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date('Y.m.d'); ?></time>
            <!--ここまでウィジェット最近の記事-->
        </span>
        <?php endif; ?>
</h3>

 

使用したPHPコードは更新日だけ表示するPHPコードです。

これにてLION MEDIAに更新日を表示する全てのテンプレートファイルへの修正記述は完了です。

 

LION MEDIAに更新日を表示する場所が7箇所と少し多めだったので投稿ページの投稿タイトル直下の更新日を例に表示確認。

 

 

LION MEDIAの投稿ページで投稿タイトル下に、公開日と更新日が上の画像のように表示していれば成功です。

上の画像で公開日と更新日を表示しているソースコードは以下のように表示します。

 

<ul class="dateList dateList-singleTitle">
    <li class="dateList__item icon-calendar">2021.08.27</li>
    <!--投稿記事更新日-->
    <li class="dateList__item icon-loop">
        <time datetime="2021-08-29">2021.08.29</time>
    </li>
    <!--ここまで投稿記事-->
    <li class="dateList__item icon-folder"><a class="hc-user01" href="http://localhost:7000/category/no-category/" rel="category">No category</a></li>
</ul>

 

更新日にはHTML5のtimeタグを使用し、datetime属性値に機械可読な形式の日付を出力するように書いたPHPコードなので、検索エンジンがページをクロールしたときにはtimeタグで更新日を見つけやすくなり、更新日付を正確に読み取りやすくなります。

 

LION MEDIAの更新日アイコンを表示

 

LION MEDIAに更新日を表示すると更新日にアイコンを表示したくなります。公開日にはアイコンが表示しているため、横並びで表示する公開日と更新日の見た目が納得いかなくなってしまうのですね。

更新日アイコンはLION MEDIAにデフォルトで用意されていないため、カスタマイズする必要があります。

 

 

LION MEDIAの更新日アイコンを表示するには、LION MEDIAの更新日を表示するときに使用したPHPコードの「更新日をマークアップしてるタグのクラス名を変更」します。

1つ例を出します。投稿タイトル下の更新日の場合。

 

<!-- タイトル -->
<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>
        <!--投稿記事更新日-->
        <?php if(get_the_time('Y.m.d') != get_the_modified_date('Y.m.d')):?>
        <li class="dateList__item icon-loop"><!--icon-loopが更新日アイコンのクラス-->
            <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date('Y.m.d'); ?></time>
        </li>
        <?php endif; ?>
        <!--ここまで投稿記事-->
        <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>
</div>
<!-- /タイトル -->

 

<ul class=”dateList dateList-singleTitle”></ul>要素内の子要素<li class=”dateList__item icon-loop”>で更新日アイコンを表示しています。

LION MEDIAのアイコンはicomoonを使用しているので、親テーマlionmediaのfontsフォルダ内にあるicomoon.svgをicomoonのサイトにインポートしLIONMEDIAの更新日に使いたいアイコンを追加します。

追加した更新日のアイコンはCSSで表示します。

 

.icon-loop::before,
.widget .icon-loop::before {
    content: "\ea2e";
    margin-right: 0;
    color: coral;
}

.widget .post-date::before {
    color: coral;
}

 

CSSはLION MEDIAのstyle.cssでもicon.cssのどちらでも良いので好きなほうに記述します。

上記CSSはicomoonでicon-loopというアイコンを使用した場合で、今回紹介した更新日を表示するパターンが「公開日+更新日」で表示する場所全てに更新日アイコンを表示できるようにCSSを適用させています。

LION MEDIAにアイコンを追加する方法は別記事にしてますので、LION MEDIAの更新アイコンを表示するための参考に使ってください。

 

LION MEDIAのテーマでアイコンを追加する方法

 

WordPressテーマカテゴリの最新記事