BigThink

WordPress: gestire un sottomenu a categorie con icone

  • Scritto da Samuele Panzeri
  • 10 Commenti

Dare visibilità ad ognuno dei temi trattati dal nostro blog non sempre è semplice, perchè non inserire un menu di navigazione con icone?

La soluzione che proporremo sarà senza plugin, una versione adattabile alle proprie esigenze senza l’utilizzo di pesanti script jQuery.

Inoltre potremo decidere esattamente quali cateogorie mostrare e in che ordine, evitandoci così elenchi troppo lunghi che comprendono argomenti indesiderati come ad esempio gli articoli di un sideblog a cui non ci interessa dare rilevanza in prima pagina.

Verrà utilizzato solo uno script, ma solo per realizzare i menù a tendina per le sottocategorie. Per comodità vorrei proporvi come soluzione jQuery Drop Line Menu.

1.Includiamo jQuery nel nostro tema wordpress

Se il vostro tema utilizza già degli script ed effettua quindi l’inclusione del framework potete tranquillamente saltare al passaggio successivo.

Se così non fosse invece il mio consiglio personale è di non includere direttamente in qualche sottocartella il file js, ma di utilizzare le repository di Google.

Apriamo quindi il file functions.php e, in fondo, inseriamo il seguente codice:

if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", false);
    wp_enqueue_script('jquery');
}

Ricordate che con questo codice il file verrà incluso nell’head del sito dove viene chiamata la funzione wp_head().

Questo significa che tutti gli altri script che inserirete nella pagina andranno dopo questa chiamata a funzione.

2.Recuperiamo tutte le categorie e sottocategorie

Per creare il nostro menù personalizzato dovremo ora estrarre tutte le nostre categorie.

Per fare questo utilizzeremo la funzione get_category_by_slug('nicename') che ci permette di scegliere una categoria in base al “nome web” che gli assegneremo dal pannello amministrativo.

La limitazione di questa scelta è che dovremo scegliere a priori un certo numero di categorie da visualizzare.

Il più delle volte avremo un piccolo range di maxi-categorie da mostrare, che difficilmente cambieranno nel tempo.

Creiamo un file categorie_menu.php che includeremo poi nel template.

Come vedrete nel codice, la scelta che ho operato è stata quella di mostrare dei sottomenù con delle categorie scelte ad hoc.

Ovviamente giocando con le stesse funzioni è possibile anche mostrare tutte quante le voci e la loro gerarchia.

<ul>
    <li class="design">
        <a href="javascript:void(0);" class="nopointer"><span class="alignleft">Design</span><span class="dropdownIcon"></span></a>
        <ul>
        <?php
            $category = get_category_by_slug('comunicazione-visiva');
            if( $category )
                echo'<li><a href="'.get_category_link($category->term_id ).'" title="'.$category->name. '"'.'>'.$category->name.'</a></li>';
            $category = get_category_by_slug('font');
            if( $category )
                echo'<li><a href="'.get_category_link($category->term_id ).'" title="'.$category->name. '"'.'>'.$category->name.'</a></li>';
            $category = get_category_by_slug('fotografia');
            if( $category )
                echo'<li><a href="'.get_category_link($category->term_id ).'" title="'.$category->name. '"'.'>'.$category->name.'</a></li>';
            $category = get_category_by_slug('interviste');
            if( $category )
                echo'<li><a href="'.get_category_link($category->term_id ).'" title="'.$category->name. '"'.'>'.$category->name.'</a></li>';
            $category = get_category_by_slug('motion');
            if( $category )
                echo'<li><a href="'.get_category_link($category->term_id ).'" title="'.$category->name. '"'.'>'.$category->name.'</a></li>';
        ?>
        </ul>
    </li>
</ul>

Non fatevi spaventare dalla lunghezza del codice, questo è solo un esempio che potete trovare applicato nel menu del nostro blog: webfandom.

Tutto quello che fa è inserire in una lista il titolo di un gruppo di categorie seguito dall’elenco di quest’ultime.

Questo file va poi richiamato all’interno del tema, nel punto dove più ci aggrada, con la seguente chiamata:

<?php include(TEMPLATEPATH.'/<eventuali directory>/nomefile.php'); ?>

3. Lo stile

In questo momento quello che vedremo sul nostro browser è un lungo elenco di link incolonnati.

Iniziamo a dare forma al sottomenù utilizzando il css. Tutte le icone vengono inserite in uno sprite css.

