WordPress este minunat. Chiar mai minunat este faptul că acesta poate fi personalizat pentru orice tip de site care vă place! Aici vom învăța cum să creați o secțiune recomandată și "cele mai recente postări" - cu ușurință un "must-have" pentru toate temele bune de știri / reviste. Vom merge, de asemenea, folosind "Câmpurile personalizate" la maximul lor potențial.
Introducere
Acest tutorial acoperă procesul de creare a paginii index a revistei / temei de știri pentru WordPress. Principalele caracteristici ale acestei pagini vor fi:
Posturi recomandate.
Ultimele postări.
Utilizarea variabilelor PHP pentru personalizarea ușoară a celor de mai sus pentru utilizatorii temei dvs. care nu sunt familiarizați cu PHP / WordPress.
Obținerea unei imagini postare din secțiunea "Câmpuri personalizate" a unei postări.
Pasul 1 - Pregătirea
Din directorul de instalare WordPress, navigați prin "wp-content / themes" și creați un nou folder. Denumiți-o cum vreți (folosesc "WordPress Times"). Apoi, creați 5 fișiere noi:
index.php
header.php
footer.php
style.css
Acesta este aspectul de bază pe care îl vom urma:
Deci, un document de 940 pixeli, cu două secțiuni: Conținut la 600px și Sidebar la 300px - lăsând o marjă de 40px între cele două.
Pasul 2 - Antet
Deschide-ți header.php fișier și introduceți următoarele:
Prin aceasta, mai întâi definim DOCType ca XHTML 1.0 Transitional. În secțiunea cap, am setat apoi toate meta tagurile, foile de stil și titlurile de pagini care trebuie extrase din WordPress; și vom include cele 3 fișiere JavaScript. În cele din urmă, deschidem o divizie "container" și inserați numele blogului nostru ca titlu de antet.
Pasul 3 - Mesajele "Breaking News"
Vom include un număr definit de utilizator dintr-o categorie "Știri rupte" în partea de sus a paginii noastre. Deschideți index.php și tastați următoarele, nu vă faceți griji, voi explica totul mai jos:
"Alt =" Post Image "/>
"title ="„>
- #commenting "title =" Vezi comentariile ">
3.1 - Deschiderea
Prima linie este o simplă funcție WordPress PHP care include primul fișier header.php. Mai jos vom deschide divulța "Conținut" pentru a împacheta toate postările împreună. Am inclus un comentariu HTML la închiderea fiecărei tag-uri div care precizează ce div se închide. Vă recomandăm să începeți să faceți acest lucru în propriile proiecte, dacă nu deja, deoarece vă ajută să păstrați cât mai bine organizat codul.
3.2 - tag-ul mai mult
Acest cod ne permite să includeți numai o parte din fiecare post până la locul în care autorul a inclus <--more--> etichetă - aceasta oprește tot textul din postările lungi de la afișarea pe pagina de pornire.
Pentru a facilita personalizarea temei, vom include aici toate opțiunile. Fiecare linie este comentată pentru a continua. Facem acest lucru, astfel încât dacă altcineva utilizează tema dvs. - în loc să fiți nevoit să accesați cu crawlere întregul cod pentru a găsi locația de identificare a categoriilor, acestea sunt ușor accesibile în partea de sus a fișierului. Pe parcursul acestui tutorial, vom folosi aceste variabile în buclă WordPress.
3.4 - Avem posturi?
Aceasta este o variantă a bucla WordPress care transmite postările noastre din baza de date. După cum puteți vedea, folosim primele două variabile din secțiunea de mai sus. Variabilele se substituie cu șirul asociat cu acestea. De exemplu, utilizând codul implicit, linia ar deveni automat:
query_posts ( 'showposts = 3 & cat = 83')
Al doilea rând spune apoi, dacă avem posturile, le inserați în pagină în formatul prezentat mai jos.
3.5 - Postarea conținutului
"Alt =" Post Image "/>
"title ="„>
Nu este așa de înfricoșătoare cum arată, crede-mă.
Imagine - În previzualizarea paginii noastre, veți observa că fiecare postare are o imagine proprie. Aceasta este inclusă folosind secțiunea "Câmpuri personalizate" a WordPress atunci când scrieți o postare. Pur și simplu setați "cheia" la miniatură apoi introduceți link-ul către imagine:
Codul spune în esență "Luați datele din câmpul personalizat al postului numit" miniatură "și lipiți-l într-o etichetă img."
Titlu - Aceasta inserează titlul postului nostru ca o legătură între etichetele h2. the_permalink () devine link-ul postului, și titlul() preia titlul. Destul de simplu, huh?
Data și ora - Aici, primim timpul când a fost făcut postul, în formatul: l, F j, Y G: i - sau în limba engleză: Zi, Data, Anul Timp (de exemplu, sâmbătă, 2 august 2008 14:27).
Conţinut - Preia conținutul mesajului până la (datorită codului pe care l-am inclus mai devreme). 'Continue ...' este textul afișat la sfârșitul postului. Personalizați acest lucru oricum doriți.
3.6 - Post Meta
- #commenting "title =" Vezi comentariile ">
Aceasta returnează categoria (categoriile) de la care este postul. Dacă sunt mai multe, vor fi separate prin virgule. Se creează apoi un link către secțiunea de comentarii și numărul de comentarii din articol.
Acest lucru închide pur și simplu "div.breaking" că postul nostru a fost în; și apoi închide buclă după ce este terminat.
Pasul 4 - ultimele postări
Sub cele trei postări "Știri de ultimă oră", vom include un număr specificat de utilizatori, în timp ce ignorăm toate postările din categoria "Breaking" și oricare dintre celelalte categorii specificate de utilizator pe care să le ignorăm. Vom adăuga următoarele în partea de jos a codului nostru curent:
"Alt =" Post Image "/>
"title ="„>
- #commenting "title =" Vezi comentariile ">
4.1 - Bucla
showposts = '$ latest_num.' - Spune buclei să afișeze numai numărul de postări recente pe care le-a specificat utilizatorul în variabila "$ latest_num".
cat = - '$ breaking_cat. '' $ latest_ignore..' - Aceasta instruiește ca buclele să fie ignorate (rețineți simbolul "minus" pe care îl cerem utilizatorul să îl folosească în variabile), care sunt în categoria "Breaking", pentru a nu duplica nicio postare; și, de asemenea, să ignore postările din oricare din categoriile pe care utilizatorul le specifică în variabila "$ latest_ignore".
Restul este auto-explicativ și același lucru cu caracteristica Breaking News. Câteva diferențe sunt lipsa 'conţinut' secțiune din fiecare post, și, de asemenea, imaginea post este dat clasa de 'Postimg-s' in schimb. Acest lucru ne va permite să cerem doar o imagine miniaturală - pe care o vom dimensiona apoi în CSS-ul nostru de la 200x200 la 50x50.
4.2 - Închiderea paginii
Pentru a termina pagina curentă, trebuie să închidem conținutul div # și să includem subsolul nostru:
4.3 - Footer.php
În acest fișier, închideți pur și simplu etichetele #container, body și html:
Pasul 5 - Styling CSS
Chiar acum, dacă ați creat unele postări, designul dvs. ar trebui să arate cam așa:
Destul de urât, nu? Ei bine, nu pentru mult timp.
5.1 - Necesități
Deschide-ți style.css fișier și lipiți în următorul cod:
/ * ------------------------------------------------ ------------------------ Tema Nume: WordPress Times Tema URI: http://www.vivawp.com/ Descriere: Un tutorial pentru NETTUTS.com de Dan Harper Versiune: 1.00 Autor: Dan Harper Autor URI: http://danharper.me ------------------------------ ------------------------------------------ * /
Acest lucru este necesar în partea de sus a acestui fișier, deoarece oferă managerului de teme în WordPress câteva informații despre tema dvs. Completați secțiunile în el după cum doriți.
5.2 - Styling
Mai jos este prezentat întregul cod CSS utilizat pentru stylingul documentului. Este documentat mai jos.
* - Îndepărtează margini și plăcuțe nedorite din toate elementele pe care browser-ul le inserează.
corp - Stilul de bază al culorilor și al fonturilor.
#container - Setează lățimea paginii la 940 de pixeli. Margine de 15px în partea de sus și de jos și o centrează în fereastră.
h1, h2, h3, h4, h5, h6 - Titluri de fonturi în Georgia, Times New Roman, Times sau orice font serif.
Între Blueprint tagurile de comentarii - Tipare de tipografie tipică de la CSS Framework Blueprint. Salvează o mulțime de hassle cu obtinerea de text pentru a arata frumos.
# Antet H1 - Adaugă un pic de separare de numele blogului și de restul documentului.
#conţinut - Tot conținutul nostru este înfășurat în 600px în stânga. Spațiul rămas poate fi utilizat ca bara laterală.
.rupere, .recent - Include articolele Breaking și Recent într-o cutie cu umplutură de 10px. Decalaj de 15px între fiecare.
.postimg - Formează imaginea Postului pentru ruperea articolelor. Dimensiunea imaginii este limitată la 200 de pixeli și a plutit în dreapta.
.postimg-s - La fel ca mai sus, dar pentru articolele Latest și imaginea este redimensionată la 50px.
.ruperea h2 - Face ca titlul de Articole de rupere să fie mai mic, fără nicio marjă de jos.
.ruperea h2 a, .recent h3 a - Stilul de bază pentru titlurile de articole, ascunzând stilul de legătură implicit.
.ruperea h2 a: hover, .recent h3 a: hover - Adaugă un link de subliniere la titlu când este mutat pentru a afișa utilizatorului că este de fapt un link.
p.datetime - Șirul de date și oră pentru articolele făcute puțin mai mici și cu caractere cursive.
.postmeta - Creează caseta pentru a include detaliile Post Meta (categorii și comentarii). marginea -10px asigură că se umple întreaga casetă de postări.
.postmeta p - Textul din postmeta div se face cu majuscule și cu caractere aldine.
.postmeta span.comm - Îndepărtează stilul îndrăzneț pentru textul "x Comentarii".
.postmeta a - Legarea stilului pentru a elimina culoarea implicită a linkului.
.postmeta a: hover - Adaugă subliniere la link-uri pe hover.
#sidebar - Creează o zonă pentru o bară laterală în partea dreaptă a paginii.
Pagina va arăta astfel. Foarte curat!
Concluzie
Felicitări. Ați creat cu succes elementele de bază pentru prima pagină a unei teme de știri pentru WordPress, completată cu o zonă de postare recomandată - un "must-have" când vine vorba de tematica News. Puteți, de asemenea, să rămâneți în fața competiției cu opțiunile de personalizare ușoară folosind variabilele PHP.
Priviți lansarea vivaWP - o nouă familie de teme WordPress Premium de la mijlocul lunii august. Prima noastră temă, CocoaNews, împărtășește unele din codul de bază afișat în acest tutorial.
Share
Accentsconagua
"Alt =" Post Image "/> 
