緊急事態宣言で外出自粛になりまして

せっかくのゴールデンウィークなのに、2年連続で緊急事態宣言下となり、外出自粛中。暇なので小ネタで遊ぶ。まずは前回の小ネタの確認を兼ねて、タイトルを長めにしてちょうど良いところで省略されるかの実験。たぶん大丈夫なはず。

記事が表示されるシングルページの下部に「関連記事」を表示している。現在の表示内容は、タイトル、サムネイル画像、投稿日、抜粋、本文へのリンクの順である。このうち、リンクはタイトル、サムネイル画像、本文へのリンクであり、全て記事本文へのリンクである。

記事ページの冒頭でタイトルと投稿日、投稿者を表示している部分では、投稿日のリンクは該当する月の一覧表示に変更している。オリジナルのコードでは投稿日のリンク先は自分のページというある意味ループした状態となっていたのを、その記事が書かれた月の一覧へと変更した。

今回はこの仕様を「関連記事」の中に適用しようというもの、前述のように、タイトル、サムネイル画像、投稿日の順に表示している、この投稿日を、現在のリンク無しから、記事が書かれた該当月の一覧表示へと変更する。テーマへの関数の追加で実現するので、記述する先はテーマ下のincにある「template-tags.php」である。このインクルードファイルはすでに子テーマで読み込みの設定がされているので、追加記述のみでテーマ全体で使用可能な関数が定義出来る。

記述する内容はだいたい以下の通り、実際には同名の関数が登録されているかどうか確認などがあるが、割愛。

function fotografie_posted_on3() {

    $time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
    if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
        $time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time　class="updated" datetime="%3$s">%4$s</time>';
    }

    $time_string = sprintf( $time_string,
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date() ),
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date() )
    );

    $year = get_the_time( 'Y', $post );
    $month = get_the_time( 'm', $post );
    $posted_on = sprintf(
            /* translators: Post date */
            _x( '%s', 'post date', 'fotografie' ),
            '<a href="' . esc_url( get_month_link( $year, $month ) ) . '" rel="bookmark">' . $time_string . '</a>'
    );

    echo '<span class="posted-on">' . $posted_on . '</span>'; // WPCS: XSS OK.

}

エラーが無ければ、テーマ全体でこの関数が使えるようになるので、表示が必要なところへこの関数を挿入する。今回は関連記事プラグインの中へ記述することになる。24行目が追加したコードである。

add_action('related_post_loop_item_element_post_excerpt', 'related_post_loop_item_element_post_excerpt', 10, 2);

function related_post_loop_item_element_post_excerpt($loop_post_id, $elementData){

    $settings = isset($elementData['settings']) ?  $elementData['settings'] : array();

    //echo '<pre>'.var_export($elementData, true).'</pre>';
    $post_link = get_permalink($loop_post_id);
    $word_count = isset($elementData['word_count']) ? $elementData['word_count'] : 20;
    $read_more_text = !empty($elementData['read_more_text']) ? $elementData['read_more_text'] : __('Read more', 'related-post');
    $after_html = isset($elementData['after_html']) ? $elementData['after_html'] : '';
  
    $enable_stats = isset($settings['enable_stats']) ? $settings['enable_stats'] : 'disable';

    $post_link = ($enable_stats == 'enable') ? $post_link.'?related_post_from='.$loop_post_id : $post_link;

    $post = get_post($loop_post_id);
    $post_excerpt = $post->post_excerpt;
    $post_content = $post->post_content;
    $post_excerpt = !empty($post_excerpt) ? strip_tags($post_excerpt) : strip_tags($post_content);
    $post_excerpt = wp_trim_words( $post_excerpt , $word_count, ' <a '.apply_filters('related_post_element_link_attrs', 'post_excerpt', $elementData).' class="read-more" href="'.$post_link.'"> '.$read_more_text.'</a>' );

    ?>
    <div class="related_post_title"><?php fotografie_posted_on3() ?></div>
    <p class="excerpt post_excerpt">
        <?php echo $post_excerpt; ?>
    </p>
    <?php
}

隠し機能として、リンク付きではあるものの、デフォルトのリンク色ではなく、グレーアウトして一見するとリンクじゃないように見せかけるため、「related_post_title」のa要素に対して、以下の指定をする。

.related_post_title a {
	font-size: 14px;
	color: #999;
}

結果は下の関連記事のコーナーで確認のこと。