Luxeritas 初めてでもわかるメニューの作り方(サイドバー&フッター編)

Beginners, メニュー

前回はサイトの一番上、グローバルナビゲーションの作り方についてご説明しました。
今回は同様のメニューをサイドバーとフッターに表示する方法について図解入りで丁寧に説明したいと思います。

自分自身も、WordPressを使い始めた時に使い方が一番わかりにくかったのが「メニュー」でしたので、そんな方に向けて書いてみたいと思います。
そのため、当記事は、ビギナー向けの内容となっております。

サイドバーにメニューを表示する

メニューの新規作成

開く「外観」「メニュー」
capture_17395_01(WordPressメニュー)

  1. 新規メニューを作成します。
  2. メニュー名に「インフォメーション」などと入力します。
  3. メニューを作成」ボタンをクリックします。

capture_17563_01(メニューの新規作成)

固定ページをメニュー(インフォメーション)に追加する

  1. 固定ページを選択する
  2. 「すべて表示」を選択する
  3. 追加したい固定ページにチェックを入れる
  4. 「メニューに追加」をクリックする
  5. 「メニューを保存」する

capture_17563_02(インフォメーションメニューの作成)

サイドバーにインフォメーションメニューを表示する

開く「外観」「ウィジェット」
capture_17563_05(ウィジェットの追加)

  1. 「ナビゲーションメニュー」をクリック
  2. 追加したいサイドバーを選択し「ウィジェットを追加」をクリック

capture_17563_06(ナビゲーションメニューの追加)

  1. タイトルを入力する:「インフォメーション」など
  2. メニューを選択する:「インフォメーション」
  3. 保存する

capture_17563_08(ナビゲーションメニューの保存)

サイドバーに追加したメニューが表示されました!

capture_17563_04(サイドバーにメニュー)

フッターにメニューを表示する

  1. 「ナビゲーションメニュー」をクリック
  2. 追加したいフッターの位置を選択し「ウィジェットを追加」をクリック

capture_17563_07(フッターにメニューを追加する)

  1. タイトルを入力する:「インフォメーション」など
  2. メニューを選択する:「インフォメーション」
  3. 保存する

capture_17563_08(ナビゲーションメニューの保存)

フッターに追加したメニューが表示されました!

capture_17563_09(フッターに追加したインフォメーションメニュー)

フッターの見出しをカスタマイズするには

フッターの見出しをカスタマイズしたい場合は、以下のようなスタイルを子テーマに追記しましょう。

/* フッター見出し */
#foot-in h4 {
    border-left: none;
	border-bottom: dotted 1px #3a3a3a;
	font-weight:500;
}

カスタマイズ後のフッター見出し
capture_17563_10

あとがき

メニューに追加できるのは固定ページだけではありません。カスタムリンクを使用すればURLを指定してなんでも追加できます。

次回は応用編をご案内したいと思います。

関連見出しのデザインをカスタマイズ

更新の励みになりますので、お帰りの際はぜひ拍手ボタンの押し心地をお確かめください^^

12

各種設定

Posted by どらみ