【WP】ワードプレスのカスタムメニューのカスタマイズ

wordpress-nav-menus-customization

先日ご紹介をしたWordPressのカスタムメニューの機能。出力されるタグをみるとクラス名が多く記述されているのがわかります。記述されているクラス名を使いCSSでメニューのデザイン、表示など変更する事も可能ですが、クラス名が多すぎて煩雑になりやすいので、今回はよりカスタマイズしやすい様に標準のクラス名を独自のクラス名に置き換える方法をご紹介します。

標準的なカスタムメニューの出力例

// 標準的なカスタムメニューの出力例
<ul id="menu-menu" class="nav-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-326" id="menu-item-326"></li>
</ul>

LI要素のクラス名を整理する

フィルターフックadd_filter()を使用する事で、カスタムメニューの出力タグに変更を加えることができます。

最初に、標準のクラス名を無くして、自分で指定したクラス名のみをLI要素に反映する方法です。以下のコードを「functions.php」内に記述します。

// (1)LI要素に共通のクラス名を指定する
add_filter('nav_menu_css_class' , 'my_nav_class' , 10 , 1);
function my_nav_class($classes){
  $classes = array(); // クラス名を初期化
  $classes[] = 'my_class'; // 出力するクラス名を設定
  return $classes;
}

wp_nav_menu()によって出力されるタグをみるとクラス名に「my_class」のみが反映されているのがわかります。

// (1)LI要素に共通のクラス名を指定する処理後の出力タグ
<ul id="menu-menu" class="nav-menu">
<li class="my_class" id="menu-item-326"></li>
</ul>

すべてのLI要素に共通するクラス名の場合は以上の処理で対応することができます。

次にLI要素ごとクラス名を変えたい場合はどのようにすればよいのか。実はWordPressの管理画面内でカスタムメニューを設定するときに、LI要素には独自にクラス名をつけることができるようになっています。

まずは、下の図のように各メニューの項目内にある「CSS class」にクラス名を入力します。

wordpress-nav-menus-customization-01

※ メニュー内容の設定欄に「CSS class (オプション)」の表示が無い場合は、ページ上にある「表示オプション」を開き「CSS クラス」にチェックが入っているか確認をしてみてください。

フィルターフックadd_filter()によって処理をしないままだと、上記で入力したクラス名は「menu-item」などの標準のクラス名と一緒に出力されます。そこで、不要なクラス名を無くすための処理として以下のコードを「functions.php」内に記述します。

以下のコードでは、使用するクラス名のみが反映される処理になっています。

「array(‘current-menu-item’,’my_class01′,’my_class02′)」の部分が、使用したいクラス名を指定している箇所になります。

// (2)LI要素に任意のクラス名を指定する
add_filter('nav_menu_css_class', 'my_css_attributes_filter', 10, 1);
function my_css_attributes_filter($var) {
    return is_array($var) ? array_intersect($var, array('current-menu-item','my_class01','my_class02')) : '';
}

wp_nav_menu()によって出力されるタグをみると管理画面で設定されたクラス名が反映されるようになっています。

// (2)LI要素に任意のクラス名を指定する処理後の出力タグ
<ul id="menu-menu" class="nav-menu">
<li class="current-menu-item my_class01" id="menu-item-326"></li>
<li class="my_class02" id="menu-item-326"></li>
</ul>

以上が、カスタムメニューのクラス名を置き換える方法の一例になります。出力されるタグはフィルターフックadd_filter()を使用する事で変更が可能です。上記で紹介した例以外でも独自の処理を加えて出力するタグを変更することができますので、目的に応じて試してみてください。

関連記事

【デザイン】ウエディングパーティーのエスコートカード

ウエディングパーティーなど来客者をテーブルに案内するときは座席表やエスコートカードが登場しますね。今回は、クリエイティブなエスコートカードの参考事例をご紹介します。 Malibu Calamigos Ranch wedding 可愛らしいミニチュアサイズの鉢植えでお出...続きを読む

2015.03.25インスピレーション

画像・動画の素材サイト 「PIXTA」で写真を販売しています

画像・動画の素材サイト 「PIXTA」で写真を販売しています。桜やコスモス、紅葉など自然の花々、風景を中心に公開中です。 また、写真撮影のご依頼も受け付けておりますので、ホームページや各種印刷物にて写真が必要になる場合は、お気軽にご相談ください。 PIXTA 写...続きを読む

2019.04.15

【フォト】蓮華寺池公園フォトギャラリー《こどもの日》

静岡県藤枝市にある「蓮華寺池公園」。市の花でもある藤の花が見頃になる4月末から5月初旬まで藤まつりが開催されます。期間内にこどもの日もあることから、公園内に鯉のぼりがのぼります。新緑に青い空、湖の風景は風情がありますね。 フォトギャラリー ※写真をクリックすると拡大表示し...続きを読む

2019.05.14フォトギャラリー藤枝

【JavaScript】グラフなどの描画をサポートするライブラリまとめ

折線グラフ、棒グラフ、円グラフやレーダーチャートなどを画像を使わずに描画をするJavaScriptライブラリをまとめてみました。 Chart 6種類のグラフを作成できるJavaScriptライブラリです。描画にはHTML5のcanvasを使用しています。 Dem...続きを読む

2015.03.02HTMLコーディング

【JavaScript】文字設定をレスポンシブ対応してくれるライブラリ『FlowType』

『FlowType』はレスポンシブデザインのサイトにおいて、横幅の変化に応じて設定されている文字の大きさや行の高さを自動的に調整をしているJavaScriptライブラリです。 イメージ ダウンロード ライブラリのダウンロードはこちらから行うことが出来ます。 ...続きを読む

2015.02.10HTMLコーディング