Wordpress bietet eine Vielzahl von Informationen zu Ihrem Blog und dessen Inhalt. Das Anzeigen vieler dieser Informationen kann viel Platz beanspruchen. Eine großartig aussehende Lösung dafür ist Tabbed-Inhalt!

In diesem Tutorial nehmen wir das WordPress Newspaper Layout, an dem wir zuvor gearbeitet haben, und erweitert es mit Registerkarten.

Vorwort

Recht! Wir verwenden eine schöne und leistungsstarke Kombination aus jQuery's Animation und .binden Funktion gut mit Wordpress vielseitig kombiniert WP_Query () und Wordpress exklusive Bedingungs-Tags. Wenn Sie wie ich sind, möchten Sie das fertige Produkt vor allem sehen:

Wenn du das willst nur In diesem Tutorial benötigen Sie die neueste Version von jQuery für dieses Tutorial. Hier herunterladen. Ansonsten sollte es schon mit diesem von mir vorbereiteten Thema sein, das Sie hier herunterladen können: myTheme.

Wir gehen davon aus, dass Sie eine Live-Installation von Wordpress haben, unabhängig davon, ob diese lokal oder gehostet ist. Es gibt Tutorials zum lokalen Ausführen von Wordpress für Windows und hier für OS X. Die Aktivierung des zuvor erstellten Themas - myTheme - wäre eine große Hilfe. Wir werden dies erweitern, also öffnen Sie index.php und lassen Sie uns die Bearbeitung vornehmen!

Schritt 1 - Neues strukturelles HTML.

Natürlich brauchen wir etwas neues HTML. Das ist ganz einfach. Wir brauchen nur ein paar zusätzliche Divs, um alles zu packen, mit dem wir arbeiten. Fügen Sie den folgenden Code ein gerade über

 
 
 
iBlog - Wordpress und jQuery zusammen in Harmonie.
 
 

Schritt 2 - Bedingte Tags

Wir lieben den Tabbed-Inhalt, den wir gerade erstellen wollen, aber wir wollen ihn nur auf unserer ersten Seite der Show zuliebe! Wie ist es möglich, auf der ersten von Ihnen gewünschten Seite exklusiven Code zu haben? Einfach. Bedingte Tags von Wordpress. Dies ist eine wertvolle Lektion! Die bedingten Tags bieten eine sehr mächtige Möglichkeit, Ihre Motive noch ein bisschen mehr anzupassen. Sie sind sehr selbsterklärend, aber ich werde einen grundlegenden Überblick über den Code geben. Fügen Sie dies nur unter unserer neuen Marke hinzu h1 Element in index.php.

Sie bekommen, was das ist, richtig? if (is_home ()) ist unser Zustand hier so ob Die aktuell durchsuchte Seite ist die Zuhause, Fügen Sie unsere tabbedContent.php-Datei ein. Was werden wir als nächstes schaffen.

Schritt 3 - tabbedContent.php (HTML)

Nun haben wir Wordpress gefragt, ob es mit einbezogen werden soll tabbedContent.php Wenn die Seite zu Hause ist, benötigen wir jedoch immer noch die eigentliche Datei und den Inhalt! Erstellen Sie eine neue Datei in unserem Verzeichnis 'myTheme' und nennen Sie sie tabbedContent.php. Geben Sie Folgendes in die neue Datei ein:

 
 
Aktuelle Artikel
 
Monatliche Archive
 
Suche
 
 
 
 
  
 
 
 
  
 
 
  
 
 
 

Großartig. Im Moment ist dies nur reines HTML ohne Zusätze von Wordpress oder jQuery. Nicht viel davon ist neu, aber lassen Sie mich das Layout etwas erklären.

