1

まず第一に、私は開発者ではなく、独学で学んでいるだけです。私はまだphpとjavascriptを深く理解していません。

私は自分の WordPress サイトをテスト対象として、また学習の場として開発しています。320Press WP-Bootstrap という親テーマを持つカスタム子テーマで Twitter ブートストラップを使用しました。私はこの分野では問題ありません。それのphp側でのみ。

トップ ナビゲーション バー メニューに関する問題に直面しています。目的のメニュー項目の .active クラスを起動できませんでした。

メニューは、メニュー追加ウィジェットを使用して管理パネルから作成されます。メニューの親項目は BLOG と呼ばれ、その子項目は BLOG のカテゴリです。基本的に、ブログ メニューは TOP NAV BAR MENU の子アイテムです。私の TOP NAV BAR MENU には、ホーム、ブログ、および情報メニューがあります。ブログ メニューをクリックすると、テーマのドロップ ダウン メニュー機能がトリガーされ、利用可能なブログ カテゴリが表示されます。パーマリンク設定をhttp://mysite.com//blog/%postname%/のようなカスタム構造に設定しました

静的ページを作成し、ホームページとして設定しました。アクティブなクラスは、その URL、ルート ドメインで動作しています。私のテーマの function.php は、現在のメニュー項目クラスをターゲットにして、.active クラスを追加しています。しかし、ブログ セクション (カスタム ページでもあります) に移動すると、アクティブなクラスがナビゲーション メニューの「ブログ」に追加されません。メニュー「ブログ」は、管理メニュー ウィジェット経由で追加されました。

あるユーザーは、サーバー側でこの問題に取り組むことを提案したので、彼はいくつかの php コードを追加することを意味していると思います。

しかし、私はまだそのスキルを持っていません。しかし、wordpress には codex が用意されているため、コードをコピーして貼り付けて微調整する必要があるかもしれません。しかし、それを微調整するには、まだ PHP のスキルが必要です。ネットで同様の問題をいくつか検索し、いくつかの有効な解決策を見つけましたが、特定の問題を解決するためにそれを実装する方法がわかりません。

ここでいくつかの同様の質問を見つけました：

現在のURLに基​​づくメニュー項目へのjqueryアクティブクラス

URL に基づいてアクティブ リンクを設定する

現在の URL に基づいてクラスを追加する方法

しかし、それを実装する方法がわかりません。

これもワードプレスフォーラムから見つけました。値を自分の値に置き換えましたが、機能していません。

これは、WordPress のナビゲーション メニューの外観です。

<div class="nav-collapse collapse">
    <ul class="nav">
        <li class="cateogry-1">Home</a></li>
        <li class="this-shall-become-active"><a data-toggle="dropdown" class="dropdown-toggle" title="blog">Blog<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li class="category-1"><a href="../blog/cat1">Blog Category 1</a></li>
                <li class="category-2"><a href="../blog/cat2">Blog Category 2</a></li>
            </ul>
        </li>
        <li class="somelink1"><a href="#">Some Link 1</a></li>
        <li class="somelink2" ><a href="#">Some Link 2</a></li>
    </ul>                           
</div>

<li>主な目標はul#nav、ユーザーが mysite.com/blog および /blog パスの下にある他のすべてのページを閲覧しているときに、ブログ メニューに .active クラスを追加することです。

更新 1

ナビゲーションに current_page_parent または current_page_ancestor が見つかりません。

更新 2

wordpressコーデックスサイトを読んで、これを見つけました

add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
function add_menu_parent_class( $items ) {

$parents = array();
foreach ( $items as $item ) {
    if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
        $parents[] = $item->menu_item_parent;
    }
}

foreach ( $items as $item ) {
    if ( in_array( $item->ID, $parents ) ) {
        $item->classes[] = 'menu-parent-item'; 
    }
}

return $items;    
 }

親<li>にクラス名を追加します。これをさらにターゲットにして、.active クラス名を追加できるようになりました。

ここで、.active クラスを menu-parent-item に追加するコードが必要でした。

4

2 に答える 2

1

location.pathname を使用して、ロード時に DOM を操作できる必要があります。

$(document).ready(function(){
   var currentLocation = location.pathname;
   if (currentLocation == "/test/1"){
      $("#page1").addClass("active");
   }
});

それが役に立てば幸い。

于 2013-07-03T22:02:32.937 に答える
0

徹底的な試行錯誤と研究の末。私は最終的に私の問題の解決策を見つけました。

私の場合、この解決策はうまくいきました。以下のコードを子テーマの function.php に貼り付けました

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
         if( in_array('current-menu-parent', $classes) ){
                         $classes[] = 'active ';
         }
         return $classes;
}

上記のコードは、このwordpress トピックから取得されました。

そして、私は自分のニーズに合わせて少し変更しました。

これは、作業結果のスクリーンショットです。

ここに画像の説明を入力

于 2013-07-05T00:26:24.840 に答える