Construiți o temă de ziar cu WP_Query și Cadrul 960 CSS

WP_Query este un instrument puternic pentru a controla ceea ce iese din bucla ta. Astăzi o să vă învăț cum să o utilizați pentru a crea o temă de ziar cu 3 coloane, care conține toate postările dvs. principale pe blog în coloana principală și o parte dintr-un set de postări cu o anumită categorie. Vom folosi 960 cadru CSS pentru aspectul de bază și resetarea temei noastre, aceasta va tăia o mulțime de muncă de pe ceea ce este necesar!

Prefaţă

Planul nostru de atac este acela de a elimina toate postările cu o categorie atribuită în comun, și
așezați-le pe o parte separată de posturile principale. Vom analiza, de asemenea, o metodă
pentru a crea un "post recomandat" fără a utiliza jQuery sau orice JavaScript deloc! De asemenea, am aruncat împreună un .psd (folosind șabloanele pe care 960 le oferă pentru descărcare) a ceea ce
pe care vrem să o realizăm astăzi. Descărcați aplicația .psd aici.

Presupunem că aveți o instalare live WordPress, indiferent dacă este locală sau găzduită. Dacă aveți nevoie de un pic de ajutor în acest sens, merită să învățați mai întâi cum să instalați WordPress local pe Windows sau pe OS X.

Pasul 1: Necesitățile

În regulă. Deci, pe lângă nevoia evidentă a unei instalări WordPress, mergem
să aveți nevoie și de câteva lucruri suplimentare. Am o grămadă de fișiere de care ai nevoie
aveți în dosarul tematic.

  • Totul trebuie să meargă într-un dosar tematic wp-content / teme /, creați astfel
    un dosar numit triColumnNews și plasați totul în el!
  • 960 CSS Framework - Acest lucru este și evident. În interiorul dvs. triColumnNews
    folder, creați un alt folder numit 960. Treceți la
    960 Grid System și ridicați o copie a cadrului. În descărcare veți fi
    găsiți niște dosare. Deschideți dosarul numit "cod" și copiați cele 3 fișiere CSS (960.css,
    reset.css și text.css) în dosarul 960 pe care l-ați creat un al doilea
    în urmă. Acum e drăguț.
  • functions.php - Vom avea nevoie de o bară laterală, așa că avem nevoie functions.php
    să o înregistreze.
  • imagini - Ei bine, fiecare temă decentă are niște imagini! Crea
    imaginile folderului și locul
    bodyBg.png și
    searchBg.png în el.
  • index.php - Un concept evident ... Vom lucra în principal pe asta.
  • page.php și single.php - Pagina noastră de index va avea 3 coloane dreapta? Dar
    Nu cred că paginile individuale necesită 3 coloane. Schimbați paginile sub-șablon
    la sfarsit, astfel incat, daca te duci la o pagina, nu e totul muddled din cauza
    WP_Query incorect pe index (incorect pentru pagina specifică, nu pentru index).
  • style.css
    - Copiați-o peste și editați-o în consecință, dacă doriți.

Ai toate astea? Bun. Ar trebui să fiți pregătiți pentru restul tutorialului acum! Nu uita
pentru a activa tema în WP-admin (wp-admin / themes.php).

Pasul 2 - HTML și de bază Codul WordPress

Nu vă voi da tot codul WordPress încă. O să vă dau
tot Codul WordPress pe care trebuie să-l excludeți din WP_Query. Vor avea un pas
a lor, pentru că ei au nevoie de explicații! Ar fi umplut și pagina
mult, așa că am inclus totul într-un .txt mai degrabă decât aici.
Descărcați-l și copiați-l în index.php. Sau tastați-l, indiferent de ce se potrivește. Tastare
vă ajută să vă amintiți ce faceți!

Unele lucruri de remarcat

Este o grămadă de cod de procesat, așa că voi distruge părțile interesante
pentru voi, și le explicați.

  • cap - Toate acestea sunt chestii WordPress. Foaie de stil, link RSS2 și altele
    Lucruri WP.
  • #data si ora - Ai citit vreodată un ziar care nu are data
    sus sus? Nici eu. Să nu începem acum, hm? Aceasta afișează data în format:
    (17 iulie 08). Vom pluti astfel în sus, astfel încât să rămână în fereastra browserului
    tot timpul! Doar pentru că…
  • formă - Aceasta este formularul de căutare pentru blog! Tocmai am rămas
    unul pentru a umple spațiul și a face cu atât mai convingător!
  • dynamic_sidebar - Asta explică practic ... Este bara laterală pe care o dorim,
    numit triNews astfel încât să poată fi identificat în tabloul de bord.
  • Notă - Puteți vedea că deja începe să se contureze
    termeni de aspect (un layout foarte squewif, dar nu reinițializare!) - Am importat
    960 de fișiere care utilizează un @import în stil.css, pentru a salva HTTPRequest-uri, și oferă, de asemenea
    al nostru codul de putere părinte peste codul 960.
  • Toate clasele mici amuzante ... Citește mai departe.

