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

最近の作業実績

  • 2020年11月09日子テーマの導入で発生した不具合を修正いたしました。
  • 2020年11月09日LPサイトのレイアウトの崩れを修正いたしました。
  • 2020年11月04日カスタム投稿のアーカイブページで発生していた不具合を修正いたしました。
  • 2020年11月04日WordPressサイトのSEO対策に関するアドバイスをご提供いたしました
  • 2020年11月04日WordPressで構築されたサイトのトップページのデザイン一新しました
  • 2020年11月04日ループ部分のデザインを変更いたしました。
  • 2020年10月28日カスタム投稿専用のカレンダーウィジェットを実装いたしました。
  • 2020年10月28日内部SEO対策を最適化いたしました。
  • 2020年10月28日WordPressサイトのサーバー移管を行いました。
  • 2020年10月28日新規サイト(WordPress)を制作いたしました
  • 2020年10月10日既存サイトをWordPressで再構築いたしました。
  • 2020年10月04日WordPress各ユーザーのユーザー名を変更いたしました。
  • 2020年10月04日PHPのバージョンアップに伴うデータベース確立エラーを解消いたしました。
  • 2020年10月04日WordPressサイトのサーバー移管を担当いたしました。
  • 2020年10月04日複雑怪奇なテーマ構造の一部を分かりやすく再構築いたしました。
  • 2020年10月04日既存サイトにWordPressを導入いたしました。
  • 2020年09月29日WordPress、プラグイン、テーマ、PHPのバージョンアップを行いました。
  • 2020年09月29日WordPressのセキュリティ対策を導入いたしました。
  • 2020年09月22日WordPressのパスワードをデータベースから直接変更いたしました。
  • 2020年09月21日WordPressテーマにオリジナルのPHPファイルを実装いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。

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

この投稿は2020/01/04に加筆修正いたしました。

WordPressのカスタムメニューでサブタイトル付きのメニューを作成したいと思ったことはありませんか?

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

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

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

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

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

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

この記事は約 1 分で読めます。

WordPressのカスタマイズはお任せください。

WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。

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サイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する


著者:takaya kondo

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

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

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

コメントを残す

(必須)

CAPTCHA