
WordPressの標準のメニュー出力関数は
wp_nav_menu
です。
この関数はごく標準的なリスト型メニューを管理画面から登録した通りに静的に出力するもので、WordPressで制作するサイトのメニューはこれで作るのが王道です。
100ウェブでもほぼすべてのサイトでこの wp_nav_menu を使ってメニューを出力しているため利用頻度が高く、過去にもカスタマイズ事例として何回か取り上げて来ました。
メニュータグ wp_nav_menu をカスタマイズしてメガメニューの礎(いしずえ)を築く
メニュータグ wp_nav_menu をカスタマイズして第一階層のメニューのリンクテキストをhタグで囲う
[外観 – メニュー]で登録した階層構造のメニューの特定の階層を出力しないようにする
こんな具合にいろいろカスタマイズできます。
さてこれらの事例、カスタマイズはしているものの、すべて装飾の変更(HTMLの改変)が目的で、静的出力であることには変わりありません。
そこで、今回はメニューを動的に出力してみようと思います。
たとえば、ブログ記事の一覧を思い切ってメニューにずらーーーっと並べてしまおう、とか、頻繁に新しい品番が出るような部品製品の一覧をメニューに全品出したいとか、そういう頻繁にメニューの内容が変わるようなニーズに対応できます。
とはいえ、頻繁に変わるのはメニューの第二階層だけにしましょう。常に見えているグローバルメニューの第一階層が日々変わるようなサイトはユーザーの動線が日ごとに変わることとなるためサイト設計上悪手ですし、SEO的にも推奨されません。
ということで、投稿があるたびにメニューの第二階層が動的に変わるようにしたいと思います。
それでは方法をご紹介します。
ポイントは「ブログ」と「製品」の下層メニューは作らないことです。下層メニューはプログラム側で動的に生成しますから、からっぽで良いんです。

テーマの 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>';
}
}
}
}
<?php
wp_nav_menu(
array(
'menu' => 'mainMenu',
'container' => '',
'container_id' => '',
'container_class' => '',
'menu_id' => '',
'menu_class' => '',
'walker' => new custom_walker_nav_menu
)
);
?>
これで「ブログ」と「製品」メニューの下層にそれぞれブログ記事の一覧、製品一覧がずらーーっと並びます。
やってみたら簡単でしょ?
お役立てください。
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!