WordPressテーマSANGOにボックスメニューを入れてみた

WordPress テーマの SANGO にボックスメニューを追加する機能は今のところ残念ながら提供されていません。

ボックスメニューはうまく使えば回遊率の向上にも寄与できる機能なので、簡単に追加できる方法を解説します。

SANGOにボックスメニュー機能がない

現在このサイトで利用している WordPress テーマの Cocoon にはボックスメニューという機能があります。

ボックスメニューは以下のように各リンクをボックス型のメニューに収めたものです。

Cocoon ではボックスメニュー用のショートコードが用意されており、外観のメニューから作成したメニュー名を指定することで簡単にボックスメニューを表示させることができます。

他のサイトで利用している SANGO にもこれを入れたいな、と。

SANGO も公式サイトでやり方を公開してくれています。

メニューボックスをウィジェットやページに表示する方法
SANGOではver1.3のアップデート以降、ウィジェットに簡単に以下のようなメニューが設置できるようになりました。 横2列で縦に並んでいくメニューです。偶数個のメニュー項目を用意するのがおすすめです。主にPCのサイドバ ...

が、HTMLをゴリゴリ書くのは・・・Cocoonのようにメニューを変えるだけで、ボックスメニューを作れないか?

調べると Cocoon の作成者のわいひらさんがボックスメニューを作成する方法を公開されていました。

「ボックスメニュー」ショートコードの実装方法。WPメニュー機能で内容を変更できるやつ。
アイコンフォントや画像用いて、ボックス型の分かりやすいナビゲーションメニューを作成するWordpressカスタマイズ方法です。

これを SANGO に入れれば無事ボックスメニューを簡単に導入できます。

早速やってみました。

SANGOにボックスメニューを入れる方法

Cocoon の やり方で SANGO にボックスメニューには functions.php を修正する必要があります。

これはちょっと怖い。間違えると画面が真っ白になるのでね。

そこで Code Snippets というプラグインを導入します。

Code Snippetsの導入

Code Snippets プラグインは、安全に WordPress テーマの PHP ファイルに処理を追加できるプラグインです。

まずはこのプラグインを WordPress の「プラグイン→新規追加」で Code Snippets を検索してインストール後、有効化します。

functions.phpの修正

Code Snippets プラグインを有効化するとメニューに Snippets という項目が増えているので、それをクリックして上部にある Add New をクリックします。

表示された編集画面にわかりやすい名前を付けて、前出のわいひらさん作成の PHP コードを貼り付けて保存します。

「ボックスメニュー」ショートコードの実装方法。WPメニュー機能で内容を変更できるやつ。
アイコンフォントや画像用いて、ボックス型の分かりやすいナビゲーションメニューを作成するWordpressカスタマイズ方法です。

これで funcstions.php を直接修正することなく、ショートコード作成コードを WordPress に追加することができました。

CSSの追加

次にボックスメニュー用の CSS を「外観 → テーマエディター」から SANGO の style.css に追加します。

この CSS も以下のサイトにあるものをそのままコピペします。

「ボックスメニュー」ショートコードの実装方法。WPメニュー機能で内容を変更できるやつ。
アイコンフォントや画像用いて、ボックス型の分かりやすいナビゲーションメニューを作成するWordpressカスタマイズ方法です。

ボックスメニュー用メニュー作成

次にボックスメニュー用のメニューを WordPress のメニュー機能を使って作成します。

メニューは「外観 → メニュー」から新規作成で、わかりやすい名前を付けて保存します。
ボックスメニュー用のメニューを作成する

CSS class (オプション)には Font Awesome のアイコンを利用しています。

もし、CSS classなどの編集エリアが表示されない方は、画面上部にある「表示オプション」をクリックして、以下のような表示にします。
WordPressのメニュー情報設定画面

ボックスメニュー表示

ボックスメニュー用メニューを作成したら、表示したいところに以下のようにボックスメニュー名を指定して記述します。

[box_menu name="WordPress関連"]

(※[]は半角で記述してください。)

これで指定した場所にボックスメニューが表示されます。

以下は SANGO に実験で挿入したボックスメニューです。

記事下とサイドバーに入れてみました。
SANGOにボックスメニューを導入した結果

まとめ

これで WordPress のメニュー機能を編集するだけで SANGO にもボックスメニューを導入することができます。

functions.php に変更が入るので、必ずバックアップを取ってから行うようにしてください。

同じ WordPress テーマの JIN は表示が崩れる・・・orz。

タイトルとURLをコピーしました