Creazione siti in WordPress – tutorial avanzati – un menù personalizzato

Creazione siti web – tutorial avanzati – la base html
9 agosto 2010
logo
11 agosto 2010
Want create site? Find Free WordPress Themes and plugins.

Nella nostra serie di tutorial relativi alla creazione di siti web dinamici, oggi ci occupiamo dello sviluppo di un semplice menù personalizzato in wordpress, utilizzando una base in css realizzata da codrops e reperibile a questo indirizzo:
CODROPS http://tympanus.net/codrops/2010/01/31/fresh-set-of-css-only-menus/
Una demo giusto per farvi rendere conto della qualità ed eleganza di questa barra di navigazione è visibile a questo link
DEMO http://www.tympanus.net/Tutorials/CSSonlyMenus/

ho scelto il secondo menu partendo dall’alto come da figura allegata, è ovvio che il concetto è riferibile anche agli altri,come sempre l’importante è darvi uno spunto per l’approfondimento e lo studio.

vediamo dunque come è possibile implementare questa soluzione nel CMS wordpress, il tutorial è suddiviso in step e naturalmente forniremo une versione in pdf dello stesso oltre ad un pacchetto contenente tutti i file ed il plugin finale che potrete caricare direttamente sulla Vs piattaforma in wp.

Strumenti utilizzati:

  • Pspad (editor gratuito scaricabile a questo indirizzo http://www.pspad.com/it/download.php
  • Un minimo di pazienza da parte vostra……….

La prima operazione da fare è ovviamente recuperare il foglio di stile dalla pagina di codrops (unitamente alle immagini necessarie se presenti) uitlizzando il bottone download
Esempio pratico………..
Step 1
Apriamo con Pspad il file header.php presente nel tema di base twentyten (cartella wp-content/themes/twentyten)
E posizionandoci a riga 26, aggiungiamo il percorso relativo al foglio di stile del menù:

[cc lang=”php” tab_size=”2″ lines=”40″]

<link rel=”stylesheet” href=”<?php echo bloginfo(‘template_url’); ?>/menu.css”/>

[/cc]

step2
Prepariamo ora le funzioni di richiamo delle pagine di wordress con lo snippet di codice get_pages.
$pages = get_pages(“sort_column=menu_order&sort_order=ASC&parent=0”);
in termini semplici questa stringa di codice ha le seguenti funzioni
• sort_column, – ordinamento del menu, abbiamo usato menu_order, ordina il menu in base all’ordinamento della pagina

  • sort_order, ordine ascendente o discendente, in questo esempio abbiamo usato ASC
  • parent, si regola il grado di visualizazione del menu, se menu padre o figlio, impostato 0, verranno mostrati solo i menu principali

step2
ora passiamo al punto successivo, usando la funzione foreach
Il foreach nel PHP è uno degli strumenti interativi come while, while do o for.
L’utilizzo fondamentale che se ne fa è quello di analizzare un array e compiere determinate istruzioni per ogni elemento dell’array stesso. La sintassi di un semplice ciclo foreach è la seguente:

[cc lang=”php” tab_size=”2″ lines=”40″]<?php
$pages = get_pages(“sort_column=menu_order&sort_order=ASC&parent=0”);
if($pages) {
foreach ($pages as $page) {
?>[/cc]

Step 3

Recuperiamo le informazioni, i nomi del menu, la 2 voce del menu (in sostanza il sottotitolo che è visibile nella demo) e il link inserendo questa stringa
• get_page_link($page->ID), recupera il link della pagina
• $page->post_title; recupera il titolo della pagina
• get_post_meta($post->ID, ‘titolo2’, true), recupera la 2 voce, dal campo personalizzato ‘titolo2’ inserito nella pagina
Salviamo il file header.php ed se abbiamo eseguito tutto correttamente lo stesso sarà ora presente nel tema.
Il tutorial come indicato nel titolo dell’articolo è di tipo avanzato,ma abbiamo ovviamente realizzato un pacchetto completo che può essere caricato direttamente nella cartella plugin del Vs wordpress e usato direttamente,è altrettanto facile cambiare stile al menù stesso caricando uno degli altri esempi presenti sul sito di codrops.
Download del plugin per WordPress e step della guida
plugin Joomla SEO

Si ringrazia lucazone per il supporto e l’implementazione della guida e del plugin

Did you find apk for android? You can find new Free Android Games and apps.