Wordpress oferă o gamă imensă de informații despre blogul dvs. și este conținut. Afișarea o mulțime de informații pot deveni consumatoare de spațiu. O soluție extraordinară pentru acest lucru este conținutul cu file!

În acest tutorial, vom lua WordPress Layout de ziar pe care am lucrat anterior și l-am extins cu file.

Prefaţă

Dreapta! Vom folosi o combinație frumoasă și puternică de animație și jQuery .lega funcționează bine cu versatilitatea lui Wordpress WP_Query () și tag-uri exclusive Wordpress exclusive. Dacă sunteți ca mine, vă place să vedeți produsul finit înainte de orice:

Dacă vrei să faci numai acest tutorial, veți avea nevoie de cea mai recentă versiune a jQuery pentru acest tutorial. Descărcați-l aici. În caz contrar, ar trebui să fie deja în această temă pe care am pregătit-o, pe care o puteți descărca aici: myTheme.

Presupunem că aveți o instalare live Wordpress, fie ea locală sau găzduită. Există tutoriale despre rularea Wordpress local aici pentru Windows, și aici pentru OS X. Activarea temei pe care am pregătit-o anterior - myTheme - ar fi un mare ajutor. Vom extinde acest lucru, așa că deschideți index.php și hai să editați!

Pasul 1 - HTML structural nou.

Avem nevoie de un nou HTML, evident. Acest lucru este simplu. Avem nevoie doar de câteva divizări suplimentare pentru a înfășura tot ceea ce lucrăm. Plasați următorul cod doar de mai sus

 
 
 
iBlog - Wordpress și jQuery împreună în Armonie.
 
 

Pasul 2 - Etichete condiționate

Deci, ne place Conținutul de Tabbed pe care suntem pe cale să îl facem, dar îl dorim doar pe prima pagină pentru dragul nostru! Cum este posibil sa ai cod exclusiv pe prima pagina pe care o pui !? Simplu. Tag-urile condiționate de Wordpress. Aceasta este o lecție valoroasă de învățat! Etichetele condiționate oferă un mijloc foarte puternic de a personaliza temele pe care le faceți puțin mai mult! Ele sunt foarte explicative, dar voi da o descriere de bază sub cod. Adăugați acest lucru doar sub brandul nostru nou h1 element în index.php.

Ai ce este asta, bine? if (is_home ()) este condiția noastră aici, deci dacă pagina în curs de navigare este Acasă, include fișierul tabbedContent.php. Pe care o vom crea în continuare.

Pasul 3 - tabbedContent.php (HTML)

Deci, acum am cerut Wordpress să includă tabbedContent.php când pagina este acasă, dar avem încă nevoie de fișierul real și de conținut! Creați un fișier nou în directorul nostru "myTheme" și numiți-l tabbedContent.php. Introduceți sau lipiți următoarele în acest fișier nou:

 
 
Articole recente
 
arhive lunare
 
Căutare
 
 
 
 
  
 
 
 
  
 
 
  
 
 
 

Grozav. În acest moment, acesta este doar HTML brut fără nici o adăugare Wordpress sau jQuery. Nu este o mare parte din acest lucru nou, dar permiteți-mi să explic puțin aspectul.

