WordPress カスタムメニューの使い方(その1:基本)

WordPress カスタムメニューの使い方(その1:基本)

Posted at February 16,2012 1:55 AM
Tag:[WordPress]

WordPressのカスタムメニューの使い方について解説します。

カスタムメニュー機能で作ったメニュー
カスタムメニュー

今回はTwentyElevenテーマを使った、管理画面でのカスタムメニューの作成方法について解説します。functions.phpの設定が必要なカスタマイズなどについては別エントリーで紹介したいと思います。

WordPressのバージョンは3.3.1を使っています。

1.カスタムメニューとは

カスタムメニューとは文字通り、独自のメニューをカスタマイズする機能です。

カスタムメニューを利用すれば、固定ページ・カテゴリー・投稿・タグのリンクやカスタムリンク(管理画面上で作ったリンク)などを表示させることができます。またそれぞれのリンクを1つのメニューに混在表示させることも可能です。メニューの順序や階層表示も自由にカスタマイズ可能です。

2.メニューの作成

まず、ページに表示するカスタムメニューの元となる「メニュー」を作ります。管理画面の「外観」→「メニュー」をクリック。

管理画面

メニューの管理画面に移動するので、「メニューの名前」に任意の名称を入力して「メニューを作成」をクリック。ここで入力した名称はそのままページに表示されるわけではありません。この名称が何に使われるかは4項を先に読んでいただいた方が分かりやすいかもしれません。

メニュー

「メニューを作成」をクリックすると、このように表示が変わります。「メニューの名前」に別の名称を入力して「メニューを保存」をクリックすればメニュー名を変更できます。赤色の「メニューを削除」をクリックすれば、作成したメニューを削除します(クリックすれば確認のダイアログが表示されます)。「トップレベルのページを自動的に追加する」をチェックしておけば、最上位階層のページを作成したときに、そのページを自動的にメニューに追加します。

メニューを作成

「+」タブをクリックすれば新しいメニューを複数作成することができます。

新しいメニューを作成

ここでは次の「てすと1」「てすと2」という2つのメニューをサンプルに話を進めます。「てすと2」は使いませんが、複数のメニューがないと説明しにくい部分があるので(笑)。

サンプル

3.メニューにリンクの追加

左側に「テーマの場所」「カスタムリンク」「固定ページ」「カテゴリ」が表示されます。メニューに追加したいリンクは、これらのメニューを操作します。「投稿」「タグ」の表示については5項を参照してください。

メニュー

「テーマの場所」は、メニューにリンクを追加するものではなく、作成したメニューをどこに表示させたいかを決めるものです。プルダウンメニューには先程作成したメニュー名が選択できるようになっています。この項目は利用しているテーマによって表示が変わります。TwentyElevenテーマでは次のように「メインメニュー」がデフォルトで表示されます。

テーマの場所

このプルダウンを選択することで、これから作成するカスタムメニューの内容をナビゲーションに反映させることができます。

カスタムメニュー

「カスタムリンク」は好きなリンクを作ることができます。「URL」と「ラベル」を入力して「メニューに追加」をクリック。

カスタムリンク

このように追加されます。

カスタムリンクで追加

追加したリンクを編集するには、右側の▼マークをクリック。

追加したリンクを編集

編集画面が表示されます。赤色の「除外」をクリックすれば、メニューからこのリンクを削除できます。「キャンセル」をクリックすれば編集内容を元の状態に戻します。「タイトルの属性」にはtitle属性の値を設定します。編集した内容を保存する場合は、「メニューを保存」をクリックします。

編集画面

「固定ページ」は予め作成している固定ページのタイトルが表示されます。ここでは「サンプルページ」がある状態なので、これをメニューに追加します。チェックボックスをチェックして「メニューに追加」をクリック。

固定ページ

このように追加されます。

固定ページを追加

メニューはドラッグできるので、順番を入れ替えることができます。

順番を入れ替え

また、少し右にずらせば入れ子にすることもできます。

入れ子

「カテゴリー」はブログに登録しているカテゴリを表示します。ここではすべてのカテゴリーを選択してみます。

カテゴリー

このようになりました。カテゴリーの親子関係とは関係なく、それぞれのカテゴリーを好きな位置に移動することができます。

カテゴリーを好きな位置に移動

最後に「メニューを保存」をクリックして、作成したメニューを保存します。

4.メニューの表示

「外観」→「ウィジェット」をクリック。

管理画面

一覧にある「カスタムメニュー」を「メインサイドバー」にドラッグします。

カスタムメニュー

「タイトル」に任意のタイトル、「メニューを選択」から先程作成した「てすと1」を選択します。この操作でお分かりになったと思いますが、カスタムメニューで作成したメニューはひとつの独立したウィジェットとなるのではなく、「カスタムメニュー」ウィジェットをまずドラッグして、それから表示したいメニューを選択する操作となります。

ウィジェットの編集

これでページに表示されました。

ウェブサイト

5.オプションの表示

4項まででデフォルト状態の表示項目について解説しました。表示項目を追加するには、「外観」→「メニュー」の管理画面右上にある「表示オプション」をクリック。

表示オプション

表示オプションが表示されます。「投稿」「タグ」や詳細メニューが追加可能です。

表示オプション

「投稿」の項目です。投稿した記事をここから選択できます。

投稿

「タグ」の項目です。登録したタグをここから選択できます。

タグ

詳細メニューを追加すると、メニューの編集画面が次のようになります。

メニューの編集画面

ここでの解説は割愛しますが、カスタム投稿タイプやカスタム分類の表示も可能です。

6.参考サイト

管理画面/外観/メニュー
関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)