Costruisci un Content Slider in WordPress

Ci Manca uno Slider

Salve Sviluppatori WordPress, siamo giunti all'ultima lezione del corso "Costruiamo un Template WordPress da Zero", se non avete letto le lezioni precedenti vi consiglio di andarle a vedere, vi basterà cliccare sulla voce "Vedi Tutto" qua sopra. Se invece avete già seguito tutte le lezioni, sopratutto le ultime, saprete sicuramente che questa sarà una lezione col botto!  

Tutte le lezioni precedenti ci hanno portato ad una maggior comprensione del sistema WordPress, cosa è capace di fare e come sia possibile modificare i suoi comportamenti di default ma, ad essere sincero, potremmo fare ancora molto altro!

Come avrete notato questo corso non si è basato sulla possibilità di realizzare template graficamente accattivanti, a dire il vero non abbiamo neanche dato troppa considerazione al file .less che abbiamo costruito nelle prime lezioni… Questo, perché la mia intenzione è stata quella di condividere con voi le basi WordPress, quali funzioni potremo utilizzare, comprendere il Loop e molte altre cose che vi saranno veramente molto utili d’ora in avanti.

Per concludere questo percorso andremo a creare un Content Slider da posizionare all’interno della nostra FrontPage, ovviamente andremo ad utilizzare la classe WP_Query() per andare a prendere una piccola lista di articoli e con un pò di JavaScript andremo a creare la rotazione degli elementi, proprio come faccio qua su WordPress AndMore.

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!

Di Cosa Abbiamo Bisogno

Come ogni progetto che si rispetti, piccolo o grande che sia, andremo a creare una lista di passaggi da seguire per fare in modo di non perdersi durante lo sviluppo:

Conclusioni

Se state sbattendo la testa perché non riuscite a capire come mai il vostro slider non mostra le immagini ecco un piccolo suggerimento per voi; avete provato a popolare la categoria slider e aggiungere delle immagini in evidenza? Se non è questo il problema e anche il codice all’interno del file .zip non dovesse funzionare, siete invitati ad utilizzare la sezione dei commenti per chiedermi aiuto!

Prima di chiudere del tutto questo corso vorrei ricordarvi che sono qua per aiutarvi, sentitevi liberi di mandarmi qualsiasi domanda riguardante WordPress ma anche di mandarmi richieste di tutorial o spiegazioni aggiuntive che sarò più che lieto di fornirvi. Detto questo volevo anticiparvi che nelle prossime settimane vedrete apparire altri corsi; il primo che vi ho anche già anticipato, permetterà a chiunque di muovere i primi passi all’interno di WordPress mentre la seconda andrà ad analizzare il procedimento che io stesso utilizzo per creare i progetti per i miei clienti!

Non sto scherzando, a breve, andremo a vedere insieme come creo dei siti basati su WordPress partendo da una vera grafica che un cliente mi ha passato per il suo personale sito; scopriremo quali sono i ragionamenti che stanno dietro allo sviluppo di un template WordPress partendo da una grafica prestabilita, quali opzioni ci verranno proposte e molto molto altro!

Ti piacerebbe vedere la tua grafica prendere vita all’interno di un template WordPress? Lascia un link nei commenti o, se preferisci, mandami una mail. Nelle prossime settimane metterò online le grafiche più interessanti e sarete direttamente voi a scegliere quale grafica dovrà essere sviluppata!

Lascia il tuo Pensiero

