1

私は次のことを行う方法について頭を悩ませることができません。

私のウェブサイトにはメニューがあります：

ホーム | について | スキル | ポートフォリオ | コンタクト

上記のメニューを呼び出すには、header.php ファイルに以下を記述します。

<nav>
             <?php wp_nav_menu( $args ); ?> 

        </nav>

ページがアクティブになると、リンクの背景色が変わります。生成された CSS と HTML は次のとおりです。

header ul li a
      {
border-radius: 4px;
    background-color: transparent;
    border: 1px solid transparent;
    color: #939393;
    margin: 0px;
    border-image: initial;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 18px;
    text-decoration: none;
      }

    header ul li.current-menu-item a,
    header ul li a:hover
      {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.042);
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin: 0;
    border-image: initial;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    color: #939393;
      }

    header ul li.selected {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.042);
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin-top: -3px;
    border-image: initial;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
    color: #939393;
     }

生成された HTML は次のとおりです。

<nav>
   <div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="menu"><li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://localhost:8888/paulkenyon/home/">Home</a></li>
   <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://localhost:8888/paulkenyon/about/">About</a></li>
   <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://localhost:8888/paulkenyon/skills/">Skills</a></li>
   <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://localhost:8888/paulkenyon/portfolio/">Portfolio</a></li>
   <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://localhost:8888/paulkenyon/contact/">Contact</a></li>
   <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-50 current_page_item menu-item-52"><a href="http://localhost:8888/paulkenyon/blog/">Blog</a></li>
   </ul></div> 

        </nav>

上記は正常に機能しますが、私が達成しようとしているのは、ユーザーがブログ投稿またはアーカイブをクリックするか、「ブログ」リンクを異なる色の背景画像で強調表示したままにするカテゴリを選択したときです。

現時点では何も表示されません。「ブログ」アンカーを強調表示するために、すべての単一ページとアーカイブページを示す機能はありますか?

4

2 に答える 2

4

この投稿がまだ適切かどうかはわかりませんが、今日、JavaScript を使用して特定の ID をターゲットにすることなく、かなり動的な方法で同様の問題を解決しました。

body HTML タグでは、必ず次のように body_class 関数を使用してください。

<body <?php body_class(); ?>>

これにより、現在表示しているページを反映する便利な CSS クラスを提供するよう WordPress に指示します。たとえば、現在アーカイブ ページを表示している場合、body タグにはarchiveCSS クラスが含まれます。カテゴリ ページにいる場合は body タグにcategoryクラスがあり、単一の投稿ページにいる場合は body タグにsingle-postクラスなどがあります (要素を調べて、WordPress によって提供される追加のクラスを確認します)。

次に、WordPress 管理インターフェースの「メニュー」ページでターゲット メニュー項目に CSS クラスを指定します (「画面オプション」ペインで「CSS クラス」オプションが選択されていることを確認してください)。ブログのメニュー項目の場合、おそらくmenu-item-blog.

次のように、単一の投稿ページにいるときに、CSS を使用して「ブログ」メニュー項目を具体的にターゲットにすることができるようになりました。

body.single-post .menu-item-blog {
    /* Your highlight style goes here */
}

個々のメニュー項目にカスタム CSS クラスを設定する必要があるため、これが完璧なソリューションではないことはわかっていますが、コードではなく管理インターフェイスから実現できることが気に入っています。

これが役立つことを願っています！

于 2013-03-10T01:49:37.413 に答える
1

ここに小さなphpとjqueryの組み合わせスクリプトがあります。

WordPress の PHP 関数は、ページがアーカイブ、カテゴリ、または単一の投稿ページであるかどうかを確認します。

次に、Jquery の助けを借りて、 "Blog" li であるID "menu-item-52"を持つクラス " current-menu-item"を liに追加します。

WordPress ブログのヘッダーに以下のスクリプトを追加してください。

<?php

if(is_archive() || is_category() || is_single())
{
    ?>
    <script type="text/javascript">
    $(document).ready(function(){

        $("li#menu-item-52").addClass("current-menu-item");

    });
    </script>
    <?  

}


?>
于 2012-10-03T11:46:17.307 に答える