Modifichiamo il menu' di WordPressWordPress Menu Tricks

In questo articolo vedremo come portare la personalizzazione del menu’ di WordPress ad un livello superiore.This post is an Italian translation of the original article http://themeshaper.com/wordpress-menu-tricks/.

Cosa impareremo:

• come usare i menu’ Primari e Secondari nei nostri temi;
• come aggiungere dei sottotitoli descrittivi ai nostri link del menu’;
• come filtrare il menu’ di un tema di WordPress;
• come aggiungere classi CSS a wp_page_menu;
• come codificare manualmente il nostro menu’ per avere un controllo assoluto su di esso.

Menu Primario e Secondario

Questa cosa è molto facile da realizzare con la funzione wp_page_menu. Invece di usarla una volta nel nostro tema, la useremo due volte! – ma includendo solo pagine selezionate ogni volta.

<?php wp_page_menu('exclude=24,27,28&menu_class=menu menu-primary'); ?>
<?php wp_page_menu('include=24,27,28&menu_class=menu menu-secondary'); ?>

Visto che wp_page_menu genera tutto il codice necessario per il menu’, a noi non resta che escludere delle pagine dal primo menu’ ed includerle nel secondo. Con le nuove classi menu-primary e menu-secondary è tutto pronto.

Qui vediamo come fare la stessa cosa in un child theme per Thematic Framework per WordPress. Inseriamo questa porzione di codice nel file functions.php del nostro child theme:

// Rimuovi Thematic Access predefinito
function remove_thematic_actions() {
    remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_actions');

// Ricrea Thematic Access con menu-primary e menu-secondary
function childtheme_page_menu() { ?>
	<div id="access">
		<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
        <?php wp_page_menu('exclude=24,27,28&menu_class=menu menu-primary'); ?>
        <div class="menu menu-secondary">
            <ul>
                <?php wp_list_pages('title_li=&include=24,27,28'); ?>
            </ul>
        </div>
    </div><!-- #access -->    
<?php }
add_action('thematic_header','childtheme_page_menu','9');

Aggiungiamo i sottotitoli ai link del menu’

Se ci piacesse aggiungere dei sottotitoli descrittivi ai link del nostro menu’ come nel tema Grid Focus

vediamo come fare.

Normalmente questo effetto si raggiunge con un codice scritto manualmente ma si possono anche usare i custom fields di WordPress.

Aggiungiamo un custom field alle pagine in questione chiamato “sottotitolo” con un valore del tipo “descrizione del link”. Assicuriamoci poi di inserire nel file functions.php del nostro child theme il seguente codice adattato da clearskys.net blog. Se invece stiamo editando un tema normale per WordPress copiamo solamente il codice all’ interno della funzione childtheme_page_menu e inseriamolo nel nostro header.php sostituendo quello standard.

// Aggiungi testo descrittivo ai link
// con l'aiuto di http://blog.clearskys.net/2008/12/17/how-to-adding-menu-sub-titles-to-a-theme/
function sub_page_list() {
	global $wpdb;
	$sql = "SELECT p.ID, p.post_title, p.guid, pm.meta_value FROM " . $wpdb->posts . " AS p LEFT JOIN ";
	<span style="color:#008;">$sql .= "(SELECT post_id, meta_value FROM " . $wpdb->postmeta . " AS ipm WHERE meta_key = 'subtitle') ";
	$sql .= "AS pm ON p.ID = pm.post_id ";
	$sql .= "WHERE p.post_type = 'page' AND p.post_parent = 0 AND p.post_status = 'publish' ";
	$sql .= "ORDER BY p.menu_order ASC ";
	$sql .= "LIMIT 0, 10";
	$rows = $wpdb->get_results($sql,OBJECT);
	if($rows) {
		foreach($rows as $row) {
			echo "<li>";
			$link_url = get_permalink($row->ID);
			echo "<a href=\"$link_url\"" . "\">$row->post_title</a>";
			echo "<span style=\"display:block;\">$row->meta_value</span>";
			echo "</li>";
		}
	}
}

// Filtra il menu e aggiungilo alla lista
<span style="color:#000;font-weight:bold;">function childtheme_page_menu() { ?>
    <div class="menu">
        <ul>
            <?php if (is_front_page()) { ?>
            <li><a href="<?php bloginfo('home') ?>/" title="<?php echo wp_specialchars( get_bloginfo('name'), 1 ) ?>" rel="home">
                Home <span style="display:block;">This is the home page</span>
            </a></li>
            <?php } else { ?>
            <li><a href="<?php bloginfo('home') ?>/" title="<?php echo wp_specialchars( get_bloginfo('name'), 1 ) ?>" rel="home">
                Home <span style="display:block;">Return to the home page</span>
            </a></li>
            <?php } ?>

            <?php sub_page_list(); ?>

        </ul>
    </div>
<?php }
add_filter('wp_page_menu','childtheme_page_menu');

Aggiungiamo classi al nostro menu’

Uno dei problemi nell’ usare wp_page_menu e’ quello che l’ HTML è incluso nella funzione: non possiamo modificarlo.

Questo ci impedisce di usare la funzione se vogliamo anche aggiungere classi speciali per implementare un menu’ drop-down in JavaScript o usare alcuni trucchi CSS senza farci venire un grosso mal di testa. Fortunatamente possiamo filtrarlo. Ecco come filtrare wp_page_menu e aggiungere una classe univoca alla prima istanza del tag ul usando il comando PHP preg_replace per trovare il primo tag ul e aggiungergli un id e una classe.

// Aggiungi ID e CLASS al primo <ul> in wp_page_menu
function add_menuclass($ulclass) {
return preg_replace('/<ul>/', '<ul id="nav" class="nome-classe">', $ulclass, 1);
}
add_filter('wp_page_menu','add_menuclass');

In pratica la funzione  wp_page_menu puo’ essere filtrata con qualunque contenuto, il che è buono a sapersi se intendiamo creare un nostro menu’ personalizzato.

Scrivere a mano un menu’ dinamico per WordPress

Possiamo creare una lista di link ma è meglio creare una lista dinamica che controlli se ci troviamo in una determinata pagina e quindi che aggiunga una classe current_page_item alla lista.

Se lo facciamo in un child theme la cosa sarà  molto veloce: dobbiamo filtrare wp_page_menu. Se invece usiamo un tema standard prendiamo solo il codice  all’ interno della funzione ed inseriamolo nel punto prescelto nel nostro tema.

function childtheme_menu() { ?>
<div id="menu">
<ul>
	<li class="<?php if ( is_page('info') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_option('home') ?>/info/">About</a></li>
	<li class="<?php if ( is_page('pubblicita') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_option('home') ?>/pubblicita/">Advertise</a></li>
	<li class="<?php if ( is_page('contatti') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_option('home') ?>/contatti/">Contact</a></li>
</ul>
</div>

<?php }

add_filter( 'wp_page_menu', 'childtheme_menu' );

Il codice contolla in quale pagina ci troviamo: se per esempio siamo nella pagina “Info” al link verrà aggiunta la classe current_page_item, altrimenti, page_item.

Facile no?

Ulteriori risorse:

Un menu’ di navigazione superiore per Thematic completamente configurabile di Matteo Stagi

---

Articolo originariamente scritto da Ian Stewart e pubblicato con il titolo WordPress Menu Tricks.