15 Responses to “Ci Manca uno Slider”

  1. Gianlu

    Ciao Andrea,
    grazie per l’ottima guida!!!
    Ho iniziato a lavorare con WP(in locale) 10gg fa e devo dire che le tue lezioni mi hanno aiutato a comprendere la logica di questo bel CMS in pochissimo tempo, ma avrei delle domande da porti:
    [Premessa: ho delle conoscenze di base di HTML, CSS e PHP, queste ultime molto di base anche se con la tua guida si sono un po rinforzate, quindi se faccio domande poco attinenti, sii paziente]
    1- E’ un passo necessario la costruzione della front page o si puo cmq lavorare lasciando tutto così com’è, cioè lavorare sullla index.php e gli altri file di un template già pronto?
    2- Come posso gestire la sezione login-registrazione-pass persa?Mi consigli un plugin(tipo login-with-ajax, x siderbar) o lavorare direttamente sul file wp-login.php e suo css?
    3- Come dico a WP che gli utenti possono entrare solo nella loro pagina per modifica il profilo e non fargli vedere il resto delle impostazioni? (sto lavorando con il tema twentyeleven,faccio delle prove) Consigli un plugin come Adminimize?
    In pratica vorrei capire come gestire gli utenti(partendo dal login) e i loro permessi(ES: voi potete solo accedere alla vostra pag profilo standard di WP eventualmente aggiungere una foto o altre info e vedere solo quella).
    Ho dimenticato le altre domande,al max ti riscrivo.

    Ciao e grazie ancora x le lezioni.

    Rispondi
    • Andrea Barghigiani

      Ciao Gianlu,

      per prima cosa lasciati ringraziare. Quando ricevo commenti come il tuo mi viene un sorriso da bambino che, ancora adesso, non si stacca dalla mia faccia! Sapere che hai appena iniziato con WordPress e che hai trovato la mia guida utile non ha veramente prezzo!

      Per quanto riguarda HTML/CSS, potresti leggere l’Introduzione allo Sviluppo CSS oppure il corso Sviluppo CSS (creati sempre dal sottoscritto) ma presenti su Oilproject. A breve dovrebbe anche uscire la mia guida sul HTML5… Parlando di PHP volevo pubblicare su questo sito una guida introduttiva magari con riferimenti ed esempi diretti con il Core di WordPress, che ne pensi?

      Finita la pubblicità, passiamo alle tue domande:

      1. No, non è un passo necessario. In questa lezione è stata inserita questa possibilità soltanto per mostrare che esisteva ma, se queste non sono le tue necessità, puoi tranquillamente lasciare la home di default. Parli di TwentyEleven, sai vero che abbiamo raggiunto la versione 3.5 con TwentyTwelve, vero?
      2. Questo è un argomento un pò spinoso… Al momento posso indicarti un articolo che spiega come cambiare il logo all’interno di questa pagine ma, volendo affrontare questo argomento in un prossimo futuro, al momento non mi trovi preparato per rispondere ad una domanda del genere. Se vuoi un consiglio potresti iniziare semplicemente con il classico login, cambiando logo, e appena gli articoli saranno pubblicati sarai il primo a saperlo (PS: grazie anche per esserti iscritto alla newsletter!).
      3. Altro argomento interessante e che andremo anche a vedere in un prossimo futuro. Tendenzialmente WordPress crea ogni utente con il ruolo Subscriber che potrà, appunto, consultare il proprio profilo e modificare soltanto quello. Come ti dicevo, andrò a breve a fare qualche tutorial anche per questo aspetto di WordPress e, se le informazioni fornite ti bastano, mi impegno a realizzare il tutto al più presto!

      Stavo pensando, se non è per te un disturbo, di contattarti via mail anche per porti qualche domanda sui problemi ed esperienze che affronti con WordPress, posso proseguire tranquillamente?

      Grazie mille per il tuo supporto, ci sentiremo sicuramente presto!

      Andrea

      Rispondi
      • Gianlu

        Ciao Andrea,
        grazie per le guide CSS (attenderò con ansia quella su HTML5), le consulterò di sicuro e ti scriverò qlk in merito.
        Sul PHP, credo che sia utile approfondire il discorso. WP basa molto, se non tutto, sulle sue funzioni PHP, quindi, nell’eventualità si volessero inserire delle parti all’interno della pagina, credo che sia necessario conoscerlo.
        ES.1- Supponiamo di voler aggiungere le funzioni login e register (presenti nel widget meta) all’interno dell’header, sotto al pulsante “cerca” (mi riferisco al template TwentyEleven), se non si conoscono le funzioni wp-register e wp-login, inserite poi nell’header con e (eventualmente inserite all’interno dei div in modo da poter utilizzare un po di css per la grafica), come altro si potrebbe fare oltre che con l’utilizzo dei plugin?
        ES.2- Ho installato il plugin Camera (http://www.pixedelic.com/plugins/camera/wp.php, oppure http://wordpress.org/extend/plugins/camera-slideshow/) con l’intenzione di posizionarlo all’interno dell’header,sotto al nav e, data la mia poca conoscenza di PHP,nonostante ci fossero tutti i mezzi (il codice necessario al suo inserimento e lo shortcode) per poterla utilizzare al meglio, non ci sono riuscito ed ho dovuto sopperire a questa mancanza utilizzando un altro plugin (WP Content Slide- http://wordpress.org/extend/plugins/content-slide/).
        Se avessi avuto più padronanza del codice, forse, avrei potuto farcela. Ecco perchè credo che un po di PHP non possa far male, anzi, credo che possa mettermi/ci nella condizione di poter “sfruttare” al meglio WP.
        Certo, il PHP non si impara dalla sera alla mattina, di sicuro saranno necessarie nozioni di base come cos’è una variabile, una funzione, gli attributi, le proprietè, le istanze ecc. cioè aver almeno letto un libro prima, è fondamentale per poter passare ad utilizzarlo. Se tu dovessi decidere di fare una guida sul PHP te ne sarei grato. Il mio consiglio è quello di partire da cose pratiche, come hai suggerito tu e come hai fatto per la guida sul template da zero, manipolando da subito il core di WP (vedi ES.1 login e register che riguardano il file wp_login.php ed altri) ed al max mettere dei link all’interno della guida x le nozioni di base.
        Scusami se mi permetto di darti dei consigli su un lavoro che fai davvero bene.
        Cmq, avendo iniziato da poco con WP, non so fino a che punto io riesca a darti delle risposte esaurienti ma, di sicuro, le tue domande mi potranno aprire gli occhi su tanti aspetti a me ancora sconosciuti,quindi, vai tranquillo,anzi….non vedo l’ora (se preferisci via e-mail,non ci sono problemi).
        Per la versione di WP, ho installato questa(in locale su ubuntu 12.04): WordPress 3.5 XXL in italiano (10,4 MiB) presa dal sito http://www.wpitaly.it/wordpress-in-italiano. Ho scelto di lavorare su questo tema senza un motivo preciso.

        Ciao e grazie ancora.

        Gianlu

        Rispondi
  2. rosario

    complimenti, ottimo lavoro… attendo con ansia la parte del lavoro grafico, grazie per la tua divulgazione del sapere.
    rox

    Rispondi
    • Andrea Barghigiani

      Grazie mille Rosario,

      fa sempre piacere ricevere questi commenti! Al momento non sono ancora in grado di dirti quando svilupperò una guida più grafica ma appena sarà pronta te lo comunicherò! Se ti piace restare informato sul mondo WordPress e sulle guide che vedranno la luce ne futuro, puoi registrarti alla newsletter per restare informato senza ricordarti l’esistenza di questo sito 😉

      A presto.

      Rispondi
    • Andrea Barghigiani

      Cavoli Claudio mi eri sfuggito!

      Grazie mille per i complimenti, mi fa piacere che questo corso possa tornarti utile. Da questo inverno troverai questo e gli altri corsi che creerò anche in formato ebook (.pdf, .epub o .mobi sarai tu a scegliere). Sopratutto per le prime inizierò a pubblicarle son la formula “Paga Quanto Vuoi” ovvero rilascerò il file gratuitamente, ma se vuoi darmi una mano a sostenere questi corsi puoi sempre pagare la cifra che preferisci!

      Che ne pensi?

      Rispondi
  3. Xero

    mmmm….ho seguito passo passo la guida ed ho scaricato anche il file .zip….
    lo slide non si vede, riconosce solo il suo ingombro :O

    Rispondi
    • Andrea Barghigiani

      Sei sicura di aver utilizzato le immagini in evidenza? Perché io ho appena scaricato il file .zip ed installato il tema in locale e appena ho inserito le immagini in evidenza tutto ha funzionato correttamente…

      Prova altrimenti a cercare con strumenti come Firebug all’interno del tuo codice. Se vuoi ci possiamo trovare in settimana prossima su Google+ per un Hangout e guardiamo insieme il problema.

      Rispondi
      • Xero

        Lavoro in locale, ho fato una nuova installazione di wp, ho caricato il file zip…ma niente, non lo vede 😀

        Rispondi
          • Andrea Barghigiani

            L’unica cosa che mi può venire in mente è che sia lo slider che il resto della personalizzazione della homepage fa riferimento a questo file che ti ho consigliato di scaricare nella lezione 15. Inoltre, come ti ho risposto prima, devi assicurarti di aver impostato una immagine in evidenza e di aver selezionato anche la categoria Slider per l’articolo che vuoi che venga mostrato al suo interno.

            Riconosco che è un tema molto “dipendente” dalle modifiche al codice, quindi senza controllo nel pannello di amministrazione, ma credo possa bastare per muovere i primi passi 😀

          • Xero

            olè funziona…avevo dimenticato la categoria slider >_<
            scusate 😀