WordPress van beginner tot meester, deel 3

Gedurende deze zesdelige beginners-tot-masterreeks zullen we de geavanceerde functies van WordPress gebruiken om ons eigen portfolio en blog te maken, compleet met een optiespagina, meerdere stijlen en ondersteuning voor de nieuwe WordPress 2.7-functies. Vandaag zullen we onze blogberichten opmaken en 'enkele berichten' stijlen op basis van categorie.

Vandaag gaan we onze aandacht richten op het bloggedeelte van het thema. We coderen de belangrijkste 'blog'-weergave, maken de zijbalk en eindigen met de enkele berichtweergave.

---

Ook verkrijgbaar in deze serie:

1. WordPress: Beginner tot Master, deel 1
2. WordPress: Beginner tot Master, deel 2
3. WordPress: van beginner tot meester, deel 3
4. WordPress: Beginner tot Master, deel 4
5. WordPress: Beginner tot Master, deel 5
6. WordPress: van beginner tot meester, deel 6

---

Spring naar een sectie

• De blog
•   - De WordPress Loop
•   - styling
• sidebar
•   - Registreer zijbalk
•   - Toon de zijbalk
•   - De zijbalk stylen
•   - Zijbalkkleur
• Enkele berichtweergave
•   - Controleer op postcategorie
•   - Enkele blogpost lay-out
• Samenvatting

---

De blog

De code voor de hoofdblogweergave zit erin index.php. Dit is de pagina waarop al onze blogberichten worden weergegeven, met links naar hun hoofd- / enkele weergave, waar u de post gewoonlijk zult voortzetten en gebruikers de mogelijkheid biedt om te reageren.

Hieronder ziet u een voorbeeld van hoe de lay-out voor alle blogsecties eruit zal zien, met de zijbalk aan de rechterkant:

Laten we beginnen. In index.php voer de volgende code in. We beginnen met het toevoegen van onze header-pagina en maken vervolgens onze div # mainarea die, zoals je kunt zien in de eerste afbeelding, de blogberichten zal bevatten (met de zijbalk rechts).

Voeg het volgende toe aan style.css instellen #hoofdgebied met de juiste stijlen:

 #mainarea float: left; opvulling rechts: 30px; breedte: 690 px; 

De WordPress Loop

Vervolgens starten we een WordPress Loop met enkele aangepaste criteria:

De eerste regel stelt ons in staat om paginering te gebruiken in de WordPress-lus - dwz. vertel de lus om alleen x-berichten te bevatten en toon vervolgens een 'Nieuwere berichten'-link naar het volgende lot. De code controleert of de huidige pagina om een ​​bepaalde paginapagina vraagt, als dat niet het eerste is.

Binnen query_posts () we specificeren om paginering te gebruiken; en vertel de lus ook om berichten uit onze Portfolio-categorie uit te sluiten (let op het minteken).

