WordPress è famoso per essere un CMS semplice ma all’interno molto potente. Vediamo in questo articolo alcune delle “funzionalità nascoste” che ci mette a disposizione.
Pochi lo sanno, ma WordPress ha al suo interno delle funzioni native che il più delle volte non sono selezionate quando facciamo una istallazione pulita del CMS. Una di queste funzioni è la possibilità di aggiungere una descrizione alle voci di menù.
Solitamente questa voce è nascosta di default e il più delle volte i temi di WordPress non supportano questa funzionalità se non sono stati correttamente progettati per questo tipo di opzione.
Ma vediamo insieme come attivare la descrizione per le voci del menù. Come prima cosa, dal pannello Aspetto–>menù di WordPress, selezioniamo in alto a destra la voce “impostazioni schermo”; si abbasserà il menù con una tendina e mettiamo la spunta su Descrizione.
Una volta attivata l’opzione avremo la possibilità di inserire la nostra descrizione e, nel caso il tema lo supporta, avremo il menù con la nostra descrizione personalizzata.
Come inserire il codice per attivare la descrizione
Se invece il nostro tema in WordPress non supporta nativamente questa opzione, dovremo agire sul codice per fa visualizzare la nostra descrizione.
Quindi apriamo il file function.php e aggiungiamo una estensione della classe Walker con le seguenti righe di codice:
class Menu_With_Description extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( “t”, $depth ) : ”;$class_names = $value = ”;
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item ) );
$class_names = ‘ class=”‘ . esc_attr( $class_names ) . ‘”‘;$output .= $indent . ‘</pre>
<ul>
<li id=”"menu-item-‘.”>ID . ‘”‘ . $value . $class_names .’>’;</li>
</ul>
<pre>
$attributes = ! empty( $item->attr_title ) ? ‘ title=”‘ . esc_attr( $item->attr_title ) .'”‘ : ”;
$attributes .= ! empty( $item->target ) ? ‘ target=”‘ . esc_attr( $item->target ) .'”‘ : ”;
$attributes .= ! empty( $item->xfn ) ? ‘ rel=”‘ . esc_attr( $item->xfn ) .'”‘ : ”;
$attributes .= ! empty( $item->url ) ? ‘ href=”‘ . esc_attr( $item->url ) .'”‘ : ”;$item_output = $args->before;
$item_output .= ‘<a’. $attributes .’>’;
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
$item_output .= ‘
<span class=”sub”>’ . $item->description . ‘</span>’;
$item_output .= ”;
$item_output .= $args->after;$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}
Quello che dobbiamo fare ora è trovare wp_nav_menu() (molto probabilmente in header.php) e modificare in questo modo.
<?php $walker = new Menu_With_Description; ?>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’, ‘walker’ => $walker ) ); ?>
[/php]Fatto questo ora dobbiamo impostare lo stile, quindi andiamo nel foglio di stile del tema e aggiungiamo la seguente classe:
[php] .menu-item {
border-left: 1px solid #ccc;
}span.sub {
font-style:italic;
font-size:small;
}
Spero che hai trovato questo articolo interessante ed utile. Se hai domande, lascia un commento qui sotto.
