Accentsconagua

Bygg en grunnleggende avis stil layout med Wordpress og jQuery

Kode
Share

Grid / Newspaper / Magazine maler blir mer og mer dominerende i wordpress skin og tema samfunn. De ser stilig ut, men det kan være skremmende å vite hvor du skal begynne. I denne opplæringen bruker vi kraften til jQuery til å lage et gridoppsett med størrelsesnedbrytende overskrifter!

Forord

Denne opplæringen antar at du har en wordpress-motor som kjører på en server som du har tilgang til å laste opp filer, laste ned filer og bla til. Hvis du vil kjøre en lokal server på datamaskinen din med en WordPress-installasjon, er det en veiledning på det her for Windows, og her for OS X.




Trinn 1 - La oss starte med nødvendighetene ...

Opprett en ny mappe i mappen 'wp-content / themes /', og navngi det uansett hva du vil nevne huden vi skal lage. Lag 2 nye filer i denne nye mappen, en som heter 'index.php' og den andre 'style.css'. Vi skal begynne med noen grunnleggende wordpress-koden. Denne "basekoden" er hva jeg starter med hver gang jeg lager en full wordpress hud, fordi den inneholder mesteparten av den nødvendige informasjonen. Jeg har holdt den inne her fordi du kanskje vil utvikle dette til en full hud. Jeg bruker også et standard stilark for mine temaer, så kopier dette kodestykket til "style.css", og rediger innholdet henholdsvis. Stilarket er reled inn i linjen:

Du trenger også 2 JavaScript-filer, en er en kopi av jQuery og en tom .js-fil kalt myTheme.js. Ikke glem å rel disse inn i dette i din hode element:

Ikke glem å endre navnet på jQuery rel hvis du bruker en annen pakke til meg, som du mest sannsynlig er. 'myTheme.js' må komme under jQuery-lenken, ikke ovenfor.

Merk: jQuery 1.2.6 er også pakket med Wordpress 2.2 og nyere, så hvis du ikke vil laste ned den, kan du finne den i wp-includes / js / jquery / jquery.js. For å inkludere DETTE jQuery-dokumentet, bruk dette i stedet for jQuery rel ovenfor. Du trenger fortsatt myTheme.js skjønt!

Trinn 2 - PHP / Wordpress / XHTML-koden.

Når du har valgt og aktivert ditt nye tema, åpner du 'index.php' med favorittredigeren din, og la oss få koding!

Her er alt XHTML/PHP/ Wordpress-kode må vi angi innholdet og metadataene for hvert innlegg. Lim inn eller skriv den inn mellom html åpne og lukk etiketter. Jeg vil forklare det litt for litt under!

  
 
 
 Postdetaljer
 Lagt ut:  på .
 Skrevet av: .
 Antall kommentarer: .
 Postet i: . 
 
 
 
 
  
<

divs

Innpaknings-diven bryter i utgangspunktet hele greia slik at vi kan legge det pent ut senere. Alle divs er ganske selvforklarende, og jeg har også kommentert i endene av divs, så jeg hopper over dem mens de forklarer. Kort sagt, jeg har pakket alt i overensstemmelse med det, så det er enkelt å stilere. .left div er den venstre kolonnen, den riktige div er den høyre kolonnen, .entry div er postoppføringen, så videre og så videre. Jeg har brukt klasser i løkken, som om det er mer enn ett innlegg, vil idene sikkerhetskopiere og opprette en valideringsfeil.

Den berømte Wordpress Loop.

Hvis du ikke får hva dette er, gå tilbake til wordpress school. Det slår i utgangspunktet gjennom databasens informasjon i forhold til samtalene i loop. Hvis du ber om tittelen, vil sløyfen se på databasen for tittelen for deg.

Postens MetaData.

 Postdetaljer
 Lagt ut:  på .
 Skrevet av: .
 Antall kommentarer: .
 Postet i: .

