Bygg en utvalgt innleggsseksjon for WordPress

Kode

Share

• Share on Facebook
• Tweet
• Share on Google+
• Post to Tumblr
• Pin it
• Add to Pocket
• Send email

WordPress er kjempebra. Enda mer fantastisk er det faktum at det kan tilpasses for å drive hvilken som helst type nettsted du liker! Her lærer vi hvordan du lager en uthevet og "siste innlegg" -avdeling - lett en "må-ha" for alle gode Nyheter / Magazine-temaer. Vi vil også gå over med "Custom Fields" til deres fulle potensial.

Introduksjon

Denne opplæringen dekker prosessen med å lage indekssiden av et magasin / nyhetstema for WordPress. Hovedtrekkene på denne siden vil være:

• Utvalgte innlegg.
• siste innlegg.
• Bruke PHP Variabler for enkel tilpasning av det ovennevnte for brukere av ditt tema, ikke kjent med PHP / WordPress.
• Henter et innleggsbilde fra delen "Tilpassede felter" i et innlegg.

Trinn 1 - Fremstilling

Fra din WordPress installasjons katalog, bla gjennom "wp-innhold / temaer" og opprett en ny mappe. Gi det navnet du ønsker (jeg bruker 'WordPress Times'). Deretter oppretter du 5 nye filer:

• index.php
• header.php
• footer.php
• style.css

Dette er grunnleggende oppsettet vi skal gå for:

Så et 940px dokument, med to seksjoner:
Innhold på 600px og sidefelt ved 300px - forlater 40px margin mellom de to.

Trinn 2 - Overskrift

Åpne din header.php fil, og sett inn følgende:

  >              
 

Kjører gjennom dette, definerer vi først DOCType som XHTML 1.0 Transitional. I hovedenheten setter vi deretter alle metatagger, stilark og sidetitler som skal hentes fra WordPress; og vi inkluderer våre 3 JavaScript-filer.
Til slutt åpner vi en "container" -avdeling, og legger inn bloggens navn som titteltekst.

Trinn 3 - 'Breaking News' Innlegg

Vi vil inkludere et brukerdefinert antall innlegg fra en kategori "Breaking News" øverst på siden vår. Åpne index.php og skriv inn følgende, ikke bekymre deg, jeg skal forklare alt under:

  
     
  
"title ="">
 
  
 
 - #commenting "title =" Vis kommentarer "> 
 
 
 

3.1 - Åpning

Den første linjen er en enkel WordPress PHP-funksjon for å inkludere vår header.php-fil først. Nedenfor åpner vi vår "Content" div for å pakke alle innleggene sammen. Jeg har tatt med en HTML-kommentar ved avslutningen av hver div-tagg som angir hvilken div den lukker. Jeg anbefaler på det sterkeste at du begynner å gjøre dette i dine egne prosjekter hvis du ikke allerede, da det bidrar til å holde koden så organisert som mulig.

3.2 - Den $ mer taggen

Denne koden tillater oss bare å inkludere en del av hver post til hvor forfatteren har tatt med <--more--> tag - dette stopper all tekst i lange innlegg fra å vises på hjemmesiden.

3.3 - Kategori ID-er

 $ breaking_cat = "83"; $ breaking_num = "3"; $ latest_num = "4"; $ latest_ignore = "-1";

For å gjøre det enklere å tilpasse temaet, inkluderer vi noen alternativer her. Hver linje kommenteres videre. Vi gjør dette slik at hvis noen andre bruker temaet ditt - i stedet for å måtte krype gjennom hele koden din for å finne hvor de skal legge inn kategoridokumentene sine - er de alle lett tilgjengelige øverst på filen. Gjennom denne opplæringen bruker vi disse variablene i WordPress-løkken.

3.4 - Har vi Innlegg?

Dette er en variant av WordPress-sløyfen som utdataer våre innlegg fra databasen. Som du kan se bruker vi de to første av våre variabler fra delen ovenfor. Variablene erstatter seg med strengen som er knyttet til dem. Hvis du for eksempel bruker standardkoden, blir linjen automatisk:

 query_posts ( 'showposts = 3 & cat = 83')

Den andre linjen sier da, hvis vi har innleggene, legger du dem inn på siden i formatet som er skissert nedenfor.

3.5 - Innlegg Innhold

  
"title ="">
 
 

Dette er ikke så skummelt som det ser ut, stol på meg.

