【WordPress】カスタムメニューでサブタイトルつきのメニューを作成する方法
MENU
  1. HOME
  2. WordPress / カスタマイズ
  3. 【WordPress】カスタムメニューでサブタイトルつきのメニューを作成する方法

最近の作業実績

  • 2022年10月18日不要になっていたコンテンツをサイト内から除去いたしました。
  • 2022年10月17日サイト内の画像が表示されない不具合を修正いたしました。
  • 2022年10月16日サイト内で発生した大量の404エラーを修正いたしました。
  • 2022年10月15日既存サイトの各所を簡単に更新できる機能を追加いたしました。
  • 2022年10月14日過去記事を定期的に自動ツイートする機能をテーマに実装いたしました。
  • 2022年10月13日サイト内の広告を一括管理できる機能をテーマに実装いたしました。
  • 2022年10月12日既存サイトのトップページを再構築いたしました。
  • 2022年10月11日クラシックエディターで管理されていたコンテンツをブロックエディターで再構築いたしました。
  • 2022年10月10日複数のサイトの更新情報を一括表示させる機能をテーマに実装いたしました。
  • 2022年10月09日WordPressの管理画面にオリジナルの管理ページを実装いたしました。
  • 2022年10月08日コンタクトフォーム7で構築されたフォームに確認画面とサンクスページを導入いたしました。
  • 2022年10月07日既存サイトのサーバー移管を担当いたしました。
  • 2022年10月06日フッターのレイアウトを再設計いたしました。
  • 2022年10月05日既存サイトのカラーを一括管理できる機能をテーマに実装いたしました。
  • 2022年10月04日新規ページを5ページ作成いたしました(デザイン込み)。
  • 2022年10月03日訪問者に閲覧履歴を表示する機能をテーマに実装いたしました。
  • 2022年10月02日ログインできなくなったWordPressを復旧いたしました。
  • 2022年10月01日オリジナルテーマの制作を担当いたしました。
  • 2022年09月30日破損していたテーマを修正いたしました。
  • 2022年09月29日アフィリエイト審査用のサイト立ち上げを担当いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。

【WordPress】カスタムメニューでサブタイトルつきのメニューを作成する方法

この投稿は2020/01/04に加筆修正いたしました。
WordPressのカスタムメニューでサブタイトル付きのメニューを作成したいと思ったことはありませんか?

カスタムメニューとは、Wordpressの機能でメニューを管理するためのもの。



上記の画像の様に、管理画面から作成できるメニューです。

その機能を使って作成したいサブタイトル付きのメニューというのは、以下の様なメニューです。



メニュー項目の下部に、英文などが表示されているメニューのことです。
サブタイトル付きのメニューを一度は目にしたことがあるのではないでしょうか?

Wordpressのカスタムメニューは、デフォルトでサブタイトルを表示させる機能はありません。
しかし、ちょっとしたカスタマイズでサブタイトル付きのメニューを実装することができます。

今回は、サブタイトル付きのメニューを作成する手順をまとめてみました。
興味のある方は、続きをご覧ください。
この記事は約 1 分で読めます。

WordPressのカスタムメニューでサブタイトル付きのメニューを作成する手順

ここからの解説は、下記の条件を満たしているものとして解説をさせていただきます。

  • お使いのテーマでカスタムメニューが利用可能である。
  • カスタムメニューが既にサイト上に表示されている状態である。
  • 既にカスタムメニューでメニューを作成している。

満たしていない場合は、予め上記の条件を満たしてください。

以下の手順で、サブタイトル付きのメニューを実装することができます。

  1. functions.phpにコードを追記する
  2. サブタイトルを入力する項目を表示させる
  3. サブタイトルを入力する
  4. サブタイトルが表示されているのを確認する
  5. 見た目を整える

個別にみていきましょう。

手順1:functions.phpにコードを追記する

functions.phpに以下のコードを追加します。

add_filter('walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4);

function description_in_nav_menu($item_output, $item){
return preg_replace('/(<a.*?>[^<]*?)<span>{$item->attr_title}</span><", $item_output); }

参考:かちびと.net

テーマ側のカスタマイズは、このコピペのみで完了です。

手順2:サブタイトルを入力する項目を表示させる

カスタムメニューの管理画面にアクセスしてください。

管理画面の【外観】⇒【メニュー】と進めば、上記の画面が表示されます。

ページ上部に「表示オプション」という項目(上記画像の赤枠部分)があります。
こちらをクリックしてください。

上記の画像の様に設定項目が展開されます。
上記画像の赤枠部分「説明」にチェックを入れてください。

既にチェックが入っている場合は、何もしなくても大丈夫です。

メニュー項目の中に「説明」という入力エリアが表示されています。
こちらに入力したテキストが、サブタイトルとして表示されるようになります。

手順3:サブタイトルを入力する

サブタイトルを表示させたいメニューを選択してください。

各項目の「説明」に、その項目のサブタイトルを記入してください。

手順4:サブタイトルが表示されているのを確認する

手順3までの作業が完了したら、サブタイトルを表示させたいメニューをサイト上で確認してください。

上記のように「説明」に入力した内容が、メニュー上に表示されていればOKです。

上記の画像は、レイアウトを整えた状態となります。
ご自身のサイトでは、レイアウトが崩れているかと思います。

手順5:見た目を整える

メニューに表示されたサブタイトルの見た目を整えましょう。

サブタイトルは【<span></span>】で囲まれています。
CSSでサブタイトルを囲む【<span></span>】を装飾して見た目を整えてください。

まとめ

カスタムメニューでサブタイトルつきのメニューを作成する方法をご紹介しました。

  1. functions.phpにコードを追記する
  2. サブタイトルを入力する項目を表示させる
  3. サブタイトルを入力する
  4. サブタイトルが表示されているのを確認する
  5. 見た目を整える

簡単な5ステップで、サブタイトル付きのメニューを作成することができます。
興味のあるかは、ぜひ実践してみてください。

Wordpressのカスタマイズや不具合など
何かお困りのことはありませんか?

Wordpressに関連するあなたのお悩み、解決いたします。
次のような方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトに不具合が発生したが、直し方が分からない。不具合の修正経験が豊富な人に任せたい。
  • 既存サイトにWordPressを導入したいが、やり方が複雑で自分ではできそうにもない。経験が豊富な人に任せたい。
  • WordPressがハッキングされたが修正の仕方が分からない。サイトを元通りにできる人を探している。
  • Wordpressで0からサイトを制作したいが、自分ではできそうにもない。プロにサイト制作を委託したい。

一つでも該当する方は、以下のフォームからお気軽にご相談下さい。

WordPressに関して今すぐ相談する

著者:takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

コメントを残す

(必須)

CAPTCHA