トップメニューの設定方法

 

Gush2 では最上部にメニューバーを設置しています。その基本的な設定方法を解説します。

なお、子メニューは PC(1024px 以上)のみマウスオーバーで表示し、タブレット以下のサイズでは非表示になるよう設定しています。

メニューの設定方法

WordPress インストール直後で何も設定していない場合、メニュー部分には「サンプルページ」しかありません。

Gush2 ナビサンプル

ここにカテゴリーや固定ページへのリンクをおいてみましょう。

管理画面メニュー設定

まず、管理画面の「外観」から「メニュー」へとうつります。

メニュー設定

「メニューの名前」を適当に決めます。できれば英数字で設定してください。日本語にすると、ソースが無駄に長くなります。

ここでは top-navi としました。

メニューの名前

「メニューを作成」ボタンを押下し、中身を放り込んでいきます。

左側に「固定ページ」「リンク」「カテゴリー」の3種類が並んでいますので、まず「カテゴリー」を選択してみましょう。

ここでは、「未分類」しかありませんので、チェックして「メニューに追加」ボタンを押下します。

メニューに追加

メニュー構造内に「未分類」カテゴリーが追加されたので、右側の小さな▼ボタンを押下して詳細設定を行います。

「ナビゲーションラベル」があるので、ここに画面で表示させたいテキストを入力しましょう。カテゴリー名やページタイトルが長すぎる場合に調整できます。

ナビゲーションラベル設定

「メニューを保存」して、ブログを確認してみましょう。

ナビゲーションラベル変更後

名前が変わっていますね。

固定ページや外部リンクも同様の手順で変更できます。

メニュー設定のポイント

最上部のメニューは、ユーザーだけではなく検索エンジンにも重要なページを伝える導線となります。

すべてのカテゴリーを並べるのではなく、メインとなるカテゴリーをいくつかと、お問い合わせやサイトマップなどへのリンクをおくと効果的です。

いろいろなブログを見て参考にしてみてください。

2013年10月より、おもにWordPress初心者を対象とした指南書がメインのNaifixを開設。2014年3月にカスタマイズ前提のWPテーマ「Gush」を公開。
  • このエントリーをはてなブックマークに追加
  • Pocket

コメント一覧

  1. raopi より:

    素晴らしいデザインをありがとうございます。

    不具合でないかもしれませんが、固定ページの場合スマホで表示したら、メニュー三 を押しても反応がありません。
    お手数ですが対応を教えてください。よろしくお願いします

    後急ぎでないですが、固定ページでブログのようにサムネイル記事一覧で 表示させる方法があればおしえてください

    • Ellora より:

      raopi さま

      メニューボタンの不具合は、ホームに固定ページを表示したら動かなくなるのでしょうか。それとも、固定ページに移動したら動かなくなるのでしょうか。原因を探っていますので、もう少々お待ちください。

      また、ホームを固定ページにして記事一覧を表示させる方法は、こちらが参考になると思います。
      http://ateitexe.com/wordpress-blogtop-page/
      https://ja.forums.wordpress.org/topic/4289

      • raopi より:

        全ページ固定ページで作っています。
        トップページは、押しても無反応で他のページは
        出てくるページと出てこないページにわかれます。
        よろしくお願いします。スマホの問題かと思い、別のスマホで押しても同じでした

        • Ellora より:

          raopi さま

          サイトを拝見していないので何ともいえませんが、おそらくjQueryの読み込みに問題があると思います。

          functions.php にある「jQuery読み込み」と書かれている部分のコードを削除してみてください。

          • raopi より:

            Asynchronous Javascript

            すいません上記プラグインを止めたら直りました
            お騒がせしました。ありがとうございました

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。