• Bilde - På vår hjemmeside forhåndsvisning vil du legge merke til at hvert innlegg har sitt eget bilde. Dette er inkludert ved hjelp av WordPress '"Custom Fields" -delen når du skriver et innlegg. Bare sett 'nøkkelen' til thumbnail Sett inn linken til bildet:

  Koden sier i hovedsak "Ta dataene fra innleggets egendefinerte felt kalt" miniatyrbilde "og hold det inn i en img-tag."

• Tittel - Dette legger inn vår posttittel som en kobling mellom h2-koder. the_permalink () får postens lenke, og tittelen() henter tittelen. Ganske enkelt, hei?
• Dato tid - Her får vi den tiden innlegget ble laget i formatet: l, F j, Y G: i - eller på engelsk: Dag, dato, årstid (f.eks. Lørdag 2. august 2008 14:27).
• Innhold - Henter innleggets innhold opp til (takket være koden vi inkluderte tidligere). "Fortsett ..." er teksten som vises på slutten av innlegget. Tilpass dette, men du vil.

3.6 - Post Meta

 
 
 - #commenting "title =" Vis kommentarer "> 
 

Dette henter kategorien (e) innlegget er fra. Hvis det er mer enn en, blir de skilt av kommaer. En lenke til kommentaravsnittet, og antall kommentarer i artikkelen blir deretter hentet.

Dette lukker bare "div.breaking" som vårt innlegg var i; og lukker deretter sløyfen når den er ferdig.

Trinn 4 - Siste innlegg

Under våre tre "Breaking News" -poster vil vi inkludere et brukerdefinert antall siste innlegg, mens du ignorerer innlegg fra kategorien Breaking og noen av de andre brukerdefinerte kategoriene for å ignorere. Vi legger til følgende nederst i vår nåværende kode:

    
  
"title ="">
 
 
 
 - #commenting "title =" Vis kommentarer "> 
 
 
 

4.1 - The Loop

• showposts = '. $ latest_num. - Forteller om sløyfen bare viser antall siste innlegg som brukeren har angitt i variabelen '$ latest_num'.
• cat = - '$ breaking_cat. '' $ latest_ignore.'. - Dette instruerer sløyfen å ignorere (merk symbolet "minus" vi krever at brukeren skal bruke i variablene) innlegg som er i kategorien "Breaking" for ikke å duplisere noen innlegg; og også å ignorere innlegg fra noen av kategoriene som brukeren oppgir i variabelen '$ latest_ignore'.

Resten av det er selvforklarende og det samme som Breaking News-funksjonen. Noen få forskjeller er mangelen på 'innhold' seksjon fra hvert innlegg, og også postbildet er gitt klassen av 'Postimg-s' i stedet. Dette vil tillate oss å kreve bare et miniatyrbilde - som vi vil da formatere ned i vårt CSS fra 200x200 til 50x50.

4.2 - Lukker siden

For å avslutte den nåværende siden, må vi lukke div # innholdet og inkludere vår footer:

4.3 - Footer.php

I denne filen, lukk bare #container, body og html tags:

Trinn 5 - CSS Styling

For øyeblikket, hvis du har opprettet noen innlegg, bør designen se slik ut:

Ganske stygg, eh? Vel ikke for mye lenger.

5.1 - Nødvendigheter

Åpne opp din style.css fil og lim inn i følgende kode:

 / * ------------------------------------------------ ------------------------ Tema Navn: WordPress Times Theme URI: http://www.vivawp.com/ Beskrivelse: En opplæring for NETTUTS.com av Dan Harper Versjon: 1.00 Forfatter: Dan Harper Forfatter URI: http://danharper.me ------------------------------ ------------------------------------------ * /

Dette kreves øverst i denne filen, da det gir Theme Manager i WordPress litt informasjon om temaet ditt. Fyll ut delene i det som du vil.

5.2 - Styling

