web-dev-qa-db-ja.com

Topmenuに基づくマイナーなcss-change - どうやって？

私はトップ（ルート）メニューの選択に基づいてマイナーなCSSの変更を加えたいです。

WPでこれを処理するための適切な方法は何ですか？

// edit //これはウェブサイト（ページ）でブログは作成されていない、そして基本的にはリンクや画像の色は選択されたトップメニュー項目に依存するはずです。

例、ページ構造：

 *開始
 *製品
 *商品カテゴリー
 *製品
 *サービス
 [*] *入れ子[*] *連絡先[*] *本社[*] *スタッフ一覧[*] *海外[*] *その他のリスト[*]

トップレベルはトップメニュー、1レベル、およびネストされた左メニューのレベル2と3にあります。サイドメニューのマイナーカラーアイテムは、選択したトップメニューアイテムに応じて変わります。

//編集終了//

さん、/ t

menuscmstemplate-tags
1
user4569

私の答えは<body>フィルタを通してbody_class要素にクラスを追加します。これはおそらく、ページ上の任意の要素に追加の書式設定を適用する最も簡単な方法です。追加されたクラスはwpse14430_products、wpse14430_servicesまたはwpse14430_contactです（あなたの例のトップページのスラッグに基づいて）。

wp_nav_menu()を使う

wp_nav_menu()を使ってメニューを表示すると、WordPressはメニュー項目のツリーを作ります。この情報を使用して現在の商品のトップページを取得できます。唯一の問題：私たちは<body>タグでそれを必要としています、したがってメニューがレンダリングされる前に。解決策はメニューを変数に保存することで、後でそれをエコーし​​ます。

例としてTwenty Tenテーマを取り上げて、私はwp_nav_menu()呼び出しを最初の<?phpブロックに移動します。

$wpse14430_menu = wp_nav_menu( array(
    'container_class' => 'menu-header',
    'theme_location' => 'primary',
    'echo' => false,
) );

そして、以前はそれを呼び出していましたが、今度は保存した出力をエコーし​​ます。

echo $wpse14430_menu;

wp_nav_menu()には メニュー項目が順序付けられてクラスが になった後に）という名前の興味深いフィルタがあります。クラスには先祖情報がすでに含まれています。

add_filter( 'wp_nav_menu_objects', 'wpse14430_wp_nav_menu_objects' );
function wpse14430_wp_nav_menu_objects( $sorted_menu_items )
{
    // The items are in menu order, so the first match is the top item
    foreach ( $sorted_menu_items as $menu_item ) {
        if ( $menu_item->current || $menu_item->current_item_ancestor ) {
            $GLOBALS['wpse14430_top_page'] = get_post( $menu_item->object_id );
            break;
        }
    }
    return $sorted_menu_items;
}

トップページが表示されたので、これをボディクラスに追加するだけです。

add_filter( 'body_class', 'wpse14430_body_class_menu' );
function wpse14430_body_class_menu( $body_class )
{
    if ( isset( $GLOBALS['wpse14430_top_page'] ) ) {
        $body_class[] = 'wpse14430_' . $GLOBALS['wpse14430_top_page']->post_name;
    }
    return $body_class;
}

メニュー構造としてのページの使用

wp_nav_menu()を使用せずにページの直接順序を使用する場合は、先祖を確認することもできます。新しいメニューシステムを使用してメニューを定義しなくてもwp_nav_menu()（代替機能）を介してページリストを表示する場合は、上記のシステムでうまくいくことを覚えておいてください。

add_filter( 'body_class', 'wpse14430_body_class_pages' );
function wpse14430_body_class_pages( $body_class )
{
    if ( is_page() ) {
        $null = null;
        $top_page = get_post( $null );
        $ancestors = get_post_ancestors( $top_page );
        if ( $ancestors ) {
            $top_page = get_post( array_pop( $ancestors ) );
        }
        $body_class[] = 'wpse14430_' . $top_page->post_name;
    }
    return $body_class;
}
7
Jan Fabry

Wp_list_pages/categoriesまたは組み込みのメニュービルダーを使用してメニューを出力している場合は、各ページまたはカテゴリのリンクにスタイルを設定できるクラスが与えられます。これは、ユーザーが現在アクセスしているページまたは猫に、「アクティブ」に見えるようにスタイルを設定できるクラスがあることを意味します。

親ページのリンクが表示されます。

current_page_itemまたはcurrent-menu-item（トップレベルのアクティブ時）current_page_ancestorまたはcurrent-menu-ancestor（最初の子がアクティブ時）

カテゴリのリンクが表示されます。

current-cat（トップレベルがアクティブのとき）current-cat-parent（最初の子がアクティブのとき）

深さに応じて、メニュー項目のliタグにWPが自動的に挿入されるクラスが他にもあります。

私はこれがあなたがしたいと思っていたことであると思います、それで私はそれが助けを願っています。

0
Mark