ワードプレスWordPressのメニュー作成方法(グローバルナビ 他)

メニューの表示位置・表示可能数やデザインなどは、テーマにより異なりますが、すべてのメニューは同様の方法で作成できます。

 


 

メニューの作り方

「外観」→「メニュー」を開きます。

 

既に作成済みのメニューやデフォルトで用意されたメニューがあれば表示さるので、編集する場合は対象のメニューを「選択」します。

 

新しく作る場合は、「新規メニューを作成」を押します。

 

名前をつけて「メニューを作成」ボタン

 

項目を追加

固定ページ、投稿、カスタムリンク、カテゴリー

それぞれ▲を押して開き表示したい項目を追加します。

 

メニューに表示する項目にチェックを入れて「メニューに追加」ボタン

 

「Home」を追加する

メニューに「Home」などを追加したい際は、「カスタムリンク」でURLを入れて設定します。

 

タグを追加する

メニュー編集画面の右上にある「表示オプション」を開き、「タグ」にチェックを入れます。

 

メニューに追加できる項目に「タグ」が出ますので、表示したいものにチェックを入れて追加します。

 

 

表示オプションで設定項目を増やす

メニュー編集画面の右上にある「表示オプション」を開くと、編集時に表示する項目を選択できます。

  • リンクターゲット
  • タイトル属性
  • CSSクラス
  • 自分とリンク先の関係/間柄 (XFN)
  • 説明
すべてを表示した例

ここに表示できる項目についても設定可能です。

リンクターゲット

例えば外部リンクをメニューに追加していれば「リンクを新しいタブで開く」にチェックすれば、「target=”_blank”」になります。

 

タイトル属性

タイトル属性にメニュータイトル文字を入れるとホバー時に以下のように表示されます。

 

CSSクラス

クラス名を設定してCSS定義すると、メニューにCSSを適用出来ます。

 

自分とリンク先の関係/間柄 (XFN)

XFN(XHTML Friends Network)を使ってリンク先と自分との関係を設定する事が出来ます。

 

説明

対応しているテーマ以外はメモとして利用する程度の項目です。

たとえばCocoonは対応しているので、「説明」に入力すると以下のように表示されます。

 

副項目(親子・展開メニュー)の設定

親メニューから展開する子メニューを設定する事が出来ます。

追加した項目をドラッグ&ドロップで親にしたい項目の下に少しずらして配置します。

 

以下のように「副項目」となりました。

 

「副項目」の展開表示は以下のような感じになります。

 

 

並び替え・ラベル編集

ドラッグ&ドロップで並び替えが出来ます。

 

 

▲マークで開きラベルを編集できます。

初期値はカテゴリー名・記事名などになっていますので、必要に応じてメニューで表示したいラベルを編集します。

 

メニュー表示位置を決める

表示したいメニューの位置にチェックを入れて「メニューを保存」ボタン

 

メニュー位置はお使いのテーマにより異なります。表示位置を決めずにとりあえず作成したメニューを保存したい場合は、チェックを入れずに「保存」します。

 

 

 

メニューのカスタマイズ

色などの変更は、テーマによりますが、「外観」→「カスタマイズ」の設定項目などで行えると思います。

 

ルクセリタス

「外観」→「カスタマイズ」→「グローバルナビ」

 

Cocoon

「Cocoon設定」→「ヘッダー」

 

SANGO

「外観」→「カスタマイズ」→「色」→ヘッダーメニュー文字色

 

 

アイコンフォントを利用したカスタマイズは以下をご覧ください。

グローバルメニューにプラグインなしでアイコンフォントを表示する
ワードプレスのグローバルメニューにアイコンフォントを表示する方法です。 通常の「メニュー」の編集だけで簡単に表示できます。 Font Awesomeアイコンフォントって? 「Font Awesome」はアイコン版のWebフォントで、フリーと...
綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています