web-dev-qa-db-fra.com

Masquer un élément de menu et ses sous-menus et afficher un lien "Connexion" si l'utilisateur est déconnecté

Il me faut, d’une manière ou d’une autre, permettre que lorsque vous vous déconnectez, cet élément "Mon compte" soit masqué de la barre de navigation, mais affiche plutôt un lien "Connexion" . L'élément 'Mon compte' comporte également des sous-menus avec les éléments 'Déconnexion' et 'Suivi de votre commande' . Cela devrait également être masqué (je suppose que cela est masqué lorsque vous masquez le parent 'Mon compte') .

J'utilise le thème Mystile, WordPress et la dernière version de WooCommerce.

Des suggestions comment faire?

Le JSFiddle de la source HTML de mon menu: http://jsfiddle.net/qcuckt1f/

<nav id="navigation" class="col-full parent" role="navigation">
    <ul id="main-nav" class="nav fr parent">
        <li id="menu-item-68" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-68"><a href="http://renhud.square-brain.com/">Forside</a>
        </li>
        <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://renhud.square-brain.com/butik/">Butik</a>
        </li>
        <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://renhud.square-brain.com/support/">Kundeservice</a>
        </li>
        <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-has-children menu-item-62 parent"><a href="http://renhud.square-brain.com/min-konto/">Min Konto</a>
            <ul class="sub-menu">
                <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="http://renhud.square-brain.com/min-konto/track-din-ordre/">Track din ordre</a>
                </li>
                <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://renhud.square-brain.com/min-konto/log-ud/">Log Ud</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
phpfunctionstheme-developmentmenuswoocommerce
1
Magnus Pilegaard

Il semble que le PO ait réussi à résoudre son problème en procédant de la sorte, à l'adresse suivante: Différents menus pour les utilisateurs connectés .

if ( is_user_logged_in() ) {
     wp_nav_menu( array( 'theme_location' => 'logged-in-menu' ) );
} else {
     wp_nav_menu( array( 'theme_location' => 'logged-out-menu' ) );
}

Pour ce faire, le moyen le plus rapide consiste à effectuer cette opération, à savoir la version { publiée dans la nouvelle version developer.wordpress.org :

wp_nav_menu( array(
    'theme_location' => is_user_logged_in() ? 'logged-in-menu' : 'logged-out-menu'
) );

Le moyen le plus simple d’y parvenir sans créer deux menus différents est d’utiliser une fonction 'walker' personnalisée:

  1. Recherchez la classe de marcheur personnalisée utilisée par votre thème dans sa wp_nav_menu():

    wp_nav_menu( array(
    // More arguments here..
    'walker'         => new Your_Theme_Custom_Nav_Walker(),
) );

  2. Écrivez une nouvelle classe dans votre "functions.php" , étendez Your_Theme_Custom_Nav_Walker class (vous pouvez facilement rechercher sa déclaration à l'aide d'un IDE) ou étendre la classe Walker_Nav_Menu si vous n'utilisez pas tout marcheur personnalisé et copiez la fonction nécessaire (s) pour modifier, principalement la fonction start_el(), de cette classe de marcheur dans leur déclaration. Voici la classe personnalisée simple qui étend le Walker_Nav_Menu que je construis pour répondre à vos besoins:

    class WP_Custom_Nav_Walker extends Walker_Nav_Menu {

/**
 * Start the element output.
 *
 * @see Walker::start_el()
 *
 * @since 3.0.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param object $item   Menu item data object.
 * @param int    $depth  Depth of menu item. Used for padding.
 * @param array  $args   An array of arguments. @see wp_nav_menu()
 * @param int    $id     Current item ID.
 */
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;

    /**
     * Filter the CSS class(es) applied to a menu item's list item element.
     *
     * @since 3.0.0
     * @since 4.1.0 The `$depth` parameter was added.
     *
     * @param array  $classes The CSS classes that are applied to the menu item's `<li>` element.
     * @param object $item    The current menu item.
     * @param array  $args    An array of {@see wp_nav_menu()} arguments.
     * @param int    $depth   Depth of menu item. Used for padding.
     */
    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

    /**
     * Filter the ID applied to a menu item's list item element.
     *
     * @since 3.0.1
     * @since 4.1.0 The `$depth` parameter was added.
     *
     * @param string $menu_id The ID that is applied to the menu item's `<li>` element.
     * @param object $item    The current menu item.
     * @param array  $args    An array of {@see wp_nav_menu()} arguments.
     * @param int    $depth   Depth of menu item. Used for padding.
     */
    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';


    // MODIFICATION STARTS HERE!!
    $output .= $indent . '<li' . $id . $class_names;

    if (apply_filters('the_title', $item->title, $item->ID) === 'My Account') {
        if ( is_user_logged_in() ) {
            $output .= '>';
        } else {
            $output .= '><a href="' . get_site_url() . '/wp-login.php">Log in</a></li>';
            $output .= '<li style="display: none">';
        }
    } else {
        $output .= '>';
    }
    // MODIFICATION ENDS HERE!!


    $atts = array();
    $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
    $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
    $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
    $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

    /**
     * Filter the HTML attributes applied to a menu item's anchor element.
     *
     * @since 3.6.0
     * @since 4.1.0 The `$depth` parameter was added.
     *
     * @param array $atts {
     *     The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored.
     *
     *     @type string $title  Title attribute.
     *     @type string $target Target attribute.
     *     @type string $rel    The rel attribute.
     *     @type string $href   The href attribute.
     * }
     * @param object $item  The current menu item.
     * @param array  $args  An array of {@see wp_nav_menu()} arguments.
     * @param int    $depth Depth of menu item. Used for padding.
     */
    $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

    $attributes = '';
    foreach ( $atts as $attr => $value ) {
        if ( ! empty( $value ) ) {
            $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
            $attributes .= ' ' . $attr . '="' . $value . '"';
        }
    }

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    /** This filter is documented in wp-includes/post-template.php */
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

    /**
     * Filter a menu item's starting output.
     *
     * The menu item's starting output only includes `$args->before`, the opening `<a>`,
     * the menu item's title, the closing `</a>`, and `$args->after`. Currently, there is
     * no filter for modifying the opening and closing `<li>` for a menu item.
     *
     * @since 3.0.0
     *
     * @param string $item_output The menu item's starting HTML output.
     * @param object $item        Menu item data object.
     * @param int    $depth       Depth of menu item. Used for padding.
     * @param array  $args        An array of {@see wp_nav_menu()} arguments.
     */
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

}

  3. Vous pouvez utiliser ce WP_Custom_Nav_Walker comme ceci:

    wp_nav_menu( array(
    // More arguments here..
    'walker'         => new WP_Custom_Nav_Walker(),
) );

Vous pouvez vérifier cette réponse pour un autre exemple, comment procéder.

3
5ervant

Vous pouvez utiliser la fonction WordPress is_user_logged_in() pour vérifier cela et créer des instructions if de base pour afficher et masquer le code approprié.

1
Brian