Nå for nitty gritty ting. Alt over inneholder informasjonen vi vil vise om innlegget. I respektive rekkefølge ber vi om;

  • Dato og tid - Vi ber om datoen i formatet l, jS F, Y (for eksempel søndag 8. juni 2008), og tiden i formatet g: i a (f.eks. 4:45 pm). Jeg har brukt tiden(); to ganger, fordi hvis vi bruker dato(); å be om datoen, vil den bare vise den en gang per dag. Hvis du postet flere innlegg på samme dag, ville datoen ikke vises en gang per innlegg, men en gang på første innlegg av dagen.
  • Forfatter - Dette er selvforklarende, vi ber bare om forfatteren av innlegget.
  • Kommentarer nummer - Dette krever antall kommentarer på et innlegg. Hvis innlegget ikke har noen kommentarer, vil det returnere verdien 'ingen'. Hvis den har en, vil den returnere verdien '1', og, du gjettet det! Hvis den har mer enn en, vil den returnere en verdi som '21' eller '6', alt avhengig av hvor mange kommentarer innlegget har.
  • Kategori - the_category (); spør databasen for kategoriene som et innlegg har blitt tildelt til. Takket være wordpress, trenger vi ikke å bekymre oss om å bruke en omfattende og rå php foreach loop, som (','); Skiller kategoriene med et komma for oss. Takk Wordpress!

Innholdet.

 
  
<

Får det mer selvforklarende enn det? Vi ber om tittelen (innpakket i en h2 element slik at vi kan stile det tilsvarende), og innholdet (innpakket i en .inngang div slik at alt innhold er nestet i sin egen div for enkel styling og tilgang også.). 'mer ...' i parentes er for når du bruker tag i Wordpress Post Editor.

Kom igjen ... Sløyfeenden!

Du koden bunnies burde få dette ... Det er grunnleggende loop igjen! Den lukker sløyfen slik at bare de innebygde "funksjonene" i løkken utføres om og om igjen.

Trinn 3 - CSS: Layout.

Puh! Du har braved all wordpress-koden vi trenger for denne opplæringen! Bra gjort! Det burde se noe stygg ut som dette:

Merk: Jeg har brukt innhold fra min egen lokale server (som skjer fra min egen blogg) som fyllmateriale, slik at innholdet ditt ikke reflekterer min.

Nå som vi har alle xhtml- og php-funksjonene ute av veien, kan vi flytte på slik at det ser pent ut med css! Glede!

Åpne "style.css" igjen med favorittredigeren din, og hvis du ikke allerede har det, lim inn denne koden i den. Men du burde ha gjort det uansett, for ellers ville du ikke vært i stand til å aktivere temaet!

I denne opplæringen bruker jeg skjønnheten til css 'float' og 'clear' for å flyte postdetaljer (eller metadata, uansett hva du vil kalle det), og innholdet ved siden av, og ett innlegg etter det andre. Her er den grunnleggende oppsettkoden: (MERK: Dette vil IKKE gjøre siden din ganske pen enda.)

/ * ----- LAYOUT ----- * / #wrapper bredde: 600px; margin: 0 auto;  .post clear: both; bredde: 600px;  .post .left width: 180px; flyte: venstre; polstring-høyre: 20px;  .post .right width: 400px; flyte: høyre; polstring: 0 25px 20px;

Enkel:

  • #wrapper - Disse egenskapene plasserer alt vi har i midten av vår side, og 600px bred.
  • #post - Innleggene kan ved et uhell ri opp ved siden av et dårlig flovert forrige innlegg, eller en som ikke har nok innhold fordi vi bruker flyter. Egenskapen "klar" sørger for at den skyves helt til bunnen av det forrige elementet, uansett hva.
  • .venstre og. rett div - Disse svinges henholdsvis til venstre og høyre, fordi dette er det som får dem til å gå side ved side! Hvis vi ikke satte bredden på divene skjønt, ville denne teknikken ikke fungere. Jeg har gjort kolonnen for innleggsdetaljer litt slankere enn innholdskolonnen, fordi vi vil ha mer oppmerksomhet og mer plass til innholdet (vurderer at det er mindre innhold i kolonnen "postdetaljer").
    Jeg har gjort min matte, og sørget for at totalbredden legger opp til 600 slik at begge kolonnene passer pent inn i foreldrenes "post" div:180px + 20px (polstring, så vi har litt avstand) + 400px = 600px

Jippi! Nå, la oss se det pent ut!

Trinn 4 - CSS: Styling.

Så vi har skjelettoppsettet, men det ser fortsatt litt stygg ut:

Dette er når vi bruker den ekte kraften til våre cascading stylesheets. Kopier eller skriv inn følgende i stilen din.css under den forrige 'Layout'-koden:

/ * ----- STYLES ----- * / body font: 75% / 18px Georgia, "Times New Roman", Times, serif; bakgrunnsfarge: # e4e4e4;  en farge: # 006082; tekst-dekorasjon: ingen;  .post .left text-align: right; farge: # 898989;  .post .left p.postmetadata strong display: block; tekst-transformer: store bokstaver; . rett bakgrunnsfarve: #fff; min høyde: 150px;  .entry color: # 3c3c3c;  .entry p img polstring: 0 10px 7px 0; flyte: venstre;  a.more-link display: block; polstring: 10px; tekst-transformer: store bokstaver;

