WordPress Începător la Maestru, Partea 3

De-a lungul acestei serii începând cu șase părți, vom folosi caracteristicile avansate ale WordPress pentru a crea propriul portofoliu și blog, completând o pagină cu opțiuni, mai multe stiluri și suport pentru noile funcții WordPress 2.7. Astăzi vom structura postările din blog și stilul "postări unice" bazate pe categorie.

Astăzi ne vom concentra pe partea de blog a temei. Vom codifica vizualizarea principalului "blog", creând bara laterală și terminând cu vizualizarea unică a mesajului.

---

Disponibile și în această serie:

1. WordPress: Începător la Maestru, Partea 1
2. WordPress: Începător la Maestru, Partea a 2-a
3. WordPress: Începător la Maestru, Partea 3
4. WordPress: Începător la Maestru, Partea a 4-a
5. WordPress: Începător la Maestru, Partea 5
6. WordPress: Începător la Maestru, Partea 6

---

Salt la o secțiune

• Blog-ul
•   - Buclele WordPress
•   - Coafura
• Bara laterală
•   - Înregistrează bara laterală
•   - Afișați bara laterală
•   - Styling Bara laterală
•   - Bara laterală laterală
• Afișare unică a postărilor
•   - Verificați pentru categoria Postare
•   - Postarea unui singur post blog
• rezumat

---

Blog-ul

Codul vizualizării principale a blogului va sta înăuntru index.php. Aceasta este pagina care va afișa toate postările noastre de pe blog, cu linkuri către vizualizarea lor principală / singură unde veți continua de obicei postarea și le vom permite utilizatorilor să comenteze.

Mai jos este o previzualizare a aspectului aspectului pentru toate secțiunile blogului, cu bara laterală din partea dreaptă:

Să începem. În index.php introduceți următorul cod. Începem prin includerea paginii antetului nostru și apoi creăm pagina noastră div # mainarea care, după cum puteți vedea în prima imagine, va susține postările pe blog (cu bara laterală la dreapta).

Adăugați următoarele la style.css a seta #mainarea cu stiluri corecte:

 #mainarea float: left; padding-right: 30px; lățime: 690px; 

Buclele WordPress

Apoi, vom începe o buclă WordPress cu câteva criterii personalizate:

Prima linie ne permite să folosim paginarea în buclă WordPress - adică. spunând bucla să includă numai x postări, apoi să afișeze linkul "Postări mai noi" la următorul lot. Codul verifică dacă pagina curentă solicită o anumită pagină de paginare, dacă nu arată prima.

Interior query_posts () specificăm să folosim paginarea; și, de asemenea, spuneți bucla să excludă postările din categoria Portofoliu (notați simbolul minus).

