サポート » 使い方全般 » グローバルメニューの「ホーム」にclassを割り振りたい

  • 解決済 Bicepper

    (@bicepper)


    WordPress初心者です。
    現在固定ページとして挿入したメニューのリンクを画像に差し替えているのですが、最初からある「ホーム」にもclassを割り振りたいと考えています。
    作成した固定ページであれば、

    <ul>
    <li class="page_item page-item-○○">
    <li class="page_item page-item-○○">
    <li class="page_item page-item-○○">
    </ul>

    のように「page-item-○○(○○には数字)」と自動的にclassが割り当てられますが、ホームには「page-item、page-item-○○」といったclassが付きません。
    この「ホーム」にもclassを付けるにはどうすればよいのでしょうか。
    使用テンプレートはtwentytenです。

    何卒よろしくお願いします。

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

    (@gatespace)

    こんばんは。
    使用テンプレートはTwentyTenということですが、
    「グローバルメニュー」とおっしゃられている部分は実際にどんなテンプレートダグで実装していますか?

    なお、外観→メニューでカスタムメニューを作れば
    メニュー項目ごとに任意のcssクラスを追加できます。
    (たいてい「表示オプション」内に隠れているので見つけてみてください)

    トピック投稿者 Bicepper

    (@bicepper)

    gatespace様

    早速のお返事ありがとうございます。
    実際のテンプレートですが、twentytenのheader.phpの以下の部分をそのまま使用しております。

    <div id="access" role="navigation">
    <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
    <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
    <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    </div><!-- #access -->

    グローバルメニューは、管理画面の「固定ページ」から固定ページを作成した際に出力されるリンクを使用しており、カスタムメニューからは作成していません。

    固定ページの表示オプションからcssを割り当てることは可能なのでしょうか。

    モデレーター gatespace

    (@gatespace)

    当該部分ですが、

    <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
    <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

    でナビゲーションを出力しています。(英語で説明が書かれています)
    要約すると wp_nav_menu でカスタムメニューを出力しますが、
    「外観」→「メニュー」カスタムメニューを作り、
    さらにそのカスタムメニューが「primary」に当てられていない場合、
    TwentyTenは wp_page_menu を使ってナビゲーションを出力しています。
    wp_nav_menuとwp_page_menuの違いはCodexを参照してください。

    なお、wp_page_menuはデフォルトでホームへのリンクは作成されません。
    ですので、TwentyTenではfunctions.phpでフィルターをかけてホームへのリンクを追加するようにコードが書かれています。(221行目以降)

    function twentyten_page_menu_args( $args ) {
    	$args['show_home'] = true;
    	return $args;
    }
    add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );

    この際、ホームを囲んでいる li にクラスは付与されません。
    ここまでが、当該部分の現状での説明です。

    Bicepperさんがやりたいことをなるべく簡単に(テンプレートファイルは弄らないで)
    実現するのならば、
    やはり、外観→メニューでカスタムメニューを作成し、
    同じ画面内の「テーマの場所」で新しく作ったカスタムメニューを割り当ててください。
    既に作成されたページについては自分で「固定ページ」ボックス内から選ばなければなりませんが、「トップレベルのページを自動的に追加する」にチェックを入れておけば、文字通り、自動で追加されていきます。
    その際に、このページ内の表示オプションで「css」を表示してください。
    メニュー要素ごとに任意のクラスを付与できます。

    固定ページの表示オプションからcssを割り当てることは可能なのでしょうか。

    できません。

    なお、:first-child疑似クラスを使えば、CSSのみで解決できますが、
    古いIE(6)が対応していません。

    tecking

    (@tecking)

    カスタムメニューをあえて使わずにやりたい、ということでしたらこんな感じで twentyten ディレクトリの functions.php の最後に追記してはどうでしょう?
    (コード内の hoge を任意のクラス名に書き換えてください)

    function my_add_class( $str ) {
    	$home = get_home_url() . "/";
    	$str  = preg_replace( "!(href=\"{$home}\")!", "$1 class=\"hoge\"", $str );
    	return $str;
    }
    add_filter( 'wp_page_menu', 'my_add_class' );

    ただ、今後カスタマイズをかけていくのであれば twentyten ディレクトリ内のファイルをいじるのではなく「子テーマ」を活用された方がよいでしょうね。

    トピック投稿者 Bicepper

    (@bicepper)

    gatespace様

    返信ありがとうございます。
    大変分かりやすい解説で勉強になりました。

    tecking様
    返信ありがとうございます。
    頂いたコードでclassを割り振ることができました。

    御二方には大変感謝致します。
    ありがとうございました。

    モデレーター gatespace

    (@gatespace)

    解決されたところに、なんですが・・・。

    teckingさんがおっしゃられている

    ただ、今後カスタマイズをかけていくのであれば twentyten ディレクトリ内のファイルをいじるのではなく「子テーマ」を活用された方がよいでしょうね。

    の補足として。

    TwentyTenはデフォルトテーマの一つですので、
    今後もアップデートが提供される可能性があります。

    テーマファイル(この場合はfunctions.php)を直接カスタマイズすると
    テーマのアップデート時にフォルダ内のファイルが
    すべて上書きされますので、
    ご自分でカスタマイズした内容がすべて失われてしまいます。

    こういった理由から「子テーマ」をつくってカスタマイズした方がよい、ということになります。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「グローバルメニューの「ホーム」にclassを割り振りたい」には新たに返信することはできません。