• #tabsNav - Acestea sunt filele pe care se poate da clic! Am adăugat o href atributul conținutului lor corespunzător
• . Asigurați-vă că hrefs potrivesc numele de identificare al elementului corespunzător al listei de conținut!
• #tabContent - Noi folosim a
  nu spre deosebire de barele laterale ale lui Wordpress, pentru că este ușor de stil și este, în esență, o listă de conținut oricum! Cred că conținutul acestui element este explicativ.

  Pasul 4 - tabbedContent.php (funcții Wordpress)

  Acum că sa terminat, va rămâne cam gol. Așa că trebuie să înlocuim <-- --> comentariile cu conținut real! Vom începe cu WP_Query (), wp_get_archives () și un formular de căutare.

  4.1 - WP_Query ()

  Încă o lecție valoroasă de învățat. Este fantastic dacă vrei să faci lucruri pe care le facem, sau un "Mesaj recomandat". Practic, este o bucla simplificată oriunde pe pagină. E minunat. Deci, eliminați eticheta comentariu pentru WP_Query și tastați următoarele:

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

  WP_Query () e fantastic. Da, este o buclă. Nu totul, totuși. Tot ceea ce facem pur și simplu, ne spune bucla imanentă care urmează să ne arate o listă cu ultimele 5 postări. Șirul din parantezele din WP_Query poate fi orice ... filtru după date, categorii, etichete, limită etc. Este un instrument fantastic de înțeles și totuși o alta o lecție valoroasă de luat de la asta!

  4.2 - Arhive

  Dacă sunteți o persoană frecventă de cuvinte, ar trebui să știți cum să faceți acest lucru. Este un apel de bază pentru o listă de lunar arhive. Și pentru a se potrivi cu secțiunea WP_Query, dorim doar 5 dintre acestea (automat în ordine descrescătoare). Pur și simplu comutați <-- WP_ARCHIVES GOES HERE --> în tabbedContent.php cu urmatoarele:

  4.3 - Căutare

  Vom folosi doar o intrare și o căutare foarte simplă, folosind căutarea implicită pe care o folosesc întotdeauna în propriile șabloane. Înlocuiți comentariul WP SEARCH cu acest lucru:

  Mare, deci acum ar trebui să aveți un nou dosar în cadrul myTheme director numit tabbedContent.php, și eticheta condiționată din index.php. Dacă ați urmat totul corect, tema dvs. ar trebui să arate astfel:

  

  Nu este atât de drăguță încă ... Sau tabelă, sau jQueried sau CSSed deloc pentru asta. Dar este un început și este bine de știut că codul nostru wordpress funcționează! Am terminat tabbedContent.php, astfel încât să puteți închide acest lucru acum!

  Pasul 5 - CSS

  Avem nevoie ca filele noastre să se integreze, să devină parte a paginii. În prezent, ele sunt părți urâte. Trebuie să facem prima pagină pentru persoanele fără JavaScript activat, pentru o degredare grațioasă. Veți avea nevoie de niște imagini dacă doriți să faceți cât de drăguț ca mine. Iată o listă a acestora (faceți clic dreapta și salvați-o în folderul de imagini din directorul myTheme!)

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

  Fie de tip, fie lipiți această placă masivă de CSS. Nimic nou aici, doar aliniem filele cu "Detalii postare" și aliniem conținutul cu coloana albă de conținut principal și folosim de câteva ori instanța hover.

  / * ------ TABS ------ * / #container width: 600px; marja: 0 auto;  h1 font-size: 1.3; text-transform: majuscule; culoare: # 949494; spațierea literelor: 1px;  #tabsAndContent ul, #tabsAndContent li umplutură: 0 ul # tabsNav float: left; lățime: 200px; listă: nu există;  ul # tabsNav li fundal: url (images / tabsNavBg.png) centrul nu se repetă # a8a8a8;  ul # tabsNav li: hover (fundal: url (images / tabsNavHover.png) no-repeat center #eee;  ul # tabsNav *: focalizare outline: none ul # tabsNav li.active fundal: url (images / tabsNavActive.png) no-repeat center #fff;  ul # tabsNav li.activ a culoare: # 303030;  ul # tabsNav li a umplutura: 1em 15px; marja: 0 0 1em 0; afișare: bloc; lățime: 170px; text-decoration: nici unul; culoare: # 7e7e7e; font: 11px / 20px Georgia; text-transform: majuscule;  ul # tabsNavă: hover culoare: # 0a0a0a ul # tabContent marja: 1em 0 0; fundal: url (imagini / tabContent.png) no-repeat dreapta sus # fff; min-înălțime: 180px; lățime: 350px; plutește la stânga; listă: nu există; padding: 0 25px; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;  #tabContent> li lățime: 350px; listă: nu există; umplutura: 0 25px 20px 0;  #tabContent li ul li stil: none;  #tabContent li ul li a afișare: bloc; frontieră-fund: 1px solid # e7e7e7; padding: 10px 0;  #tabContent li ul a: hover (fundal: url (images / tabContentHover.png) bottom-center central;  forma padding: 30px;  formularul de intrare background: url (images / searchInputBg.png) repeat-x #ddd; frontieră: 2px solid # cbc6c9; frontieră-dreapta: 0; padding: 5px; margin-dreapta: 0; culoare: #fff; font: 16px Georgia, "Times New Roman", Times, serif;  # searchSubmit border-left: 0; frontieră-dreapta: 2px solid # cbc6c9; margin-stânga: 0; poziție: relativă; stânga: -3px; culoare: # 00416c;  #searchSubmit: hover background: url (images / tabContentHover.png) centru de repetare; culoare: # 003459; cursor: pointer; 

  Dacă totul merge conform planului, ar trebui să arate destul de frumos, ceva asemănător cu acesta (cu propriul dvs. conținut desigur):

  

  Acum, că ne-am asigurat că pagina pare a fi OK pentru aceștia sans JavaScript, putem trece la catering pentru cei care fac!

  Pasul 5 - jQuery

  Secțiunea mea personală preferată a tutorialului! jQuery timp! Să punem în cuvinte ceea ce trebuie să se întâmple:

  1. Ascundeți toate elementele din listă pe care nu dorim să le vedeți inițial, afișând numai prima noastră secțiune de conținut, secțiunea WP_Query.
  2. Adăugați clasa "activă" în prima filă, deoarece secțiunea corespunzătoare este deschisă.
  3. Când faceți clic pe o filă, procedați în felul următor:
     • Eliminați clasa activă din fila activă în prezent
     • Adăugați clasa activă în fila care tocmai a făcut clic
     • Obține href atributul lui a în cadrul filei click și facem ca noua noastră variabilă "target"
     • Apoi, obiectivul se dezvăluie, iar zona anterioară de afișare se ascunde cu o animație

  Acest lucru poate părea un lucru greu de realizat, dar datorită lui jQuery scrie mai puțin face mai mult atitudine, am reușit să taie ceea ce avem nevoie până la doar 9 linii de cod JS! Acest lucru se încadrează în $ (document) .ready (funcția () );, sub eroul eroului și scenariului de ticăloșie.

  // Și zona de culisare animată deasupra designului. . $ ( '# TabContent> li: gt (0)') ascunde (); $ ('# tabsNav li: primul') addClass ('activ'); $ (this) .addClass ("activ"); var ($) (' target = $ ('a', aceasta) .attr ('href'); $ (target) .slideDown (400) .siblings () slideUp (300);

  O defalcare de bază a codului nostru:

  • . $ ( '# TabContent> li: gt (0)') ascunde (); - Aceasta, așa cum ne-am dorit în versiunea noastră de cuvânt a scriptului, ascunde toate elementele de conținut mai mare de zero, cu obiecte aflate la început de la 0.
  • $ ('# tabsNav li: primul') addClass ('activ'); - Adăugăm clasa "activă" în prima filă, deoarece, dacă se afișează numai prima zonă de conținut, nu dorim ca al doilea fișier să fie activ.!?
  • $ ('# tabsAndContent #tabsNav li') bind ('clic', functie () - Funcția .bind! Toate acestea se întâmplă atunci când evenimentul de parametru se întâmplă (faceți clic în cazul nostru) leagă următoarea funcție la element. iar funcția este:
    • $ ( 'Li.active') removeClass ( 'activ'.); - Scoateți clasa activă de pe suportul curent.
    • $ (Aceasta) .addClass ( 'activ'); - adăugați clasa la acest, un selector util când ești în o funcție și este specifică elementului pe care faceți clic.
    • var țintă = $ ('a', acest) .attr ('href'); - Creați variabila "țintă" de pe fila copilului A elementul atribut href, din nou, folosind acest într-un selector.
    • $ (Țintă) .slideDown (400) .siblings () slideUp (300).; - Animația noastră! Acum, când avem ținta, o să o alunecăm în patru zecimi de secundă (sau 40 de milisecunde) și să alunecăm pe toți frații vizibili în abis în aproape o treime dintr-o secundă (30 ms).
    • return false; - Asta e important! Nu doriți ca istoricul browserelor să aibă un milion de linkuri anterioare, pur și simplu făcând clic pe file, nu? De fiecare dată când adresa URL se modifică #Articole recente sau ceva de genul acesta, adaugă o altă intrare în istoricul browserului. return false; anulează acest lucru, deci nu se modifică nici un URL și nu se adaugă nici un istoric.

  Deci, asta e tot jQuery, CSS, HTML și Wordpress de care avem nevoie. Ar trebui să aveți ceva asemănător cu acesta:

  

  Da, ar trebui să animați, da butonul activ ar trebui să se schimbe și da, tocmai v-ați creat propriul conținut dinamic din tabel și l-ați implementat într-o temă Wordpress cu conținut Wordpress!

  Pentru a termina.

  Am parcurs o mulțime în acest tutorial. În general, câteva lecții importante pe care le-am învățat sunt:

  • WP_Query (); - Un instrument puternic pentru a obține conținut în afara bucla principală.
  • Wordpress etichete condiționale - fantastic pentru personalizarea în continuare a temei.
  • .funcție de legare - pentru a conecta ușor o funcție la un element specific cu un eveniment.
  • jQuery animație - Incredibil de ușor de pus în aplicare, și la fel de frumos ca o grădină de trandafiri.
  
  
  Cod