こんばんは。
使用テンプレートはTwentyTenということですが、
「グローバルメニュー」とおっしゃられている部分は実際にどんなテンプレートダグで実装していますか?
なお、外観→メニューでカスタムメニューを作れば
メニュー項目ごとに任意のcssクラスを追加できます。
(たいてい「表示オプション」内に隠れているので見つけてみてください)
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を割り当てることは可能なのでしょうか。
当該部分ですが、
<?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)が対応していません。
カスタムメニューをあえて使わずにやりたい、ということでしたらこんな感じで 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 ディレクトリ内のファイルをいじるのではなく「子テーマ」を活用された方がよいでしょうね。
gatespace様
返信ありがとうございます。
大変分かりやすい解説で勉強になりました。
tecking様
返信ありがとうございます。
頂いたコードでclassを割り振ることができました。
御二方には大変感謝致します。
ありがとうございました。
解決されたところに、なんですが・・・。
teckingさんがおっしゃられている
ただ、今後カスタマイズをかけていくのであれば twentyten ディレクトリ内のファイルをいじるのではなく「子テーマ」を活用された方がよいでしょうね。
の補足として。
TwentyTenはデフォルトテーマの一つですので、
今後もアップデートが提供される可能性があります。
テーマファイル(この場合はfunctions.php)を直接カスタマイズすると
テーマのアップデート時にフォルダ内のファイルが
すべて上書きされますので、
ご自分でカスタマイズした内容がすべて失われてしまいます。
こういった理由から「子テーマ」をつくってカスタマイズした方がよい、ということになります。