web-dev-qa-db-ja.com

is_user_logged_in（）以外の場合は、ナビゲーションボタンをグレー表示にします。

ユーザーが特別なナビゲーションバーに登録した場合、私が提供するいくつかの機能をユーザーに見せたいのですが。私はこれをログイン版とログアウト版のために作成しました：

if ( is_user_logged_in() ) {
    $menu = wp_nav_menu( array(
        'theme_location' => 'logged-in-menu',
        'container'      => '0',
        'fallback_cb'    => 'wp_page_menu',
        'echo'           => '0',
    ) );
    echo $menu;
} else {
    $menu = wp_nav_menu( array(
        'theme_location' => 'main-menu',
        'container'      => '0',
        'fallback_cb'    => 'wp_page_menu',
        'echo'           => '0',
    ) );
    ?>
    <style>#menu-item-1046{opacity : 0.4; filter: alpha(opacity=40);}</style>
    <?php
    echo $menu;
}

IDでナビゲーションボタンをグレー表示にします（無効にしますが表示したままにします）。明らかにそこに私のCSSは動作しますが、ボタンを無効にしません...

<script>$('#menu-item-1046').button('disable');</script>を試しましたが、今のところjQueryにはほとんど手を出していません。

menuscssnavigation
1
Ben Racicot

を引数 で見ると、カスタムナビゲーションメニューのwalkerクラスを追加するオプションもあることがわかります。

$defaults = array(
    'theme_location'  => '',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
);
wp_nav_menu( $defaults );

ウォーカーは次のように実装されます。

$walker = new WPSE90265_Nav_Menu_Walker();

wp_nav_menu( array( 
    # ...
    'walker' => $walker
    # ...
) );

デフォルトのナビゲーションメニューを拡張する必要があるので、再定義する必要があるメソッドを上書きするだけで済みます。

class WPSE90265_Nav_Menu_Walker extends Walker_Nav_Menu
{
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        if ( ! is_user_logged_in() )
            $output = str_replace( 
                 'class="'
                ,'disabled class="'
                ,$output
            );

        parent::start_el( $output, $item, $depth, $args, $id );
    }
}

disabled引数は特定のHTML要素/タグに対してのみ機能することに注意してください。それが機能する検索を行い、それに従ってあなたの歩行者を変更してください。そのようなタグを使用できない場合は、ウォーカーの内側にonClick="return false;"を追加することもできます。

1
kaiser

メニュー項目はボタンではないため、.button（無効）は使用できません。このコードと上記のCSSを組み合わせてください。

jQuery(document).ready(function() {    
     $('#menu-item-1046').click(function(){return false;});
});
0
MaxxDinh