Wordpress ger ett stort utbud av information om din blogg och innehållet. Visar mycket av denna information kan bli rymdkrävande. En snygg lösning på detta är flikhantering!

I den här handledningen tar vi WordPress Newspaper Layout som vi arbetat med tidigare och utökar det med flikar.

Förord

Höger! Vi använder en fin och kraftfull kombination av jQuery animation och .binda funktionen blandas snyggt med Wordpress mångsidiga WP_Query () och Wordpress exklusiva villkorliga taggar. Om du är som jag gillar du att se den färdiga produkten före någonting:

Om du vill göra endast Denna handledning, du behöver den senaste versionen av jQuery för denna handledning. Ladda ner det här. Annars borde det redan vara med det här temat jag har förberett, som du kan ladda ner här: myTheme.

Vi antar att du har en live Wordpress-installation, oavsett om den är lokal eller värd. Det finns handledning om hur man kör Wordpress lokalt här för Windows, och här för OS X. Aktivera det tema som jag förberett tidigare - myTheme - skulle vara en stor hjälp till. Vi sträcker sig på detta, så öppet index.php och låt oss få redigeringen!

Steg 1 - Ny strukturell HTML.

Vi behöver naturligtvis lite ny HTML. Detta är enkelt. Vi behöver bara några extra divs för att paketera allt vi jobbar med. Placera den här följande koden bara ovan

 
 
 
iBlog - Wordpress och jQuery tillsammans i Harmoni.
 
 

Steg 2 - Villkorliga taggar

Så vi älskar Tabbed Content vi ska göra, men vi vill bara ha det på vår första sida för showens skull! Hur är det möjligt att ha exklusiv kod på den första sidan du frågar !? Enkel. Wordpress villkorliga taggar. Det här är en värdefull lektion att lära! De villkorliga taggarna ger ett mycket kraftfullt sätt att anpassa dina teman så lite mer! De är mycket självförklarande, men jag ger en grundläggande rundown under koden. Lägg till detta under vår helt nya h1 element i index.php.

Du får vad det här är, rätt? if (is_home ()) är vårt tillstånd här, så om den sida som nu bläddras är den Hem, inkludera vår tabbedContent.php-fil. Vilket vi ska skapa nästa.

Steg 3 - tabbedContent.php (HTML)

Så nu har vi bett Wordpress att inkludera tabbedContent.php när sidan är hemma, men vi behöver fortfarande den faktiska filen och innehållet! Skapa en ny fil i vår "myTheme" -katalog och namnge den tabbedContent.php. Skriv eller klistra in följande i den nya filen:

 
 
senaste artiklar
 
Månadsarkiv
 
Sök
 
 
 
 
  
 
 
 
  
 
 
  
 
 
 

Bra. För tillfället är det bara rå HTML utan några Wordpress eller jQuery-tillägg. Inte mycket av det här är nytt, men låt mig förklara layouten lite.

