Aggiungiamo Logo e Navigazione

Aggiungiamo Logo e Navigazione – Parte 2

  Benvenuti ad una nuova puntata del corso sulla creazione di temi per WordPress, in questa puntata vedremo come visualizzare il logo caricato nella pagina precedente, ma anche altre cose come mostrare i titoli e i menu!  

Nella scorsa puntata vi ho abbandonato senza dirvi come sia possibile mostrare il vostro logo appena caricato all’interno della vostra template, questo semplicemente perché desideravo riservare uno spazio in questa puntata visto che andremo ad analizzare molte altre funzioni WP che saranno interessanti da utilizzare all’interno del nostro file header.php.

L’intero corso è diventato anche un ebook! Non perdere l’occasione di portare sempre con te tutta la conoscenza racchiusa al suo interno cliccando semplicemente su questo link!

Cosa contiene un Header?

Prima ancora di andare a vedere le nuove funzioni che ci aiuteranno a creare il nostro header, chiediamoci che cosa dobbiamo inserire al suo interno!

Tendenzialmente un header avrà i seguenti elementi:

  • Logo – l’immagine rappresentante il branding del vostro sito;
  • Titolo Sito – Il nostro sito avrà un nome giusto?!? Sarà bene quindi imparare ad inserirlo!
  • Motto Sito – visto che WordPress ci permette di inserire anche un “motto” per il nostro sito, impariamo ad utilizzarlo e a renderlo disponibile per i nostri utenti;
  • Menu Principale – ogni buon header che si rispetti presenta un menu principale, ecco che una utile funzione WordPress verrà in nostro soccorso per mostrarlo.

Questi sono i quattro elementi principali di un header, c’è chi utilizza questa sezione del sito per mostrare degli annunci pubblicitari, al momento questo esce dagli scopi di questa puntata, ma vi abbiamo già fornito tutte le informazioni necessarie per creare una sezione di questo genere!

Utilizziamo il Logo

Conclusioni

Questa puntata termina presto! Abbiamo appena appreso come sia possibile popolare il nostro Header con informazioni importanti come il titolo ed il motto del sito stesso ma anche come inserire una navigazione principale con l’utilizzo delle funzioni incaricate alla creazione e visualizzazione dei nostri menu.

Nella prossima puntata andremo a vedere come sia possibile creare un elemento molto importante che ancora manca al nostro tema, ovvero la Sidebar! Ed oltre a questo vedremo come sia possibile rendere queste sidebar widget ready e quindi pronte a mostrare degli elementi che il sistema WordPress e alcuni plugin ci permettono di inserire con un semplice Drag’n Drop. Alla prossima!

Lascia il tuo Pensiero

30 Responses to “Aggiungiamo Logo e Navigazione – Parte 2”

  1. Barbara

    Sembra una guida veramente ben fatta…
    sto giusto cercano di fare un tema wordpress; ho preso una base con Artisteer, ma crea un codice non troppo pulito… così finisce che me lo sto rifacendo a mano.

    quello che non sapevo bene era la questione delle impostazioni Admin e le funzioni php da richiamare .

    Quando ho tempo mi farà una bella base personale 🙂

    Grazie ciao.

    Rispondi
    • Andrea Barghigiani

      Grazie Barbara per il tuo commento, mi fa piacere vedere che non sono l’unico WP Dev che si diverte a sviluppare temi direttamente dal codice.
      Se vuoi qualche suggerimento, personalmente, mi sono sempre trovato bene ad iniziare i miei progetti con WhiteBoard, ma devo dire che ultimamente è diventato troppo complicato per i miei gusti…

      Con la necessità di avere siti Responsive Design ho iniziato invece ad utilizzare un ottimo template di base chiamato Bones che devo dire funziona perfettamente.

      A proposito, sto pensando di andare a sviluppare una guida anche su questo template, che ne dici? Ti potrebbe interessare?

      Parlando della questione quando ho tempo permettimi di darti un suggerimento personale; inizia il prima possibile! So che come developer sarai molto impegnata (chi non lo è in fin dei conti con i clienti che spingono per il loro prodotto pronto asap?!?) ma ti consiglio vivamente di dare almeno un’occhiata alle varie lezioni di questa guida.

      Come vedi, io spingo molto per andare ad utilizzare LESS.js e altre funzioni WP che permettono di semplificare la vita di un dev quindi, tempo concesso, prima apprenderai queste nozioni e prima sarai in grado di velocizzare il tuo lavoro permettendoti di realizzare lo stesso numero di progetti in un minor tempo.

      Prendila come consiglio e non come obbligo, per tutto il resto, sarò qua pronto a darti una mano!

      PS: Mi ero dimenticato di aggiungere il video e il file .zip correlati con questa lezione, fammi sapere se tutto funziona correttamente o se hai qualche problema.

      Rispondi
      • Barbara

        il video associato a questa pagina è la lezione 2 invece che la 6…

        comunque come vedi son di nuovo qua a continuare le lezioni.
        faccio quel che posso visto che sta settimana ho dovuto finire un tema grafico.
        ho dovuto prendere il tema che avevo fatto in artisteer e spostare la grafica sul tema base wordpress.
        artisteer è buono per aver spunto grafico, ma il codice che sviluppa in automatico è veramente veramente mal fatto!

        inoltre mi son trovata un problema gravissimo: non caricava i jequery degli altri plugin… e dovevo inserirli a mano! ho detto, faccio prima a usare il tema base che almeno le funzioni le ha sicure.

        bene, adesso continuo a seguire la lezione 😛

        Rispondi
      • Barbara

        per quanto riguarda bones e whiteboard, spiegami meglio, sono dei temi pre confezionati che si possono modificare e adattare liberamente?

        immagino che ci sia anche la questione legale del copyright sui temi, ma ovviamente non posso ogni volta partire da zero per modificare un tema. immagino che tu ne sai più di me a riguardo?

        Rispondi
      • Marta

        Ciao Andrea intanto grazie per i tuoi preziosi consigli, sto seguendo la tua guida per creare un template da zero e ho deciso di usare come base il template bones, ma ho notato che con il plugin Viper’s Video Quicktags di inserimento di video nei post , con questo tema non funziona sai come mai?

        Rispondi
        • Andrea Barghigiani

          Ciao Marta,

          per prima cosa grazie per leggere ed apprezzare i miei articoli, la cosa mi fa veramente molto piacere 🙂

          Passando al tuo problema, sinceramente non uso molti plugin (la mia conoscenza di WordPress è più di codice che di plugin) ma mi ha incuriosito il fatto che questo plugin non funziona con Bones; veramente molto strano visto che Bones è sviluppato con il concetto di essere un tema di partenza. Ho notato che il plugin è stato aggiornato proprio oggi e che hanno risolto un paio di problemi, prova ad installare la versione aggiornata e fammi sapere.

          Io vado a fare qualche test e ti terrò informata dei progressi.

          Nel frattempo, ci sono un paio di cose che potresti fare. La prima è quella di descrivere meglio il tipo di problema che ti da, come ad esempio, non carica il video, ti fa saltare il layout o, più probabilmente, il video non si ridimensiona all’interno della pagina. La seconda invece è un consiglio spassionato; WordPress AndMore ha una newsletter e se ti interessa rimanere aggiornata, ti consiglio di iscriverti (ti assicuro che non invio spam).

          PS: lo sapevi che con WordPress puoi inserire direttamente il link del tuo video YouTube all’interno del tuo editor e il video viene caricato direttamente? Sicuramente non avrai le personalizzazioni dell’interfaccia come ti permette di fare Viper’s; ma utilizzando una funzione nativa non hai bisogno di appesantire la tua piattaforma 😉

          Ciao e nuovamente grazie!

          Rispondi
          • ciccio

            ciao, mi associo alla discussione e rinnovo l’idea di un tutorial su whiteboard o bones, che li sto osservando ultimamente… ma la mano dell’esperto è sempre meglio. grazie

          • Andrea Barghigiani

            Ciao Ciccio,

            appena ho le mani libere creerò sicuramente un tutorial completo per la realizzazione di temi con Bones, non mi è piaciuta l’evoluzione nello sviluppo di Whiteboard, quindi preferisco trattare il primo. Ho detto appena ho le mani libere perché al momento sto sviluppando il corso Apprendi PHP con WordPress e appena pronto questo mi metto a sviluppare quello per Bones. Inoltre vedrai qualche novità apparire nelle prossime e ti consiglio di tornare a trovarci o iscriverti alla newsletter 😉

      • Fabrizio

        Ciao Andrea, sto seguendo la tua guida passo dopo passo…si lo ammetto ho dato una sbirciata anche alla fine perché volevo vedere lo sviluppo del tema fino alla fine.
        Sono ancora molto inesperto in questo campo ma sto imparando…ho acquistato il tuo libro, sei davvero molto bravo a scrivere guide.
        Apprezzo molto il tuo lavoro. Sono a un buon punto con il tema anche se con un solo menu ed una sola sidebar mi è un po’ scomodo per il sito che devo elaborare (il mio blog esiste già, il tema principale è quello Android e Smartphone quindi puoi immaginare che mi serve un’organizzazione migliore di quella base di questo tema)…così sto pensando di modificare un po’ di codice…almeno quando avrò imparato a capire alla perfezione a cosa serve 😉 in ogni caso ho pensato di prendere spunto da alcuni temi premium (acquistati recentemente). Non ho grandi richieste, al momento non mi interessa particolarmente sviluppare un tema responsive, ma quello che devo fare è ottimizzare la visualizzazione delle notizie che appariranno nella homepage.
        Vista la bontà della tua guida io andrei ad approfondire un po’ di più l’argomento, ad esempio inserirei qualche approfondimento in più riguardo la realizzazione grafica vera a propria, con Css ecc e magari aggiungerei la possibilità di inserire uno sfondo al tema.
        Quelli che ti sto dando sono solo consigli, ma adesso studierò meglio il vostro sito, magari ho consigliato guide che avete già scritto.
        Grazie di tutto continuo ad esercitarmi.

        Rispondi
        • Andrea Barghigiani

          Ciao Fabrizio,

          grazie mille per questo commento, mi fa incredibilmente piacere quando conosco persone che stanno apprendendo lo sviluppo con WordPress. Allora nel corso dedicato allo sviluppo del tema diciamo che con queste 17 Lezioni sono specifiche per comprendere la logica di questa piattaforma e sopratutto introdurvi anche ai concetti di sviluppo in PHP.

          Dici bene, la versione grafica del sito è un po’ carente ma ho preso questa strada perché altrimenti avremmo di gran lunga superato le 30 Lezioni 😀

          Comunque ho diverse buone notizie per te:

          • se al momento desideri approfondire le tue conoscenze di sviluppo puoi farlo tranquillamente grazie al sito fratello html5AndMore dove affrontiamo di più l’argomento del webdesign;
          • se vuoi approfondire inoltre abbiamo da poco fatto un webinar sulle fondamenta del web design per la nostra nuova piattaforma skillsAndMore. Ti consiglio di iscriverti alla newsletter perché al momento la piattaforma è in beta privata e stiamo facendo una campagna di crowdfunding ma a Maggio apriremo le porte e il corso che ti dicevo sarà gratuito
          • stiamo preparando un corso avanzato da pubblicare proprio su skillsAndMore che tratterà l’implementazione avanzata dei tool che WordPress ci mette a disposizione

          Spero di averti risposto alle domande e di essere stato chiaro, se hai bisogno di qualsiasi dritta non esitare a rispondere a questo commento o a contattarmi direttamente attraverso la pagina Contatti.

          Rispondi
    • daniele

      Ciao
      anch’io sto tentando con Artisteer ma mi sembra uno di quei giochini che non permettono molte personalizzazioni.. personalemente sono abituato a scrivermi tutto il codice..

      articolo interessantissimo

      ciao

      Rispondi
      • Andrea Barghigiani

        Ciao Daniele,

        grazie per il complimento sull’articolo, mi fa piacere che ti sia stato utile. Come noterai dagli altri articoli presenti in questo blog, anche io sono un pò contrario all’utilizzo di Aristeer. Se vuoi un consiglio e vuoi salvare qualche ora di sviluppo, potresti provare a muovere i primi passi con white template come Bones o _s che sono ottimi punti di partenza per coloro che desiderano sviluppare i propri temi.

        È anche probabile che tra qualche mese pubblico una guida che parte proprio da Bones, ma devo vedere quanto può interessare e alcuni altri sviluppi…

        Rispondi
  2. Andrea Barghigiani

    Ciao Barbara,
    mi fa piacere rivederti da queste parti! Per il video, dovrei avere sistemato il tutto ma se continua a farti lo scherzo di caricarti il video 2 prova semplicemente ad aggiornare la pagina, non si sa mail…

    Per quanto riguarda Whiteboard e Bones ci hai azzeccato! sono dei temi preconfezionati che ti permettono di partire con una impostazione di base per poi procedere con lo sviluppo del tuo template lato grafico. Non ti preoccupare per il discorso di licenze o cose simili, sopratutto Bones, è stato utilizzato usando la licenza WTFPL che praticamente ti permette di fare qualsiasi cosa tu voglia con il tema che ti mettono a disposizione.

    Personalmente ti consiglio Bones, che sto imparando anche io 😛 Perché ha una struttura molto più pulita rispetto al nuovo WhiteBoard… Te lo consiglio anche perché nei prossimi mesi andremo anche ad affrontare lo sviluppo di un tema WordPress partendo proprio con Bones come template di partenza.

    Per il resto mi fa piacere che trovi utile questa guida e ti ringrazio per i feedback che mi hai dato che sono stati veramente molto utili!

    Rispondi
    • Barbara

      Grazie a te che mi insegni tante cose 😛
      Purtroppo l’inglese non è il mio forte, e trovo molta difficoltà a seguire un corso in inglese che mi insegni.
      grazie per i consigli di bones, per il prossimo lavoro lo testo!

      senti, ho visto che hai una tendina con l’elenco di tutte le lezioni, che plugin usi per farlo? (lo trovo carino e comodo :P).

      Rispondi
  3. Barbara

    le cose non vanno troppo bene 🙁

    instanto che stavo inserendo i vari dati seguendo il video…
    mi è scomparso dall’ elenco nel menu admin “Impostazioni tema”…
    allora ho caricato lo zip della lezione 6, e mi dice che non ho i permessi necessari.. anche se sono super admin!.
    ma.. proviamo a continuare e vediamo se si agginsta.

    Rispondi
    • Barbara

      devo aver sbagliato qualcosa nel file impostazioni_tema.php, perchè cambiando uno a uno i file della lezione 6 dentro il mio tema, a questa suddetta pagina il testo nel menu è ricomparso ^^

      Rispondi
  4. Barbara

    ho finito questo video, bene.
    personalmente credo che riguardo al menu di navigazione, sia più giusto descrivere una funzione che imposta il tema primario con l’apposita selezione. come avviene solitamente con tutti i temi.
    mi pare che basti questa linea di codice ‘primary’ ) ); ?>
    ^^” ma forse nel fuction si deve caricare qualcosa.

    ciao

    Rispondi
  5. Barbara

    ragazzo! inviti la gente a scrivere un articolo ma non fai vedere nessun tasto per iscriversi o mandare il testo?!

    🙁 è triste lasciare un tema bianco e senza un po’ di css..
    😛 pensavo di spedirtene uno così che gli utenti più svogliati non rimangano comunque con le idee poco chiare vedendo una pagina non graficamente costruita.
    dammi un accesso.. e ti spedirò i file (appena li ho compilati °-°)
    ciao

    Rispondi
    • Barbara

      ok.. mi son persa.. tu hai fatto in modo che lo style del tema fosse preso da style.less
      perchè con il jq less puoi dare comandi di css compilati, quindi io, il css che voglio modificare e creare devo per forza metterlo in quel file?
      ^^” lo stile style.css non me lo vede proprio nel codice..

      Rispondi
      • Andrea Barghigiani

        Ciao Barbara,

        la tua volontà nell’apprendere come costruire un template WordPress mi affascina, mi ricordi tanto me quando ero agli inizi!
        Visto il numero di commenti che mi hai inviato andrò a risponderti seguendo l’arco temporale con sui li ho letti.

        • menu – parlando del menu, tendenzialmente si usa la funzione register_nav_menu() per fare in modo che il tuo cliente sia in grado di modificare il menu a seconda delle sue necessità. Capisco quello che mi dici “se il cliente non imposta il menu risulta vuoto”, in questo caso, viene chiamata automaticamente la funzione wp_page_menu() che crea automaticamente un menu che presenta le pagine statiche all’interno dell’installazione WordPress;
        • regole di stile – personalmente ho imparato ad amare LESS.js per il semplice fatto che al posto di riscrivere la stessa regola 5 volte per inserire tutti i vendor prefix, mi basta una semplice riga ed il gioco è fatto. Siccome il foglio di stile style.css è obbligatorio all’interno di WordPress, lo uso soltanto per passare le informazioni relative al template e permettere allo stesso WordPress di installarlo; successivamente genero, tramite JavaScript e LESS,js, un nuovo foglio di stile che inserisco nell’header e che mi permette di aggiungere le regole di stile di cui ho bisogno (cosa che mi è possibile grazie alla cascata dei fogli di stile).
        • contribuire – hai completamente ragione! Devo assolutamente riprendere quella pagina e aggiungere qualche elemento che aiuti le persone a contribuire al sito, cmq ti mando una mail 😛

        Spero di aver risposto a qualsiasi tuo dubbio, nel caso non lo avessi fatto, sai come funziona 😀

        Rispondi
        • Andrea Barghigiani

          Non è vero… Non ho risposto a tutto!
          Rileggendo i tuoi commenti mi sono accorto che mi chiedevi anche come sono in grado di mostrare una lista di articoli correlati… Il plugin che uso si chiama Organize Series, nella versione base.

          Se anche te hai intenzione di utilizzare questo plugin te lo consiglio caldamente perché è potente e semplice da utilizzare!

          Rispondi
  6. VINCENZO

    Ho un piccolo problema a metà lezione.
    Quando dici…se avete seguito la lezione 2 dovrebbe comparire:

    Header
    Colonna Principale Sidebar
    Footer

    A me Sidebar invece che comparire nel lato destro della pagina come da nella lezione, compare sotto footer:

    Header
    Colonna Principale
    Footer
    Sidebar

    Non è che sai dirmi che passaggio ho saltato?

    Rispondi
    • Andrea Barghigiani

      Ciao Vincenzo,

      da quello che vedo sembra che tu abbia inserito la chiamata a get_sidebar() dopo il richiamo del footer, prova a controllare all’interno del tuo index.php per vedere se tutto va bene. Inoltre, ti ricordo che se segui questo corso passo passo, non stai scrivendo direttamente CSS ma stai scrivendo del codice LESS.js. Assicurati quindi che questa libreria funzioni correttamente e che crei codice CSS.

      Spero di essere stato abbastanza chiaro, a presto.

      Rispondi
      • VINCENZO

        Hai completamente ragione. Nel senso che evidentemente non ho installato le librerie. Me ne sono accorto perchè guardando un video dove avevi aptana aperto comparivano 2 files javascript che io non avevo nella cartella js/lib: less.js e modernizr.js. Ricordo la descrizione dei file .less nella lezione 2 ma non ricordo assolutamente di aver letto qualcosa in merito all’inserimento nella cartella js di questi due files.
        P.s.: mi sono riguardato tutto il corso e non ho trovato questo passo; forse c’è una pillola da qualche parte?

        Rispondi
        • Andrea Barghigiani

          Scarica direttamente il codice di questa lezione e al suo interno troverai i file .js con i richiami appropriati all’interno di header.php

          Non sono andato a spiegarlo nel dettaglio, sarà qualcosa che sistemerò sicuramente alla prossima versione del corso!

          Rispondi
          • VINCENZO

            Ho scaricato ma ci sono diversi problemi che passo a spiegare. Ho scaricato il file .zip ed ho aperto le librerie con Aptana. Mi compaiono come righe uniche. Allora tasto destro –>source–> format e prende gli “a capo”.
            Ma ancora non basta.
            Modernizr va a posto. Per less.js invece dice che mancano un sacco di punti e virgola e compare la riga spezzettata sotto. Li sto aggiungendo a mano ma sono decine se non centinaia.
            Se non li mettessi la libreria mi funzionerebbe lo stesso?

          • Andrea Barghigiani

            Vincenzo, tutto si trova su di un unica riga perché il codice è stato minimizzato. È una tecnica che permette di ridurre il peso dei file di testo e dovresti lasciare tutto come hai trovato e semplicemente inserire i file nel tuo tema.

            Prova ad inserire tutto direttamente perché tutto dovrebbe funzionare “out of the box”.

  7. VINCENZO

    Allora ho fatto così. Conservando il mio template in locale. Ho trasferito dal tuo un file per volta fino a capire dove stava il problema.
    Era un punto e virgola errato nel file style.less, nella parte del Sidebar. Invece di
    .grid_4();
    avevo scritto:
    .grid_4;()
    Un giorno buttato per un errore di punteggiatura. 🙁

    Rispondi
  8. VINCENZO

    Consiglio a tutti, prima di iniziare lo studio sul template di scaricarsi assolutamente sia le librerie javascript sia i file .less. Iniziate solo dopo aver scaricato i precedenti DALLA LEZIONE.

    Rispondi