#dropdownCat1{position:relative;}
#dropdownCat1 ul{font-size:16px;margin:0;padding:0;list-style:none;position:relative;}
#dropdownCat1 ul li{margin:0 9px 0 0;float:left;position:relative;}
#dropdownCat1 ul li a{display:inline;padding:6px 6px 6px 38px;float:left;background:#343433 url(images/sprite.png) no-repeat;width:auto;}
#dropdownCat1 ul li a span.dropdownIcon{display:block;position:relative;float:right;width:19px;height:9px;background:url(images/sprite.png) no-repeat 7px -1067px;margin-top:8px;}
#dropdownCat1 ul li.design a{background-position: 7px -1081px;width:70px;}
#dropdownCat1 ul li.tutorial a{background-position: 7px -1113px;width:73px;}
#dropdownCat1 ul li.internet a{background-position: 7px -1143px;padding-left:26px;width:74px;}
#dropdownCat1 ul li.strategie a{background-position: 7px -1176px;width:142px;}
#dropdownCat1 ul li.programmazione a{background-position: 7px -1208px;padding-left:30px;width:175px;}
#dropdownCat1 ul li a:hover,#dropdownCat1 a.activeDropdown{background-color:#706361;color:#f5ebb1;text-decoration:none;}
#dropdownCat1 ul li a:hover span{background-color:transparent}
#dropdownCat1 ul li ul{visibility:hidden;position:absolute;top:35px;background:none;padding-top:3px;display:block;min-width:150px;left:0;}
#dropdownCat1 ul li ul li{display:list-item;float:none;display:block;min-width:150px;margin:0;}
#dropdownCat1 ul li ul li a{min-width:150px;float:none;display:block;font:normal 13px Verdana;padding:6px !important;padding-right:8px;margin:0;background:#333334;position:relative;z-index:9999;}
#dropdownCat1 ul li ul li a span{background:#c76023}
#dropdownCat1 ul li ul li a:hover{background:#706361;}
#dropdownCat1 a{color:#f5ebb1;font-weight:normal;}
#dropdownCat1 a:link,#dropdownCat1 a::visited,#dropdownCat1 a:active{color:#f5ebb1;text-decoration:none;}

Come detto in precedenza, il codice sopra riportato è relativo alle esigenze che avevo nel momento in cui è stato scritto.

Quindi, pur essendo un buon esempio, dovrà sicuramente essere adattato a seconda delle esigenze grafiche, dei colori e delle immagini dei nostri blog.

4. Animare il menu con jQuery e  Drop Line Menu

Eccoci giunti al tocco finale. Ora che il nostro menù personalizzato è pronto e inserito nella pagina resta solo da animarlo.

Come avevo detto in apertura di articolo useremo uno script già fatto per semplificare il tutto. Iniziamo quindi scaricando il file js che trovate qui.

Questo andrà incluso nel file header.php con il codice:

<script src="<?php bloginfo('template_url'); ?>/<cartella>/droplinemenu.js" type="text/javascript"></script>

Infine creiamo il nostro script ad unire il tutto. Il codice è molto semplice e si limita a richiamare le funzioni scritte nel file di prima sui nostri menu:

<script language="javascript">
<!--
jQuery(document).ready(function(){
    droplinemenu.buildmenu("dropdownCat1");
    $('#dropdownCat1 ul li ul').hover(function(){
        $(this).parent('li').children('a').addClass('activeDropdown');
    },function(){
        $(this).parent('li').children('a').removeClass('activeDropdown');
    });
});
-->
</script>

Se tutto è andato a buon fine avrete finalmente realizzato il vostro nuovo menu!

Nel caso invece in cui aveste qualche problema o qualche consiglio non esitate a commentare.

Se invece volete realizzare la stessa procedura di inserimento icone per le pagine statiche in questo articolo trovere una spiegazione con il sorgente di come procedere.

Articolo scritto da Samuele Panzeri

Samuele Panzeri è perito informatico e studente universitario presso la facoltà di Scienze Matematiche, Fisiche e Naturali dell’Università degli Studi di Milano. Lavora come sviluppatore web freelance a Lecco e collabora nel progetto webfandom. Nutre interesse per tutto quello che riguarda la programmazione, spaziando dal web alle applicazioni grafiche stand-alone. Le nuove tecnologie e l’intrattenimento digitale non sono un mistero e nel tempo libero scrive come collaboratore per una testata giornalistica online del settore.

Leggi anche...

WordPress: capitalizzare i titoli nel feed RSS in automatico

WordPress: capitalizzare i titoli nel feed RSS in automatico

