WWordPressカスタマイズ事例

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

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

wp_nav_menu

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

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

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

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

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

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

次にプログラムを書くんですが、プログラムといっても冒頭で紹介した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>';
            }
        }
    }
}

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
  )
);
?>

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