WordPressサイトは、メニューやサブメニューなしには成り立ちません。これらは、WordPressで自分好みに簡単にカスタマイズできます。WordPressサイトのメニューは、検索上位表示を後押しし、訪問者を逃さないための「サイト最前線」の要素です。
WordPressでは、複雑なメニューを作成することもできます。また、サイト内の複数の場所にメニューを表示することも可能です。WordPressのメニューは、コーディングのスキルさえあれば、無限にカスタマイズしていくことができます。
今回は、WordPressのメニューの作り方を徹底解説します。また、機能を強化する方法もご紹介します。
WordPressメニューの作成とカスタマイズについて、動画でも解説していますので、覧ください
WordPressメニューを解剖してみる
WordPressサイトのメニューは、多くの場合、リンク（ドロップダウンを含む）の集合体であることをご存知でしょうか。シンプルな構造ですが、ウェブサイトの「背骨」として欠かせません。
サイト上でメニューが表示される場所については、次のセクションで詳しく説明します。とりあえず、メニューを表示する場所は、あなた次第だとお考えください。ただし、実質的には（ウィジェットエリアに基づき）いくつかの箇所に限定されます。あくまでも、技術的な意味では、メニューはどこにでも設置できます。
WordPressサイト内を移動するために、メニューは非常に重要です。ナビゲーションメニューが明確に定義されていれば、ユーザーによるサイト内の移動が円滑になり、直帰率を抑えることができます。
また、メニューにはもう一つの目的があります。それは、検索エンジン最適化（SEO）の支援です。WordPressメニューにSEOを実施するとなると、何を入れるかよりも、何を省くかが重要です。タグクラウドのような要素を排除し、リンクの数を少なくするなどです。
Googleは1ページに最大250のリンクを追加することを許容していますが、「リンクの価値」を高く保つことが不可欠です。そのため、外部リンクの数を減らすことが、長期的には有効な手段となります。
WordPressメニュー構造の種類
すでにお分かりかもしれませんが、目的に応じて、WordPressのメニュー構造は様々なものから選択することができます。
例えば、ヘッダーメニューは、サイトの主要なナビゲーションであり、最も一般的です。また、メインナビゲーションの上にも小さなメニューを用意でき、ソーシャルメディアアイコンや検索バーなどを配置するのに適しています。
KinstaのパートナーであるSAU/CALのサイトには、ナビゲーションやソーシャルリンクを含む「フライイン」メニューがあります。
このケースからは、WordPressメニューには、サイトのナビゲーション以外にも様々な用途があることがわかります。WordPressに搭載されている機能（詳しくは後述）を使えば、あらゆる種類のメニューを作ることができます。
ヘッダーメニューと同様に大事なのがフッターメニューです。ここには、ページの最後までスクロールした人のために、主要なページのリンクを掲載するのが一般的です。また、製品やサービスに関する情報を記載することもできます。
また、サイドバーを使用しているサイトでは、その中にメニューが表示されることもあります。
通常、ここにメインメニューが来ることはなく、SNSリンクやブログ記事のアーカイブなどが掲載される傾向にあります。
WordPressのカスタムメニューの作り方（3つの方法）
WordPressのメニュー作成は、専門知識の有無に関係なく、簡単に行うことができます。WordPressに最初からある機能を使うか、プラグインをインストールするか、自分でコードを書くかの3つです。
それでは、実際にWordPressのメニューを作成する3つの方法をご紹介します。
1.WordPress搭載の機能を使ってメニューを作成する
WordPressには、メニュー作成機能があります。WordPressのメニュー画面は、サイトを作り立てのユーザー以外にとっては、馴染み深いものでしょう。
もちろん、標準搭載の機能を使ってWordPressのメニューを作成することには、数多くのメリットがあります。第一に、あなたのサイトと完全に互換性があります。また、使い慣れたインターフェースと機能を使ってメニューを構築できます。
具体的な方法としては、WordPress内の「外観」→「メニュー」ページに移動します。
この画面はいくつかのセクションに分かれています。上部には、既存のメニューを選択するか、新しいメニューを作成するかのオプションがあります。
新しいメニューを作る場合には、名前を付けて、「メニュー設定」から該当するものを選択します。
ここにはたくさんのチェックボックスがありますが、決めるべきことは、この2つです。
- 固定ページを自動追加: ここでいう「トップレベル」とは、WordPress内で作成する、他のページの子ページではないページです。例えば、ブログの記事（投稿）は、多くの場合、親となるアーカイブページ（例: /blog）があり、トップレベルページではありません。一方、お問い合わせページは、通常、親ページを持たないので、トップレベルになることが多いです。
- メニューの位置: 各テーマには、そのメニューの位置があります。（あなたがテーマのコアファイルを編集しない限り）テーマ開発者により、メニューの位置がハードコーディングされているはずです。テーマによっては、設定によりカスタマイズできるものもあります。
準備ができたら、「メニューを作成」ボタンをクリックします。画面が更新され、新しいメニューが適用されます。次に、画面の左側を見てください。
ここには、サイト上のすべての投稿、固定ページ、タクソノミー、その他のリンク可能なアセットが一覧表示されます。左側にあるボックスにチェックを入れて、「メニューに追加」ボタンをクリックすることで、メニューを構築することができます。
すると「メニュー」画面の中央部に移動します。
メニュー項目をドラッグ＆ドロップで配置することもできます。また、各項目の横にある矢印をクリックすると、メニュー項目にラベルを設定したり、削除したりできます。
「メニューを保存」をクリックしたら、完了です。画面上部の表示オプションを展開すると、WordPressのメニューでできることが増えます。
「画面上の要素」の操作により、左側のサイドバーにメニューのメタボックスを表示できます。一方、「詳細メニュー設定を表示」では、リンクターゲット、説明、CSSクラス等が表示されます。
メニュー画面には、もう一つ特筆すべき点があります。「カスタムリンク」ボックスでは、サイト上の既存のページではなく、自分の好きなリンクを設定することができます。
このオプションを使って、WordPressのメニューにソーシャルメディアのリンクを追加できます。選択したサイトに応じて、アイコンが表示される仕組みになっています。
2.プラグインを使用してWordPressのカスタムメニューを作成する
WordPressに機能を追加する場合、即効性があるのはプラグインです。前項では、WordPress標準搭載の機能でほとんど事足りることを説明しましたが、プラグインはその機能を拡張してくれます。
WordPressのメニューを作るのに、わざわざプラグインが必要なのかという疑問がわくかもしれませんが、そうした方がいいケースはたくさんあります。まず、デフォルトの設定にはないスタイルでメニューを作成することができます。レスポンシブデザインやメガメニューなど、プラグインを利用することで、様々なメニューを作れます。
さらに、専用のエディターでメニューを作成でき、多くの場合、プリセットのテンプレートから選択可能です。豊富なカスタマイズオプションと相まって、サイトに合ったWordPressメニューを、コードの記述なしで実現することができます。
例えば、Max Mega Menuプラグインを使えば、あらゆるメニューが構築できます。
インストール後、有効化すると、WordPress管理画面内に新しくMega Menuパネルが表示されます。
「Menu Locations」画面を見てみると、カスタマイズできる項目が増えていることに気づきます。
また、メニューテーマを適用して、他の有名ページビルダーと同様のレベルで編集していくことができます。
繰り返しになりますが、機能やデザインの幅は無限大です。WordPressのメニュープラグインについては、以前の記事をご覧いただくことをお勧めします。個々に合ったプラグインの選び方や使い方を詳しく解説しています。
3. コードを記述してWordPressのカスタムメニューを作成する
自分でコーディングしてWordPressのメニューを作成することもできます。WordPressテーマを作成する開発者であれば、言うまでもない選択肢です。もちろん、日々コードエディタを開いて、メニューの設計に従事する必要はないでしょう。その場合は、WordPressに標準搭載の機能（あるいはプラグイン）を使用することになります。
とはいえ、WordPressメニューのコーディング方法を学ぶことは、テーマ開発を行う上では欠かせない条件です。これは、4つのパーツで構成されます。
- メニューを作成する。
- WordPressメニューをフロントエンドに表示する。
- メニューまたはその項目の中にコンテンツを表示する。
- コールバックを定義する。
ここでは、あなたがコードエディタを使いこなし、開発環境があり、スキルが高いことを前提に話を進めます。まだ作業するテーマがない場合は、WordPressのデフォルトのオプションを使用するか、最速のWordPressテーマから選ぶことをおすすめします。
準備ができたら、テーマのfunctions.phpファイルを開いてください。これは、一般的なWordPressの同名のファイルとは異なりますので、ご注意ください。ここで、メニューを有効にする必要があります。つまり、「外観」>「メニュー」ページに何を表示するか、WordPress内で設定します。これを行うには register_nav_menus()関数を使用します。
function register_my_menus() {
register_nav_menus(
array(
'header' => __( 'Header Menu' ),
'other' => __( 'Other Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
このコードは、WordPressのManage Locationsタブに、Header MenuとOther Menuの2つのメニューを表示するためのものです。
次に、メニューを表示するために wp_nav_menu()関数を使用します。これを、メニューを表示したい場所に対応するテンプレートファイルに追加します。今回の場合はヘッダーなので、テーマのheader.phpファイルに以下のコードを貼り付けます。
wp_nav_menu( array( 'theme_location' => 'header' ) );
このコードは、他のメニューと一緒に if文でラップされている可能性がありますので、該当する場合には、その記述方法に従ってください。
これで、WordPressの他のメニューと同じように扱うことができます。しかし、メニュー項目に別のコンテンツを追加することもできます。例えば、定義した配列を拡張し、出力時にレンダリングされるHTMLタグを含めることが可能です。
wp_nav_menu(
array(
'menu' => 'primary',
'link_before' => '',
'link_after' => '',
)
);
最後の作業は、コールバックを定義することです。デフォルトでは、指定のメニューが見つからない場合、入力されている状態のメニューが表示されます。また、カスタムメニューが選択されていない場合、WordPressにより固定ページのメニューが表示されます。これがあなたの望む挙動でない場合は、theme-location 引数に別のパラメータを設定したり、fallback_cb 引数を追加したりできます。
wp_nav_menu(
array(
'menu' => 'primary',
// do not fall back to first non-empty menu
'theme_location' => '__no_such_location',
// do not fall back to wp_page_menu()
'fallback_cb' => false
)
);
WordPressのメニューの作り方を理解したら、次は機能の強化に取りかかります。具体的には、WordPressのカスタムメニューメタボックスの作成方法を見てみましょう。
WordPressのメニューを充実させる方法
ここからの内容は少し高度になりますので、以下をクリアしていることを仮定して、話を進めます。
- PHPを使ってWordPressのメニューを作成する方法を知っている。
- PHPのスキルが、高度な話についていけるくらいにある。
- WordPressプラグインを作成する方法を知っている。
この記事の範囲外ですが、WordPress Plugin Boilerplate Generatorを使用すると、プラグイン構築に便利なテンプレートを作成できます。
準備ができたら、プラグインを作成し、WordPressにアップロードしてください。
次に、プラグインのフォルダに移動して、メインファイルを開いてください。ここに、以下のコードを追加します。
/**
* Add menu meta box
*
* @param object $object The meta box object
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*/
function custom_add_menu_meta_box( $object ) {
add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );
return $object;
}
add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);
add_meta_box()は、WordPressの管理画面内にメタボックスを追加する関数です。公式ドキュメントに、いくつかの引数が紹介されています。また、nav-menus.phpファイル内にフックするアクションが存在しないため、nav_menu_meta_box_object()フィルタを使用します。このステートメントは、関数が、特定のオブジェクトタイプについて、メニュー項目メタボックスを追加するかどうかを決定します。フィルターが実行されると、add_meta_boxにより、カスタムメタボックスが追加されます。
コールバック関数の定義
次に、メタボックスにHTMLコンテンツを生成するためのコールバック関数を定義します。
/**
* Displays a metabox for an author menu item.
*
* @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu
*/
function custom_menu_meta_box(){
global $nav_menu_selected_id;
$walker = new Walker_Nav_Menu_Checklist();
...
}
グローバル変数が現在のメニューIDを記憶し、 $walkerがWalker_Nav_Menu_Checklist オブジェクトの新しいインスタンスを記憶します。これでメニュー項目がHTML形式で用意できます。
続いて、カスタムメタボックスで有効になるタブを決定する必要があります。このために行うのが、$current_tabの値の設定です。前のコードブロックで設定した省略記号内で作業します。
ここでは2つのタブを使用していますが、必要なだけタブを追加することができます。
$current_tab = 'all';
if ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'admins';
} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'all';
}
次のコードで、書き込み権限を持つすべてのユーザーを取得し、$authorsオブジェクトに多くのプロパティを追加します。
$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );
$admins = array();
/* set values to required item properties */
foreach ( $authors as &$author ) {
$author->classes = array();
$author->type = 'custom';
$author->object_id = $author->nickname;
$author->title = $author->nickname . ' - ' . implode(', ', $author->roles);
$author->object = 'custom';
$author->url = get_author_posts_url( $author->ID );
$author->attr_title = $author->displayname;
if( $author->has_cap( 'edit_users' ) ){
$admins[] = $author;
}
}
$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' );
?>
get_usersは指定のパラメータによって選択された $user オブジェクトの配列を返します。who パラメータにより、書き込み権限を持つユーザーを対象に、データベースのクエリが実行されます。
$adminsには作者の配列が、$removed_args には削除するクエリ変数のリストが格納されます。
これで、メタボックスのマークアップを出力することができます。そのために、タブのラベルとリンクを構築しましょう。
<div id="authorarchive" class="categorydiv">
<ul id="authorarchive-tabs" class="authorarchive-tabs add-menu-item-tabs">
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'all', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-all">
<?php _e( 'View All' ); ?>
</a>
</li>
<li <?php echo ( 'admins' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-admins" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'admins', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-admins">
<?php _e( 'Admins' ); ?>
</a>
</li>
</ul>メタボックス要素に正しいクラス名、ID、データ属性を割り当てることを、お忘れなく。そうしないと、メニューは正しく機能してくれません。
add_query_arg と remove_query_arg の両関数は、変数 authorarchive-tabs にタブ固有の値を設定し、不要な変数を削除します。
この時点で、定義通りのタブを伴うメタボックスが表示されます。
次は、タブのHTMLコンテンツを作成します。
メタボックスタブ用のHTMLコンテンツの構築
前項のコード（custom_menu_meta_box()関数内）に従うことになります。コンテンツを構築するには、前項で書いた<div>タグの中に以下のコードを記述します。
<div id="tabs-panel-authorarchive-all" class="tabs-panel tabs-panel-view-all <?php echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-all" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>
<div id="tabs-panel-authorarchive-admins" class="tabs-panel tabs-panel-view-admins <?php echo ( 'admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-admins" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>要するに、各タブにチェックボックスのリストが含まれることになります。このwalk_nav_menu_tree()関数は、3つの引数を用いてリストを表示します。$items、$depth、$rのすべてが必須です。
配列$itemsには、管理者ユーザーの配列が格納されます。array_map()関数は、$adminsにwp_setup_nav_menu_item()関数を適用し、メニュー項目のプロパティを配列の要素に追加します。
ここからは、仕上げの作業です。
送信ボタンの追加
カスタムメタボックスの大部分は完成していますが、まだ「送信」ボタンと“処理中”のアイコンを追加する必要があります。
先のブロックの直後に、こちらの短いコードを貼り付けます。
<p class="button-controls wp-clearfix">
<span class="list-controls">
<a href="<?php echo esc_url( add_query_arg( array( 'authorarchive-tab' => 'all', 'selectall' => 1, ), remove_query_arg( $removed_args ) )); ?>#authorarchive" class="select-all"><?php _e('Select All'); ?></a>
</span>
<span class="add-to-menu">
<input type="submit"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e('Add to Menu'); ?>" name="add-authorarchive-menu-item" id="submit-authorarchive" />
<span class="spinner"></span>
</span>
</p>
</div>
<?php
}
この知識があれば、メニューにあらゆる機能を追加することができます！なお、このプラグインはGitHubのGistで公開されており、無料でダウンロードすることができます。
まとめ
WordPressのメニューは、サイトにとって重要な要素です。WordPressの管理画面から、すべてのメニューを高い柔軟性でカスタマイズできます。しかし、デフォルトの機能で全てを網羅している訳ではありません。
CSSタグの追加も可能です。また、プラグインをインストールすることで、メガメニューにしたり、機能拡張でレスポンシブ対応にしたりすることができます（他にもたくさんの可能性があります）。コーディングという選択肢もあり、初心者の方には難しい作業かもしれませんが、午後のひとときで構築することも可能です。
WordPressのメニューをカスタマイズしたい。そんな時には、どのような方法を採用していますか？あなたの考えや意見を下のコメント欄でお聞かせください。
コメントを残す