Share
WP_Query er et kraftig verktøy for å kontrollere hva som kommer ut av sløyfen din. I dag skal jeg lære deg alle hvordan du bruker det til å lage et 3-kolonneert avis-tema som har alle dine hovedblogginnlegg i hovedkolonnen, og av til siden et sett med innlegg med en bestemt kategori. Vi skal bruke 960 CSS rammeverk for grunnleggende oppsett og tilbakestilling av temaet, vil det hugge mye arbeid av det som trengs!
Vår plan for angrep er å ta ut alle innlegg med en delt tildelt kategori, og
plasser dem til side skilt fra hovedpostene. Vi vil også se på en metode
for å opprette et "populært innlegg" uten å bruke jQuery eller noen JavaScript i det hele tatt! Jeg har også kastet sammen en .psd (ved hjelp av maler som 960 gir deg på nedlasting) av hva
vi sikter på å oppnå i dag. Last ned .psd her.
Vi antar at du har et levende WordPress-installasjon, enten det er lokalt eller vert. Hvis du trenger litt hjelp med det, er det verdt først å lære å installere WordPress lokalt på Windows eller OS X.
Alrighty. Så bortsett fra det åpenbare behovet for et WordPress-installasjon, går vi
å trenge noen ekstra ting også. Jeg har en hel masse filer du trenger
har i temamappen din.
Fikk alt det? Flink. Du bør settes for resten av opplæringen nå! Ikke glem det
for å aktivere temaet i WP-admin (wp-admin / themes.php).
Jeg skal ikke gi deg all WordPress-koden ennå. Jeg skal gi deg
all WordPress-koden du trenger, unntatt WP_Query's. De får et skritt inn
deres egne, fordi de definitivt trenger forklaring! Det ville fylle opp siden måten også
mye, så jeg har tatt med alt i en .txt i stedet for her.
Last ned den, og kopier den til index.php. Eller skriv det, uansett hva som passer. Typing
hjelper deg med å huske hva du gjør!
Det er en hel del kode som skal behandles, så jeg vil bare utheve de interessante delene
for deg, og forklare dem.
Så jeg vedder på at du merker alle disse små 'grid_5' og 'container_12' klassene og
går det, hva er det? Vel, la meg forklare deg. Tallet som følger med 'grid_'
er antall kolonner vi vil ha som velger div for å være. Fordi vi vil ha 12 kolonner,
vi pakker hele greia (ved hjelp av div # wrapper) med 'container_12'-klassen.
I den grunnleggende CSS jeg ga deg med, har den importen for de tre 960 filene,
så vi har allerede en halv layout når vi ikke har kodet noen CSS i det hele tatt!
Dette vil ikke se for prangende. Det har ikke blitt stylet, og det har ikke engang innhold:
Det er her hvor alt magien skjer! Vi har tre WP_Querys:
Så vi ønsker en kolonne av WordPress-innhold fra bare en enkelt kategori. Hvordan gjør vi
gjør det? Bruker enorme rekke parametere WP_Query gir oss
med, det er lett å gjøre det. Erstatt theirNews kommentar i index.php med:
spørring ( 'category_name = theirNews & showposts = 7'); mens ($ deresNyheter-> har_poster ()): $ deresNyheter-> the_post (); ?>
Spørsmål! La oss hoppe rett inn i den.
Vi trenger noen spesifikk sløyfekode.
Les hele artikkelen '); ?>
Bare tittelen innpakket i a h4 tag, med innholdet innpakket i en div
klassifisert 'oppføring'. Flott! Du har gjort din første WP_Query ut av 3, det burde
nå bare liste kategorier med navnet 'theirNews'
Vi vil bare vise 1 innlegg, det har ikke kategorien 'deresNyheter'. Bare 1.
Siden du nå forstår grunnleggende for WP_Query, gir jeg deg full koden
(erstatt FEATURED POST-kommentaren med):
spørring ( 'showposts = 1 & cat = -59'); mens ($ featured-> have_posts ()): $ featured-> the_post (); ?> Skrevet under .
Dette er vårt utvalgte innlegg, så jeg har hensiktsmessig kalt div 'featuredPost',
men siden vi senere vil ha stiler fra vanlige innlegg, har jeg tatt med
klasse "innlegg".
Samme avtale med WP_Query. Denne gangen viser parameterne bare 1 innlegg som ikke er
fra kategorien 59. Kategori 59 er ID for kategorien 'deresNyheter'. jeg trenger
for å fortelle deg hvordan du får det!
Se hvordan den har det & Cat_ID = 59 på slutten? Dette er ditt kategorinavn.
Mine er 59, pass på at du endrer den til hva som helst ID av din "deresNyheter" -kategori!
Forskjellen med funksjonen er hovedsakelig den h2. Fordi det er den
nest største overskrift på siden. Vei opp i delen "deresNyheter" vi pakket inn
inn i a h4 element, fordi etter hovedkolonnens innlegg blir det
neste overskrift på siden. Alt for styling skyld.
Vår siste WP_Query. Denne vil bli alle innlegg eksklusive innlegg inneholdt
av kategorien "deresNyheter" (Du trenger ID. Mine var 59, kan du huske din?).
Men fordi vi allerede viser det første innlegget samlet (funksjonen
post), vi vil ikke vise det igjen, ikke sant? Så vi må kompensere innleggene av
1 - lett å gjøre med WP_Query's kraftige parametere. Bytt på MAIN WP QUERY-kommentaren
i index.php med dette:
spørring ( 'posts_per_page = 5 & offset = 1 & cat = -59'); mens ($ main-> have_posts ()): $ main-> the_post (); ?>Skrevet under .Les hele artikkelen '); ?>
Så det er all HTML og WordPress-koden vi trenger. Det vil fortsatt se grunnleggende, men
den vil ha den generelle 3 kolonneoppsettet vi er ute etter!
Nå fordi alt vårt layout er ganske mye gjort, er det hovedsakelig bare styling som er
behov for! nedlasting
alt dette CSS, og lim det inn i din style.css. Det er noen ting som
overstyre standard 960-koden. Vi trenger ikke å bruke !VIKTIG fordi
den nye koden er faktisk høyere opp den hierarkiske stigen enn 960-koden. Vi
bruk 960-koden som en slags "base" som vi bygger opp fra. Hvis du dekorere
grunnlag av et hus, ser du fortsatt de rå grunnene? Denne "dekorasjonen"
er hovedsakelig på topptekster, men noen generell styling brukes til tekstinnhold etc. En
større overstyring er kroppens skrifttype. Vi spesifiserer Georgia, når standard er faktisk
Helvetica. Fonter er virkelig opptatt, jeg har nettopp brukt Georgia til å være
forskjellig! Når du har limt inn og lest gjennom hele CSS, bør forsiden være
se komplett!
Jeg inkluderer bare denne delen, slik at jeg ikke får noen zillion spørsmål spør hvorfor enkelte
sider returnerer informasjonen som skal være på hovedsiden! Så vår index
siden har 3 kolonner - men hva ville du fylle 3 kolonner med i en bestemt singel
side? Hva enn du vil! Selv om jeg vil foreslå innholdet i innlegget ... Så jeg går
å forklare hvordan page.php og single.php arbeid, i tilfelle du
ønsker å utvide temaet. Hvis du vil dele index.php i header, sidebar og
footer, gjør det nå! Ellers vil vi dampe ut:
Så nå bør du ha en tom hovedkolonne. Vi skal fylle opp dette med a
vanlig sløyfe:
Skrevet under .
Naw ... Den vanlige gamle kjedelige sløyfen. Ta gjerne denne granen til det som helst
du vil at dine enkelt innlegg skal se ut. Dette gir grunnleggende
mal for WordPress å vise et enkelt innlegg.
Så det er et enkelt innlegg, men vi har fortsatt koblinger til single sider i
navigasjon og bunntekst. Hvis du klikker på dem, vil de returnere det samme som indeksen.
Ikke kult. Alt vi trenger å gjøre er å kopiere alt fra enkelt over til page.php,
og det skal være søtt. Lett va? Disse sidene skal se slik ut:
Så du har nettopp hatt et glimt på hva WP_Query kan gjøre. Jeg foreslår sterkt å besøke
Query posts docs siden, som har alle de samme parameterne som WP_Query. Du kan begrense sløyfen din til et bestemt innlegg ved hjelp av en hvilken som helst kombinasjon av parametrene skilt av a
&.
Jeg håper dere har hatt så mye moro som jeg har skapt et avis-tema!
Du kan se det endelige produktet her! Nyt!
Accentsconagua