>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

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

WordPress・使い方
この記事は約4分で読めます。
     

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

 


 

メニューの作り方

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

7188_11

 

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

7188_21

 

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

7188_22

 

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

7188_23

 

項目を追加

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

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

7188_25

 

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

7188_24

 

「Home」を追加する

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

7252_01

 

タグを追加する

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

7252_07

 

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

7252_08

 

 

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

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

7252_05

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

7252_06

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

リンクターゲット

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

 

タイトル属性

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

7252_09

 

CSSクラス

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

 

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

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

 

説明

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

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

メニューの補足説明

 

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

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

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

7252_03

 

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

7252_02

 

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

7252_04

 

 

並び替え・ラベル編集

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

 

7188_26

 

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

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

7188_27

 

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

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

 

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

 

7188_28

 

 

メニューのカスタマイズ

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

 

ルクセリタス

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

 

Cocoon

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

 

SANGO

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

 

 

7237_01

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

グローバルメニューにプラグインなしでアイコンフォントを表示する
ワードプレスのグローバルメニューにアイコンフォントを表示する方法です。 通常の「メニュー」の編集だけで簡単に表示できます。 Font Awesomeアイコンフォントって? 「Font Awesome」はアイコン版のWebフォントで、フリーと...

コメント

タイトルとURLをコピーしました