Wordpress gir et stort utvalg av informasjon om bloggen din og innholdet. Viser mye av denne informasjonen kan bli romkrevende. En flott løsning på dette er fanebladet innhold!

I denne opplæringen tar vi WordPress Newspaper Layout vi jobbet med tidligere, og utvider den med faner.

Forord

Ikke sant! Vi bruker en fin og kraftig kombinasjon av jQuery's animasjon og .binde Funksjon blandes pent med Wordpress er allsidig WP_Query () og Wordpress eksklusive betingede koder. Hvis du er som meg, liker du å se det ferdige produktet før noe:

Hvis du vil gjøre bare denne opplæringen, du trenger den nyeste versjonen av jQuery for denne opplæringen. Last ned den her. Ellers bør det allerede være med dette temaet jeg har forberedt, som du kan laste ned her: myTheme.

Vi antar at du har en live Wordpress-installasjon, enten det er lokalt eller vert. Det er opplæringsprogrammer for å kjøre Wordpress lokalt her for Windows, og her for OS X. Aktivering av temaet jeg forberedte tidligere - myTheme - ville være en stor hjelp til. Vi strekker oss ut på dette, så åpne index.php og la oss få redigering!

Trinn 1 - Ny strukturell HTML.

Vi trenger åpenbart en ny HTML. Dette er enkelt. Vi trenger bare noen ekstra divs for å pakke inn alt vi jobber med. Plasser denne følgende koden bare ovenfor

 
 
 
iBlog - Wordpress og jQuery sammen i Harmoni.
 
 

Trinn 2 - Betingede koder

Så vi elsker Tabbed Content vi skal lage, men vi vil bare ha det på vår første side for showets skyld! Hvordan er det mulig å ha eksklusiv kode på den første siden du spør !? Enkel. Wordpress er betingede koder. Dette er en verdifull lære å lære! De betingede kodene gir et veldig kraftig middel til å tilpasse temaene dine litt mer! De er veldig selvforklarende, men jeg gir et grunnleggende trekk under koden. Legg til dette under vår helt nye h1 element i index.php.

Du får hva dette er, riktig? if (is_home ()) er vår tilstand her, så hvis siden som for øyeblikket blir gjennomsøkt, er hjem, inkludere vår tabbedContent.php-fil. Som vi vil skape neste.

Trinn 3 - tabbedContent.php (HTML)

Så nå har vi bedt Wordpress om å inkludere tabbedContent.php når siden er hjemme, men vi trenger fortsatt den faktiske filen og innholdet! Opprett en ny fil i katalogen 'myTheme', og navnet den tabbedContent.php. Skriv eller lim inn følgende i denne nye filen:

 
 
Siste artikler
 
Månedlige Arkiver
 
Søke
 
 
 
 
  
 
 
 
  
 
 
  
 
 
 

Flott. For øyeblikket er dette bare rå HTML uten noen Wordpress eller jQuery tillegg. Ikke mye av dette er nytt, men la meg forklare layoutet litt.