Nedenfor er all CSS-koden som brukes til å formatere dokumentet. Det er dokumentert nedenfor.

 * margin: 0; padding: 0; body background-color: # faf9f5; farge: # 3d3d3d; font-size: 75%; font-familie: "Helvetica Neue", Helvetica, Arial, sans-serif;  #container width: 940px; margin: 15px auto;  h1, h2, h3, h4, h5, h6 font-familie: Georgia, "Times New Roman", Times, Serif;  / * BLUEPRINT CSS TYPOGRAFI * / h1, h2, h3, h4, h5, h6 font-weight: normal; farge: # 111; h1 font-size: 3em; linjehøyde: 1; marginbunn: 0.5em; h2 font-size: 2em; margin-bottom: 0.75em; h3 font-size: 1.5em; linjehøyde: 1; margin-bunn: 1em; h4 font-size: 1.2em linjehøyde: 1,25; marginbunn: 1,25em; høyde: 1,25em; h5 skriftstørrelse: 1em; font-weight: bold; margin-bottom: 1.5em; h6 font-size: 1em; font-weight: bold; h1 img, h2 img, h3 img, h4 img, h5 img, h6 img margin: 0; p margin: 0 0 1.5em; li ul, li ol margin: 0 1.5 em; ul, ol margin: 0 1.5em 1.5em 1.5em; / * / BLUEPRINT CSS TYPOGRAFI * / h1 # header margin-bottom: 20px;  # innhold bredde: 600px; flyte: venstre;  .breaking, .recent polstring: 10px; grense: 1px solid # 3d3d3d; margin-bunn: 15px;  .postimg float: right; bredde: 200px; høyde: 200px; polstring-bunn: 10px;  .postimg-s float: right; bredde: 50px; høyde: 50px; polstring-bunn: 10px;  .breaking h2 font-size: 2.5em; linjehøyde: 1em; margin-bunn: 0px;  .breaking h2 a, .recent h3 a text-decoration: none; farge: # 3d3d3d;  .breaking h2 a: svever, .recent h3 a: svever tekst-dekorasjon: understreke;  p.datetime font-style: kursiv; fontstørrelse: 0.9em;  / * POST META * / .postmeta margin: -10px; polstring: 4px; bakgrunnsfarge: # dedbd1; klare: begge;  .postmeta p margin: 0; polstring-venstre: 6px; tekst-transformer: store bokstaver; font-weight: bold;  .postmeta span.comm font-weight: normal;  .postmeta a: link, .postmeta a: besøkt farge: # 3d3d3d; tekst-dekorasjon: ingen;  .postmeta a: svever, .postmeta a: aktiv text-decoration: understreke;  #sidebar width: 300px; margin-venstre: 620px; 

5.3 - Undersøkelse av CSS

• * - Fjerner uønskede marginer og paddings fra alle elementer som nettlesere setter inn seg selv.
• kropp - Grunnleggende sideformatering av farger og skrifter.
• #container - Setter sidebredden til 940px. 15px margin øverst og nederst, og sentrerer den i vinduet.
• h1, h2, h3, h4, h5, h6 - Overskriftskrifter til Georgia, Times New Roman, Times eller noen serif font.
• Mellom Blueprint kommentarer tagger - Grunnleggende typografi styling fra Blueprint CSS Framework. Sparer mye trøbbel med å få tekst til å se fint ut.

• h1 # header - Legger litt adskillelse fra bloggen, og resten av dokumentet.
• #innhold - Alt innholdet vårt er pakket inn i 600px til venstre. Resterende plass kan brukes som sidebjelke.
• .bryte, .recent - Inkluderer Breaking og Siste innlegg i en boks med 10px polstring. 15px mellomrom mellom hver.
• .postimg - Formaterer Postens bilde for å bryte artikler. Bildestørrelse begrenset til 200px og svingt til høyre.
• .postimg-s - Samme som ovenfor, men for Siste artikler og bildet er endret til 50px.
• .bryter h2 - Gjør tittelen på Breaking-artikler mindre, uten bunnmargin.
• .bryte h2 a, .recent h3 a - Grunnleggende styling for titler av artikler, gjemmer standard lenke stil.
• .bryte h2 a: svever, .recent h3 a: svever - Legger til en understreke til tittellinken når du svinger over for å vise brukeren det er faktisk en lenke.
• p.datetime - Dato og klokkeslett for artikler gjort litt mindre, og kursiv.

• .postmeta - Oppretter boks for å inkludere Post Meta-detaljene (kategorier og kommentarer). margin -10px sikrer at den fyller hele innleggboksen.
• .postmeta s - Tekst i postmeta div er gjort stort og fet.
• .postmeta span.comm - Fjerner den dristige stylingen for "x Kommentarer" -teksten.
• .postmeta a - Link styling for å fjerne standard lenkefarge.
• .postmeta a: svever - Legger til understreke til koblinger på hover.

• #sidebar - Oppretter et område for en sidebar nederst på høyre side av siden.

Siden vil nå se slik ut. Mye renere!

Konklusjon

Gratulerer. Du har opprettet grunnleggende om forsiden av et nyhetstema for WordPress, komplett med et Utvalgt innleggsområde - en "må-ha" når det gjelder nyheter-temaer. Du kan også holde deg foran konkurransen med dine enkle tilpasningsalternativer ved hjelp av PHP-variablene.

Se opp for lanseringen av vivaWP - en ny familie av Premium WordPress-temaer som kommer i midten av august. Vårt første tema, CocoaNews, deler noen av grunnkode som er vist i denne opplæringen.