サポート » 使い方全般 » カスタムメニューで出力されるリストへclassを追加したい(連番・最初と

  • 解決済 maimai73

    (@maimai73)


    お世話になっております。

    現在Wordpressで作成しているサイトの、グローバルメニューとサイドメニューにカスタムメニューの機能を利用しているのですが、以下の2点を実現させたいのです。

    1.グローバルメニューに出力される<li>に、連番のclassを付けたい。

    2.サイドメニューに出力される<li>の最初と最後に、それぞれ「first」「last」のclassを付けたい。

    管理画面の「メニュー」で、<li>それぞれにCSSクラスを付けられるのを知ったのですが、事情でその作業を省きたい(テーマとして作りたい)ため、functions.phpへの記述で実現させたいのです。

    フォーラムで近い質問をいくつか見つけることができ、できそうだというのはわかったのですが、PHPの知識がなく、自分ではコードを書くことができませんでした。

    自らの勉強不足なので非常に恐縮なのですが、今取り組んでいる案件に組み込めたら非常に助かります。ご教授いただくことが出来れば幸いです。

    現状メニューは、Google検索で発見することができた、以下のような方法で表示させています。

    1)functions.phpへ以下を記述。

    register_nav_menus(array(
        'global-nav' => 'グローバルメニュー',
        'side-nav' => 'サイドメニュー')
    );

    2)管理画面でのメニューの設定で、「gnav」「snav」というメニューを作成し、[テーマの場所]の項目でそれぞれ「グローバルメニュー」と「サイドナメニュー」に割り当てる。

    3)テンプレートに下記の記述をし、「グローバルメニュー」と「サイドナメニュー」を表示させる。

    <?php wp_nav_menu(array(
        'theme_location' => 'global-nav'
    )); ?>
    <?php wp_nav_menu(array(
        'theme_location' => 'side-nav'
    )); ?>

    すると、該当の場所に下記のようなコードが出力されるようで、あらかじめいくつかのidやclassが付いているのですが、それに加えて先述のようなclassを付けたいのです。

    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>

    以上となります。
    何卒よろしくお願い申し上げます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター jim912

    (@jim912)

    maimai73さん、こんにちは。

    カスタムメニューで表示される項目は、 wp_nav_menu_objects というフックを通り、ここでclassなどを自由に追加することが可能です。

    function add_nav_menu_custom_class( $sorted_menu_items ) {
    	$num = 1;
    	foreach ( $sorted_menu_items as $key => $sorted_menu_item ) {
    		$sorted_menu_items[$key]->classes[] = 'menu-order-' . $num;
    		if ( $num == 1 ) {
    			$sorted_menu_items[$key]->classes[] = 'menu-item-first';
    		} elseif ( $num == count( $sorted_menu_items ) ) {
    			$sorted_menu_items[$key]->classes[] = 'menu-item-last';
    		}
    		$num++;
    	}
    	return $sorted_menu_items;
    }
    add_filter( 'wp_nav_menu_objects', 'add_nav_menu_custom_class' );
    トピック投稿者 maimai73

    (@maimai73)

    jim912様

    お世話になります。
    ご返信ありがとうございます!

    書いてくださったコードを早速そのまま入れてみたところ、
    やりたかったことが一気に実現しました。

    こんなに早く解決できるなんて本当に感謝です。
    ありがとうございました。

    私は、現段階でコードの内容をきちんと理解できていないですし、
    フックという言葉も恥ずかしながら初めて聞きました。

    これでも一応、仕事の一部でサイト制作をしておりまして、
    HTMLやCSSは大体わかるのですが、スクリプトの習得が現在課題の
    一つとなっております。

    jim912様のコードを見て、自分は質問の仕方の時点でだいぶスマート
    ではなかったのが何となくですが、わかりました。

    がんばって勉強したいと思います。

    重ねてお礼申し上げます。
    本当にありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「カスタムメニューで出力されるリストへclassを追加したい(連番・最初と」には新たに返信することはできません。