The Breakdown.

Dette er en håndfull kode som skal behandles, og det kan alle se skremmende ut, men det er faktisk veldig enkelt! Fordi flertallet av dere er sannsynligvis tilstrekkelig hos CSS, vil jeg være rask og snill gjennom denne delen.

  • kropp - Her er det at vi angir standard tekst / skriftstørrelse og bakgrunnsfargen
  • en - Gjør alle koblinger ser pen ut.
  • .post .left - Endre farge på teksten til en grå nyanse, og juster avsnittene til høyre.
  • .post .left. p.postmetadata sterk - Gjør "Postdetaljer" skiller seg ut ved å kapitalisere det, og endrer det sterke elementet til et blokkelement for å justere postdetaljer med innholdsdelene.
  • .Ikke sant - Dette er litt forvirrende, så jeg skal forklare dette i dybden. Selvfølgelig er bakgrunnsfargen nå hvit, slik at innholdet hopper av siden. Egenskapen "minhøyde" er imidlertid at hvis postinnholdet faktisk er kortere enn postdetaljer, vil det ikke bryte den kontinuerlige hvite fargen nedover siden.
  • .inngang - Gjør innholds-teksten mørkegrå.
  • .inngang p img - gir noen bilder i innholdsområdet for å puste, og lar også teksten vikle seg rundt bildet.
  • a.more-link - Klassen "mer-link" blir automatisk lagt til med wordpress for å utelukke 'mer ...' som vi har lagt til i 'the_content ()' -funksjonen. Vi setter den på hovedstaden, slik at brukerne antar at det ikke er en vanlig / ekstern lenke, og gi den litt plass også.

At CSS burde få det til å se noe slikt ut:

Trinn 5 - JQuery.

Så det er veldig viktig det ser bra ut uten JavaScript - Ovennevnte kompenserer for oss her. Men for å skape våre sanne aviser stil nedgraderende hoder, trenger vi noen velsmakende jQuery! Åpne opp 'myTheme.js' og la oss få sprekk! Det vi vil oppnå, er noe som dette (photoshop mockup):

Legg merke til forskjellen? Vi skal øke størrelsen på den første "helten" postens overskrift, og endre fargen også.

Deretter vil den andre eller "skurken" posten være litt grå med en enda mindre størrelse, og de påfølgende innleggene etter det vil forbli en jevn størrelse.

Vi skal takle dette ved å legge til klassene 'hero' og 'skurken' til henholdsvis vår første og andre 'post' div, som vi deretter vil stile med litt ekstra CSS. Vi legger til klassen til '.post' divs og ikke den h2 elementer fordi vi vil endre noe av det inneholdte innholdet, for eksempel størrelsen på innholdet og det ekstra ikonet på merlinken i "heltens" innlegg. Hvorfor helten og skurken du spør? Fordi skurken alltid kommer etter helten. Og det er et enkelt konsept å forstå.

Det høres komplisert, men det er faktisk bare 4 linjer med (fordelt ut) kode. Alt dette går inn i "myTheme.js":

$ (dokument) .ready (funksjon () $ ("post: først"). addClass ("hero"); $ (".post: nth-child (2)") );

Flott! Ikke-påtrengende JavaScript! Jeg elsker det! Det burde være i 'myTheme.js'.

Forklaring

