Personalizarea meniului în WordPress

Înainte de a particulariza aspectul unui meniu, dacă începem o temă WP de la 0, atunci este necesar să înregistrăm codul register_nav_menu( 'primary', 'Meniu principal' ); pentru respectivul meniu în fişierul functions.php. Locaţia meniului este, de regulă, în header.php
Dacă se doreşte afişarea meniului în pagină, se introduce în template-ul acesteia codul <?php wp_nav_menu(); ?> . Simpla identificare a unui anumit meniu în template-ul paginii unde se doreşte a fi afişat ar fi:

wp_nav_menu( array(
    'menu' => 'Meniul personalizat'
) );

wp_nav_menu( array(

'menu' => 'Meniul personalizat'

) );

Acesta ar fi un şablon gata de folosire, cu explicaţii privind parametrii utilizabili..

<?php
wp_nav_menu( array $args = array(
    'menu'              => "", // (int|string|WP_Term) Meniul dorit | Acceptă un ID de meniu, un slug, un nume sau un obiect.
    'menu_class'        => "", // (string) Clasa CSS de utilizat pentru elementul UL care formează meniul. Implicit: "meniu".
    'menu_id'           => "", // (string) ID-ul care este aplicat elementului UL care formează meniul. Implicit este slug-ul de meniu, incrementat.
    'container'         => "", // (string) Dacă necesită "învelirea" UL-ului. Implicit 'div'.
    'container_class'   => "", // (string) Clasa care este aplicată containerului. Implicit: 'menu-{menu slug}-container'.
    'container_id'      => "", // (string) ID-ul care este aplicat containerului.
    'fallback_cb'       => "", // (callable|bool) Dacă meniul nu există, se va declanșa o funcție de callback. Implicit: 'wp_page_menu'. Setați la FALSE pentru a nu exista fallback.
    'before'            => "", // (string) Text înaintea markup-ului linkului.
    'after'             => "", // (string) Text după markup-ul linkului.
    'link_before'       => "", // (string) Text înaintea textului linkului.
    'link_after'        => "", // (string) Text după textul linkului.
    'echo'              => "", // (bool) Dacă se afişează (ECHO/RETURN) meniul. Implicit: TRUE.
    'depth'             => "", // (int) Câte niveluri ierarhice vor fi incluse. Implicit: 0 (care înseamnă tot).
    'walker'            => "", // (object) Instanță a unei clase personalizate de walker.
    'theme_location'    => "", // (string) Locația temei utilizate. Trebuie înregistrat cu register_nav_menu() pentru a putea fi selectat de utilizator.
    'items_wrap'        => "", // (string) Cum ar trebui itemii listei să fie "împachetaţi". Implicit: UL cu un ID şi clasă CSS. Utilizaţi printf() cu placeholders numerotaţi.
    'item_spacing'      => "", // (string) Dacă se păstrează spațiul alb în HTML-ul meniului. Acceptă 'preserve' sau 'discard'. Implicit: 'preserve'.
) );
?>

<?php

wp_nav_menu( array $args = array(

'menu' => "", // (int|string|WP_Term) Meniul dorit | Acceptă un ID de meniu, un slug, un nume sau un obiect.

'menu_class' => "", // (string) Clasa CSS de utilizat pentru elementul UL care formează meniul. Implicit: "meniu".

'menu_id' => "", // (string) ID-ul care este aplicat elementului UL care formează meniul. Implicit este slug-ul de meniu, incrementat.

'container' => "", // (string) Dacă necesită "învelirea" UL-ului. Implicit 'div'.

'container_class' => "", // (string) Clasa care este aplicată containerului. Implicit: 'menu-{menu slug}-container'.

'container_id' => "", // (string) ID-ul care este aplicat containerului.

'fallback_cb' => "", // (callable|bool) Dacă meniul nu există, se va declanșa o funcție de callback. Implicit: 'wp_page_menu'. Setați la FALSE pentru a nu exista fallback.

'before' => "", // (string) Text înaintea markup-ului linkului.

'after' => "", // (string) Text după markup-ul linkului.

'link_before' => "", // (string) Text înaintea textului linkului.

'link_after' => "", // (string) Text după textul linkului.

'echo' => "", // (bool) Dacă se afişează (ECHO/RETURN) meniul. Implicit: TRUE.

'depth' => "", // (int) Câte niveluri ierarhice vor fi incluse. Implicit: 0 (care înseamnă tot).

'walker' => "", // (object) Instanță a unei clase personalizate de walker.

'theme_location' => "", // (string) Locația temei utilizate. Trebuie înregistrat cu register_nav_menu() pentru a putea fi selectat de utilizator.

'items_wrap' => "", // (string) Cum ar trebui itemii listei să fie "împachetaţi". Implicit: UL cu un ID şi clasă CSS. Utilizaţi printf() cu placeholders numerotaţi.

'item_spacing' => "", // (string) Dacă se păstrează spațiul alb în HTML-ul meniului. Acceptă 'preserve' sau 'discard'. Implicit: 'preserve'.

) );

