WordPress Nybörjare till Master, Del 3

I hela denna sexdelade nybörjare till mästarserien använder vi avancerade funktioner i WordPress för att skapa vår egen portfölj och blogg, komplett med en options sida, flera stilar och stöd för de nya WordPress 2.7-funktionerna. Idag planerar vi våra blogginlägg och stilar "enskilda inlägg" baserat på kategori.

Idag kommer vi att föra vårt fokus till bloggdelen av temat. Vi kodar den viktigaste "bloggen" -vyn, skapar sidofältet och slutar med den enskilda postvisningen.

---

Finns även i serien:

1. WordPress: Nybörjare till Master, Del 1
2. WordPress: Nybörjare till Master, Del 2
3. WordPress: Nybörjare till Master, Del 3
4. WordPress: Nybörjare till Master, Del 4
5. WordPress: Nybörjare till Master, Del 5
6. WordPress: Nybörjare till Master, Del 6

---

Hoppa till ett avsnitt

• Bloggen
•   - WordPress Loop
•   - styling
• Sidebar
•   - Registrera Sidpanel
•   - Visa sidofältet
•   - Styling Sidebar
•   - Sidospärrens färg
• Enkel inläggsskärm
•   - Kontrollera efter postkategori
•   - Enkel blogginläggslayout
• Sammanfattning

---

Bloggen

Koden för huvudbloggvisningen kommer att sitta inuti index.php. Det här är den sida som visar alla våra blogginlägg, med länkar till deras huvudsakliga / enkla vy där du vanligtvis fortsätter posten och tillåter användare att kommentera.

Nedan följer en förhandsgranskning av hur layouten för alla bloggavsnitt kommer att se ut, med sidofältet till höger:

Låt oss börja. I index.php ange följande kod. Vi börjar med att inkludera vår rubrik sida och sedan skapa vår div # mainarea som, som du kan se i den första bilden, håller blogginläggen (med sidofältet till höger).

Lägg till följande till style.css Att sätta #mainarea med rätt stilar:

 #mainarea float: left; padding-right: 30px; bredd: 690px; 

WordPress Loop

Därefter börjar vi ett WordPress Loop med några anpassade kriterier:

Den första raden tillåter oss att använda paginering i WordPress-loopen, dvs. berätta om slingan för att bara innehålla x inlägg och sedan visa länken "Nyare inlägg" till nästa parti. Koden kontrollerar om den aktuella sidan begär en viss paginationssida, om den inte visar den första.

Inuti query_posts () vi specificerar att använda pagination; och berätta även att slingan ska utesluta inlägg från vår portföljkategori (notera minus symbolen).