• #tabsNav - Dessa är de klickbara flikarna! Vi har lagt till en href attribut av deras motsvarande innehåll
• . Se till att hrefs matchar ID-namnet på deras motsvarande innehållslista!
• #tabContent - Vi använder en
  inte till skillnad från Wordpress sidfält, eftersom det är lätt att stil och är i princip en lista över innehåll ändå! Jag tycker att innehållet i detta element är självförklarande.

  Steg 4 - tabbedContent.php (Wordpress-funktioner)

  Nu är det klart, det kommer fortfarande att se lite tomt ut. Så vi behöver ersätta <-- --> kommentarer med faktiskt innehåll! Vi börjar med WP_Query (), wp_get_archives () och ett sökformulär.

  4.1 - WP_Query ()

  Ännu en värdefull lektion att lära. Det är fantastiskt om du vill göra saker som vi gör, eller en "Utmärkt post". I grund och botten är det en förenklad slinga var som helst på sidan. Det är toppen. Så klippa ut kommentarkoden för vår WP_Query och skriv följande:

   have_posts ()): $ recent-> the_post ();?> 
   "title =" Länk till "> 
   

  WP_Query () det är fantastiskt. Ja, det är en loop. Inte hela grejen men. Allt vi gör helt enkelt berättar den immanenta följande slingan för att visa oss en lista över de 5 senaste inläggen. Strängen inom parenteserna av WP_Query kan vara något ... filtrera efter datum, kategorier, taggar, gräns etc. Det är ett fantastiskt verktyg att förstå, och ändå annan värdefull lektion att ta bort från detta!

  4.2 - Arkiv

  Om du är en vanlig wordpress-människa, borde du veta hur man gör det här. Det är ett grundläggande samtal för en lista över en gång i månaden arkiv. Och för att matcha WP_Query-avsnittet vill vi bara 5 av dem (automatiskt i fallande ordning). Byt bara <-- WP_ARCHIVES GOES HERE --> i tabbedContent.php med följande:

  4.3 - Sök

  Vi använder bara en mycket enkel inmatning och sökning, med standardsökningen som jag alltid använder i mina egna mallar. Ersätt WP SEARCH-kommentaren med det här:

  Bra, så nu borde du ha en ny fil inom Mytheme katalog som heter tabbedContent.php, och den villkorliga taggen i index.php. Om du har följt allt på rätt sätt borde ditt tema se ut så här:

  

  Inte så vacker än ... Eller flikad, eller jQueried eller CSSed alls för den delen. Men det är en början, och bra att veta att vår wordpress-kod fungerar! Vi är klara med tabbedContent.php, så du kan stänga det nu!

  Steg 5 - CSS

  Vi behöver våra flikar att blanda in, bli en del av sidan. För tillfället är de fula sidor. Vi måste göra sidan för personer utan JavaScript aktiverad först, för graciös degradering. Du behöver lite bilder om du vill göra det så vackert lika mycket som jag gör. Här är en lista över dem (högerklicka och spara som i bildmappen i myTheme-katalogen!)

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

  Ange antingen, eller klistra in den här massiva plattan av CSS. Inget nytt här justerar vi flikarna upp med "Postdetaljer" och justerar innehållet med vitvit kolumn för huvudinnehåll och använder: svängningsinstansen några gånger.

  / * ------ TABS ------ * / #container width: 600px; marginal: 0 auto;  h1 font-size: 1.3em; text-transform: stor bokstav; färg: # 949494; brevavstånd: 1px;  #tabsAndContent ul, #tabsAndContent li padding: 0 ul # tabsNav float: left; bredd: 200px; listestil: none;  ul # tabsNav li background: url (images / tabsNavBg.png) no-repeat center # a8a8a8;  ul # tabsNav li: svep bakgrund: url (images / tabsNavHover.png) no-repeat center #eee;  ul # tabsNav *: fokus outline: none ul # tabsNav li.active background: url (images / tabsNavActive.png) no-repeat center #fff;  ul # tabsNav li.active a color: # 303030;  ul # tabsNav li a padding: 1em 15px; marginal: 0 0 1em 0; display: block; bredd: 170px; text-dekoration: ingen; färg: # 7e7e7e; typsnitt: 11px / 20px Georgia; text-transform: stor bokstav;  ul # tabsNav a: hover color: # 0a0a0a ul # tabContent margin: 1em 0 0; bakgrund: url (images / tabContent.png) no-repeat högra höger # fff; minhöjd: 180px; bredd: 350px; flyta till vänster; listestil: none; vaddering: 0 25px; font-family: "Helvetica Neue", Arial, Helvetica, Genève, sans-serif;  #tabContent> li width: 350px; listestil: none; vaddering: 0 25px 20px 0;  #tabContent li ul li listestil: none;  #tabContent li ul li a display: block; border-bottom: 1px solid # e7e7e7; vaddering: 10px 0;  #tabContent li ul li a: sväva bakgrund: url (images / tabContentHover.png) no-repeat center bottom;  formulär vaddering: 30px;  form input background: url (images / searchInputBg.png) repeat-x #ddd; gränsen: 2px solid # cbc6c9; gräns-höger: 0; vaddering: 5px; marginal-höger: 0; färg: #fff; typsnitt: 16px Georgia, "Times New Roman", Times, Serif;  #searchSubmit border-left: 0; gräns-höger: 2px solid # cbc6c9; marginal-vänster: 0; position: relativ; vänster: -3px; färg: # 00416c;  #searchSubmit: sväva background: url (images / tabContentHover.png) no-repeat center; färg: # 003459; markör: pekare; 

  Om allt går enligt planen, ska det se ganska trevligt ut, något som liknar detta (med eget innehåll självklart):

  

  Nu när vi har kontrollerat att sidan ser bra ut för dem sans JavaScript, vi kan flytta till catering för dem som gör det!

  Steg 5 - jQuery

  Min personliga favoritavdelning av handledningen! jQuery tid! Låt oss uttrycka vad vi behöver hända:

  1. Dölj alla listobjekt som vi inte vill se först och visar bara vår första innehållssektion, avsnittet WP_Query.
  2. Lägg till klassen "aktiv" på den första fliken, eftersom den motsvarande sektionen är öppen.
  3. När en flik är klickad gör du följande i följande ordning:
     • Ta bort den aktiva klassen från den aktuella aktiva fliken
     • Lägg till klassen aktiv i fliken som just har blivit klickad
     • Få den href attributet för a-enheten inom den klickade fliken och gör den till vår nya variabel "mål"
     • Då har målet avslöja sig, och det föregående visningsområdet gömmer sig med lite animering

  Det kan tyckas som en svår sak att uppnå, men tack vare jQuery skriv mindre gör mer attityd, jag har lyckats skära vad vi behöver ner till endast 9 rader av js kod! Detta går inom $ (dokument) .ready (funktion () );, under hjälte och skurk script.

  // Och vårt lilla animerade glidområde upptill av designen. . $ ( '# TabContent> li: gt (0)) dölja (); $ ('# tabsNav li: first'). addClass ('aktiv'); $ ('# tabsAndContent #tabsNav li'). bind ('klicka', funktion () $ ('li.active'). removeClass ('aktiv'); $ (detta) .addClass ('aktiv'); var target = $ ('a', detta) .attr ('href'); $ (mål) .slideDown (400) .siblings (). slideUp (300); return false;);

  En grundläggande uppdelning av vår kod:

  • . $ ( '# TabContent> li: gt (0)) dölja (); - Detta, som vi ville ha i vår ordversion av manuset, döljer alla innehållsobjekt större än noll, med ut objekt som börjar vid 0.
  • $ ('# tabsNav li: first'). addClass ('aktiv'); - Vi lägger till klassen "aktiv" på den första fliken, för om endast det första innehållsområdet visas, vill vi inte att den andra fliken är aktiv gör vi!?
  • $ ('# tabsAndContent #tabsNav li'). bind ('klick', funktion () - Funktionen .bind! Allt detta gör när parametern händer (klicka i vårt fall) det binder följande funktion till elementet. och funktionen är:
    • $ ( 'Li.active') removeClass ( 'aktiva').; - Ta klassen aktiv från den aktuella hållaren.
    • $ (This) .addClass ( 'aktiv'); - lägg till klassen till detta, en användbar väljare när du är inom en funktion, och är specifik för elementet som klickas.
    • var target = $ ('a', detta) .attr ('href'); - Skapa vårt variabla "mål" från flikens barn en elementets href-attribut, återigen använda detta i en väljare.
    • $ (Mål) .slideDown (400) .siblings () slideUp (300).; - Vår animation! Nu när vi har vårt mål kommer vi att glida ner den i fyra tiondelar av en sekund (eller 40 millisekunder) och skjuta några synliga syskon bort i avgrunden på nästan en tredjedel av en sekund (30 ms).
    • returnera false; - Det här är viktigt! Du vill inte att webbläsarens historia ska ha en miljon tidigare länkar helt enkelt från att klicka på flikar, eller hur? Varje gång webbadressen ändras till #senaste artiklar eller något sådant lägger det till en annan post i webbläsarens historia. returnera false; upphäver detta, så ingen URL ändras och ingen historia läggs till.

  Så det är alla jQuery, CSS, HTML och Wordpress vi behöver. Du borde ha något som liknar detta:

  

  Ja det borde animera, ja den aktiva knappen borde förändras, och ja, du har just skapat ditt eget flikar dynamiskt innehåll och implementerat det i ett Wordpress-tema med Wordpress-innehåll!

  För att avsluta.

  Vi har gått mycket i den här handledningen. Sammantaget är några viktiga lektioner vi lärde oss:

  • WP_Query (); - Ett kraftfullt verktyg för att få innehåll utanför huvudslingan.
  • Wordpress villkorliga taggar - fantastiskt för att ytterligare anpassa ditt tema.
  • .bindningsfunktion - att enkelt länka en funktion till ett specifikt element med en händelse.
  • jQuery-animering - Otroligt lätt att genomföra, och lika vacker som en trädgård av rosor.
  
  
  Koda