• #tabsNav - Dies sind die anklickbaren Registerkarten! Wir haben ein hinzugefügt href Attribut ihres entsprechenden Inhalts
• . Sicherstellen, dass hrefs stimmen mit dem ID-Namen des entsprechenden Inhaltslistenelements überein!
• #tabContent - Wir benutzen ein
  nicht anders als die Seitenleisten von Wordpress, weil es einfach zu gestalten ist und im Wesentlichen eine Inhaltsliste ist! Ich denke, der Inhalt dieses Elements ist selbsterklärend.

  Schritt 4 - tabbedContent.php (Wordpress-Funktionen)

  Jetzt ist es fertig, es sieht immer noch leer aus. Also müssen wir das ersetzen <-- --> Kommentare mit aktuellem Inhalt! Wir beginnen mit WP_Query (), wp_get_archives () und einem Suchformular.

  4.1 - WP_Query ()

  Noch eine wertvolle Lektion zu lernen. Es ist fantastisch, wenn Sie Dinge tun möchten, die wir tun, oder einen "Beitrag". Im Grunde ist es eine vereinfachte Schleife überall auf der Seite. Es ist toll. Schneiden Sie das Kommentar-Tag für WP_Query aus und geben Sie Folgendes ein:

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

  WP_Query () ist fantastisch. Ja, es ist eine Schleife. Nicht die ganze Sache. Alles, was wir tun, ist, die immanent folgende Schleife mitzuteilen, um uns eine Liste der 5 neuesten Beiträge zu zeigen. Die Zeichenfolge in den Klammern von WP_Query kann alles sein… filtern nach Datum, Kategorien, Tags, Begrenzung usw. Es ist ein fantastisches Werkzeug, das zu verstehen ist, und doch Ein weiterer wertvolle Lektion davon zu nehmen!

  4.2 - Archiv

  Wenn Sie häufig mit WordPress arbeiten, sollten Sie wissen, wie das geht. Es ist ein Grundaufruf für eine Liste von monatlich Archiv. Und um mit dem WP_Query-Abschnitt übereinzustimmen, möchten wir nur 5 von ihnen (automatisch in absteigender Reihenfolge). Einfach umschalten <-- WP_ARCHIVES GOES HERE --> im tabbedContent.php mit den folgenden:

  4.3 - Suche

  Wir verwenden nur eine sehr einfache Eingabe und Suche, wobei wir die Standardsuche verwenden, die ich immer in meinen eigenen Vorlagen verwende. Ersetzen Sie den WP SEARCH-Kommentar durch Folgendes:

  Toll, also sollten Sie jetzt eine neue Datei in der mein Thema Verzeichnis namens tabbedContent.php und das bedingte Tag in index.php. Wenn Sie alles richtig befolgt haben, sollte Ihr Design ungefähr so ​​aussehen:

  

  Noch nicht so hübsch… Oder tabbed, jQueried oder CSSed überhaupt. Aber es ist ein Anfang und gut zu wissen, dass unser WordPress-Code funktioniert! Wir sind fertig mit tabbedContent.php, so kannst du das jetzt schließen!

  Schritt 5 - CSS

  Wir brauchen unsere Registerkarten, um Teil der Seite zu werden. Im Moment sind sie hässliche Seiten. Wir müssen die Seite für Benutzer ohne aktiviertes JavaScript erstellen, um die Degredation zu optimieren. Sie benötigen einige Bilder, wenn Sie es genauso schön machen wollen wie ich. Hier ist eine Liste von ihnen (Rechtsklick und speichern unter in den Bilderordner im myTheme-Verzeichnis!)

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

  Geben Sie entweder diese massive CSS-Platte ein oder fügen Sie sie ein. Nichts Neues hier. Wir richten nur die Registerkarten an den Post-Details aus, richten den Inhalt an der weißen Hauptspalte aus und verwenden die: hover-Instanz einige Male.

  / * ------ TABS ------ * / #container width: 600px; Marge: 0 auto;  h1 font-size: 1.3em; Text-Transformation: Großbuchstaben; Farbe: # 949494; Buchstabenabstand: 1px;  #tabsAndContent ul, #tabsAndContent li padding: 0 ul # tabsNav float: left; Breite: 200px; Listenstil: keine;  ul # tabsNav li hintergrund: url (images / tabsNavBg.png) no-repeat center # a8a8a8;  ul # tabsNav li: hover hintergrund: url (images / tabsNavHover.png) no-repeat center #eee;  ul # tabsNav *: focus Gliederung: keine 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; Marge: 0 0 1em 0; Bildschirmsperre; Breite: 170px; Textdekoration: keine; Farbe: # 7e7e7e; Schriftart: 11px / 20px Georgia; Text-Transformation: Großbuchstaben;  ul # tabsNav a: hover color: # 0a0a0a ul # tabContent margin: 1em 0 0; Hintergrund: URL (images / tabContent.png) no-repeat oben rechts # fff; min-Höhe: 180px; Breite: 350px; Schwimmer: links; Listenstil: keine; Polsterung: 0 25px; Schriftfamilie: "Helvetica Neue", Arial, Helvetica, Genf, serifenlos;  #tabContent> li width: 350px; Listenstil: keine; Polsterung: 0 25px 20px 0;  #tabContent li ul li list-style: none;  #tabContent li ul li a display: block; Rahmen unten: 1px fest # e7e7e7; Polsterung: 10px 0;  #tabContent li ul li a: hover hintergrund: url (images / tabContentHover.png) no-repeat center bottom;  form padding: 30px;  Formulareingabe Hintergrund: URL (images / searchInputBg.png) repeat-x #ddd; Rahmen: 2px fest # cbc6c9; rechtsbündig: 0; Polsterung: 5px; Rand rechts: 0; Farbe: #fff; Schrift: 16px Georgia, "Times New Roman", Times, Serife;  #searchSubmit border-left: 0; Rahmen rechts: 2px fest # cbc6c9; Rand links: 0; Position: relativ; links: -3px; Farbe: # 00416c;  #searchSubmit: hover Hintergrund: URL (images / tabContentHover.png) no-repeat center; Farbe: # 003459; Cursor: Zeiger; 

  Wenn dies alles nach Plan verläuft, sollte es ziemlich schön aussehen, ähnlich wie hier (mit Ihrem eigenen Inhalt natürlich):

  

  Jetzt haben wir dafür gesorgt, dass die Seite für diese Seiten in Ordnung ist ohne JavaScript, wir können auf das Catering für diejenigen, die es tun, umziehen!

  Schritt 5 - jQuery

  Mein persönlicher Lieblingsteil des Tutorials! jQuery Zeit! Lassen Sie uns in Worte fassen, was wir tun müssen:

  1. Blenden Sie alle Listenelemente aus, die anfangs nicht angezeigt werden sollen, und zeigen nur unseren ersten Inhaltsabschnitt, den WP_Query-Abschnitt.
  2. Fügen Sie der ersten Registerkarte die Klasse "active" hinzu, da der entsprechende Abschnitt geöffnet ist.
  3. Wenn Sie auf eine Registerkarte klicken, führen Sie die folgenden Schritte in der angegebenen Reihenfolge aus:
     • Entfernen Sie die aktive Klasse aus der aktuell aktiven Registerkarte
     • Fügen Sie die aktive Klasse der gerade angeklickten Registerkarte hinzu
     • Bekommen das href Attribut von a innerhalb des angeklickten Registers, und machen Sie es zu unserer neuen Variablen "target"
     • Dann lassen Sie sich das Ziel anzeigen und der vorherige Anzeigebereich wird mit einer Animation verdeckt

  Dies mag schwer zu erreichen sein, aber dank jQuery's Schreib 'weniger, TU mehr Ich habe es geschafft, das, was wir brauchen, auf nur 9 Zeilen Code zu reduzieren. Das geht innerhalb der $ (document) .ready (function () );, unter dem Helden- und Bösewicht-Skript.

  // Und unsere kleine animierte Schiebefläche oben auf dem Design. $ ('# tabContent> li: gt (0)'). hide (); $ ('# tabsNav li: first'). addClass ('active'); $ ('# tabsAndContent #tabsNav li'). bind ('click', function () $ ('li.active'). removeClass ('active'); $ (this) .addClass ('active'); var target = $ ('a', this) .attr ('href'); $ (target) .slideDown (400) .siblings (). slideUp (300); return false;);

  Eine grundlegende Aufschlüsselung unseres Codes:

  • $ ('# tabContent> li: gt (0)'). hide (); - Dies, wie wir es in unserer Wortversion des Skripts wollten, verbirgt alle Inhaltselemente größer als null, ohne Artikel beginnend bei 0.
  • $ ('# tabsNav li: first'). addClass ('active'); - Wir fügen der ersten Registerkarte die Klasse "active" hinzu. Wenn nur der erste Inhaltsbereich angezeigt wird, möchten wir nicht, dass die zweite Registerkarte aktiv ist!?
  • $ ('# tabsAndContent #tabsNav li'). bind ('click', function () - Die .bind-Funktion! Wenn das Parameterereignis auftritt (klicken Sie in unserem Fall), bindet es die folgende Funktion an das Element. und die Funktion ist:
    • $ ('li.active'). removeClass ('active'); - Nehmen Sie die aktive Klasse vom aktuellen Inhaber.
    • $ (this) .addClass ('active'); - füge die Klasse hinzu diese, eine nützliche Auswahl, wenn Sie sind innerhalb eine Funktion und ist spezifisch für das angeklickte Element.
    • var target = $ ('a', this) .attr ('href'); - Erstellen Sie unsere Variable "Ziel" aus dem Kind der Registerkarte ein href-Attribut des Elements, erneut mit diese in einem Selektor.
    • $ (Ziel) .slideDown (400) .siblings (). slideUp (300); - Unsere Animation! Jetzt, da wir unser Ziel haben, schieben wir es in vier Zehntelsekunden (oder 40 Millisekunden) nach unten und schieben alle sichtbaren Geschwister in fast einer Drittelsekunde (30 ms) in den Abgrund..
    • falsch zurückgeben; - Das ist wichtig! Sie möchten nicht, dass der Browserverlauf eine Million bisheriger Links enthält, indem Sie einfach auf die Registerkarten klicken, oder? Jedes Mal, wenn sich die URL ändert #Aktuelle Artikel oder so ähnlich, fügt es einen weiteren Eintrag zum Browserverlauf hinzu. falsch zurückgeben; annulliert dies, so dass sich keine URL ändert und kein Verlauf hinzugefügt wird.

  Das sind also alles, was wir für jQuery, CSS, HTML und Wordpress brauchen. Sie sollten etwas ähnliches haben:

  

  Ja, es sollte animiert werden, ja, die aktive Schaltfläche sollte geändert werden, und ja, Sie haben gerade Ihren eigenen dynamischen Inhalt mit Registern erstellt und in ein Wordpress-Design mit Wordpress-Inhalt implementiert!

  Um fertig zu sein.

  Wir haben in diesem Tutorial viel durchgemacht. Insgesamt haben wir einige wichtige Lektionen gelernt:

  • WP_Query (); - Ein leistungsfähiges Werkzeug, um Inhalte außerhalb der Hauptschleife zu erhalten.
  • Bedingte Tags in Wordpress - fantastisch für die weitere Anpassung Ihres Designs.
  • .Bindefunktion - Eine Funktion kann leicht mit einem Ereignis mit einem bestimmten Element verknüpft werden.
  • jQuery-Animation - Unglaublich einfach zu implementieren und so hübsch wie ein Rosengarten.
  
  
  Code