Nästa upp är koden inuti slingan. Som nämnts i dag 2 kommer något i slingan att utföras för varje tillgängligt inlägg.

 
 
 "title =" Fortsätt läsa """> 
 
 
 
#comments "> 
 
 
  

Vi börjar med att inkludera varje inlägg i sin egen div. Vi använder the_ID () att ge varje div ett unikt ID (inse att du någonsin behöver ställa ett specifikt inlägg på olika sätt); och vi har också gett varje en klass av inlägg för att den ska bli stylad.

Nästa postrubrik utmatas med titeln() och the_permalink () används för att inkludera länken till hela inlägget.

Inuti ul.meta är lite extra information för posten. the_category () används för att mata ut namnen på de kategorier som posten är tilldelad (separerad med ett kommatecken).

Vi länkar sedan till kommentarerna till inlägget, återigen använder the_permalink (), och comments_number () används för att mata ut antal kommentarer till inlägget.

tiden() tillhandahåller det datum som posten publicerades. F jS är en PHP-datumkod för "Månadens namn" (J); Datum (j) och datumförlängning (dvs 'st', 'nd', 'rd' eller 'th') (S).
Detta skulle till exempel utgå Janauary 31st. Du kan också lägga till Y till slutet för att producera året. För mer information, se manualen PHP: Date ().

Slutligen matas det faktiska kroppsinnehållet för inlägget med innehållet(). En länk "Läs mer" läggs automatiskt till posten om det behövs.

Därefter stänger vi Loop med EndWhile, och inkludera paginationsknapparna för att cykla genom äldre / nyare inlägg (vilket är var vårt $ sökt koden kommer till nytta) med hjälp av next_posts_link () och previous_posts_link () funktioner:

Vi har också inkluderat vår sidebar.php och footer.php filer.

styling

Förhandsgranska bloggen i din webbläsare. Jag har redan lagt till i ett extra inlägg med några exempeluppgifter. Bilden nedan belyser vad vi behöver ändra:

Kasta följande in style.css. Vi lägger till separering mellan varje blogginlägg (.inlägg) och ställ in ul.meta objekt att visa inline. De .justera vänster, .anpassa till höger och .Centrera i linje med klasser är också inställda - dessa klasser används av WordPress för att anpassa bilder och används också vid vår pagination.

 .blogpost clear: both; marginalbotten: 45px; vadderande-botten: 40px; överflöde: gömd;  .singleblog overflow: hidden; ul.meta margin: 0 0 25px 0;  ul.meta li display: inline; font-family: Verdana, Arial, Helvetica, sans-serif; typsnittstorlek: 0,7em; linjehöjd: 1,3em; marginal-höger: 10px; padding-left: 12px; text-transform: stor bokstav;  ul.meta li: första barnet border: none; padding-left: 0;  .alignleft float: left; marginal: 0 10px 8px 0;  .alignright float: right; marginal: 0 0 8px 10px;  .aligncenter margin: 10px auto; 

I deepblue.css Lägg till en tunn, ljus gräns mellan varje blogginlägg, en gräns för att separera varje meta listobjekt och ställ in H2 till # 333:

 .blogpost, .worksearch border-bottom: 1px solid # e8e3c8;  h2 a: länk, h2 a: besökte färg: # 333;  ul.meta li border-left: 1px solid # e3e8ed; 

---

Sidebar

Sidofältet kommer att se ut som följer och kommer att användas över hela sidan, förutom front- och portföljsidor:

Registrera Sidpanel

För det första måste vi registrera sidfältet widget-området - det här görs på samma sätt som området på hemsidan. Inuti functions.php och följande kod inom parentes för om (function_exists ('register_sidebar')) efter hemsidan array:

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

Med andra ord borde det se ut som följer:

 om (function_exists ('register_sidebar')) register_sidebar (array ('name' => 'Hemsida Bottom', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); register_sidebar (array ('name' => 'Sidpanel', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); 

Visa sidofältet

Gör sedan sidfältet genom att lägga till följande i sidebar.php:

 #sidebar float: left; bredd: 220px;  #sidebar ul marginal: 0;  #sidebar ul li listestil: none; marginal-vänster: 0; marginal-botten: 25px; 

 li h3 font-size: 1.3em; linjehöjd: 1.4em; marginal: 5px 0 5px 0;  / * Sidpanelens sökformulär * / #sidebar ul li # search margin-bottom: 25px;  .hidden display: none; #sidebar ul li # sökformulär #s padding: 7px 29px 7px 7px; bredd: 182px;  #sidebar ul li # sökformulär #searchsubmit display: none;  / * Sidfältslistor (t.ex. Meta, Arkiv, Kategorier) * / #sidebar ul li ul vaddering: 15px 5px 15px 8px;  #sidebar ul li ul li list-style-position: utanför; marginal: 0 0 5px 20px; 

 #sidebar ul li # sökformulär #s bakgrund: url ("deepblue / search.png") no-repeat right # f6f6ec; gräns: 1px fast # E8E3C8;  #sidebar ul li # sökformulär #s: fokus border: 1px solid # dad4b6;  #sidebar ul li ul bakgrundsfärg: # f6f6ec; gräns: 1px fast # E8E3C8;  #sidebar ul li ul li list-style: url ("deepblue / bullet.gif");  #sidebar ul li a: länk, #sidebar ul li a: besökte färg: # 333; 

 posta; om (in_category ("$ ts_portfolio_cat")) / * Är en portföljartikel * / kräver ('single-portfolio.php');  else / * Är en blogginlägg * / kräver ('single-blog.php'); ?>

  
  
 
 
 
 
#comments ">