Cele 960 de clase

Deci pariez că observați toate aceste clase mici "grid_5" și "container_12" și
ce naiba e asta? Permiteți-mi să vă explic. Numărul următor "grid_"
este numărul de coloane pe care dorim să le selectăm div. Pentru că vrem 12 coloane,
am înfășurat totul (folosind div # înveliș) cu clasa "container_12".
În CSS-ul de bază pe care l-am furnizat, are importurile pentru cele 3 960 de fișiere,
deci avem deja o jumătate de aspect când nu am codificat deloc CSS!

Acest lucru nu va părea prea strălucitor. Nu a fost stil și nici nu are conținut:

Pasul 3 - WP_Querys

Aici se petrece toată magia! Noi avem Trei WP_Querys:

  • theirNews - Deci am împărțit știrile, nu? Vrem doar această secțiune
    afișați postări cu categoria 'theirNews'. Din partea mea, (din blogul meu de testare) pe care l-am dat
    aproximativ 7 din postările mele din această categorie. Ar trebui să-i dai și pe alții. De asemenea, aveți nevoie
    pentru a găsi ID-ul categoriei categoriei lor de știri, dar vă voi duce repede
    cum să găsiți asta mai târziu.
  • Recomandate - Amintiți-vă că am spus că vă voi arăta cum să faceți o postare recomandată fără
    jQuery? Iată soluția pe scurt: afișați numai cel mai recent post până în prezent
    în buclă de interogare proprie.
  • principal - truc cu acest lucru este că nu vrem categoria lorNews
    aici, și nici nu vrem primul post. Este ușor, veți vedea într-un minut.

Pasul 3: 1 - theirNews

Deci, vrem o coloană de conținut WordPress dintr-o singură categorie. Cum facem noi
fa aia? Utilizarea vast gamă de parametri WP_Query ne oferă
cu, este ușor să faceți acest lucru. Înlocuiți comentariul lorNews în index.php cu:

interogare ( 'CATEGORY_NAMESTART_BOLDFEATURE_NAMEEND_BOLD = theirNews & showposts = 7'); în timp ce ($ theirNews-> have_posts ()): $ theirNews-> the_post (); ?>  

Solicitare! Să mergem direct în ea.

  • $ theirNews este interogarea variabilă pe care o vom folosi pentru secțiunea 'theirNews'.
    Aceasta definește o interogare nouă, întreaga bază a WP_Query.
  • query (); - Iată parametrii noștri specifici. Vrem doar să arătăm maxim
    7 posturi, toate sub numele de categorie 'theirNews'. Puteți schimba aceste variabile
    în jurul valorii de curs, 7 este doar numărul de posturi la care am încadrat categoria.
  • Restul codului este o buclă scurtată, care este specificată prin intermediul nostru $ theirNews
    variabil.

Avem nevoie de un anumit cod de buclă.

 

Citiți articolul complet "); ?>

Pur și simplu titlul ambalat într-un h4 tag, cu conținutul înfășurat într-un div
clasificată "intrare". Grozav! Ați făcut primul dvs. WP_Query din cele 3, ar trebui
acum lista doar categorii cu numele 'theirNews'

Pasul 3: 2 - Recomandate

Vrem doar să afișăm 1 post, care nu are categoria 'theirNews'. Doar 1.
Deoarece acum înțelegeți fundamentele WP_Query, vă voi da codul complet
(înlocuiți comentariul FEATURED POST cu):

interogare ( 'showposts = 1 & cat = -59'); în timp ce ($ featured-> have_posts ()): $ featured-> the_post (); ?>

Postat în .

Acest este postul nostru recomandat, așa că am numit în mod corespunzător div 'featuredPost',
dar pentru că mai târziu vom dori și stiluri din posturile obișnuite, am inclus
clasa "post".

Aceeași înțelegere cu WP_Query. De data aceasta parametrii arată doar 1 posturi care nu sunt
din categoria 59. Categoria 59 este ID-ul categoriei "theirNews". am nevoie
să vă spun cum să obțineți!

  1. Deschideți WP-Admin.
  2. Faceți clic pe gestionați.
  3. Dați clic pe Categorii.
  4. Faceți clic pe categoria "theirNews" (sau orice ați numit-o).
  5. Verificați adresa URL a paginii. Ar trebui să fie așa:

    Vezi cum are & Cat_ID = 59 la sfarsit? Acesta este numărul dvs. de categorie.
    Mina este de 59 de ani, asigurați-vă că o schimbați la indiferent de ID-ul categoriei "lorNews"!

  6. Amintiți-vă numărul, vom avea nevoie și de el în următoarea interogare.

Diferența cu postul recomandat este în principal h2. Pentru că e vorba de
al doilea antet cel mai mare din pagină. Mergeți în secțiunea "lorNews" pe care l-am înfășurat
in a h4 element, deoarece după postările din coloana principală va fi
următorul antet al paginii. Totul pentru dragul stilului.

Pasul 3: 3 - principal

Ultimul nostru WP_Query. Asta va fi toate posturi cu excepția posturilor conținute
de categoria "lorNews" (Aveți nevoie de ID-ul meu a fost 59, vă puteți aminti a ta?).
Dar deoarece deja afișăm prima postare generală (caracteristica
post), nu vrem să-i arătăm din nou, nu? Așa că trebuie să compensăm postările
1 - ușor de a face cu parametrii puternici ai WP_Query.Replaceți comentariul MAIN WP QUERY
în index.php cu aceasta:

interogare ( 'posts_per_page = 5 & ofset = 1 & cat = -59'); în timp ce ($ main-> have_posts ()): $ main-> the_post (); ?> 

Postat în .
Citiți articolul complet "); ?>
  • posts_per_page - Este exact ceea ce este ... Când te duci pe adăugarea următoare
    și paginile anterioare înlocuiesc ceea ce ați setat în WP-Admin. Am 3 ca implicit,
    și nu a putut fi deranjat schimbarea, așa că am făcut 5 pentru coloana principală.
  • ofset - Amintiți-vă cum am spus că nu trebuie să afișăm primul post, deoarece
    o avem deja în secțiunea de postare recomandată.
  • cat = -59 - Trebuie să specificăm ce categorie să nu includă - theirNews
    - și pentru mine, are ID-ul de 59. "-" chiar înainte ca numărul să conteze
    pentru excludere.

Deci, asta e tot codul HTML și WordPress de care avem nevoie. Aceasta va părea încă de bază, dar
acesta va avea aspectul general de 3 coloane pe care îl urmăm!

Pasul 4 - CSS

Acum, pentru că toate aspectul nostru este destul de mult făcut, este în principal doar stilul care este
Necesar! Descarca
toate aceste CSS, și lipiți-l în stil.css dvs. Există câteva lucruri
suprascrieți codul implicit 960. Nu trebuie să folosim !IMPORTANT deoarece
noul cod este de fapt mai mare decât scara ierarhică decât codul 960. Noi
utilizați codul 960 ca un fel de "bază" pe care o construim. Dacă decorați
fundații ale unei case, mai vedeți în continuare fundațiile brute? Această "decorare"
este în principal pe anteturi, dar un anumit stil general este folosit pentru conținutul textului etc. Unul
suprascrierea majoră este caracterele corpului. Specificăm Georgia, atunci când implicit este de fapt
Helvetica. Fonturile sunt într-adevăr în funcție de preferințele dvs., tocmai am folosit Georgia pentru a fi
diferit! După ce ați inserat și ați citit toate CSS-urile, prima pagină ar trebui să fie
arata complet!


Pasul 5 - Fișiere sub-șablon (opțional)

Sunt inclusă doar această secțiune, așa că nu primesc o sumă de întrebări zilnice care să întrebe de ce individul
paginile returnează informațiile care ar trebui să fie pe pagina principală! Deci, noi index
pagina are 3 coloane - Dar ce ați umple 3 coloane cu un anumit single
pagină? Ce vrei tu! Deși aș sugera conținutul postului ... Deci mă duc
pentru a explica cum page.php și single.php muncă, în caz că tu
doriți să extindeți tema. Dacă doriți să împărțiți index.php în antet, bara laterală și
footer, fă-o acum! În caz contrar, vom continua:

  1. Deschideți single.php.
  2. Copiați toate codurile din index.php în single.php.
  3. Derulați până când ajungeți div # lor.
  4. Ștergeți întreaga div. În timp ce sunteți la el, ștergeți și postarea recomandată!
  5. Tot ce ai fi rămas este div # main.grid_5. Modificați valorile 5 până la 9 pentru a compensa
    pentru cele 4 coloane pe care tocmai le-am scăpat.
  6. Nu uitați să schimbați comentariul final div pentru a nu fi confundat mai târziu!

Deci acum ar trebui să aveți o coloană principală goală. Vom umple acest lucru cu un
buclă regulată:

 

Postat în .

Naw ... Bucla obișnuită veche plictisitoare. Simțiți-vă liber să molidați această singură pagină până la orice
tu doriți ca postările dvs. unice să arate. Aceasta oferă principalele
șablon pentru WordPress pentru a afișa o singură postare.

Pasul 5 Partea 2

Deci, asta e un singur post, dar avem încă legături către single pagini în
navigare și subsol. Dacă faceți clic pe ele, acestea vor reveni la fel ca și indexul.
Nu rece. Tot ce trebuie să facem este să copiați totul de la unic la altul,
și ar trebui să fie dulce. E ușor? Aceste pagini ar trebui să arate astfel:

Învelire

Deci tocmai ați aruncat o privire asupra a ceea ce poate face WP_Query. Vă sugerăm să vizitați
pagina de documente Documente privind interogările, care are toți aceiași parametri ca WP_Query. Puteți să vă restrângeți buclă până la orice post specific folosind orice combinație a parametrilor separați de a
&.

Sper că voi ați avut o distracție atât de mare încât am creat o temă de ziar!
Puteți vedea produsul final aici! se bucura!

Cod