Erinev menüü poes ja blogis, peidetud elemendid rolli järgi, dünaamiline kasutajanimi – koodinäited child theme jaoks ilma pluginateta.

Sisukord

WordPress registreerib menüüpositsioone teemas ja kuvab need kõikjal ühtemoodi. Enamikul saitidel on see täiesti piisav. Aga mõnikord on vaja rohkem kontrolli: erinev navigatsioon poes ja blogis, peidetud menüüelemendid tavakasutajatele, lihtsustatud menüü mobiilil, lisanäidata kirjeid sisselogitud kasutajatele.

Kõik need on lahendatavad kas funktsioonide või tingimusliku CSS-iga – ilma pluginateta.

1. Erinevad menüüd erinevatele lehetüüpidele

Menüüpositsioonide registreerimine

Registreeri mitu menüüpositsiooni:

// functions.php
function hnd_register_menus() {
    register_nav_menus( array(
        'primary'    => 'Peamenüü',
        'shop'       => 'Poe menüü',
        'blog'       => 'Blogi menüü',
        'footer'     => 'Jaluse menüü',
        'mobile'     => 'Mobiilmenüü',
    ) );
}
add_action( 'after_setup_theme', 'hnd_register_menus' );

Õige menüü kuvamine lehekülge põhjal

// functions.php – abifunktsioon
function hnd_get_menu_location() {

    // WooCommerce poe lehed – kuva poe menüü
    if ( function_exists( 'is_woocommerce' ) && 
         ( is_woocommerce() || is_cart() || is_checkout() ) ) {
        return 'shop';
    }

    // Blogipostitus või kategooria – kuva blogi menüü
    if ( is_singular( 'post' ) || is_home() || is_category() || is_tag() ) {
        return 'blog';
    }

    // Kõikjal mujal – peamenüü
    return 'primary';
}

Kasutus teema template failis:

// header.php või navigation.php
wp_nav_menu( array(
    'theme_location' => hnd_get_menu_location(),
    'container'      => 'nav',
    'container_class' => 'hnd-navigation',
    'menu_class'     => 'hnd-menu',
    'fallback_cb'    => false,
) );

2. Menüüelemendid kasutajate rollide järgi

Peida/näita menüüelemendid sisselogimise alusel

Kõige lihtsam juhtum – erinevad elemendid sisselogitud ja väljalogitud kasutajatele:

// Lisa CSS klass menüüelementidele rolli põhjal
add_filter( 'nav_menu_css_class', 'hnd_menu_item_classes', 10, 2 );

function hnd_menu_item_classes( $classes, $item ) {
    // Kui menüüelemendi pealkirjas on [logged-in] – näita ainult sisselogituile
    if ( strpos( $item->title, '[logged-in]' ) !== false ) {
        if ( ! is_user_logged_in() ) {
            $classes[] = 'hnd-hidden';
        }
        // Eemalda [logged-in] tekst pealkirjast
        $item->title = str_replace( '[logged-in]', '', $item->title );
    }

    // Kui pealkirjas on [logged-out] – näita ainult väljalogituile
    if ( strpos( $item->title, '[logged-out]' ) !== false ) {
        if ( is_user_logged_in() ) {
            $classes[] = 'hnd-hidden';
        }
        $item->title = str_replace( '[logged-out]', '', $item->title );
    }

    return $classes;
}

// Peida CSS klassiga elemendid
add_action( 'wp_head', function() {
    echo '<style>.hnd-hidden { display: none !important; }</style>';
});

Kasutus admin menüüs: lisa menüüelemendi pealkirja [logged-in] (nt “Minu konto [logged-in]”) või [logged-out] (nt “Logi sisse [logged-out]”).

Spetsiifiliste rollide põhjal

add_filter( 'nav_menu_css_class', 'hnd_menu_item_role_classes', 10, 2 );

function hnd_menu_item_role_classes( $classes, $item ) {

    // [role-admin] – ainult administraatoritele
    if ( strpos( $item->title, '[role-admin]' ) !== false ) {
        if ( ! current_user_can( 'manage_options' ) ) {
            $classes[] = 'hnd-hidden';
        }
        $item->title = str_replace( '[role-admin]', '', $item->title );
    }

    // [role-customer] – ainult WooCommerce klientidele
    if ( strpos( $item->title, '[role-customer]' ) !== false ) {
        if ( ! current_user_can( 'read' ) || ! is_user_logged_in() ) {
            $classes[] = 'hnd-hidden';
        }
        $item->title = str_replace( '[role-customer]', '', $item->title );
    }

    return $classes;
}

