Wordpress biedt een enorme hoeveelheid informatie over uw blog en de inhoud ervan. Het tonen van veel van deze informatie kan ruimtebesparend worden. Een goed ogende oplossing hiervoor is content met tabbladen!

In deze zelfstudie nemen we de WordPress Newspaper Layout waaraan we eerder hebben gewerkt en breiden deze uit met tabbladen.

Voorwoord

Rechts! We gebruiken een mooie en krachtige combinatie van jQuery's animatie en .binden functie mooi gemengd met de veelzijdige Wordpress WP_Query () en Wordpress exclusieve voorwaardelijke tags. Als je op mij lijkt, wil je het eindproduct graag voor altijd zien:

Als je wilt doen enkel en alleen In deze zelfstudie hebt u de nieuwste versie van jQuery nodig voor deze zelfstudie. Download het hier. Anders zou het al in moeten passen bij dit thema dat ik heb voorbereid, dat je hier kunt downloaden: myTheme.

We gaan ervan uit dat je een live Wordpress-installatie hebt, ongeacht of deze lokaal of gehost is. Er zijn tutorials over het uitvoeren van Wordpress lokaal hier voor Windows en hier voor OS X. Het activeren van het thema dat ik eerder heb voorbereid - myTheme - zou een grote hulp zijn. We zullen dit uitbreiden, dus open index.php en laten we het bewerken!

Stap 1 - Nieuwe structurele HTML.

We hebben natuurlijk wat nieuwe HTML nodig. Dit is eenvoudig. We hebben alleen wat extra divs nodig om alles in te pakken waar we mee werken. Plaats deze volgende code net bovenstaande

 
 
 
iBlog - Wordpress en jQuery samen in Harmonie.
 
 

Stap 2 - Voorwaardelijke tags

We houden dus van de inhoud met tabs die we gaan maken, maar we willen deze alleen op onze eerste pagina omwille van de show! Hoe is het mogelijk om exclusieve code te hebben op de eerste pagina die u vraagt? Eenvoudig. Voorwaardelijke tags van Wordpress. Dit is een waardevolle les om te leren! De conditionele tags bieden een zeer krachtig middel om uw thema's net dat beetje meer aan te passen! Ze zijn zeer voor de hand liggend, maar ik zal een basisoverzicht geven onder de code. Voeg dit toe net onder ons gloednieuwe h1 element in index.php.

Je begrijpt wat dit is, goed? if (is_home ()) is onze toestand hier, dus als de pagina die momenteel wordt bekeken is de huis, omvat ons bestand tabbedContent.php. Welke we vervolgens zullen maken.

Stap 3 - tabbedContent.php (HTML)

Dus nu hebben we Wordpress gevraagd om op te nemen tabbedContent.php wanneer de pagina thuis is, maar we hebben nog steeds het eigenlijke bestand en de inhoud nodig! Maak een nieuw bestand in onze 'myTheme' directory en noem het tabbedContent.php. Typ of plak het volgende in dit nieuwe bestand:

 
 
recente artikelen
 
maandelijkse archieven
 
Zoeken
 
 
 
 
  
 
 
 
  
 
 
  
 
 
 

Super goed. Op dit moment is dit gewoon onbewerkte HTML zonder toevoegingen van Wordpress of jQuery. Niet veel hiervan is nieuw, maar laat me de lay-out een beetje uitleggen.

