【WordPress】SWALLOWカスタマイズ！グローバルナビに英語サブタイトル（説明）を表示させる方法

東京のすみっこより愛をこめて。fummyです😊💡

当ブログでは、OPEN CAGEさんのWordPressテーマ「SWALLOW（スワロー）」を使っています。

おおむね満足しているのですが、実は一点だけ不満がありまして。
細かいところなんですが、OPEN CAGEさんの他のテーマにはあるのに、「スワロー」にだけない機能があるんです。

それが、グローバルナビゲーションのサブタイトル（説明）です。

デフォルトだと英語のサブタイトル（説明）が表示されなかったので、当ブログでは、カスタマイズして表示するようにしています（下記の、Before→Afterを参照ください）。

サブタイトルを表示するには、「サブタイトルのON・OFF機能」を有効にしなければなりませんが、そのためには、WordPressの子テーマのソースコードの編集が必要です。

今回は、このソースコード編集も含めたカスタマイズ方法と、カスタマイズ後のサブタイトルの設定方法について、ご説明していきます。

コピペでできるように、なるべく詳細に記載していきますね！

ちょっとマニアックかもしれませんが、「スワロー」ユーザーの方で、もしも、サブタイトル（説明）を表示させたい方がいたら、参考にしてみてください〜。

SPONSORED LINK

SWALLOW(スワロー)とは

軽く説明しておきますと、WordPressテーマ「スワロー」は、人気ディベロッパーであるOPEN CAGEさんが制作されたWordPressテーマです。

OPENCAGEさんは、今までに４つWordPressテーマをリリースされていますが、SWALLOW（スワロー）は、2018年1月にリリースされた最新のテーマです。

このテーマは、とにかく「ブログを書くこと」に特化しているテーマです。
ブログのために必要な機能を厳選し、簡単に使えるように工夫してつくられていて、とても使いやすいです。

ところが、「使いやすさ」や「シンプル化」を追究した結果、どうやらグローバルメニューのサブタイトルのON・OFF機能は、断捨離されてしまった様子・・・。
たしかに必須の機能ではないのですが・・・わたしとしては、デザイン的に残してほしかった！（マニアックですみません）

SPONSORED LINK

グローバルナビのサブタイトルを表示する仕組み

まず「サブタイトルの表示のしくみ」を理解してから、WordPressのどの部分をいじれば有効化できるのかを検討しましょう。

OPEN CAGEさんの他テーマを参考にすると、サブタイトルを表示させる手順は以下のようになります。

グローバルナビのサブタイトルを表示させる手順

（１）ダッシュボードから、外観→カスタマイズを選択する。

（２）メニューを選択する。

（３）メインメニューを選択する。

（４）グローバルナビの項目「Web・デザイン」を選択し、設定項目を開く。

（５）設定項目の一覧の中の「説明」にサブタイトルを入力する。

①は「ナビゲーションラベル」欄。
現在「Web・デザイン」と記入してありますが、こちらがグローバルナビに表示されるメニューの名前になります。

②は「説明」欄。
こちらがサブタイトルの入力欄です。

そして「説明」入力欄の下部に注目ください。「使用中のテーマが対応している場合はメニューに説明が表示されます。」とあるように、テーマが対応していれば、「説明」欄に入力することで、サブタイトルがグローバルナビゲーションに表示されます。

ところが、「スワロー」では、デフォルトではこの「説明」機能が無効になっており、入力してもサブタイトルは表示しません。

そのため、「説明」欄を有効にする必要があります。

その方法を、以下にご紹介していきます。

SPONSORED LINK

カスタマイズ！グローバルメニューのサブタイトルを表示する方法

手順としては、以下のようにカスタマイズしていきます。

カスタマイズ手順

グローバルナビの項目「説明」を有効化する。（functions.php）
カスタマイズ画面でサブタイトルの内容を「説明」に入力する。
CSSで「説明」欄に入力したサブタイトルのデザインを整える。

以下のページを参照させていただきましたが、そのままコピペしたところ、「スワロー」では連動してフッターメニューに影響を及ぼしたので、変更を加えました。ご注意ください！

参考ページ

WordPressのカスタムメニュー（wp_nav_menu）を使って、サブタイトル付きのナビゲーションを実装する（「かちびと.net」より）

手順①：functions.phpにコード追加して「説明」を有効化する

(1) functions.phpをスワローの子テーマのフォルダからダウンロードする。

FileZillaなどのFTPソフトをつかって、「……/wp-content/themes/yswallow_custom」という子テーマフォルダ内のfunctions.phpをダウンロードします。

通常、テーマをカスタマイズする際は、親テーマのフォルダ内の編集対象のファイルを複製して、子テーマフォルダに格納するのですが、functions.phpに関しては、親テーマフォルダにも、子テーマフォルダにも、両方にすでに格納されています。

子テーマフォルダ内のfunctions.phpは、中身はほとんど何も書かれていないような状態です。
しかし、functions.phpに関しては、親テーマと子テーマ、両方のフォルダ内のfunctions.phpがWebサイトに適用されますので、子テーマにすでにあるfunctions.phpを編集します。

「スワロー」の子テーマの編集に関しては、開発元であるOPEN CAGEさんの記事に詳しく記載されています。

子テーマの編集についての参考

子テーマのダウンロード・導入（「OPEN CAGE」より）