• #tabsNav - Dette er klikkbare faner! Vi har lagt til en href Attributt av deres tilsvarende innhold
• . Sørg for at hrefs matcher ID-navnet til det tilhørende innholdslisteelementet!
• #tabContent - Vi bruker en
  ikke i motsetning til Wordpress sidebjelker, fordi det er enkelt å stil og er egentlig en liste over innhold uansett! Jeg tror at innholdet i dette elementet er selvforklarende.

  Trinn 4 - tabbedContent.php (Wordpress-funksjoner)

  Nå er det gjort, det vil fortsatt se ganske tomt ut. Så vi må erstatte <-- --> kommentarer med faktisk innhold! Vi starter med WP_Query (), wp_get_archives () og et søkeskjema.

  4.1 - WP_Query ()

  Enda en verdifull leksjon å lære. Det er fantastisk hvis du vil gjøre ting som vi gjør, eller et «Utvalgt innlegg». I utgangspunktet er det en forenklet løkke hvor som helst på siden. Det er flott. Så klipp ut kommentarkoden for vår WP_Query, og skriv inn følgende:

   have_posts ()): $ recent-> the_post ();?> 
   "title =" Link til "> 
   

  WP_Query () er fantastisk. Ja, det er en loop. Ikke hele greia skjønt. Alt vi gjør rett og slett, forteller det immanentfølgende løkken for å vise oss en liste over de 5 siste innleggene. Strengen i parentesene av WP_Query kan være noe ... filter etter datoer, kategorier, koder, grense, etc. Det er et fantastisk verktøy å forstå, og likevel en annen verdifull leksjon å ta bort fra dette!

  4.2 - Arkiv

  Hvis du er en hyppig wordpress themer, bør du vite hvordan du gjør dette. Det er en grunnleggende samtale for en liste over månedlig arkiv. Og for å matche WP_Query-delen, vil vi bare ha 5 av dem (automatisk i synkende rekkefølge). Bare skift <-- WP_ARCHIVES GOES HERE --> i tabbedContent.php med følgende:

  4.3 - Søk

  Vi bruker bare en veldig enkel innføring og søk, ved hjelp av standardsøket jeg alltid bruker i mine egne maler. Erstatt WP SØK-kommentaren med dette:

  Flott, så nå burde du ha en ny fil i Mytheme katalog kalt tabbedContent.php, og den betingede taggen i index.php. Hvis du har fulgt alt riktig, bør temaet ditt se slik ut:

  

  Ikke så pen enda ... Eller tabbed, eller jQueried eller CSSed i det hele tatt for den saks skyld. Men det er en start, og godt å vite at vår Wordpress-kode fungerer! Vi er ferdige med tabbedContent.php, slik at du kan lukke det nå!

  Trinn 5 - CSS

  Vi trenger våre faner å blande inn, bli en del av siden. For øyeblikket er de stygge sider. Vi må gjøre siden for folk uten JavaScript aktivert først, for grasiøs nedbrytning. Du trenger noen bilder hvis du vil gjøre det så pent like mye som jeg gjør. Her er en liste over dem (høyreklikk og lagre som i bildemappen i myTheme-katalogen!)

  • searchInputBg.png
  • tabContent.png
  • tabContentHover.png
  • tabsNavBg.png
  • tabsNavActive.png
  • tabsNavHover.png

  Enten skrive, eller lim inn denne massive platen av CSS. Ingenting nytt her, vi justerer fanene opp med "Postdetaljer", og juster innholdet opp med hovedinnholdets hvite kolonne, og bruk: svevereksemplet noen ganger.

  / * ------ TABS ------ * / #container width: 600px; margin: 0 auto;  h1 font-size: 1.3em; tekst-transformer: store bokstaver; farge: # 949494; brevavstand: 1px;  #tabsAndContent ul, #tabsAndContent li padding: 0 ul # tabsNav float: left; bredde: 200px; listestil: none;  ul # tabsNav li background: url (images / tabsNavBg.png) no-repeat center # a8a8a8;  ul # tabsNav li: svever bakgrunn: url (images / tabsNavHover.png) no-repeat center #eee;  ul # tabsNav *: fokus disposisjon: ingen ul # tabsNav li.active bakgrunn: url (images / tabsNavActive.png) no-repeat center #fff;  ul # tabsNav li.active a color: # 303030;  ul # tabsNav li a padding: 1em 15px; margin: 0 0 1em 0; skjerm: blokk; bredde: 170px; tekst-dekorasjon: ingen; farge: # 7e7e7e; font: 11px / 20px Georgia; tekst-transformer: store bokstaver;  ul # tabsNav a: svever color: # 0a0a0a ul # tabContent margin: 1em 0 0; bakgrunn: url (images / tabContent.png) no-repeat øverst til høyre # fff; min høyde: 180px; bredde: 350px; flyte: venstre; listestil: none; polstring: 0 25px; font-familie: "Helvetica Neue", Arial, Helvetica, Genève, sans-serif;  #tabContent> li width: 350px; listestil: none; polstring: 0 25px 20px 0;  #tabContent li ul li listestil: none;  #tabContent li ul li a display: block; border-bottom: 1px solid # e7e7e7; polstring: 10px 0;  #tabContent li ul li a: svever bakgrunn: url (images / tabContentHover.png) no-repeat center bottom;  skjema polstring: 30px;  form input bakgrunn: url (images / searchInputBg.png) repeat-x #ddd; grense: 2px solid # cbc6c9; grense høyre: 0; polstring: 5px; margin-høyre: 0; farge: #fff; font: 16px Georgia, "Times New Roman", Times, Serif;  #searchSubmit border-left: 0; border-right: 2px solid # cbc6c9; margin-venstre: 0; stilling: relativ; igjen: -3px; farge: # 00416c;  #searchSubmit: svever bakgrunn: url (images / tabContentHover.png) no-repeat center; farge: # 003459; markør: pointer; 

  Hvis alt dette går etter planen, bør det se ganske fint ut, noe som ligner dette (med eget innhold selvfølgelig):

  

  Nå som vi har sørget for at siden ser bra ut for dem sans JavaScript, vi kan flytte på catering for de som gjør det!

  Trinn 5 - jQuery

  Min personlige favoritt del av opplæringen! jQuery tid! La oss sette inn ord hva vi trenger å skje:

  1. Skjul alle listeposter som vi ikke vil se i utgangspunktet, og viser bare vår første innholdsdel, delen WP_Query.
  2. Legg klassen 'aktiv' til den første kategorien, fordi den tilhørende delen er åpen.
  3. Når en fane klikkes, gjør du følgende i rekkefølge:
     • Fjern den aktive klassen fra den aktive kategorien
     • Legg klassen aktiv i kategorien som nettopp har blitt klikket
     • Hent href attributtet til aen i den klikket kategorien, og gjør det til vår nye variabel "mål"
     • Deretter har målet avslørt seg, og det forrige utstillingsområdet gjemmer seg med litt animasjon

  Dette kan virke som en vanskelig ting å oppnå, men takket være jQuery's skriv mindre gjør mer holdning, jeg har klart å kutte det vi trenger ned til bare 9 linjer med js kode! Dette går innenfor $ (dokument) .ready (funksjon () );, under helten og skurkskriptet.

  // Og vårt lille, animerte glidebrytende område på toppen av designen. . $ ( '# TabContent> li: gt (0)') skjule (); $ ('# tabsNav li: first'). addClass ('aktiv'); $ ('# tabsAndContent #tabsNav li'). bind ('klikk', funksjon () $ ('li.active'). removeClass ('aktiv'); $ (dette) .addClass ('aktiv'); var target = $ ('a', dette) .attr ('href'); $ (mål) .slideDown (400) .siblings (). slideUp (300); return false;);

  En grunnleggende sammenbrudd av koden vår:

  • . $ ( '# TabContent> li: gt (0)') skjule (); - Dette, som vi ønsket i vår ordversjon av skriptet, skjuler alle innholdsobjekter større enn null, med utgaver som starter ved 0.
  • $ ('# tabsNav li: first'). addClass ('aktiv'); - Vi legger til klassen 'aktiv' i den første kategorien, fordi hvis bare det første innholdsområdet vises, vil vi ikke at den andre kategorien skal være aktiv, gjør vi!?
  • $ ('# tabsAndContent #tabsNav li'). bind ('klikk', funksjon () - .Bind-funksjonen! Alt dette gjør, er når parameterhendelsen skjer (klikk i vårt tilfelle) det binder følgende funksjon til elementet. og funksjonen er:
    • $ ( 'Li.active') removeClass ( 'aktiv.'); - Ta klassen aktiv av den nåværende holderen.
    • $ (Denne) .addClass ( 'aktiv'); - legg til klassen til dette, en nyttig valg når du er innenfor en funksjon, og er spesifikk for elementet klikket.
    • var target = $ ('a', dette) .attr ('href'); - Opprett vårt variable 'mål' fra fanens barn en elementets href-attributt, en gang til å bruke dette i en velger.
    • $ (Target) .slideDown (400) .siblings () slideUp (300).; - Vår animasjon! Nå som vi har målet vårt, skyver vi det ned i fire tiendedeler av et sekund (eller 40 millisekunder), og skyver synlige søsken bort i avgrunnen på nesten en tredjedel av et sekund (30 ms).
    • returner falsk; - Dette er viktig! Du vil ikke at nettleserens historie skal ha en million tidligere koblinger rett og slett fra å klikke på faner, gjør du? Hver gang nettadressen endres til #recentArticles eller noe sånt, legger det til en annen oppføring i nettleserloggen. returner falsk; opphever dette, så ingen nettadresse endres og ingen historie er lagt til.

  Så det er alt jQuery, CSS, HTML og Wordpress vi trenger. Du bør ha noe som ligner dette:

  

  Ja det skal animere, ja den aktive knappen skal endres, og ja, du har nettopp opprettet ditt eget flippers dynamiske innhold, og implementert det i et Wordpress-tema med Wordpress-innhold!

  For å fullføre.

  Vi har gått mye i denne opplæringen. Samlet sett er det noen viktige leksjoner vi lærte:

  • WP_Query (); - Et kraftig verktøy for å få innhold utenfor hovedløkken.
  • Wordpress betingede koder - fantastisk for videre tilpassing av temaet ditt.
  • .bind funksjon - å enkelt knytte en funksjon til et bestemt element med en hendelse.
  • jQuery-animasjon - Utrolig enkelt å implementere, og like pen som en hage av roser.
  
  
  Kode