• #tabsNav - Dit zijn de aanklikbare tabbladen! We hebben een toegevoegd href kenmerk van de bijbehorende inhoud
• . Zorg ervoor dat de hrefs komen overeen met de ID-naam van hun overeenkomstige inhoudslijstitem!
• #tabContent - We gebruiken een
  niet zoals de sidebars van Wordpress, omdat het gemakkelijk te stylen is en toch in essentie een lijst met content is! Ik denk dat de inhoud van dit element voor zichzelf spreekt.

  Stap 4 - tabbedContent.php (Wordpress-functies)

  Nu dat gedaan is, ziet het er nog steeds een beetje leeg uit. Dus we moeten de <-- --> opmerkingen met echte inhoud! We beginnen met WP_Query (), wp_get_archives () en een zoekformulier.

  4.1 - WP_Query ()

  Nog een andere waardevolle les om te leren. Het is fantastisch als je dingen wilt doen zoals we doen, of een 'Featured Post'. Kortom, het is een vereenvoudigde lus overal op de pagina. Het is geweldig. Dus knip de commentaartag uit voor onze WP_Query en typ het volgende:

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

  WP_Query () is fantastisch. Ja, het is een lus. Maar niet het hele ding. Alles wat we gewoon doen, is de immanent volgende lus vertellen om ons een lijst van de 5 laatste berichten te laten zien. De string tussen de haakjes van WP_Query kan alles zijn ... filter op data, categorieën, tags, limiet, etc. Het is een fantastisch hulpmiddel om te begrijpen, en toch een ander waardevolle les om hier afstand van te nemen!

  4.2 - Archieven

  Als u een frequente WordPress-gebruiker bent, moet u weten hoe u dit moet doen. Het is een basisoproep voor een lijst met maandelijks archieven. En om het WP_Query-gedeelte te evenaren, willen we alleen 5 van hen (automatisch in aflopende volgorde). Schakel gewoon de <-- WP_ARCHIVES GOES HERE --> in tabbedContent.php met het volgende:

  4.3 - Zoeken

  We gebruiken alleen een zeer eenvoudige invoer en zoeken, met behulp van de standaardzoekopdracht die ik altijd gebruik in mijn eigen sjablonen. Vervang de WP SEARCH-opmerking hiermee:

  Geweldig, dus nu zou je een nieuw bestand moeten hebben binnen de mijn thema map met de naam tabbedContent.php en de voorwaardelijke tag in index.php. Als je alles goed hebt gevolgd, zou je thema er ongeveer zo uit moeten zien:

  

  Nog niet zo mooi ... Of wat dan ook, of jQueried of CSSed. Maar het is een begin, en goed om te weten dat onze WordPress-code werkt! We zijn klaar met tabbedContent.php, dus je kunt dat nu afsluiten!

  Stap 5 - CSS

  We hebben onze tabbladen nodig om op te vallen en deel te worden van de pagina. Op dit moment zijn het lelijke kanten. We moeten eerst de pagina maken voor mensen zonder JavaScript, voor sierlijke degredatie. Je hebt een aantal afbeeldingen nodig als je het net zo mooi wilt maken als ik. Hier is een lijst van hen (klik met de rechtermuisknop en sla op als in de map met afbeeldingen in de myTheme-map!)

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

  Typ of plak deze enorme plak CSS. Hier niets nieuws, we stemmen de tabbladen uit met de 'Berichtdetails' en brengen de inhoud op één lijn met de witte witte hoofdinhoud en gebruiken de: hover-instantie een paar keer.

  / * ------ TABS ------ * / #container width: 600px; marge: 0 auto;  h1 font-size: 1.3em; text-transform: hoofdletters; kleur: # 949494; letter-spacing: 1px;  #tabsAndContent ul, #tabsAndContent li opvulling: 0 ul # tabsNav float: left; breedte: 200 px; lijststijl: geen;  ul # tabsNav li background: url (images / tabsNavBg.png) no-repeat center # a8a8a8;  ul # tabsNav li: hover background: url (images / tabsNavHover.png) no-repeat center #eee;  ul # tabsNav *: focus 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 opvulling: 1em 15px; marge: 0 0 1em 0; weergave: blok; breedte: 170 px; tekstdecoratie: geen; kleur: # 7e7e7e; lettertype: 11px / 20px Georgia; text-transform: hoofdletters;  ul # tabsNav a: hover color: # 0a0a0a ul # tabContent margin: 1em 0 0; achtergrond: url (images / tabContent.png) no-repeat rechtsboven # fff; minimale hoogte: 180 px; breedte: 350 px; zweven: links; lijststijl: geen; opvulling: 0 25px; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;  #tabContent> li width: 350px; lijststijl: geen; opvulling: 0 25px 20px 0;  #tabContent li ul li list-style: none;  #tabContent li ul li a display: block; border-bottom: 1px solid # e7e7e7; opvulling: 10px 0;  #tabContent li ul li a: hover background: url (images / tabContentHover.png) no-repeat center bottom;  vorm opvulling: 30px;  vorminvoer background: url (images / searchInputBg.png) repeat-x #ddd; border: 2px solid # cbc6c9; grens rechts: 0; opvulling: 5px; marge-rechts: 0; kleur: #fff; lettertype: 16px Georgia, "Times New Roman", Times, serif;  #searchSubmit border-left: 0; border-right: 2px solid # cbc6c9; marge links: 0; positie: relatief; links: -3px; kleur: # 00416c;  #searchSubmit: hover background: url (images / tabContentHover.png) no-repeat center; kleur: # 003459; cursor: pointer; 

  Als dit allemaal volgens plan verloopt, zou het er best netjes uit moeten zien, iets vergelijkbaars (met je eigen inhoud natuurlijk):

  

  Nu hebben we ervoor gezorgd dat de pagina daar goed uitziet zonder JavaScript, we kunnen catering volgen voor diegenen die dat wel doen!

  Stap 5 - jQuery

  Mijn persoonlijke favoriete gedeelte van de tutorial! jQuery tijd! Laten we onder woorden brengen wat we moeten gebeuren:

  1. Verberg alle lijstitems die we in eerste instantie niet willen zien, alleen onze eerste inhoudsectie, de WP_Query-sectie.
  2. Voeg de klasse 'actief' toe aan het eerste tabblad, omdat het bijbehorende gedeelte open is.
  3. Wanneer op een tabblad wordt geklikt, doet u het volgende in de volgende volgorde:
     • Verwijder de actieve klasse van het momenteel actieve tabblad
     • Voeg de actieve klasse toe aan het tabblad waarop zojuist is geklikt
     • Pak de href attribuut van de a binnen het tabblad waarop is geklikt en is het onze nieuwe variabele 'doelwit'
     • Laat het doelwit zichzelf dan onthullen en het vorige weergavegebied verbergt zichzelf met wat animatie

  Dit lijkt misschien moeilijk, maar dankzij jQuery's Schrijf minder, doe meer houding, ik ben erin geslaagd om te snijden wat we nodig hebben tot slechts 9 regels js code! Dit gaat binnen de $ (document) .ready (function () );, onder het script van held en schurk.

  // En ons kleine geanimeerde glijgedeelte boven het ontwerp. . $ ( '# TabContent> li: gt (0)') te verbergen (); $ ('# tabsNav li: first'). addClass ('actief'); $ ('# tabsAndContent #tabsNav li'). bind ('klik', functie () $ ('li.active'). removeClass ('active'); $ (this) .addClass ('active'); var target = $ ('a', this) .attr ('href'); $ (target) .slideDown (400) .siblings (). slideUp (300); return false;);

  Een basisanalyse van onze code:

  • . $ ( '# TabContent> li: gt (0)') te verbergen (); - Dit, zoals we in onze woordversie van het script wilden, verbergt alle contentitems groter dan nul, zonder items vanaf 0.
  • $ ('# tabsNav li: first'). addClass ('actief'); - We voegen de klasse 'actief' toe aan het eerste tabblad, want als alleen het eerste inhoudsgebied wordt weergegeven, willen we niet dat het tweede tabblad actief is.!?
  • $ ('# tabsAndContent #tabsNav li'). bind ('klik', functie () - De .bind-functie! Dit alles doet, is wanneer de parametergebeurtenis gebeurt (klik in ons geval) het de volgende functie aan het element bindt. en de functie is:
    • $ ( 'Li.active') removeClass ( 'actief'.); - Neem de klas actief uit zijn huidige houder.
    • $ (This) .addClass ( 'actief'); - voeg de klas toe aan deze, een handige selector als je dat bent binnen een functie, en is specifiek voor het element waarop is geklikt.
    • var target = $ ('a', this) .attr ('href'); - Maak onze variabele 'doel' van het kind van het tabblad een href -kenmerk van element, opnieuw gebruiken deze in een selector.
    • $ (Doel) .slideDown (400) .siblings () slideUp (300).; - Onze animatie! Nu we ons doel hebben, zullen we het neerhalen in vier tienden van een seconde (of 40 milliseconden) en alle zichtbare broers en zussen wegschuiven in de afgrond in bijna een derde van een seconde (30 ms).
    • return false; - Dit is belangrijk! U wilt niet dat de browsergeschiedenis een miljoen eerdere links heeft, gewoon door op tabbladen te klikken, of wel? Elke keer dat de URL verandert in #recente artikelen of iets dergelijks, het voegt een nieuw item toe aan de browsergeschiedenis. return false; maakt dit ongeldig, dus er verandert geen URL en er wordt geen geschiedenis toegevoegd.

  Dus dat zijn alle jQuery, CSS, HTML en Wordpress die we nodig hebben. Je zou iets moeten hebben dat er zo uitziet:

  

  Ja, het zou moeten animeren, ja, de actieve knop zou moeten veranderen, en ja, je hebt zojuist je eigen dynamische inhoud met tabbladen gemaakt en geïmplementeerd in een Wordpress-thema met Wordpress-inhoud!

  Om te eindigen.

  We hebben veel meegemaakt in deze tutorial. Al met al zijn enkele belangrijke lessen die we hebben geleerd:

  • WP_Query (); - Een krachtig hulpmiddel om inhoud buiten de hoofdlus te krijgen.
  • Voorwaardelijke tags van Wordpress - fantastisch om je thema verder aan te passen.
  • .binden functie - om eenvoudig een functie te koppelen aan een specifiek element met een evenement.
  • jQuery-animatie - Ongelooflijk eenvoudig te implementeren en zo mooi als een tuin met rozen.
  
  
  Code