De volgende is de code in de lus. Zoals vermeld in Dag 2, zal alles in de lus worden uitgevoerd voor elke beschikbare post.

 
 
 "title =" Ga door met lezen """> 
 
 
 
#commentaar "> 
 
 
  

We beginnen met het opnemen van elke post binnen zijn eigen div. We gebruiken het ID() om elke div een unieke ID te geven (voor het geval je ooit een specifieke post anders moet stylen); en we hebben elk ook een klasse gegeven blogpost om gestileerd te worden.

Vervolgens wordt de berichttitel uitgevoerd met de titel() en the_permalink () wordt gebruikt om de link naar de volledige post op te nemen.

Binnen ul.meta is wat extra informatie voor de post. the_category () wordt gebruikt om de namen uit te voeren van de categorieën waaraan het bericht is toegewezen (gescheiden door een komma).

Vervolgens linken we naar de opmerkingen voor de post, opnieuw met behulp van the_permalink (), en comments_number () wordt gebruikt om het aantal reacties voor het bericht uit te voeren.

de tijd() geeft de datum aan waarop het bericht is gepubliceerd. F jS is een PHP-datumcode voor 'maandnaam' (J); 'Datum' (j) en het achtervoegsel (dwz 'st', 'nd', 'rd' of 'th') (S).
Dit zou bijvoorbeeld Janauary 31st produceren. Je zou ook kunnen toevoegen Y tot het einde om het jaar af te leveren. Zie de handleiding PHP: date () voor meer informatie.

Ten slotte wordt de feitelijke inhoud van het bericht voor de post uitgevoerd met behulp van de inhoud(). De link 'Meer lezen' wordt automatisch toegevoegd aan het bericht, indien nodig.

Vervolgens sluiten we de Loop met endwhile, en omvatten de paginatieknoppen om door oudere / nieuwere berichten te bladeren (dat is waar onze $ opgeroepen code komt nuttig) met behulp van de next_posts_link () en previous_posts_link () functies:

We hebben ook onze sidebar.php en footer.php bestanden.

styling

Bekijk een voorbeeld van de blogpagina in uw browser. Ik heb al een extra bericht toegevoegd met enkele voorbeeldgegevens. De onderstaande afbeelding laat zien wat we moeten veranderen:

Gooi het volgende erin style.css. We voegen een scheiding toe tussen elke blogpost (.blogpost) en stel de ul.meta items om inline weer te geven. De .alignleft, .rechts uitlijnen en .aligncenter klassen zijn ook ingesteld - deze klassen worden gebruikt door WordPress om afbeeldingen uit te lijnen, en wordt ook gebruikt op onze paginering.

 .blogpost duidelijk: beide; margin-bottom: 45px; padding-bodem: 40px; overloop verborgen;  .singleblog overflow: hidden; ul.meta margin: 0 0 25px 0;  ul.meta li display: inline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; regelhoogte: 1.3em; margin-right: 10px; padding-links: 12px; text-transform: hoofdletters;  ul.meta li: first-child border: none; opvulling links: 0;  .alignleft float: left; marge: 0 10px 8px 0;  .alignright float: right; marge: 0 0 8 px 10 px;  .aligncenter margin: 10px auto; 

In deepblue.css voeg een dunne, lichte rand toe tussen elk blogbericht, een rand om elk item van de meta-lijst te scheiden en stel de H2 in op # 333:

 .blogpost, .worksearch border-bottom: 1px solid # e8e3c8;  h2 a: link, h2 a: visited color: # 333;  ul.meta li border-left: 1px solid # e3e8ed; 

---

sidebar

De zijbalk ziet er als volgt uit en wordt overal op de site gebruikt, behalve de front- en portfolio-pagina's:

Registreer zijbalk

Allereerst moeten we het zijbalk-widgetgebied registreren - dit gebeurt op dezelfde manier als het gebied op de startpagina. Binnen functions.php en de volgende code tussen de haakjes voor if (function_exists ('register_sidebar')) na de startpagina-array:

 register_sidebar (array ('name' => 'Sidebar', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',));

Met andere woorden, het zou er als volgt uit moeten zien:

 if (function_exists ('register_sidebar')) register_sidebar (array ('name' => 'Homepage Bottom', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); register_sidebar (array ('name' => 'Sidebar', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); 

Toon de zijbalk

Maak vervolgens de zijbalk weer door het volgende toe te voegen sidebar.php:

 #sidebar float: left; breedte: 220 px;  #sidebar ul margin: 0;  #sidebar ul li list-style: none; marge links: 0; margin-bottom: 25px; 

 li h3 font-size: 1.3em; regelhoogte: 1,4em; marge: 5px 0 5px 0;  / * Sidebar-zoekformulier * / #sidebar ul li # search margin-bottom: 25px;  .hidden display: none; #sidebar ul li # zoekformulier #s opvulling: 7px 29px 7px 7px; breedte: 182 px;  #sidebar ul li # zoekformulier #searchsubmit display: none;  / * Sidebar-lijsten (bijv. Meta, Archieven, Categorieën) * / #sidebar ul li ul opvulling: 15px 5px 15px 8px;  #sidebar ul li ul li list-style-position: outside; marge: 0 0 5px 20px; 

 #sidebar ul li # zoekformulier #s background: url ("deepblue / search.png") no-repeat right # f6f6ec; rand: 1px vast # E8E3C8;  #sidebar ul li # zoekformulier #s: focus border: 1px solid # dad4b6;  #sidebar ul li ul background-colour: # f6f6ec; rand: 1px vast # E8E3C8;  #sidebar ul li ul li list-style: url ("deepblue / bullet.gif");  #sidebar ul li a: link, #sidebar ul li a: visited color: # 333; 

 post; if (in_category ("$ ts_portfolio_cat")) / * Is een portfolio-item * / require ('single-portfolio.php');  else / * Is een blogbericht * / require ('single-blog.php'); ?>

  
  
 
 
 
 
#commentaar ">