Cocoonのナビカードをカンマ区切りの記事IDで表示させるカスタマイズ【WordPress】

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

意図した記事一覧を作成できる「ナビカード」ショートコードの使い方

サイト訪問者を的確に誘導するために、意図したリンクリストを作成するショートコードの使い方です。

wp-cocoon.com

しかし、記事毎に頻繁に内容を変えたり、記事IDを取得して自動的にナビカードを表示させたい、などの場合は、一度メニューに登録するという作業が億劫にもなったりします。

なので今回は、記事IDをカンマ区切り(csv)にして設定するだけでナビカードを使用できるショートコードを作成しました。

実装例は↓こんな感じです。

[my_csv_list id="2036,1836,1693"]

記事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	なし→デフォルト 1→点線 2→ブロック
bold	なし→デフォルト 1→タイトル太字
arrow	なし→デフォルト 1→右端に矢印
class	親要素のclassに追記される カスタムデザイン用
snippet	なし→抜粋なし 1→抜粋表示
ribbon	リボンを付ける カンマ区切りで記事ID順に設定できる 未入力の場合はなし 0→なし 1→おすすめ 2→新着 3→注目 4→必見 5→お得

実際にカスタマイズを施したショートコードのサンプルはこちら。

[my_csv_list id="2036,1836,1693" type="1" bold="1" arrow="1" ribbon="1,2,4"]

---

今回紹介したショートコードは、記事はもちろん、ウィジェットにも使えるので、メニューよりも使いやすいと思われた方は是非活用してみてください。

以上、Cocoonのナビカードをカンマ区切りの記事IDで表示させるカスタマイズ、でした。