Următorul este codul din interiorul bucla. După cum sa menționat în Ziua 2, orice element din buclă va fi executat pentru fiecare post disponibil.

 
 
 "title =" Continuați citirea """> 
 
 
 
#comments "> 
 
 
  

Începem prin includerea fiecărui post în propria div. Folosim the_ID () pentru a da fiecărui div un ID unic (incase ai nevoie vreodată pentru a modela un anumit post diferit); și am dat, de asemenea, fiecare o clasă de postare pe blog pentru ca acesta să fie decorat.

Apoi, titlul postului este afișat folosind titlul() și the_permalink () este folosit pentru a include link-ul la postul complet.

Interior ul.meta sunt câteva informații suplimentare pentru postare. the_category () este folosit pentru a afișa numele categoriilor pe care postul este alocat (separat printr-o virgulă).

Apoi trimitem link-uri către comentariile postului, folosind din nou the_permalink (), și comments_number () este folosit pentru a afișa numărul de comentarii pentru postare.

timpul() prevede data publicării postului. F jS este un cod de dată PHP pentru 'Nume lună' (J); "Data" (j) și sufixul de dată ("st", "nd", "rd" sau ".
De exemplu, acest lucru va scoate Janauary 31. De asemenea, puteți adăuga Y până la final pentru a scoate anul. Pentru mai multe informații, consultați manualul PHP: date ().

În cele din urmă, conținutul real al postului este afișat folosind continutul(). Un link "Citește mai mult" va fi adăugat automat la post, dacă este necesar.

În continuare, închidem buclele cu endwhile, și să includă butoanele Paginare pentru a naviga prin postări mai vechi / mai noi (care este locul nostru $ paginat codul este util) folosind next_posts_link () și previous_posts_link () funcţii:

Am inclus și pe noi sidebar.php și footer.php fișiere.

Coafura

Previzualizați pagina Blog din browserul dvs. Am adăugat deja într-un post suplimentar câteva exemple de date. Imaginea de mai jos evidențiază ce trebuie să schimbăm:

Aruncați următoarele în style.css. Adăugăm o separare între fiecare post blog (.postare pe blog) și setați ul.meta elemente de afișat în linie. .alinia la stânga, .alignright și .Aliniere la centru clasele sunt de asemenea setate - aceste clase sunt folosite de WordPress pentru alinierea imaginilor și sunt utilizate și pentru paginarea noastră.

 .blogpost clar: ambele; margin-bottom: 45px; padding-bottom: 40px; overflow: ascuns;  .singleblog depășire: ascuns; ul.meta margine: 0 0 25px 0;  ul.meta li afișare: inline; font-familie: Verdana, Arial, Helvetica, sans-serif; font-size: 0,7; linia-înălțime: 1.3; margin-dreapta: 10px; padding-left: 12px; text-transform: majuscule;  ul.meta li: primul-copil frontieră: nici unul; padding-left: 0;  .alignleft float: left; margine: 0 10px 8px 0;  .alignright float: right; margine: 0 0 8px 10px;  .aligncenter margin: 10px auto; 

În deepblue.css adăugați o margine subțire, ușoară între fiecare post blog, o margine pentru a separa fiecare element din lista de metale și setați H2 la # 333:

 .blogpost, .worksearch border-bottom: 1px solid # e8e3c8;  h2 a: link, h2 a: vizitat culoare: # 333;  ul.meta li frontieră-stânga: 1px solid # e3e8ed; 

---

Bara laterală

Bara laterală va arăta după cum urmează și va fi utilizată pe întreg site-ul, cu excepția paginilor din față și din portofoliu:

Înregistrează bara laterală

În primul rând, trebuie să înregistrăm zona widget-ului bara laterală - aceasta se face în același mod ca zona din pagina de pornire. Interior functions.php și următorul cod din interiorul parantezelor pentru dacă (funcția_există ('register_sidebar')) după matricea de pagină principală:

 register_sidebar (array ('name' => 'Sidebar', 'before_widget' => '
',' după_widget '=>'
',' anterior_title '=>'
',' după_title '=>'
',));

Cu alte cuvinte, ar trebui să arate după cum urmează:

 dacă function_exists ('register_sidebar')) register_sidebar (array ('name' =>
',' după_widget '=>'
',' anterior_title '=>'
',' după_title '=>'
',)); register_sidebar (array ('name' => 'Sidebar', 'before_widget' => '
',' după_widget '=>'
',' anterior_title '=>'
',' după_title '=>'
',)); 

Afișați bara laterală

Apoi, faceți bara laterală adăugând următoarele sidebar.php:

 #sidebar float: left; lățime: 220px;  #sidebar ul margine: 0;  #sidebar ul li stil: none; margin-stânga: 0; margin-bottom: 25px; 

 li h3 font-size: 1.3; linie înălțime: 1,4; margine: 5px 0 5px 0;  / * Formularul de căutare al barei laterale * / #sidebar ul li # căutare margin-bottom: 25px;  .hidden display: none; #sidebar ul li # formularul de căutare #s padding: 7px 29px 7px 7px; lățime: 182px;  #sidebar ul li # formular de căutare #searchsubmit display: none;  / * Liste de bare laterale (de exemplu, meta, arhive, categorii) * / #sidebar ul li ul padding: 15px 5px 15px 8px;  #sidebar ul li ul li lista-stil-poziția: în afara; margine: 0 0 5px 20px; 

 #sidebar ul li # formularul de căutare #s background: url ("deepblue / search.png") nu-repeta dreapta # f6f6ec; frontieră: 1px solid # E8E3C8;  #sidebar ul li # formularul de căutare #s: focus border: 1px solid # dad4b6;  #sidebar ul li ul culoare-fundal: # f6f6ec; frontieră: 1px solid # E8E3C8;  #sidebar ul li li lista-stil: url ("deepblue / bullet.gif");  #sidebar ul li: link, #sidebar ul li a: vizitat culoare: # 333; 

 post; dacă (in_category ("$ ts_portfolio_cat")) / * Este un element de portofoliu * / necesită ('single-portfolio.php');  altceva / * este un post blog * / necesită ('single-blog.php'); ?>

  
  
 
 
 
 
#comments ">