O exemplificare sumară pentru un meniu personalizat ar fi acesta.:

wp_nav_menu( $arie_meniu);
$arie_meniu= array(
 'menu'            => "meniul_meu",
 'container'       => 'div',
 'menu_class'      => 'menu',
 'echo'            => true,
 'fallback_cb'     => 'wp_page_menu',
 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
 'depth'           => 0,
);

wp_nav_menu( $arie_meniu);

$arie_meniu= array(

'menu' => "meniul_meu",

'container' => 'div',

'menu_class' => 'menu',

'echo' => true,

'fallback_cb' => 'wp_page_menu',

'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',

'depth' => 0,

);

Interesantă este funcţia de pe WordPress.org (plasată, desigur, în functions.php), pentru utilizarea clasei .active, astfel încât să fie evidenţiată opţiunea din meniu aferentă paginii curente.

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     IF( in_array('current-menu-item', $classes) ){
             $classes[] = 'active ';
     }
     return $classes;
}

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

function special_nav_class($classes, $item){

IF( in_array('current-menu-item', $classes) ){

$classes[] = 'active ';

}

return $classes;

}

Dacă se doreşte utilizarea meniurilor diferite, în funcţie de logarea pe site:

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

<?php

wp_nav_menu( array(

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

) );

Foarte utilă este şi posibilitatea de a crea un shortcode astfel încât să se simplifice plasarea unui meniu în diferite zone ale site-ului.

Ex. 1

function get_menu($args){
    $menu = isset($atts['menu']) ? $atts['menu'] : '';
    ob_start();
    wp_nav_menu(array(
        'menu' => $menu
    ) );
    return ob_get_clean();
}
add_shortcode('get_menu', 'get_menu');

function get_menu($args){

$menu = isset($atts['menu']) ? $atts['menu'] : '';

ob_start();

wp_nav_menu(array(

'menu' => $menu

) );

return ob_get_clean();

}

add_shortcode('get_menu', 'get_menu');

Acolo unde este necesară plasarea meniului se poate introduce shortcode-ul în maniera următoare: [get_menu menu="Main Menu"] . Dacă se doreşte plasarea într-o pagină PHP (template), se poate folosi scriptul.: <?php echo do_shortcode('[get_menu menu="Main Menu"]'); ?>
Ex. 2

function show_wp_menu_function($atts, $content = null) {     
    extract(shortcode_atts(array(  
        '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'      => '',
        'depth'           => 0,
        'walker'          => '',
        'theme_location'  => ''), 
        $atts));  
  
    return wp_nav_menu( array( 
        'menu'            => $menu, 
        'container'       => $container, 
        'container_class' => $container_class, 
        'container_id'    => $container_id, 
        'menu_class'      => $menu_class, 
        'menu_id'         => $menu_id,
        'echo'            => false,
        'fallback_cb'     => $fallback_cb,
        'before'          => $before,
        'after'           => $after,
        'link_before'     => $link_before,
        'link_after'      => $link_after,
        'depth'           => $depth,
        'walker'          => $walker,
        'theme_location'  => $theme_location));
}
//Create the shortcode
add_shortcode("show_wp_menu", "show_wp_menu_function");

function show_wp_menu_function($atts, $content = null) {

extract(shortcode_atts(array(

'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' => '',

'depth' => 0,

'walker' => '',

'theme_location' => ''),

$atts));

return wp_nav_menu( array(

'menu' => $menu,

'container' => $container,

'container_class' => $container_class,

'container_id' => $container_id,

'menu_class' => $menu_class,

'menu_id' => $menu_id,

'echo' => false,

'fallback_cb' => $fallback_cb,

'before' => $before,

'after' => $after,

'link_before' => $link_before,

'link_after' => $link_after,

'depth' => $depth,

'walker' => $walker,

'theme_location' => $theme_location));

}

//Create the shortcode

add_shortcode("show_wp_menu", "show_wp_menu_function");

Pentru utilizare, se redă shortcode-ul [show_wp_menu menu="wp_menu_name_here" menu_class="my_menu_class"]

Personalizarea meniului în WordPress

Author: Ovidiu.S

Lasă un răspuns Anulează răspunsul