Share
WP_Query è un potente strumento per controllare ciò che esce dal tuo ciclo. Oggi vi insegnerò tutto su come usarlo per creare un tema a 3 colonne con un giornale che abbia tutti i post principali del blog nella colonna principale e, a lato, una serie di post con una determinata categoria. Useremo il 960 framework CSS per il layout di base e il reset del nostro tema, taglierà molto lavoro su ciò che è necessario!
Il nostro piano di attacco è quello di eliminare tutti i messaggi con una categoria assegnata condivisa, e
posizionali di lato separatamente dai post principali. Vedremo anche un metodo
per creare un "post in primo piano" senza usare jQuery o JavaScript! Ho anche messo insieme un .psd (usando i modelli che 960 ti forniscono al download) di cosa
miriamo a raggiungere oggi. Scarica il .psd qui.
Supponiamo che tu abbia un'installazione live di WordPress, che sia locale o ospitata. Se hai bisogno di un po 'di aiuto, vale la pena prima imparare come installare WordPress localmente su Windows o OS X.
Alrighty. Quindi, a parte l'ovvia necessità di un'installazione di WordPress, stiamo andando
avere bisogno anche di alcune cose in più. Ho un sacco di file di cui avrai bisogno
avere nella cartella del tema.
Hai tutto questo? Buono. Dovresti essere pronto per il resto del tutorial ora! Non dimenticare
attivare il tema in WP-admin (wp-admin / themes.php).
Non ho ancora intenzione di darti tutto il codice WordPress. Ho intenzione di darti
tutto il codice WordPress di cui hai bisogno escludendo WP_Query. Faranno un passo avanti
proprio, perché hanno sicuramente bisogno di una spiegazione! Riempirebbe anche la pagina
molto, quindi ho incluso tutto in un .txt piuttosto che qui.
Scaricalo e copialo in index.php. Oppure scrivilo, qualsiasi cosa vada bene. Digitando
ti aiuta a ricordare quello che stai facendo!
Questo è un sacco di codice da elaborare, quindi mi limiterò a cogliere le parti interessanti
per te, e spiegali.
Quindi scommetto che stai notando tutte queste piccole classi "grid_5" e "container_12" e
cosa diavolo è? Bene, lascia che ti spieghi. Il numero che segue "grid_"
è il numero di colonne che vogliamo che div sia selezionato. Perché vogliamo 12 colonne,
avvolgiamo il tutto (usando div # involucro) con la classe 'container_12'.
Nel CSS di base che ti ho fornito, ha le importazioni per i tre file 960,
quindi abbiamo già un layout a metà quando non abbiamo codificato alcun CSS!
Questo non apparirà troppo appariscente. Non è stato disegnato e non ha nemmeno il contenuto:
Qui è dove avviene tutta la magia! abbiamo tre WP_QueryS:
Quindi vogliamo una colonna di contenuti WordPress da una sola categoria. Come facciamo noi
Fai quello? Usando il vasto gamma di parametri che WP_Query ci fornisce
con, è facile farlo. Sostituisci il commento loroNews in index.php con:
query ( 'category_name = theirNews & showposts = 7'); while ($ theirNews-> have_posts ()): $ theirNews-> the_post (); ?>
Query! Facciamo un salto dentro.
Abbiamo bisogno di un codice di loop specifico.
Leggi l'articolo completo '); ?>
Semplicemente il titolo avvolto in a h4 tag, con il contenuto avvolto in un div
classificata "entrata". Grande! Hai fatto il tuo primo WP_Query su 3, che dovrebbe
ora elenca solo le categorie con il nome "loroNews"
Vogliamo mostrare solo 1 post, che non ha la categoria "loroNews". Solo 1.
Dal momento che ora comprendi i fondamenti di WP_Query, ti darò il codice completo
(sostituisci il commento FEATURED POST con):
query ( 'showposts = 1 & cat = -59'); while ($ featured-> have_posts ()): $ featured-> the_post (); ?> Pubblicato sotto .
Questo è il nostro post in primo piano, quindi ho giustamente chiamato il div 'featuredPost',
ma perché in seguito vorremmo anche gli stili di post regolari, ho incluso il
classe 'post'.
Stesso accordo con WP_Query. Questa volta i parametri mostrano solo 1 post che non lo sono
dalla categoria 59. La categoria 59 è l'ID della categoria "loroNews". ho bisogno
per dirti come ottenerlo!
Guarda come è & Cat_id = 59 alla fine? Questo è il tuo numero di categoria.
Il mio è 59, assicurati di cambiarlo in qualunque sia l'ID della categoria "loroNews"!
La differenza con il post in primo piano è principalmente il h2. Perché è il
seconda intestazione più grande sulla pagina. Fino alla sezione "loroNews" abbiamo concluso
in in a h4 elemento, perché dopo i post della colonna principale sarà il
prossima intestazione sulla pagina. Tutto per lo styling.
La nostra ultima WP_Query. Questo sarà tutti messaggi esclusi i post contenuti
dalla categoria "loroNews" (è necessario l'ID. Il mio era 59, puoi ricordare il tuo?).
Ma perché stiamo già mostrando il primo post in generale (la funzione
post), non vogliamo mostrarlo di nuovo, giusto? Quindi abbiamo bisogno di compensare i post di
1 - Facile da fare con i potenti parametri di WP_Query. Sostituisci il commento MAIN WP QUERY
in index.php con questo:
query ( 'posts_per_page = 5 & offset = 1 & cat = -59'); while ($ main-> have_posts ()): $ main-> the_post (); ?>Pubblicato sotto .Leggi l'articolo completo '); ?>
Quindi questo è tutto il codice HTML e WordPress di cui abbiamo bisogno. Sembrerà ancora di base, ma
avrà il layout generale a 3 colonne che stiamo cercando!
Ora, poiché tutto il nostro layout è praticamente fatto, è principalmente solo lo stile
necessario! Scaricare
tutto questo CSS e incollalo nel tuo style.css. Ci sono alcune cose che
sovrascrivere il codice 960 predefinito. Non abbiamo bisogno di usare !IMPORTANTE perché
il nuovo codice è in realtà più in alto nella scala gerarchica rispetto al codice 960. Noi
usa il codice 960 come una sorta di 'base' da cui possiamo costruire. Se decori il
fondamenta di una casa, vedi ancora le fondamenta grezze? Questa 'decorazione'
si basa principalmente sulle intestazioni, ma alcuni stili generali vengono utilizzati per il contenuto del testo ecc. Uno
l'override principale è il carattere del corpo. Specifichiamo Georgia, quando il default è in realtà
Helvetica. I caratteri sono davvero all'altezza delle tue preferenze, ho appena usato la Georgia
diverso! Una volta incollato e letto tutto il CSS, dovrebbe essere la prima pagina
sembra completo!
Sto solo includendo questa sezione in modo da non ottenere una miriade di domande chiedendo perché individuo
le pagine restituiscono le informazioni che dovrebbero essere sulla pagina principale! Quindi il nostro indice
la pagina ha 3 colonne - Ma cosa riempiresti 3 colonne con un singolo specifico
pagina? Tutto quello che vuoi! Anche se suggerirei il contenuto del post ... Quindi vado
per spiegare come page.php e single.php lavoro, nel caso tu
voglio estendere il tema. Se vuoi dividere index.php in header, sidebar e
footer, fallo ora! Altrimenti, andremo avanti:
Quindi ora dovresti avere una colonna principale vuota. Stiamo andando a riempire questo con un
ciclo regolare:
Pubblicato sotto .
No ... Il solito vecchio ciclo noioso. Sentiti libero di realizzare questa singola pagina
tu vuoi che i tuoi singoli post appaiano. Questo fornisce la base
modello per WordPress per visualizzare un singolo post.
Quindi questo è un singolo post, ma abbiamo ancora collegamenti a singoli pagine nel
navigazione e piè di pagina. Se fai clic su di essi, restituiranno lo stesso dell'indice.
Non fantastico Tutto ciò che dobbiamo fare è copiare tutto, da single over a page.php,
e dovrebbe essere dolce. Facile eh? Queste pagine dovrebbero assomigliare a questo:
Quindi hai appena visto cosa può fare WP_Query. Consiglio vivamente di visitare
la pagina dei messaggi di Query Post, che ha tutti gli stessi parametri di WP_Query. Puoi restringere il tuo loop a qualsiasi post specifico utilizzando qualsiasi combinazione di parametri separati da a
&.
Spero che vi siate divertiti tanto quanto ho creato un tema alla ricerca di un giornale!
Puoi vedere il prodotto finale qui! Godere!
Accentsconagua