Cocoonの新着記事・人気記事ショートコードで投稿日・更新日を表示する

WordPressの無料テーマCocoonで、新着記事はVer2.1.5から、人気記事はVer2.6.3から、ショートコードでスニペットが表示できるようになりました。

ただし当該記事の投稿日・更新日を表示させるパラメータ設定は提供されていません。

そこで今回は投稿日・更新日を表示させるためのコーディングの方法についてご紹介したいと思います。

Cocoonでショートコードを扱うコーディングファイルを調べる
「ウィジェットエントリーカードの日付」のコーディングを変更する
最後に

Cocoonでショートコードを扱うコーディングファイルを調べる

Cocoonの親ライブラリーへのパスはサブドメインを使用している時は次のようになります。

/ドメイン名/public_html/サブドメイン名/wp-content/themes/cocoon-master

この「cocoon-master」の直下に「lib」というフォルダーがあり、その中に「shortcodes.php」というファイルがあります。

このファイルに中につぎのような関数がコーディングされています。

No	関数名	左記関数の中にある呼び出し関数
1	new_entries_shortcode	generate_widget_entries_tag
	新着記事ショートコード関数	汎用エントリーウィジェットのタグ生成
2	popular_entries_shortcode	generate_popular_entries_tag
	人気記事ショートコード関数	人気ランキングリストの取得

表1

次に表1の呼び出し関数が格納されているファイルを調べると、これらは同じ「lib」フォルダーの中にある、「html_forms.php」というファイルに記述されていている事が分かります。

呼び出されたそれぞれの関数の中で、更に次の呼び出し関数が定義されています。

No	関数	左記関数の中にある呼び出し関数
1	generate_widget_entries_tag	get_widget_entry_card_link_tag
	表1のNo1参照	ウィジェットエントリーカードリンクタグの取得
2	generate_popular_entries_tag	generate_widget_entry_card_date
	表1のNo2参照	ウィジェットエントリーカードの日付

表2

表2のNo1については、更に次の呼び出し関数が定義されています。

関数	左記関数の中にある呼び出し関数
get_widget_entry_card_link_tag	generate_widget_entry_card_date
表2のNo1参照	ウィジェットエントリーカードの日付

表3

表2、表3から分かるように、新着記事も人気記事も呼び出し関数の回数は異なりますが、同じ日付に関係しそうな「generate_widget_entry_card_date」関数を呼び出している事が分かります。

どうやらこの関数のコーディングを変更すれば良さそうです。

「ウィジェットエントリーカードの日付」のコーディングを変更する

「generate_widget_entry_card_date」は調べると、html_forms.phpファイルの中に記述されている事が分かります。

そして実はこの関数の中で、記事の投稿日と更新日をhtmlデータとして出力しているのですが、画面には表示はされていないのです。

よくよく調べると、divタグのclass属性に記述されているCSS定義(グループ名)の最後に「display-none」の記述があるために、表示されない状態にある事が解ります。

従って記事の投稿日と更新日を表示させるためには、この「display-none」を取り除けば良い事になります。
※下記コーディングの赤文字の部分

ただし「generate_widget_entry_card_date」にはパラメータとしてはprefix属性しか設定されていないので、ショートコードで指定したパラメータを受け渡して行くには、ここまで通ってきたすべての関数に手を入れる必要があり、それは「やればできるけど維持して行くのは大変」という認識です。

となると取れる手段は次の3つの内のいづれかになります。

投稿日と更新日をともに表示する。
- display-noneを取り除く
- 下記コーディングの赤字の部分
投稿日のみ表示する。
- 赤字の部分を取り除いた上で、更新日を表示するロジックを取り除く。
- 下記コーディングで緑色の部分
更新日のみ表示する。
- 赤字の部分を取り除いた上で、投稿日を表示するロジックを取り除く。
- 下記コーディングで水色の部分

function generate_widget_entry_card_date($prefix, $post_id = null){?>
<?php do_action( 'widget_entry_card_date_before', $prefix, $post_id); ?>
<div class="<?php echo $prefix; ?>-entry-card-date widget-entry-card-date display-none">
  <span class="<?php echo $prefix; ?>-entry-card-post-date widget-entry-card-post-date post-date"><?php echo get_the_time(get_site_date_format(), $post_id); ?></span><?php
    //更新日の取得
    $update_time = get_update_time(get_site_date_format(), $post_id);
  if($update_time):
  ?><span class="<?php echo $prefix; ?>-entry-card-update-date widget-entry-card-update-date post-update"><?php echo $update_time; ?></span><?php
  endif; ?>
</div><?php
}

これを「cocoon-master」ではなく「cocoon-child-master」(子テーマ)の直下にあるfunctions.phpファイルの中の適切な場所にコピーします。