3. Dünaamiline menüüelement – kasutajanimi ja lingid

Lisa menüüsse dünaamilised elemendid – nt “Tere, [kasutajanimi]” ja WooCommerce konto link:

add_filter( 'wp_nav_menu_items', 'hnd_dynamic_menu_items', 10, 2 );

function hnd_dynamic_menu_items( $items, $args ) {

    // Ainult peamenüüs
    if ( $args->theme_location !== 'primary' ) {
        return $items;
    }

    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        $account_url  = function_exists( 'wc_get_account_endpoint_url' ) 
                        ? wc_get_account_endpoint_url( 'dashboard' ) 
                        : get_permalink( get_option( 'woocommerce_myaccount_page_id' ) );

        $items .= '<li class="menu-item hnd-user-menu">';
        $items .= '<a href="' . esc_url( $account_url ) . '">';
        $items .= 'Tere, ' . esc_html( $current_user->display_name );
        $items .= '</a></li>';

    } else {
        $login_url = function_exists( 'wc_get_account_endpoint_url' )
                     ? wc_get_account_endpoint_url( 'dashboard' )
                     : wp_login_url();

        $items .= '<li class="menu-item hnd-login-menu">';
        $items .= '<a href="' . esc_url( $login_url ) . '">Logi sisse</a>';
        $items .= '</li>';
    }

    return $items;
}

4. Mobiilmenüü eraldi loogikaga

Mobiilil on sageli vajalik lihtsustatud menüü – vähem elemente, teised lingid. Kaks lähenemist:

CSS-iga (lihtsam)

/* Peida teatud menüüelemendid mobiilil */
@media (max-width: 768px) {
    .menu-item.desktop-only {
        display: none !important;
    }
}

/* Peida teatud elemendid desktopil */
@media (min-width: 769px) {
    .menu-item.mobile-only {
        display: none !important;
    }
}

Lisa CSS klassid menüüelementidele WordPress admin menüü halduses (Screen Options → CSS Classes peab olema sisse lülitatud).

PHP-ga (paindlikum – eraldi menüü mobiilile)

// header.php
?>
<!-- Desktop menüü -->
<div class="hnd-desktop-nav">
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</div>

<!-- Mobiilmenüü – eraldi, lihtsustatud -->
<div class="hnd-mobile-nav">
    <?php wp_nav_menu( array( 'theme_location' => 'mobile' ) ); ?>
</div>
<?php

CSS:

.hnd-mobile-nav { display: none; }

@media (max-width: 768px) {
    .hnd-desktop-nav { display: none; }
    .hnd-mobile-nav { display: block; }
}

5. Menüü tingimuslik laadimine jõudluse aspektist

Menüüd laadivad PHP kaudu ja on tavaliselt vahemälustatud – ei ole suur jõudlusprobleem. Aga suur menüü koos mega-menüü pluginaga võib lisada skripte ja stiile.

Mega-menüü CSS ja JS tingimuslik laadimine – ainult lehtedel kus menüü on nähtav:

add_action( 'wp_enqueue_scripts', 'hnd_mega_menu_conditional' );

function hnd_mega_menu_conditional() {
    // Ära laadi mega-menüü skripte checkout ja cart lehel
    // kus kasutatakse lihtsustatud menüüd
    if ( function_exists( 'is_checkout' ) && ( is_checkout() || is_cart() ) ) {
        wp_dequeue_style( 'mega-menu-style' );
        wp_dequeue_script( 'mega-menu-script' );
    }
}

Kokkuvõte

WordPress menüü tingimuslik laadimine on kasulik kolmes olukorras:

Erinevad lehetüübid – poe menüü vs blogi menüü vs avalehekülje menüü. Registreeri mitu positsiooni, kasuta tingimusfunktsioonid õige positsiooni valimiseks.

Kasutajate rollid – sisselogitud vs väljalogitud, administraator vs tavakasutaja. Lihtsaim lähenemine on CSS klasside lisamine menüüelementidele rolli põhjal, peidetud display: none abil.

Mobiil vs desktop – eraldi menüüpositsioon mobiilile või CSS-põhine peitmine. CSS lähenemine on lihtsam, PHP lähenemine paindlikum.

Kõik lahendused käivad child theme’i functions.php – pluginat ei ole vaja.