web-dev-qa-db-ja.com

/（または "home"）に私のメニューがcurrent-menu-itemクラスを取得していないとき

私はテーマを微調整するワードプレスのノブですので、私はそれがどのように機能するのか理解しようとしています。私はSEで約10の関連記事を読んでいますが、まだ入手していません。私の問題は以下の通りです：

header.phpは、でメニューを生成するようです。

<?php wp_nav_menu(array('theme_location' => 'nav-menu','container'  => 'div', 'container_class' => 'menu' )); ?>

Wp-adminで、私はメニューを作成しました

"Blog | About | Contact"

これは、ルートと2つのページを指しています。 "について" "連絡"（非常に標準）。さて、私は "active"ページに応じてメニューをスタイルしたいと思います。 "about"と "contact"の場合、これは非常に簡単です。各メニュー項目に対して生成されたクラスには、 current-menu-item が含まれます。しかし、ホームページ上で私の「ブログ」メニュー「li」がクラスを取得するだけのとき

menu-item menu-item-type-custom menu-item-object-custom menu-item-47

したがって、それに応じてスタイルを設定することはできません。フィルタリング、関数の使用などについての記事をいくつか読んだことがありますが、あまりよく理解できていません。 functions.phpで関数を定義したら、後でそれをどこで使用しますか。

任意の洞察力と助けは大歓迎です、

menuscssfilters
2
Massagran

これを機能させるには、メニューadminに行き、pagesセクションで 'view all' と言うタブをクリックする必要があります。それが通常のブログビューであろうと特定のページであろうと、リストの一番上にあなたのホームページのための特別なオプションがあります。それをメニューに追加すれば問題ありません。

enter image description here

5
sanchothefat

メニューはこのコードを使って簡単に生成できます。

<ul>
                <li <?php if(is_home()) { ?> class="active" <?php } ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
                <?php wp_list_pages('depth=1&sort_column=menu_order&title_li=' ); ?>
            </ul>

公開ページのリストを作成するために使用される関数wp_list_pages（）は、表示中のページに対応するリスト項目にクラスcurrent_page_itemを自動的に追加します。

Style.cssファイルに.current_page_itemクラスを追加するだけです。

/* Style the list element */
li.current_page_item{
background:#eee;
color:#777;
}

/* Style the link element */
li.current_page_item a{
text-decoration:underline;
}
0
Sufiyan Ghori

それほどきれいではありませんが（そしてphpでメニュー項目IDを動的に選択することで改善されるかもしれませんが）、これを行うことができます：

     <?php if (is_front_page()) echo
       '<style type="text/css" title="text/css">.menu-item-14 a
         {your current_page_item style here}</style>'
    ;?>

.menu_item-14を現在のホームページのクラスに変更し、current_menu_itemをあなたのCSSにも変更します。

その文を

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

header.phpでは、CSSはメインのスタイルシートの後にロードされます。

0
markratledge

奇妙なことに、ワードプレスはそのページを現在のページとしてピックアップしません。しかし、簡単な解決策はこれです（CSSのみ）。

あなたのstyle.cssで

.home .menu-item-47 {
   /* current-menu-item styles */
}
0
Rob Vermeer