WordPressのメニュー管理でやっておきたい設定と便利な使い方について

前回の記事ではWordPressのメニュー管理の基本的な使い方と、ヘッダー、フッター、スマホのヘッダーの各メニューで表示内容を変える方法を紹介しました。

STORKのWordPressでヘッダーとフッターで別々のメニューを表示する方法

2018年11月21日

今回はもメニュー管理の続きの記事ではありますが、もう少し踏み込んだ内容でこれだけはやっておきたいという設定や便利な使い方についてまとめましたので、参考にしてもらえると嬉しいです。

WordPressの「メニュー」でやっておきたい設定と便利な使い方

こんなラインナップで進めます。

チェックしておきたいメニューの設定と便利な使い方
  1. 親子構造でメニューを表示する
  2. カスタムリンクの用途や使い方
  3. 英語のメニュー名を併記したい
  4. メニューのリンクを新規ウィンドウで開きたい

では1つずつ見ていきます。

親子構造でメニューを表示する

メニュー構造に追加されたメニューを親子構造で表示する方法です。

カテゴリーは親子構造(親カテゴリー、子カテゴリー)ってあると思うんですが、この親子構造のままチェックを入れてメニューを追加しても、全部同じ階層(親)で並んでしまいます・・・

これをヘッダーやフッターメニューでも親子構造を保持したまま表示するにはどうすればいいか?ですが、方法は2つあって、

まず1つ目は、メニューをドラッグしてちょっと右側にずらしてドロップする方法。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

2つ目は、メニューを開いて「****の下の階層」リンクをクリックする方法です。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

STORKテーマの場合ですが、ブログを見ると、親メニューにマウスを乗せることで子メニューがドロップダウンで表示されるようになります。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

スマホだと、↓こんな見え方になりますね。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

なお、この親子構造はカテゴリーに限った話じゃなく、固定ページだけで構成されたメニューz(このブログだとフッターメニュー)でも同じ見せ方ができます。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

↓こんな感じで、子メニューの方が若干フォントが小さく表示されるので、企業サイトでよく見るフッターサイトマップのような使い方もできるという訳です。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

カスタムリンクの用途や使い方

前回のメニューの基本的な使い方紹介記事の途中で「カスタムリンク」というものが出てきましたが、これは何のため、どのようにして使うのか?について説明します。

STORKのWordPressでヘッダーとフッターで別々のメニューを表示する方法

2018年11月21日

カスタムリンクとは、文字通りURLとリンクテキストを自由に指定することができるメニューです。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

「メニュー項目を追加」にある固定ページは、ナビゲーションラベルしか変更できず、URL(パーマリンク)の編集はできないため、例えばあるページの指定の場所にアンカーリンク(ページ内ジャンプ)させたい時に、このカスタムリンクを使ったりします。

使い方はURLとリンク文字列を入れるだけです。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

また、メニューを追加した後からでも、リンク先URLや文字列の変更はできます。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

英語のメニュー名を併記したい

STORKテーマのヘッダーメニューですが、↓こんな感じでメニューの下になんか変なスペースが空いてしまいます。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

これ、実は下にメニューの説明(英語表記とか)を入れれるようになっているんですが、管理画面のメニュー編集ページではその説明を編集するフィールドがないですねー。。。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

最初は分かりにくいですが、実はページ上に「表示オプション」というボタンがあって、
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

これをクリックすると隠しメニューを表示することができるようになっています。
今回の英語併記の場合だと、詳細メニュー設定を表示の中から「説明」にチェックを入れると、
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

メニューの説明が書けるようになります。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

こんな感じでブログ上では表示されるので、他のカテゴリも同じように説明入れて、レイアウトを整えてあげましょう。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

メニューのリンクを新規ウィンドウで開きたい

これも先の英語表記の時と同じで、ページ上の「表示オプション」をクリックして
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

詳細メニュー設定を表示の中から「リンクターゲット」にチェックします。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

すると、リンクを新しいタブで開くにチェックができるようになるで、メニューによって同一ウィンドウでページを開くものと、新規ウィンドウで開くものとを共存できるようになります。
WordPressのメニュー管理でやっておきたい設定と便利な使い方について

WordPressのメニュー管理でやっておきたい設定と便利な使い方のまとめ

最後に、今回紹介したチェックしておきたいメニューの設定と便利な使い方に関してまとめておきます。

  1. カテゴリーの親子構造を保持したままメニューを表示できる
  2. ページ内の特定の場所にリンク(アンカーリンク)させたり、外部ページへリンクさせる場合は、カスタムリンクを使うとよい
  3. STORKテーマの場合、表示オプションから「説明」を使えるようにして、英語メニューを併記するとデザイン的にまとまる
  4. リンクを新規ウィンドウで開きたい場合は、表示オプションから「リンクターゲット」を使えるようにしておく

ブログを始めるならWordPressテーマSTORKがオススメ

理由は以下の記事でまとめています。

【STORK】有料テーマ購入を迷う人にストークをオススメする7つの理由2021年版

2019年6月1日

綺麗なデザインが最初から用意されているので、「ブログを書きたい」と思った時からすぐに始めることができます。しかも、執筆に便利なツールも一通りそろっているので、「書くことだけ」に集中できるという、ブロガーにとってはとても魅力的なテーマです。

是非STORKを試してみてくださいね★

関連記事

コメントを残す

ABOUTこの記事をかいた人

STORKのテーマやプラグインなど、WordPressを使ったアフィリエイトに関する記事を中心に紹介しています。そのほかにもMacやiPhone、HTML、CSS、Javascript、PHPなどの記事もちょこちょこ書いています★