Un paio di giorni fa commentavo un articolo di Francesco Gavello, chiedendogli perchè scrivesse i titoli dei suoi articoli mettendo in maiuscolo l'iniziale di ogni parola. Francesco mi ha allora risposto: Semplice impatto e migliore estetica quando finiscono nei feed reader. Una volta mischiati ad altri flussi RSS, risaltano maggiormente e hanno un “ché” di ...
Una barra con OKNOtizie, Facebook e Twitter per WordPress

Una barra con OKNOtizie, Facebook e Twitter per WordPress

In molti mi hanno chiesto come ho fatto a mettere sotto ogni articolo la barra di OKNotizie, con il pulsante di Facebook e quello di Twitter. E' molto utile perchè permette di avere sott'occhio i tre network principali per la diffusione dei nostri post. Ho deciso allora di scrivere questo articolo, così che tutti ...
WordPress trick: come risolvere il problema del feed non valido

WordPress trick: come risolvere il problema del feed non valido

Qualche volta potrà capitarvi un problema piuttosto fastidioso con WordPress: improvvisamente il vostro feed RSS risulta non più valido ed il browser si rifiuta di visualizzarlo, segnalando un errore di interpretazione XML senza un apparente motivo. Disperati, andate in cerca del problema, aggiornate la versione di WordPress e tutti i plugin attivi, ma niente, ...
Plugin WordPress per pubblicare su Twitter i nostri post

Plugin WordPress per pubblicare su Twitter i nostri post

Terza ed ultima parte della miniserie realizzata da Camu: dopo averci introdotti agli Hook di WordPress e alle API di Twitter, è giunto il momento di mescolare bene gli ingredienti. Ora che abbiamo a disposizione tutti gli strumenti, non rimane che metterli insieme per realizzare il plugin che scrive automaticamente sul canale Twitter.
WordPress: Aggiungere un feed RSS personalizzato

WordPress: Aggiungere un feed RSS personalizzato

Ci sono tantissime ragioni per cui si potrebbe voler aggiungere un feed RSS secondario: dare la possibilità ai lettori di iscriversi sia al feed completo che a quello breve; impostare un feed rss personalizzato per gli aggregatori di blog; creare una newsletter con FeedBurner; mostrare il feed in un formato particolare... Nei prossimi giorni vedremo più nel dettaglio ...

10 Commenti

  1. Tutto questo codice… basta inserire una classe nel foglio di stile CSS e attribuire la classe al costum menu di wordpress quando si crea…tutto qui 🙂

    18 febbraio 2011, 15:07
  2. Consiglio anche l’ ottimo plugin menubar
    http://wordpress.org/extend/plugins/menubar/

    29 novembre 2010, 11:45
  3. Non è più semplice usare i menu nativi di WordPress che danno anche maggiore flessibilità nell’aggiunta di voci ?

    29 novembre 2010, 11:20
    • Sono più semplici da usare, ma la flessibilità non penso sia maggiore.
      In qualsiasi caso il codice che scrivi tu è sempre quello più personalizzabile.
      Inoltre utilizzando ad esempio la funzione wp_list_categories con i suoi parametri puoi ottenere anche un’automatizzazione del sistema di creazione dei menù 😉

      29 novembre 2010, 11:44
      • Utilizzare le funzioni native di WP le soluzioni realizzate diventano portabili su tutti i temi e su tutte le installazioni quindi credo che diano più flessibilità…e se usate a dovere le puoi personalizzare come vuoi e anche più rapidamente.

        Il codice scritto da te è sempre più personalizzabile, ma non è detto che sia il migliore sopratutto quando ti appoggi su un framework.

        Integrando il codice alle funzioni native in questo caso del CMS puoi sicuramente ottenere risultati migliori e che si adattano meglio ad evoluzioni future (e sopratutto che permetta ad un utente che non ha idea di cosa sia il codice) ;).

        Il tutorial è ben fatto s’intenda e mi piace, ma magari sarebbe ancora più interessante adeguarlo anche al caso del menù nativo di WP.

        Ciao ciao.

        29 novembre 2010, 12:45
        • Grazie del suggerimento. Vorrà dire che proverò anche la soluzione con i menù di wp e magari prossimamente ci farò un tutorial 😉

          29 novembre 2010, 12:49
          • Grazie a te del tutorial…ciao ciao.

            29 novembre 2010, 12:56
  4. Federico

    Buono, mi chiedevo come fare la stessa cosa anche per le pagine statiche grazie, ora provo se ho problemi ti chiedo.

    29 novembre 2010, 11:10

2 Citazioni