WordPress
カスタマイズ事例

WORDPRESS CUSTOMIZATION

wp_nav_menu を使った、日々更新される投稿ページ一覧をグローバルメニューに出す方法

WordPressの標準のメニュー出力関数は

wp_nav_menu

です。
この関数はごく標準的なリスト型メニューを管理画面から登録した通りに静的に出力するもので、WordPressで制作するサイトのメニューはこれで作るのが王道です。
100ウェブでもほぼすべてのサイトでこの wp_nav_menu を使ってメニューを出力しているため利用頻度が高く、過去にもカスタマイズ事例として何回か取り上げて来ました。

メニュータグ wp_nav_menu をカスタマイズしてメガメニューの礎(いしずえ)を築く
メニュータグ wp_nav_menu をカスタマイズして第一階層のメニューのリンクテキストをhタグで囲う
[外観 – メニュー]で登録した階層構造のメニューの特定の階層を出力しないようにする
 
こんな具合にいろいろカスタマイズできます。

さてこれらの事例、カスタマイズはしているものの、すべて装飾の変更(HTMLの改変)が目的で、静的出力であることには変わりありません。
そこで、今回はメニューを動的に出力してみようと思います。
たとえば、ブログ記事の一覧を思い切ってメニューにずらーーーっと並べてしまおう、とか、頻繁に新しい品番が出るような部品製品の一覧をメニューに全品出したいとか、そういう頻繁にメニューの内容が変わるようなニーズに対応できます。
とはいえ、頻繁に変わるのはメニューの第二階層だけにしましょう。常に見えているグローバルメニューの第一階層が日々変わるようなサイトはユーザーの動線が日ごとに変わることとなるためサイト設計上悪手ですし、SEO的にも推奨されません。

ということで、投稿があるたびにメニューの第二階層が動的に変わるようにしたいと思います。
 
それでは方法をご紹介します。

  1. まず管理画面から[外観 – メニュー]でメニューを作ります。
    今回は「ブログ」と「製品」を用意します。
    ※ 「製品」はカスタム投稿タイプ「products」で管理するものとします。

    ポイントは「ブログ」と「製品」の下層メニューは作らないことです。下層メニューはプログラム側で動的に生成しますから、からっぽで良いんです。

     

  2. 次にプログラムを書くんですが、プログラムといっても冒頭で紹介した3つの事例と使う関数は同じで、Walker_Nav_Menuクラスを継承してカスタムウォーカークラスを作成するだけです。

    テーマの functions.php に以下を追記します。

    class custom_walker_nav_menu extends Walker_Nav_Menu {
        // 項目開始時の処理
        function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
            parent::start_el($output, $item, $depth, $args, $id);
            
            // ブログ
            if ($item->title == 'ブログ') {
                // 投稿記事全取得
                $custom_posts = get_posts(array('post_type' => 'post', 'posts_per_page' => -1));
                
                if (!empty($custom_posts)) {
                    $output .= '<ul class="sub-menu">';
                    foreach ($custom_posts as $custom_post) {
                        $output .= '<li class="menu-item"><a href="' . get_permalink($custom_post->ID) . '">' . get_the_title($custom_post->ID) . '</a></li>';
                    }
                    $output .= '</ul>';
                }
            }
    
            // 製品
            if ($item->title == '製品') {
                // カスタム投稿タイプ「products」記事全取得
                $custom_posts = get_posts(array('post_type' => 'products', 'posts_per_page' => -1));
                
                if (!empty($custom_posts)) {
                    $output .= '<ul class="sub-menu">';
                    foreach ($custom_posts as $custom_post) {
                        $output .= '<li class="menu-item"><a href="' . get_permalink($custom_post->ID) . '">' . get_the_title($custom_post->ID) . '</a></li>';
                    }
                    $output .= '</ul>';
                }
            }
        }
    }
    

     

  3. header.phpなどメニューを表示したい場所に wp_nav_menu でメニューを出力します。
    このとき、カスタムwalkerクラスに custom_walker_nav_menu を指定する

    <?php
    wp_nav_menu(
      array(
        'menu' => 'mainMenu',
        'container' => '',
        'container_id' => '',
        'container_class' => '',
        'menu_id' => '',
        'menu_class' => '',
        'walker' => new custom_walker_nav_menu
      )
    );
    ?>
    

これで「ブログ」と「製品」メニューの下層にそれぞれブログ記事の一覧、製品一覧がずらーーっと並びます。
 
やってみたら簡単でしょ?
お役立てください。

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!