Vi har nettopp brukt en liten bit av jQuery's utrolig kraftige, verdifulle og allsidige selectors. Vi har nå diskret lagt klassene '.hero' til den første 'posten div' på siden, og klassen '.villain' til den andre 'posten' div på siden. La meg forklare hvordan.

  • $ (Document) .ready (function ()

    Dette er jQuerys super spesialfunksjon for å starte JavaScript-funksjonen som er definert etter denne linjen. Når $ (Dokument) er .klar() initiere funksjon() vi skal definere. Ved hjelp av $ (Document) .ready (function () er mye raskere enn å bruke 'standard': window.onload () funksjon, fordi window.onload () funksjon venter på hel dokument for å laste. Dette inkluderer alle bilder, iframes, etc. Vi trenger bare å vente kjernen XHTML Dokumentet er ferdig lastet for å kjøre skriptet vårt - så vi bruker jQuery's spesielle $ (Document) .ready (function () for å få ting til å gå raskere, og har mindre lag mellom første surfingstid og javascript-initiering. Kan ikke forveksle deg? For å gjøre det enkelt, er jQuery-metoden raskere. Husk at.

  • $ ( "Post: først. ") AddClass (" hero.");

    Yay for kraftige velgere! jQuery har et fantastisk utvalg av selektorer, noen som er fra CSS3, men vi kan bruke dem nå. Denne linjen forteller oss å få: $ () det første ".post" -elementet: .post: først og legg til klassens helt: .addClass ( "helt") til det. Vi kan nå stile dette i CSS, men vi har fortsatt ikke rørt eller endret XHTML-koden til ".post" div på noen måte.

  • $ ( "Innlegg: n'te barn (2) ") addClass (" skurk.");

    Mer super sterke selgere! jQuery lar oss ikke bare velge: første element i et slag, men lar oss også velge et hvilket som helst antall av elementene! Ved hjelp av : N-te-barn (#) vi kan velge noen type elementet vi vil ha på en side. Hvis vi ønsket den 30.

    På siden vil markeringen være $ ( "P: n'te barn (30)"). Enkel å forstå?

jQuery's selectors er ikke begrenset til antall skjønt! Det er mange mange flere selektorer som lar deg velge det eksakte elementet du trenger. Du kan se dem ved å gå til velgerseksjonen på jQuery-dokumentene.

Trinn 6 - JQuery CSS.

Flott. Med alt dette ute av veien, kan vi nå fokusere på den visuelle siden av tingene. Ikke noe mer forklarende nødvendig, la oss dykke inn i CSS. Legg til eller skriv dette helt nederst på 'style.css' i 'myTheme' -mappen. For "mer-linken" til arbeid, last ned denne pilen fra famfamfam-silkeikonpakken, og legg den i en ny mappe 'bilder' i mappen 'myTheme'.

/ * ----- JQUERY ----- * / .hero .left p.postmetadata margin-top: 30px;  .hero .left p.postmetadata strong margin-bottom: 20px;  .hero .right h2 font-size: 46px; font-style: kursiv; font-weight: normal; margin-bunn: 0.5em;  .hero .right p font-size: 14px;  .hero a.more-link bakgrunn: url (images / arrow_right.png) no-repeat høyre bunn; flyte: venstre; polstring-høyre: 20px;  .villain .left p.postmetadata margin-top: 20px;  .villain .left p.postmetadata strong margin-bottom: 15px;  .villain. rett h2 font-size: 32px; font-weight: normal; farge: # 747474;  .villain. rett p img float: right; polstring: 0 0 7px 10px;

Forklaring

Du bør alle være ganske tilstrekkelig nå med CSS, så jeg skal gjøre en veldig raskt løpe gjennom denne nye CSS.
Dette er CSS som endrer utseendet til '.hero' innlegget. '

  • .helten .left p.postmetadata - Vi skyver det litt ned, så det er i tråd med vår nye topptekststørrelse.
  • .helten .left p.postmetadata strong - Vi skyver alt under de dristige "postdetaljer" nede, slik at det er i tråd med innholdet.
  • .helten. rett h2 - Dette gjør at vår "helte" header skiller seg ut. Vi gjør det større, og kursiverer det.
  • .helten. rett p - Øk skriftstørrelsen til heltenes innhold.
  • .helt en-link - Legg den lille grønne pilen fra famfamfam silkepakken.

Og også CSS som endrer posten '.villain'.

  • .villain .left p.postmetadata - Gjør det samme som heltens postmetadata, skyver det ned.
  • .villain .left p.postmetadata strong - Gjør det samme som heltens postmetadatajustering.
  • .skurk. rett h2 - Her gjør vi skurkhovedet grå, uten fet skrift og litt større enn de ensartede innleggene.
  • .skurk. rett p img - Skurken bildet må skille seg ut, ikke sant? Vi flyter bare den til høyre (slik at teksten vikler rundt den) og endrer polstringen tilsvarende.

Wrap Up

Bra gjort! I denne opplæringen har vi dekket en grunnleggende metode for å spore opp vårt WordPress-innhold ved hjelp av jQuery's selectors! De er imidlertid ikke eksklusive for jQuery. Du finner alle disse velgene i CSS3 (når alle nettlesere støtter det!). Vi elsker bare jQuery fordi de bringer dem til oss nå. Her er vårt sluttprodukt.




Kode
×