WordPress: Diamo Uno Sguardo al Loop
Nei precedenti articoli di questa guida siamo riusciti – partendo completamente da zero – a sviluppare la parte superiore (l’header) del nostro sito/blog. Con la lezione di oggi entriamo nel cuore del meccanismo di WordPress, quello che in gergo tecnico è definito il “loop”.
Che cos’è questo loop e a cosa serve? Questa sicuramente è una delle tante domande che affiorano nella mente di chi si trova per la prima volta a dissezionare un tema di WordPress nel tentativo di personalizzarlo a proprio piacimento. Vediamo dunque di rispondere a questo interrogativo e di rendere tutto più chiaro.
Indice dei contenuti
- Che cosa è il loop e come si utilizza?
- Aggiungere la paginazione alla fine del loop
- Aggiungere un testo da visualizzare nel caso non ci siano articoli
- Conclusione
1. Che cosa è il loop e come si utilizza?
Loop letteralmente significa “esecuzione ripetuta” di “qualcosa”; nel nostro caso si tratta dell’esecuzione ripetuta “n” volte di un set di istruzioni necessarie alla visualizzazione di un articolo. Ripetendo queste istruzioni “n” volte saranno visualizzati “n” articoli nel punto in cui è richiamato il loop.
Tornando al tema che stiamo realizzando, supponiamo di volerlo dividere in due colonne subito sotto l’header. Nella colonna sinistra visualizzeremo l’elenco degli ultimi articoli pubblicati mentre nella colonna destra mostreremo una sidebar su cui andremo a inserire (in una delle prossime lezioni) alcune informazioni utili che vogliamo rendere visibili su tutte le pagine del sito/blog. Insomma stiamo definendo il classico layout di un blog.
Ti ricordo che nulla ci vieta di definire in maniera completamente diversa le sezioni: il modo in cui questi contenuti saranno presentati sullo schermo andrà poi definito nel nostro foglio di stile.
Realizziamo dunque il markup HTML necessario per visualizzare la colonna sinistra che dovrà contenere i nostri articoli:
<!-- START COLONNA SINISTRA --> <div id="content"> <?php if (have_posts()) : ?> <!-- START LOOP --> <?php while (have_posts()) : the_post(); ?> <!-- BEGIN POST --> <div <?php post_class(); ?>> ...contenuto post... </div> <!-- END POST --> <?php endwhile; ?> <!-- END LOOP --> <?php endif; ?> </div> <!-- END COLONNA SINISTRA -->
Questa invece la regola da definire nel nostro foglio di stile per visualizzare la sezione content a sinistra del nostro layout con una dimensione di 650 pixel (nota: per renderla ancora più visibile provvisoriamente ho aggiunto il solito bordo rosso di un pixel).
#content {width:650px; margin:30px 0;float:left;border:1px solid red;}
Piccola premessa prima di analizzare più nel dettaglio il markup che abbiamo realizzato. Come puoi notare, per processare il loop è stato utilizzato qualche costrutto tipico del linguaggio php, ecco perché per una buona comprensione è consigliabile avere un minimo di nozioni per lo meno sul significato dei costrutti principali di questo linguaggio.
1.1 L’avvio del loop
Ora passiamo ad analizzare più nel dettaglio il markup che abbiamo scritto:
- Come prima cosa si definisce la sezione che delimita la colonna sinistra (content).
- In seguito eseguiamo quello che nel linguaggio di programmazione è definito un controllo condizionale, mediante il costrutto “if” del linguaggio php verifichiamo la funzione have_posts() di WordPress per controllare se esistono post; infatti la funzione restituirà il valore “true” (cioè vero) nel caso in cui siano presenti post.
- Se ci sono post è avviato un ciclo while (il famoso loop di cui si parla) il quale continua a essere eseguito finché la funzione have_posts() continua a restituire un valore true, cioè fino a quando ci sono post da mostrare.
- Quando la funzione have_posts() restituisce un valore false – cioè nel momento in cui non ci sono più post da mostrare – il ciclo viene interrotto.
1.2 Generazione degli articoli
La funzione the_post() prende l’elemento (l’articolo/post) corrente del ciclo e lo rende disponibile per l’uso all’interno di questa iterazione. Senza questa funzione molti dei tag utilizzati per stampare le informazioni riguardanti i post non funzionerebbero.
Una volta che le informazioni relative ai post sono rese disponibili, il template può iniziare a mostrare i dati sulla pagina per renderli visibili agli utenti. Per il momento, avendo inserito solo la stringa “contenuto post” e non avendo utilizzato ancora nessun tag per la visualizzazione delle informazioni relative ai post, la nostra pagina si presenterà come mostrato in Figura 1.
Figura 1 - Generazione degli articoli all'interno del loop.
1.3 Mostrare il titolo, la data e l’autore
Adesso proviamo a sostituire la scritta statica che abbiamo inserito all’interno del loop (…contenuto post…) con alcuni tag che ci restituiranno le informazioni inerenti i post che vogliamo mostrare.
Per visualizzare il titolo del post basta utilizzare la funzione the_title() come mostrato sotto:
<h2><?php the_title(); ?></h2>
Se adesso andiamo a vedere la pagina del nostro blog dovremmo vedere il titolo del post così come mostrato in Figura 2.
Figura 2 - Mostrare il titolo del post all'interno del loop.
Se desideriamo rendere il titolo del post linkabile in modo da collegarlo al contenuto dell’articolo, possiamo utilizzare la funzione the_permalink():
<h2> <a href="<?php the_permalink() ?>"> <?php the_title(); ?> </a> </h2>
Adesso il titolo del nostro post è diventato un collegamento ipertestuale che punta al contenuto dell’articolo.
Che ne dici, mostriamo anche la data di pubblicazione e il nome dell’autore dell’articolo?
Subito sotto il titolo, aggiungiamo queste due righe richiamando le funzioni messe a disposizione da WordPress the_time() e the_author() per mostrare rispettivamente data di pubblicazione e autore dell’articolo:
<p class="data">
<?php the_time('j F Y') ?> di <?php the_author() ?>
</p>
Definiamo la classe data nel nostro foglio di stile per formattare la presentazione di questi contenuti:
p.data {font-style:italic;font-size:85%;}
A questo punto la nostra pagina dovrebbe mostrarsi così come visualizzato in Figura 3.
Figura 3 - Visualizzare la data e l'autore di un articolo all'interno del loop.
1.4 Mostrare il contenuto dell’articolo
La funzione the_content() serve a mostrare il contenuto dell’articolo. C’è una cosa però a cui è necessario prestare attenzione: la funzione in questione visualizza nel documento il contenuto dell’articolo fino al tag <!–more–>, nel caso in cui questo fosse stato usato durante la scrittura dell’articolo.
Per quanti non lo sapessero, il tag <!–more–> permette di definire una porzione di articolo da visualizzare come eventuale incipit/introduzione dello stesso (Figura 4). Così facendo la parte dell’articolo inserita subito dopo questo tag verrà mostrata successivamente, quando – e se – l’utente deciderà di leggerne l’intero contenuto cliccato sul relativo collegamento ipertestuale.
Figura 4 - Utilizzo del tag more.
Aggiungendo sul nostro template la funzione the_content() subito dopo la data e l’autore, nella nostra home page visualizzeremo il contenuto dell’articolo fino al tag more, con un testo (passato come parametro alla funzione) che invita a proseguire alla lettura e che collega in modo automatico all’articolo.
<div class="entry">
<?php the_content(__('|| continua a leggere »')); ?>
</div>
Andiamo a vedere il contenuto della nostra home page che comincia a prendere forma (Figura 5).
Figura 5 - Visualizzare il contenuto dell'articolo all'interno del loop.
1.5 Mostrare altri dettagli aggiuntivi
Vogliamo aggiungere qualche altro dettaglio riguardante i nostri articoli?
Magari subito dopo l’incipit ci farebbe comodo visualizzare le categorie cui l’articolo è stato assegnato o il numero di commenti ricevuti. Mediante l’utilizzo delle funzioni the_category() e comments_popup_link() possiamo soddisfare le nostre esigenze:
<p class="postmetadata">
Pubblicato in <?php the_category(', ') ?>
</p>
<p class="right">
<?php comments_popup_link('Nessun commento »', '1 Commento »', '% Commenti »'); ?>
</p>
Alla funzione the_category() abbiamo passato come parametro una virgola (,); nel caso in cui all’articolo fossero state assegnate più categorie questo sarà il carattere separatore utilizzato per dividere sullo schermo le varie categorie l’una dall’altra.
Alla funzione comments_popup_link() sono stati passati tre parametri:
- il primo rappresenta il testo da visualizzare nel caso in cui l’articolo non avesse nessun commento;
- il secondo rappresenta il testo da visualizzare nel caso in cui l’articolo avesse un unico commento;
- il terzo ed ultimo parametro rappresenta il testo da mostrare nel caso in cui l’articolo avesse più di un commento.
Aggiungiamo qualche altra regola al nostro foglio di stile in modo da definire la formattazione degli altri elementi che stiamo utilizzando per mostrare gli articoli del nostro blog:
p.right {text-align:right;}
h1 {font-size:150%;line-height:1;margin-bottom:0.5em;text-align:center;}
h2 {font-size:130%;line-height:1;margin:0.75em 0;}
Nella Figura 6 puoi vedere un’anteprima di come si presenta adesso la nostra home page.
Figura 6 - Visualizzare le categorie e i commenti dell'articolo all'interno del loop.
Per quanto riguarda la visualizzazione degli articoli possiamo dire che ci siamo. Adesso diamo gli ultimi ritocchi alla pagina prima di terminare con la lezione odierna.
2. Aggiungere la paginazione alla fine del loop
Per impostazione predefinita WordPress visualizza gli ultimi dieci articoli sulla home page del blog, questa impostazione può comunque essere facilmente modificata dal pannello di amministrazione (Impostazioni -> Lettura) indicando il numero di articoli che desideriamo visualizzare. Nel caso in cui nell’home page del blog sono presenti più articoli di quelli indicati, questi vengono suddivisi in più pagine in modo automatico direttamente da WordPress.
A questo punto è indispensabile visualizzare una paginazione alla fine del loop che ci fornisca la possibilità di navigare da una pagina all’altra qualora questo fosse necessario. A tal proposito WordPress mette a disposizione delle funzioni di navigazione per le paginazioni dei post.
Aggiungiamo queste righe di codice subito dopo la fine del loop:
<div class="navigation">
<div class="alignleft"><?php next_posts_link(__('« Precedenti')) ?></div>
<div class="alignright"><?php previous_posts_link(__('Successivi »')) ?></div>
</div>
3. Aggiungere un testo da visualizzare nel caso non ci siano articoli
Dobbiamo prevedere anche il caso in cui, nel nostro blog, non sia presente nessun articolo. All’inizio di questa lezione abbiamo detto che prima dell’avvio del loop verifichiamo se sono presenti degli articoli mediante la funzione have_posts():
<?php if (have_posts()) : ?>
In caso affermativo si procede all’avvio del loop e alla visualizzazione degli articoli, ma nel caso la verifica restituisse un valore negativo?
Per ovviare a questa particolare condizione, aggiungiamo prima della chiusura del costrutto if (endif), un messaggio alternativo da mostrare nel caso in cui la condizione iniziale non fosse vera:
<?php else: ?>
<h2><?php _e('Non trovato'); ?></h2>
<p class="center"><?php _e('Siamo spiacenti, quello che stavi cercando non è su questa pagina'); ?></p>
<?php endif; ?>
4. Conclusione
Fino a questo momento sul nostro blog abbiamo un unico articolo creato da WordPress in modo automatico in fase d’installazione. Prima di concludere proviamo ad aggiungere un nuovo articolo (Figura 7) di prova per vedere come questo sarà visualizzato sul template che abbiamo finora realizzato (Figura 8).
Figura 7 - Aggiunta di un nuovo articolo.
Figura 8 - Home page del tema che abbiamo realizzato.
Ho tolto il bordo rosso che avevo utilizzato inizialmente esclusivamente per fini didattici e adesso il nostro template, come puoi vedere, inizia a prendere forma.
Per aiutarti ulteriormente nella comprensione di queste lezioni ti metto a disposizione i file del tema che abbiamo finora sviluppato.
DownloadOggi abbiamo affrontato la parte più complessa della realizzazione di un tema per WordPress, il loop. Se sei riuscito a comprenderne il meccanismo senza grandi difficoltà WordPress non avrà più segreti per te, potrà essere sezionato e ricostruito in qualsiasi momento secondo le tue effettive esigenze.
Il mio consiglio comunque è sempre quello di consultare l’ottima documentazione sul sito ufficiale per approfondire tutte le funzioni affrontate in questa lezione in modo da comprenderne appieno le potenzialità e sfruttarle dunque nel modo più idoneo alle nostre esigenze. Nella prossima lezione andremo a definire la sidebar del nostro blog, la colonna laterale che generalmente si ripete su tutte le pagine del sito. Sei pronto?
Indice degli articoli trattati in questa guida
Per agevolarti la consultazione della guida alla fine di ogni articolo riporterò l’indice comprendente tutti gli argomenti trattati.
- Come Installare WordPress in Locale?
- WordPress: Diamo Uno Sguardo al Pannello di Amministrazione
- Come Creare un Template per WordPress Partendo da Zero?
- WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2)
- Diamo Uno Sguardo al Loop di WordPress
- Aggiungiamo la Sidebar al nostro tema
- WordPress: come rendere dinamici Header e Sidebar del template?
- Gerarchia dei template e loro utilizzo: come creare un template per gli articoli?
- Come Creare Template Personalizzati per le Pagine di WordPress?
- WordPress: predisporre la sidebar per l’uso di widget
- Personalizzare il Template dei Commenti di WordPress (Parte 1) | (Parte 2)
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
82 commenti
Trackback e pingback
-
Tweets that mention WordPress: Diamo Uno Sguardo al Loop | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by Fabio, nando pappalardo. nando pappalardo said: RT @YIW WordPress: Diamo Uno Sguardo… -
Custom Post Type: come strutturare i nostri contenuti? | Your Inspiration Web
[...] soluzioni prevedono di inserire i progetti come post, che poi verranno rimossi manualmente dal loop di WordPress (nella pagina…
Grande Nando,
aspettavo con ansia questa lezione perché come hai detto tu è il fulcro di WP alcune cose già le conoscevo perché ci ho sbattuto la testa però ora sono sicuramente più chiare!
Alla prossima
Ciao Luca e grazie a te per essere passato anche questo martedì =)
Superlativo… teoricamente tutto ciò che simboleggiava un dogma per me, inizia ad apparire addirittura semplice… spero lo sia anche qnd metterò tutto ciò in pratica…
Tenchiù…
Ciao Marco, mi fa davvero piacere leggere che adesso per te è tutto molto più chiaro e semplice, era l’obiettivo principale di questa guida. Sono sicuro che lo troverai altrettanto semplice quando sarà il momento di scrivere il codice perchè la verità è che è davvero semplice! =) Altro punto di forza di WordPress.
Bene, grazie Nando, finalmente il sole e’ spuntato sul Loop =)
Mi auguro che, alla fine di tutti gli articoli che riguardano WP, ci farai un ebook; una cosa cosi’ chiara e ben spiegata merita parecchio risalto =)
E ora che mi sento piu’ colt(ivat)a, mi mangio un bel gelato al cocco, caffe’ e limone =)
Ciao Claudia, di pari passo alla guida sto già realizzando la versione eBook anche se la mia intenzione sarebbe di approfondire ulteriormente alcuni argomenti (nell’eBook) che qui non sto trattando, come per esempio la modifica della query prima di eseguire il loop per tirare fuori solamente ciò che ci interessa, la creazione di plugin/widget, un case study riguardante la realizzazione di un tema WordPress da psd a (X)HTML&CSS, ecc…
Comunque se sei iscritta alla newsletter molto presto dovresti ricevere qualche anticipazione su alcuni dei progetti che abbiamo in corso.
Passene uno anche a me di questi gelati che il caldo afoso qui in Sicilia inizia già a farsi sentire =)
Grazie Nando di questo nuovo e chiarrissimo articolo.
Ho una piccola domanda.
Utilizzi la funzione post_class() ma ti sei dimenticato di dirci a cosa serve :-)
Ciao Maurì, grazie per la segnalazione, in effetti mi è proprio sfuggita la spiegazione di questa funzione che ho utilizzato. Vedo di integrare prima possibile nell’articolo.
Comunque per farla breve la funzione post_class() serve per aggiungere alcune classi in modo dinamico (alcune già predefinete di WordPress altre create sulla base delle categorie e dei tag a cui è stato assegnato l’articolo in questione) al post.
Un esempio? Se assegniamo il nostro articolo alla categoria “news” e lo taggiamo come “redazione” e “comunicati”, la funzione dovrebbe restituire qualcosa del genere:
<div class="post hentry category-news tag-redazione tag-comunicati">
A questo punto sul foglio di stile avrai a disposizione queste classi per personalizzare ulteriormente ogni singolo post sulla base della categoria cui appartiene o del tag che gli è stato associato:
.post
.hentry
.category-news
.tag-redazione
.tag-comunicati
Tutto ok, spiegato così bene, sembra davvero tutto semplice.
Grazie ancora, più di una citazione alla fine è doverosa, per adesso su facebook e twitter, alla fine in una pagina appossita sicuramente.
Ciao Paolo e grazie, davvero troppo gentile =)
E dopo tanti elogi, ecco arrivare il “criticatore” di wp. Nando, come tu ben sai, ho sempre elogiato joomla per la facilità della struttura del template.
Dopo aver letto questo tuo articolo (unica guida seria e semplice), posso dire che la prima cosa che farò quando mi libererò dal grosso del lavoro, sarà quella di mettere in pratica i tuoi preziosi consigli.
Finalmente ho quello che mi serve per sviluppare template anche per wp, e non solo per joomla.
Grazie nando, con mio grande rammarico, sei riuscito a farmi fare un passo in più verso WP. Ma non cantare vittoria, la sfida è ancora aperta ahahahah
Skerzo ovviamente ;)
Complimenti come sempre
Caluk, vi convertirò tutti, uno per uno!!! =) Dopo aver provato a creare un tema per WordPress vi sarà impossibile ritornare su Joomla.
Scherzi a parte, appena hai un po’ di tempo metti alla prova gli argomenti di questa guida perchè ho l’impressione che per i prossimi due/tre anni sarà WordPress a farla da padrone sul mercato ed essere in grado di lavorare anche su questa piattaforma può tornarti davvero utile.
P.s. Grazie per i complimenti
Ma è ovvio che metterò in pratica questa guida, anche perchè devo rimettere su il mio vecchio blog, perchè ho un progettino da fare.
La cosa che mi infastidiva di WP era quella di capire il funzionamento delle classi, perchè a differenza di joomla (che vuole solo sapere come si chiamano le varie posizioni) c’è anche il discorso del ciclo while etc
Avevo iniziato a consultare dei tutorial in lingua inglese, ma avendo poco tempo, ho rinunciato.
Adesso invece ho ben chiara la struttura, e come interagisce il tema con il CMS, quindi è già molto più semplice fare un layout base. Poi è chiaro che se uno vuole approfondire, va a studiarsi tutte le classi di WP.
Meno male che i rimasugli di Pascal sono ancora vivi nella mia mente :D altrimenti mi sarei complicato la vita con IF e WHILE :P
Appena mi butto su WP non mancherò di fartelo sapere, per avere dei consigli in merito ;)
Ciao e grazie di esistere YIW, uno dei pochi blog che pubblica articoli interessanti e non solamente liste lunghe e odiose (oppure quelle dannate inspiration -.- poche vanno benissimo, ma ogni giorno noooooo)
Byeeeee
Conoscere un minimo di programmazione ovviamente rende tutto molto più semplice e comprensibile.
Grazie per le belle parole Caluk e a presto!
grazie davvero! non ti immagini neanche quanto e’ stata utile questa lezione!
in classe domani ci sara’ una standing ovation :)
bellissima l’idea dell’ebook :)
Fai un video della standing ovation =P
Ciao gipuntoe, mi associo a Claudia, vogliamo un video della standing ovation =)
p.s. Grazie a te per essere intervenuto.
Con questo articolo posso davvero dire di aver finalmente capito come si fa un tema per wordpress!
Purtroppo non riesco mai a trovare il tempo di leggere con calma la tua guida e finisco per non farti mai i complimenti che meriti. :)
Aspetterò con ansia il pdf con gli approfondimenti :D
Ciao scienzedellevanghe, grazie intanto per i complimenti!
Il piacere più grande è nel constatare che stiamo – passo dopo passo – raggiungendo quell’obiettivo che ci eravamo proposti all’inizio della guida.
Tutto chiarissimo, complimenti ancora una volta!
Una domanda: su varie guide, dividono i files del template in nomi diversi che vanno poi a comporre il file index e quindi inclusi nel codice php dello stesso.
Vedo invece che tu fai tutto nel file index.
C’è una ragione particolare?
Ciao dobrio, grazie a te ancora una volta =)
La tua osservazione è correttissima, in effetti il template si sviluppa in quel modo e faremo anche noi così.
Se dall’indice della guida provi a guardare il titolo della prossima lezione, ti accorgerai che è: “WordPress: Richiamiamo in Modo Dinamico Alcune Sezioni e Aggiungiamo la Sidebar“. Con richiamo in modo dinamico di alcune sezioni intendo spiegare proprio questo punto da te accennato.
Trattandosi di una guida sulla realizzazione di un tema partenzo da zero, ho ritenuto indisepnsabile seguire prima tutti i passaggi. Dopo aver compreso la struttura del template possiamo vedere come è possibile rendere tutto ancora più dinamico e flessibile utilizzando delle funzioni fornite da WordPress che permettono di includere dinamicamente alcune delle sezioni che abbiamo realizzato.
Ho utilizzato la vostra guida alla realizzazione di un sito dalla A alla Z per lavorare al mio primo sito web: aspetterò la fine di questo corso su wordpress per fare altrettanto!
Grande Nando!
Ciao Shelkem, grazie a te e benvenuto su YIW! Siamo felici di esserti stati utili!
Vado un poco OT, ma visto che si parla di Loop mi pareva la sezione ideale dove postare, cosicche’ i novizi come me possano avere chiarificazioni =)
In rete ci sono vari plugin per visualizzare i Related Posts, io ho sempre usato YARPP; ma volendo snellire le query che il blog deve sopportare volevo ottenere lo stesso risultato semplicemente con del codice. Su WP Recipes c’e’ questo codice http://www.wprecipes.com/how-to-show-related-posts-without-a-plugin, che ho provato ma non e’ successo niente =)
Nando, tu che tutto puoi, sai darmi un aiuto? =)
Ciao claudia, perdona l’immenso ritardo con cui ti rispondo ma sono stato (e continuo ad esserlo) sommerso di lavoro in questa settimana.
Per quanto riguarda il tuo problema, ho utilizzato anche io in passato lo script che hai indicato e mi funzionava tutto regolarmente. In quale punto del template lo inserivi? Ti chiedo questo perchè comunque lo script in questione andrebbe inserito all’interno del loop e non al di fuori. Fammi sapere.
Grazie Nando, da profano di wordpress pensavo si potessero utilizzare entrambi i metodi di cui te preferivi quest’ultimo che hai spiegato.
Nando, non scusarti di niente, ci mancherebbe, siete tutti cosi’ disponibili e pazienti =)
Per quel che riguarda il plugin e il codice: ho messo tutto nel loop, seguendo le istruzioni ma credo che il problema dipenda dal mio tema: ci sono funzioni (nelle Themes Functions) che vanno in conflitto e in questa ultima settimana il mio blog e’ andato fuori di testa con evidenti problemi di lentezza e sfasamento..
Ho eliminato YARPP e l’ho sostituito con YARPP con thumbnails che, incredibile ma vero, ha migliorato la funzionalita’ e la velocita’. Arthemia e’ un tema capriccioso, se lo modifichi nel core non sempre risponde bene e non c’e’ nemmeno da sottovalutare l’hosting! Il mio (playnet.it) mal sopporta troppe query e va in timeout facilmente. Per questo ho eliminato anche tanti altri plugin, preferendo piccoli pezzi di codice.. ma nemmeno troppi =)
Cmq grazie Nando, e’ sempre utile imparare da te =)
A questo punto presumo anche io si tratti di un conflitto con qualcuna delle funzioni personalizzate utilizzate dal tuo tema.
Grazie a te Claudia per le belle parole =)
ciao, una domanda che mi son sempre posto riguardo ai menu’ di wordpress………..Io ho il problema che quando vado a creare delle sottopagine, mi ritrovo con la pagina principale indicata nel menu’ orizzontale, e le sue sottopagine da cliccare che compaiono passando con il mouse. Se però clicco il tasto della pagina principale e non una delle sottopagine che compaiono, accedo comunque a una pagina che risulterà priva di contenuti, è eliminabile questa opzione senza utilizzare un plug-in per i menù???
Grazie per l’eventuale aiuto
Ciao Cristiano, intanto scusami per il ritardo di questa risposta.
Non è possibile eliminare il collegamento ipertestuale alla pagina quando queste vengono richiamate mediante l’utilizzo della funzione wp_list_pages().
Un modo per ottenere ciò che desideri ci sarebbe, ma è un’operazione non proprio semplice: puoi visualizzare il menù di navigazione richiamando le varie pagine singolarmente mediante la solita funzione wp_list_pages(), sfruttando il parametro include per indicare la pagina da caricare. Quando è il momento di visualizzare la pagina che non vuoi abbia link, puoi richiamarla mediante l’utilizzo della funzione get_pages(), qualcosa del genere dovrebbe visualizzarti solo il nome della pagina senza collegamento ipertestuale:
$pages = get_pages('include=id_pagina'); foreach ($pages as $pagg) { echo $pagg->post_title; }Successivamente dovresti fare in modo di richiamare le relative pagine figlio con il solito metodo. Non è un processo semplicissimo ma se hai dimestichezza con il php e un po’ di tempo libero puoi riuscire ad ottenere il risultato desiderato.
Spero di esserti stato d’aiuto.
Il ritardo è una cosa normale non ti preoccupare……con tutto il da fare che avrai :)..con php me la cavo…….è il tempo che mi manca :) ………cmq grazie infinite per la spiegazione…….proverò a metterla in pratica al più presto su un lavoro che sto facendo………..è sempre stato un problema che mi trascino da tempo immemore…….avevo addirittura trovato un plug-in che faceva al caso mio…..ma come ovviamente succede non mi ricordo + ne il nome ne dove l’avevo trovato, non essendo inserito a quanto pare nel calderone di wordpress.org :)
Cmq grazie mille
Figurati, è un piacere, cristiano!
Buon lavoro e a presto.
Ciao, innanzitutto vi faccio davvero molti complimenti per la qualità delle vostre guide, siete i migliori!
Seguo con particolare interesse la sezione relativa a WP e proprio a riguardo di questa lezione avrei una domanda. Ho notato che nel loop WP non fa differenza tra un articolo e una pagina in relazione alla visualizzazione dei dettagli aggiuntivi come l’autore o la data di pubblicazione. Avendo l’esigenza di far comparire questi dati solo nella sezione relativa agli articoli (e non nelle pagine) come posso fare? Spero di non andare “fuori tema” con questa richiesta ma credo che possa essere utile saperlo. Grazie e ancora complimenti!
Ciao Massimiliano, grazie mille per i complimenti e benvenuto su YIW!
Quello che chiedi sarà affrontato nelle prossime lezioni, quelle che nell’indice del corso attualmente sono indicate come lezione 7 e 8. Solo che proprio questa settimana come lezione 7 ho intenzione di affrontare un argomento che non sono riuscito a trattare nella precedente lezione (come rendere dinamiche alcune sezioni del codice che abbiamo sviluppato) e di conseguenza le due lezioni interessate slitteranno alle settimane successive.
Appena trovo due minuti aggiorno l’indice della guida su tutti gli articoli.
A presto
Ok grazie!
ahia, arrivo tardi… comunque provo lo stesso a esporre il mio problema. benché abbia specificato nello style.css il float:left; vedo comunque tutto spostato verso destra, e credo di capire che dipenda semplicemente dal fatto che NON esiste la barra destra dei widget. L’avete già definita in una precedente lezione e me la sono persa?
Grazie di tutto!!
@veronica
#content {clear: left; width:450px; margin:30px 0; float:left; border:1px solid red;}
avevo anch’io lo stesso problema: ho risolto come puoi vedere.
Ciao!
Ciao!
Innanzitutto complimenti per la guida, è proprio quello che stavo cercando.
Volevo sapere se secondo voi è una cosa fattibile anche per chi di php ne sa poco o nulla… solo interpretare qualche istruzione, qualche ciclo e cose così…
Una segnalazione: il link al download del pdf in questo articolo non funziona, esce questo messaggio di errore: Missing or incorrect image file: /home/yourinsp/public_html/wp-content/themes/yiw/images/icons/downloads.gif
Grazie ancora e continuate così! :-)
Ciao Fede, diciamo che il grado di personalizzazione di un tema è direttamente proporzionale al grado di preparazione che si ha sul php.
Grazie per la segnalazione dell’errore nel pdf, si tratta di un problema del plugin che stiamo utilizzando. Prova a stampare l’articolo normalmente, con il nuovo layout abbiamo ottimizzato anche il foglio di stile per la stampa.
Bravissimo questo tutorial e il migliore di tutti grazie a te possiamo imparare a realizzare i temi almeno in modo originale senza installare quelli già esistenti.
Grazie sei il migliore
troppo buono =) ciao vincenzo, grazie a te e benvenuto su YIW!
Ciao Nando,
Grazie ancora per la tua utilissima guida!
Probabilmente ti sei dimenticato di specificare l’inserimento di un tra e
Ciao!
Dimenticavo che i tag non è il caso inserirli in un commento…
intendevo l’inserimento del div clearer tra END NAVIGATION e START COLONNA SINISTRA
ciao simone, no, non c’è nessun bisogno di un clear tra “end navigation” e “start colonna sinistra”.
semmai ci fosse stata una eventuale “colonna destra” dopo la colonna sinistra, anch’essa flottata a sinistra (come infatti ci sarà in qualche lezione più avanti con l’aggiunta della sidebar), il clear andrebbe inserito subito dopo la fine della “colonna destra”.
Ciao, ho un layout ad una colonna (non ho previsto una sidebar), e vorrei che questa si estendesse in altezza variando in base al suo contenuto. Purtroppo però la colonna in questione (wrapper) resta fissa nonostante io non abbia previsto un’altezza specifica per essa, e il suo contenuto (gli articoli generati dal loop) finiscono per sovrastare il footer, senza “manipolare” il wrapper in altezza.
Come posso risolvere questo problema che mi capita spesso per i layout di un blog in cui il wrapper deve allungarsi in base ai post al suo interno?
Scusate se la domanda non è molto inerente l’aspetto tecnico del loop, ma mi si presenta regolarmente quando lo applico.
Ringrazio in anticipo per un’eventuale risposta. :)
Ciao Marco, scusa leggo solo adesso il tuo commento, mi era sfuggito. Proponi il tuo problema sul nostro forum, per il supporto tecnico è molto più indicato rispetto ai commenti del blog. In qualche modo vedremo di risolvere il tuo problema.
Ciao Nando,
Hai mai trattato il loop multiplo in qualche articolo? lo sto’ provando in questi giorni e un po’ di materiale in più non mi farebbe male :)
ciao, negli articoli non ho mai trattato l’argomento dei loop multipli, ma sul forum ho dato diversi suggerimenti su come gestirli, se fai una ricerca all’interno del forum dedicato a wordpress troverai ciò che cerchi.
Grazie Nando, sei una sicurezza ;)
Ciao Nando non ho visto che hai fatto il contenuto dell’articolo dentro a un tag p ma ad un div come mai? Io ho provato a farlo dentro a un tag p ma non mi funzia.
Come mai?
Ciao Andrea
ciao andrea, non ho ben capito qual è la tua domanda e di conseguenza qual è il problema che riscontri.
ciao nando…. un paio di domande
1. dove trovo la guida in pdf più approfondita che hai menzionato nei commenti???
2. se volessi aggiungere una piccola immagine per ogni notizia che funzione devo richiamare nel loop??
3. non ho ben capito la differenza tra sezione e pagina… quando creiamo una nuova pagina questa ho visto che finisce nel database dei post, ma se volessi modificarla??? e se volessi che ogni pagina avesse un loop di notizie diverse come dovrei fare???
spero di non disturbarti!!!
ottimo lavoro con questa guida…. complimenti!!!
ciao paolo, provo a rispondere rapidamente e con ordine alle tue domande:
1) non è stata ancora rilasciato, l’ebook verrà reso pubblico a breve insieme ad un nuovo progetto che stiamo per lanciare.
2) dipende da come e dove la inserisci nell’editor, se la inserisci all’interno del contenuto dell’articolo non devi richiamare nessuna particolare funzione verrà estrapolata insieme al contenuto, se invece la inserisci utilizzando la nuova funzione di wp (messa a disposizione dalla versione 2.9) ti basta richiamarla appunto con questa nuova funzione: the_post_thumbnail().
3) ho trattato l’argomento nella lezione 9: come creare template personalizzati per le pagine di wordpress.
spero di esserti stato d’aiuto. buon apprendimento
Ciao Nando ho visto tanti Div anche nel modello del loop invece dei tag p e cmq ti chiedo esiste una guida dove spiegano tutte le classi e gli id per creare un tema wordpress da zero. Perchè ho tribulato un sacco per farne uno non conoscendo i nomi delle classi e dovendomi leggere il sorgente di pagina html quando veniva creato online in locale. Ho impiegato una mega cifra di tempo.
Ciao contattami pure sul mio indirizzo se vuoi.
non ho messo il tag p perchè a questo provvede l’editor di wp.
trovi tutta la documentazione che ti serve, e anche qualcosa in più, sul codex di wordpress.
grazie nando!!!! ho capito…. non so ancora di che funzione parli per inserire le immagini ma ci proverò!!! nel frattempo cerco di accellerare fino alla lezione nove… imparare sarebbe davvero una svolta… sono stufo di fare siti statici…
rispondo con “leggero” ritardo agli ultimi commenti ricevuti su questo articolo che comincia ad essere un po’ datato :)
un grosso in bocca al lupo per il tuo studio, paolo.
Ciao, non riesco a capire perchè all’interno del loop illustarato in questa lezione, la funzione indicata the_title() mi restituisce il titolo della pagina (in questo caso home perchè è la prima pagina di default) anzichè il titolo del post (hello world, il primo post), mentre quando vado a visualizzare data e autore del post questi risultano corretti.
Grazie mille per la guida, è davvero ben fatta.
probabilmente stai eseguendo il loop all’interno di una pagina (anche se chiamata home) piuttosto che sulla home page del sito o Frontpage, come la chiama wordpress :)
Ciao mie sei stato davvero di grandissimo aiuto…
ho trovato moltissime guide online ma non sono mai riuscito a creare un tema. perché non spiegavano alcune cose che davano per scontate, ma a me servivano…
comunque voglio chiederti una cosa, se io volessi integrare la funzione more nel mio tema, mi spiego meglio io voglio che mettendo un articolo automaticamente dopo un tot di righe si tagliasse da solo e ci fosse il pulsante continua, se sai come fare mi puoi rispondere?
Grazie in anticipo
ciao Yuri, grazie per i complimenti e scusami ma non ho capito molto bene la tua domanda.
Complimenti per il tutorial, decisamente chiaro!
Da un paio di giorni sto cercando di modificare il loop di un sito di cui sono “admin per caso” per fare in modo che sulla pagina index vengano visualizzati solo gli articoli inseriti in una determinata categoria. Dopo numerosi tentativi sto rinunciando… e non è da me!
Non conosco molto del linguaggio .php e sto cercando di imparare qualcosa. Se hai qualche suggerimento…
Grazie!
ciao liquirizia, per visualizzare i post di una determinata categoria di viene in aiuto la funzione get_posts.
Ti riporto un esempio di come poterla utilizzare, sul codex trovi molti approfondimenti a tal proposito:
Ciao Nando.
Provando a mettere in pratica la lezione passo dopo passo mi sono resa conto che il risultato finale non è identico.
Approfondendo la cosa mi sono accorta che mancano alcune classi nel foglio di stile. Ad esempio la classe p.right che permette di visualizzare a destra il link ai commenti.
Il file nello zip è completo invece.
Nello specifico mancano di sicuro:
p.data {font-style:italic;font-size:85%;}
p.right {text-align:right;}
h1 {font-size:150%;line-height:1;margin-bottom:0.5em;text-align:center;}
h2 {font-size:130%;line-height:1;margin:0.75em 0;}
Ora non so se è meglio o no inserirli anche nell’articolo…vedi tu. :)
Ancora tanti complimenti!!! E sicuramente diventerò WordPress addicted! :D
Ciao Stefania, grazie per la segnalazione. Le classi che hai indicato non le ho descritte nell’articolo perchè fanno parte del framework css che con il tempo mi sono creato e utilizzo per lo sviluppo di ogni nuovo lavoro. Provvedo subito ad aggiungerli all’articolo così che possiate ottenere lo stesso identico risultato del tutorial in questione :)
E benvenuta nel fans club di wordpress :)
Salve a tutti e complimenti per la guida!
Io ho dei problemini, nel senso che vorrei impostare l’ultimo articolo in rilevanza prendendo tutta la misura del content, e gli altri articoli divisi in due colonne proprio come avete fatto voi per questo sito…
Il problema è che non sono molto esperto in materia e non ho trovato alcun codice che mi possa dare una mano, anche perchè vorrei togliere lo slider dalla mia home che sinceramente lo trovo noioso
Grazie
Ciao!
ciao iDaffx, intanto grazie per i complimenti.
purtroppo se non hai un minimo di competenze php queste sono cose che non puoi riuscire a controllare facilmente e non esistono degli script predefiniti che facciano questo al posto tuo. con un minimo di competenze php capiresti che basterebbe una semplice istruzione condizionale per verificare se ci troviamo nel primo articolo (ed eventualmente mostrarlo riempendo le due colonne) o negli articoli dopo il primo (ed eventualmente mostrarli su due colonne).
Ciao. Aggiungendo un plugin in questo tema per condividere i post su facebook o twitter (il plugin è Addthis) non mi vengono visualizzati i pulsanti. E’ da inserire qualche funzione particolare in functions.php oppure è da modificare il loop? Grazie, ciao.
Scusa, come non detto… bastava aggiungere l’hook al footer. :D
Ciao Nando….ho seguito fino ad ora la guida e devo dire che raramente se ne trovano cosi comprensibili. L’unioca cosa è che seguendo pari pari la guida fino a ora riscontro 2 problemi.
1 la descrizione sotto il titolo non è al centro ma allineata a sinistra .
2 tutto il testo e non solo i titoli sono linkabili.
3 ma se uno volesse avere il nome del sito sulla finestra web ma non sulla pagina?
Grazie ;) Cmq ottima guida
Scusa nando ma le classi “entry” e “postmetadata” nel foglio di stile non sono dichiarate !!! come funziona?
Ciao. In questi giorni sto visitando con estremo piacere questo sito trovandolo molto utile per la realizzazione del mio primo sito in wordpress. Faccio i miei complimenti all’autore perché fra i tanti tutorial che ho letto questo è il più chiaro ed esauriente.
Vorrei fare una domanda.
Ma nel paragrafo 1, si sarebbe potuto evitare l’if if (have_posts()) ?
Saluti
ciao, non ho capito esattamente quando metti solo una & che cosa vuol dire.
Ciao sto seguendo la tua guida utilizzando WordPress 3.6, ma il contenuto della home page, da “ciao mondo” in giù mi risulta spostato verso destra.
Come posso risolvere?
Grazie
Stesso problema. Anche io ho la versione 3.6 ed il contenuto è spostato a destra, ho usato il codice che ho scaricato da questa pagina ma il risultato è lo stesso.
Io ho risolto racchiudendo la colonna sinistra in un div con class “container”.
Quindi:
Chiedo agli esperti: è una soluzione corretta o ci sono modi migliori di risolvere il problema?
Ciao, ottima guida, giusto una curiosità perchè quanndo clicco sull’articolo mi rimanda sulla pagina di about?
Ciao Nando,
ho realizzato il loop grazie alla tua guida, ora vorrei però riuscire a dividere i post in home page per categoria, cosa dovrei scrivere nella funzione per fare questa cosa?
Grazie in anticipo
Federico
Ciao Nando, ti seguo con piacere ma purtroppo solo nei ritagli di tempo… e come molti mi ritrovo in notturna a studiare il codice e a tentare modifiche :)
Ho scaricato il vostro tema Impero.free e sto provando a metter su il secondo blog della mia ‘carriera’ :)
Nell’effettuare la visualizzazione di pagine in cui è presente un elenco di articoli della medesima categoria, si verifica che nei meta l’informazione relativa al numero dei commenti è troppo lunga e si accavalla alla riga di testo successiva che riguarda twitter, impedendo la lettura di entrambe le righe. La riga troppo lunga contiene il testo “Nessun commento” (‘commento’ va a capo) e così avevo pensato di modificare il testo in “0 commenti” per aggirare il problema. Con fatica studiando in rete la struttura di wp e grazie ad ‘Ispeziona elemento’ di Chrome sono riusciuta ad individuare che tale informazione è contenuta appunto nei meta del post le cui specifiche sono date nel loop, oggetto di questa lezione. Modificando in tutti i punti del loop il testo da “No comments” a “0 comments” (nel codice php è in inglese), salvando e ricaricando la pagina non vedo l’effetto della modifica. Dove altro devo intervenire?
Studiavo che in assenza di indicazioni specifiche o in alcuni casi in cui il codice lo richiede (per come è stato impostato) wp fa riferimento all’index, ma la struttura di Impero.free è estremamente chiara: il loop riporta le funzioni nel dettaglio, con tanto di comments_popup_link(), gli altri php e l’index hanno un codice molto più sintetico e di soli richiami. Cosa mi sfugge?
Tra sei ore ho la sveglia per andare in ufficio e sto ancora sbattendo la testa…
potresti darmi una dritta?
Grazie
e a presto!
Dopo ore di studio sono arrivata da sola alla soluzione del problema: è necessario modificare soprattutto il it_IT.po/.mo nella cartella languages – giustamente… a conoscerne l’esistenza è tutto facile – (è lui che dice dove e cosa modificare altrove, nel mio caso ho dovuto conseguentemente modificare stringhe non solo in loop.php, ma anche in comments.php)
E qui viene il mostro del livello 3 (secondo quadro): per modificare il .po ho usato in prima battuta dreamweaver, ma non ha funzionato perchè deduco non agiva sul .mo. Così ho scaricato poedit che pare ricompili il .mo corrispondente automaticamente al salvataggio delle modifiche del .po…
TUTTO FATTO, corro con la luce negli occhi a ricaricare le pagine del sito (che sto sviluppando in locale) certa ormai di vedere il risultato di cotanto sforzo, e… nessuna modifica visibile! O_O 8_(
Sta per assalirmi la disperazione.
Non trovo altre armi e/o trucchi per superare il quadro. Chi mi aiuta a uccidere il mostro?