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

最近の作業実績

  • 2024年04月06日非レスポンシブのサイトをレスポンシブ化いたしました。
  • 2024年04月05日テーマファイルが編集できない不具合を解消いたしました。
  • 2024年04月04日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。
  • 2024年04月03日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年04月02日お問い合わせフォームを再構築いたしました。
  • 2024年04月01日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年03月31日サーバー移管に共に表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年03月30日WordPressの操作方法をサポートいたしました。
  • 2024年03月29日サイドバーに人気記事を表示させる仕組みを導入いたしました。
  • 2024年03月28日テキスト等の簡易な修正を行いました。
  • 2024年03月27日アイキャッチが表示されない不具合を修正いたしました。
  • 2024年03月26日WordPressの操作方法をサポートさせていただきました。
  • 2024年03月25日サイト上で発生していたリンクの不具合を解消いたしました。
  • 2024年03月24日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年03月23日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。
  • 2024年03月22日WordPressにログインできない不具合を解消いたしました。
  • 2024年03月21日既存サイトにセキュリティ対策を導入いたしました。
  • 2024年03月20日メールフォーム周りで発生していた不具合を解消いたしました。
  • 2024年03月19日記事一覧をカテゴリー単位で表示できる様にカスタマイズいたしました。
  • 2024年03月18日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。

【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