WordPressグローバルナビの作成方法とカスタマイズ

サイトのページ上部に主なページへのリンクを設けて見やすくしました。

PCはこんな感じ。

モバイル。

メニューからグローバルナビを作成

どのテーマでも作成方法は共通です。

ダッシュボード→外観→メニューをクリック。

メニュー名を「グローバルナビ」など分かりやすい名称を付けます。メニューの位置を「ヘッダーナビ(グローバルナビ)」にチェックを入れたら「メニューを作成」をクリック。

グローバルナビの項目を設定する

ホームを追加

左側にある「メニュー項目を追加」の「カスタムリンク」にURLや文字列を入れたら「メニューに追加」をクリック。

「ホーム」が追加されました。メニューの位置を確認したら「メニューを保存」をクリックします。

カテゴリーを追加

「カテゴリー→北海道→メニューに追加」をクリック。

「北海道」が追加されました。こんな感じでどんどん追加していき、最後に「メニューを保存」をクリックします。

項目はドラッグで自由に移動できる

グローバルナビは通常のカテゴリー設定とは異なりますので、カスタムリンクや固定ページなども貼り付けて自由に組み合わせることができます。

項目の名前は変更できる

たとえば「電車/バス/飛行機」は長いので「交通」に変更しました。

アイコンを表示させる

ホームをアイコンで表示させてみました。「Font Awesome→homeで検索→コードをナビゲーションラベルに貼り付け」。

テーマ「Cocoon」でカスタマイズ

「Cocoon設定→ヘッダー」からグローバルナビの色や幅を変更することができます。

テーマ「ルクセリタス」でカスタマイズ

外観→ルクセリタス子テーマの「カスタマイズ」をクリック。

「グローバルナビ(ヘッダーナビ)」→「グローバルナビ表示」にチェックを入れて、位置などを設定したら「公開」をクリック。

また、下の方にある項目からナビの文字の色やホバーの設定をすることができます。

カテゴリーが複数あるものは黒くなる…

これがイヤだったので直しました。

「ナビカレント文字色を黒」「ナビカレント背景色を白」にしました。

全て同じ背景色となりました。

CSSでカスタマイズ

Cocoonの高さ(height)と文字の大きさはCSSで変更しました。

/*ヘッダーメニュー*/
.navi-in > ul li{
height: 80px;
line-height: 80px;
}
.navi-in > .menu-header .item-label{
font-size: 19px;
font-weight: 500
}
タイトルとURLをコピーしました