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

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

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

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

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

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

Swallow, 英語サブタイトル, メニュー

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

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

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

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

SPONSORED LINK

SWALLOW(スワロー)とは



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

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

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

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

SPONSORED LINK

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

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

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

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

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

Swallow, カスタマイズ, 外観, wordpress

(2)メニューを選択する。

swallow, カスタマイズ, wordpress

(3)メインメニューを選択する。

swallow, カスタマイズ, wordpress

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

swallow, カスタマイズ, wordpress

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

swallow, カスタマイズ, wordpress

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

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

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

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

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

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

SPONSORED LINK

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

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

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

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

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

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

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

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

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

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

子テーマの編集についての参考
子テーマのダウンロード・導入(「OPEN CAGE」より)

(2) function.phpに以下のコードを追記する。

function.phpに以下のコードを追記し、元あった子テーマフォルダ内に、アップロードして上書きしてください。

手順②:カスタマイズ画面で「説明」欄にサブタイトルを入力する。

本記事の「グローバルナビのサブタイトルを表示する仕組み」に戻り、手順を参考にして、グローバルナビの表示項目の「説明」欄に、サブタイトルを入力してください。

入力して保存すると、このように表示されます。
このままでは、グローバルナビのメニュー項目も、サブタイトルも、同じスタイルが適用されて、同じ文字の大きさに表示されており、メリハリがありませんので、CSSで整えていきます。

注意:「説明」欄が表示されていない場合

カスタマイズ画面で「説明」欄にサブタイトルを入力しようとしても、「説明」欄が項目に無い場合があります。その場合は、以下の手順で「説明」欄を表示させましょう。

① ダッシュボードから、「外観」→「メニュー」を選択します。

② 画面上部にある「表示オプション」を選択します。

③「説明」にチェックをつけます。

「説明」にチェックをつけることで、「説明」欄が表示されるようになります。

手順③:CSSでデザインを整える

いまの状況だと、以下のようにグローバルメニューもサブタイトルも同じスタイルで表示されるため、CSSでデザインを整えていきます。

(1) CSSのカスタマイズ画面に移動する。

①「外観」→「カスタマイズ」を選択する。

Swallow, カスタマイズ, 外観

②「追加CSS」を選択する。

(2) 追加CSSの入力欄に以下のコードを入力する。

追加CSSの入力欄に以下のコードを入力して、保存してください。

★コードの説明①:5〜14行目

グローバルナビゲーションのサブタイトルのスタイルです。これを入力すると、以下のようにサブタイトルの文字を小さめにしたデザインに変更することができます。

★コードの説明②:16〜18行目

こちらでフッターメニューのスタイルを指定しています。

実は、「説明」欄を有効にしたことで、フッターメニューのサブタイトルも有効化されました。その結果、このコードを記入しない場合、以下のようにフッターメニューが崩れて表示されます。グローバルナビゲーションのサブタイトルのために入れた改行コードがフッターメニューにも適用されてしまっているのです。

16〜18行目では、フッターメニューの方だけ、改行コードを含んだ追加コードを表示させないようにしています。これにより、以下のように綺麗なフッターメニューになりました。

これでカスタマイズは完了です!
お疲れさまでした!!

SPONSORED LINK

おわりに

「スワロー」のカスタマイズをしてきました。

わたし個人としてましては、唯一の不満が今回めでたく解消されましたので、これで心おきなく、スワローを使っていきたいと思います。

CSSの5〜14行目を変更していただくことで、サブタイトルの文字の大きさや行間などを変更することができますので、いろいろ試してみてくださいね!

それでは、今日も素敵な一日を!

fummy

SPONSORED LINK
SPONSORED LINK