Det blir stadig mer og mer vanlig for blogger å ha bestemte innlegg øverst på siden. I denne opplæringen skal vi vise deg hvordan du implementerer dette i WordPress. Vi bruker standardtemaet, Kubrik, som vårt grunntema, men det bør tilpasses de fleste temaer med noen modifikasjoner. Det er veldig lite kode og med innlegg er enkelt.

Hva vi skyter for

Vi skal endre Kubrik-temaet som kommer ferdigpakket i WordPress for å kunne legge inn innlegg øverst på siden. Denne opplæringen har bare blitt testet på WordPress 2.5.x, men det bør også fungere på 2,3.x-serien. Vi skal anta at du bruker 2.5.x eller høyere. Ved slutten av opplæringen har du noe slikt:

Trinn 1 - Oppretter standardbilde

Før vi gjør noe, gå til tema-mappen i WordPress-installasjonen din (wp-innhold / temaer /) og lag en sikkerhetskopi av "standard" -mappen. Dette er Kubrik-temaet som vi skal redigere. Sikkerhetskopien er hvis du vil gå tilbake til det originale, umodifiserte temaet.

Først skal vi lage et standardbilde i tilfelle det ikke er angitt et omtalt postbilde. La oss holde det søt og enkelt for denne opplæringen. Åpne ditt foretrukne bilderedigeringsprogram og opprett et 233x130px rektangel med 10px radius avrundede hjørner. Jeg laget bakgrunnen en hvit til grå radial gradient og legg litt tekst på toppen. Dette er hva jeg har:

Lagre bildet som "no-featured-image.jpg" i "bilder" -mappen som er inne i "standard" -mappen.

Trinn 2 - Legg til PHP-koden

Nå for koden. Åpne "header.php" -filen i "standard" -mappen. På slutten av filen ser du en div blokk og en hr tag som denne:

 
 
/ ">
 
 
 
 

Mellom slutten div-taggen og hr, sett inn følgende kode:

 
 ID); $ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-featured-image.jpg"; printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title); ?> 
 
 

Denne koden vil sende ut tre bilder i en uordnet liste. Hvert bilde er en lenke til et populært innlegg. Vi snakker om hvordan du konfigurerer koden etter at vi har lagt til CSS.

Trinn 3 - Stil med CSS

Deretter må vi legge til noen CSS-stiler. Åpne filen "style.css" og legg følgende kode nedenfor på slutten av filen. Alt dette gjør, flyter listelementene til venstre og plasserer dem jevnt ut.

/ * Utvalgt innlegg karusell * / #featured polstring: 10px 10px 0 20px;  #carousel listestil: none; margin: 0; polstring: 0;  #carousel li float: left; polstring: 0; margin-høyre: 10px; 

Trinn 4 - Forstå koden

La oss ta en titt på hva koden vi la til gjør. Inne i container div (id = "featured") har vi en uordnet liste og noen PHP-kode for å generere listelementer.

$ featured_posts = get_posts ('numberposts = 3 & category =1');

Første linjen vist ovenfor henter postinformasjonen ved hjelp av get_posts () -funksjonen og tilordner postdata til $ featured_posts-variabelen. Get_posts () -funksjonen utelukker en enkelt parameter i form av en spørringsstreng som ligner på det du ser på slutten av en URL (sans det opprinnelige spørsmålet). Den første parameteren er "nummerposter" som vi har satt til 3 for denne opplæringen. Denne parameteren angir hvor mange funksjoner vi vil vise. Den andre parameteren er "kategori" som vi har satt til 1. Verdien av parameterkategorien skal være ID for kategorien du bruker for de utvalgte innleggene dine. Du kan finne IDen til en kategori ved å gå til kategoristyringssiden og sveve musen over en kategoritittel. Statuslinjen viser en lenke. Det siste nummeret er kategorien ID.

Neste linje er en foreach-sløyfe som vil løpe gjennom innleggene vi har hentet ved hjelp av get_posts () -funksjonen. Den første linjen inne i forløpsløkken henter URL-adressen til bildet ved hjelp av get_post_custom_values ​​() -funksjonen og lagrer URL-adressen i $ custom_image-variabelen. Den første parameteren angir nøkkelen til den egendefinerte verdien vi bruker, "featured_image". Den andre parameteren angir hvilket innlegg vi får verdien av.

$ custom_image = get_post_custom_values ​​('featured_image', $ post-> ID);

I neste linje gjør vi en rask sjekk for å se om et bilde var bestemt. Hvis det ikke ble oppgitt noe bilde, tilordner vi $ bildevariabelen nettadressen til standardbildet. Hvis et bilde ble spesifisert, bruker vi det.

$ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-featured-image.jpg";

I den siste linjen utfører vi faktisk listelementene. Hvert element er et bilde som kobler til det valgte innlegget.

printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title);

Trinn 5 - Opprette utvalgte innlegg

Det er det! Nå, når du vil ha et innlegg, tilordne det til den uthevede kategorien og opprett en egendefinert verdi med en nøkkel av "featured_image" og en verdi av bildeadressen. Bildene skal være 233x130px.

Se det i aksjon

Du kan se temaet i aksjon på vår NETTUTS WordPress Demo-server: