web-dev-qa-db-ja.com

Wp_nav_menu構造にカスタムコードを挿入する方法

テーマ内にメニューを作成するのに<?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => false ) ); ?>を使うことができました。 'items_wrap'でめちゃくちゃになりましたが、正しく表示できませんでした。

Liの前にサブメニューulにimageとcontainer divを追加する必要があります。これは私が欲しい構造です：

    <ul id="nav">
    <li><a href="#">Page</a>
        <ul>
            <img src="<?php bloginfo('template_directory'); ?>/images/nav_ul_tab.png" class="nav_ul_tab" />
            <div class="nav_spacer">
                <li><a href="#">Sub Page</a></li>
                <li><a href="#">Sub Page</a></li>
                <li><a href="#">Sub Page</a></li>
            </div>
         </ul>
    </li>
   </ul>
menuscssnavigation
1
Luke

あなたが欲しいのは無効なマークアップです。 ulが持てる唯一の子はliです。代わりにCSSを使用してください。

#nav ul
{
    padding-top:    40px; /* Your image size. */
    background:     url(/path/to/your/image/img.png) top center no-repeat transparent;
}
5
fuxia

Jqueryを介して画像を挿入することができます。これがコードです。このコードを実行する前に、JQuery JavaScriptがあなたのページにロードされていることを確認してください。

<script type="text/javascript">
   jQuery(document).ready(function(){
        jQuery("#nav li ul .nav_spacer").before('<img src="<?php bloginfo('template_directory'); ?>/images/nav_ul_tab.png" class="nav_ul_tab" />')
   });
</script>
0
Manimaran