お問い合わせはコチラから

wp_nav_menuのli要素にclassを追加する

サイト運営

wp_nav_menuから出力されるHTMLファイルにclassを追加する時のTipsです。

wp_nav_menuには、出力されるulタグにclassを追加するオプション(menu_classmenu_id)が最初から用意されています。しかし、liタグにclassを追加するオプションは用意されていません。

検索したら、liタグにclassを追加する頭の良い解決方法が見つかったのでメモしておきます。

wp_nav_menuのli要素にclassを追加するソース

header.phpで対応する場合

$args = array(
    'container'     => '',
    'theme_location'=> 'your-theme-loc',
    'depth'         => 1,
    'fallback_cb'   => false,
    'add_li_class'  => 'your-class-name1 your-class-name-2'
    );
wp_nav_menu($args);

functions.phpで対応する場合

function add_additional_class_on_li($classes, $item, $args) {
    if(isset($args->add_li_class)) {
        $classes[] = $args->add_li_class;
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

お気に入りポイント

nav_menu_css_classフックを使う解決方法は検索すると沢山出てきます。その中でこの方法が優れている点は、通常のオプションと同じようにclassを追加できる点です。メニュー名やlocationを判定してフックの中身で判定せずに、wp_nav_menuの引数側で動きを変更できる点が気に入りました。

wp_nav_menuをいじる時に気を付けたいこと

wp_nav_menuを自分で設置する時に忘れがちなのが、register_nav_menusの設定です。

wp_nav_menuをいじる時には(たぶんfunctions.phpに書かれている)必ず確認した方が良いです。

理由:メニューのlocationの指定で使う名前は、ダッシュボードのメニューからはわからないので。

番外編:メニューの下に説明を表示する

最近よく見かけるメニューの下に小さい文字で英字表記を追加する時のカスタマイズ。

外観→メニューの表示オプションで、説明に✓チェックをいれて、メニューに説明を付与できるようにする。

function prefix_nav_description( $item_output, $item, $depth, $args ) {
 if ( !empty( $item->description ) ) {
 $item_output = str_replace( '">' . $args->link_before . $item->title, '">' . $args->link_before . '<strong>' . $item->title . '</strong>' . '<span class="menu-item-description">' . $item->description . '</span>' , $item_output );
 }
 return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );

このカスタマイズを行うと、スマホ時にも表示されてしまうので、spanをdispaly:noneにするか、説明を書いていない別メニューを用意する必要があります。

まとめ

メニュー周りは、サイト制作の鬼門で一番面倒な部分です。いじらなくてよいならいじりたくない部分ですが、いじらないといけなくなった時に結構ハマるのでメモしておきました。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました