WordPressのテーマ、Cocoonにはナビカードという便利な機能があり、メニューに登録した記事を一覧で表示させることが出来ます。

しかし、記事毎に頻繁に内容を変えたり、記事IDを取得して自動的にナビカードを表示させたい、などの場合は、一度メニューに登録するという作業が億劫にもなったりします。
なので今回は、記事IDをカンマ区切り(csv)にして設定するだけでナビカードを使用できるショートコードを作成しました。
実装例は↓こんな感じです。
[my_csv_list id="2036,1836,1693"]
実装される方は、Cocoonの親テーマのバージョンを最新してご利用ください。
記事IDとは?確認方法
記事IDとは、WordPressで投稿された記事に割り振られているIDのことです。
テーマに関わらず、Wordpressのブログならすべて同じ仕様です。
記事IDの確認方法は、その記事の編集画面に入ると確認できます。
編集画面のアドレスの、「post=数値」となっている数値の部分が記事IDとなります。
https://ドメイン/wp-admin/post.php?post=(記事id)&action=edit
カンマ区切りでナビカード出力用のショートコードを登録する
テーマのfunctions.phpに、記事IDのカンマ区切りでもナビカードを出力できるように、ショートコードを登録します。
functions.phpの末尾に、下記のソースコードを追記してください。(何か問題が起きたら元に戻してください)
function get_my_csv_card_list_tag($atts){ extract(shortcode_atts(array( 'type' => '', 'bold' => 0, 'arrow' => 0, 'class' => null, 'snippet' => 0, 'ribbon' => null, 'id' => [] ), $atts)); if($id){ $aryId = explode(',', $id); }else{ return ''; } $aryRibbon = []; if($ribbon){ $aryRibbon = explode(',', $ribbon); } $args = array( 'posts_per_page' => 5, 'post__in' => $aryId, 'orderby' => 'post__in', ); $the_query = new WP_Query($args); $tag = null; if($the_query->posts){ $is_large_image_use = is_widget_entry_card_large_image_use($type); $thumb_size = $is_large_image_use ? THUMB320 : THUMB120; $cnt = 0; foreach($the_query -> posts as $value){ $url = get_the_permalink($value -> ID); $title = $value -> post_title; $snippet_text = ''; if($snippet) $snippet_text = $value -> post_excerpt; $image_attributes = array(); $thumbnail_id = get_post_thumbnail_id($value -> ID); $image_attributes = wp_get_attachment_image_src($thumbnail_id, $thumb_size); $ribbon = null; if(isset($aryRibbon[$cnt])){ $ribbon = $aryRibbon[$cnt]; } $atts = array( 'prefix' => WIDGET_NAVI_ENTRY_CARD_PREFIX, 'url' => $url, 'title' => $title, 'snippet' => $snippet_text, 'image_attributes' => $image_attributes, 'ribbon_no' => $ribbon, 'type' => $type, ); $tag .= get_widget_entry_card_link_tag($atts); $cnt++; } $atts = array( 'tag' => $tag, 'type' => $type, 'bold' => $bold, 'arrow' => $arrow, 'class' => $class, ); $tag = get_navi_card_wrap_tag($atts); } return $tag; } add_shortcode('my_csv_list', 'get_my_csv_card_list_tag');
元々備わっていたメニュー用のナビカードをちょこっと改造したものになります。
ショートコードで出力する
functions.phpにショートコード用プログラムを追記したら、実際に動作しているか確認してみてください。
実際にCocoonのカスタマイズ系の記事をまとめて、出力したものがこちらになります。
id=””の中に、カンマ区切りで記事IDを設定することで、その順に表示されます。
[my_csv_list id="2036,1836,1693"]
ショートコードに備わっているオプション
元々ナビカードに備え付けであったものに加えて、いくつかカスタマイズできるようにしておきました。
type |
|
---|---|
bold |
|
arrow |
|
class |
親要素のclassに追記される カスタムデザイン用 |
snippet |
|
ribbon |
リボンを付ける カンマ区切りで記事ID順に設定できる 未入力の場合はなし
|
実際にカスタマイズを施したショートコードのサンプルはこちら。
[my_csv_list id="2036,1836,1693" type="1" bold="1" arrow="1" ribbon="1,2,4"]
今回紹介したショートコードは、記事はもちろん、ウィジェットにも使えるので、メニューよりも使いやすいと思われた方は是非活用してみてください。
以上、Cocoonのナビカードをカンマ区切りの記事IDで表示させるカスタマイズ、でした。
コメント