După cum știm cu toții, WordPress este atât de extinsă încât o puteți folosi pentru aproape orice. Există chiar articole pe site-uri cu titluri nebunești, cum ar fi 101 utilizări alternative pentru WordPress. Deci m-am gândit, hei, de ce nu? Pun pariu că o mulțime de oameni doresc să-și creeze propriile aplicații Web și, în esență, WordPress poate face asta pentru tine. În acest tutorial video, vom face o agenda online.

* Nota editorului: Avem un tratament special pentru dvs. astăzi. Acest tutorial a fost inițial destinat să facă parte din programul nostru NETTUTS +. Cu toate acestea, programul a durat mult mai mult decât am anticipat inițial. Nu vă faceți griji, încă vine! Până atunci, bucurați-vă de asta!

Acest tutorial a fost o întreprindere masivă pentru Harley. Așadar, vă rog, dacă nu vă supărați, faceți o clipă de digg! Mulțumesc!

Citiți interviul cu Harley!

Prefaţă

Această carte de adrese va avea lucrările. Ajax de încărcare, chestii de admin condiționate, shiz. Acest lucru, din nefericire, înseamnă că trebuie să îndeplinim câteva cerințe, câteva lucruri pe care tema le are nevoie. O copie a jQuery pentru a începe cu ar fi la îndemână. În plus, tema necesită câteva imagini! Descărcați acest zip, pe care îl veți extinde ulterior în directorul tematic. În cele din urmă, o copie a Pluginului de căutare live pe care l-am editat ușor pentru motive CSS. Originala aici

Și, bineînțeles, ca întotdeauna, veți avea nevoie de un blog WordPress care rulează la care aveți acces. Există tutoriale despre rularea Wordpress local aici pentru Windows, și aici pentru OS X. Datorită naturii conținutului postului, vă recomand să începeți un director WordPress proaspăt.

Deci ar trebui să aveți: jQuery, imagini, plug-in de căutare live și un director WordPress. Super.

Pasul 1 - Organizarea fișierelor.

Să începem prin crearea fișierelor necesare. În directorul wp-content / themes al blogului dvs. WordPress, creați un folder numit 'addressBook'. Adăugați fișierul jQuery și imaginile în acest nou dosar. "Live-search-popup" merge în folderul wp-content / plugins, din motive evidente.

Acum că fișierele descărcate sunt în loc, trebuie să creați alte câteva fișiere. În directorul tematic, creați: addressBook.js, index.php, single.php și style.css. În timp ce avem de-a face cu aceste fișiere, vom crea tema meta. Deschideți stil.css și lipiți + editați acest:

/ * Tema Nume: AddressBook Tema URI: http://net.tutsplus.com/ Descriere: Utilizarea WordPress ca o carte de adrese Versiune: 1.0 Autor: Harley Alexander Autor URI: http://www.baffleinc.com/ * /

Acum ați creat câteva informații de bază pentru a recunoaște WordPress, navigați la pagina de selectare a temelor (Design> teme) din wp-admin și faceți clic pe noul bloc AddressBook. Deocamdată (dacă utilizați o versiune a WP care arată o previzualizare înainte de activare), va fi necompletată. Nu vă faceți griji, totuși! Activați-l!

Pasul 2 - Postarea conținutului

Acum, toate fișierele sunt acolo și organizate, putem trece la crearea unor posturi de eșantion pentru noi. Motivul pentru care funcționează această metodă este că WordPress permite câmpuri personalizate. Câmpurile personalizate sunt doar acelea - domeniul de conținut personalizat pentru a fi completat. Un câmp de conținut post este diferit de câmpul de etichete, deoarece câmpurile personalizate diferă de câmpurile categoriei. Motivul pentru care acest lucru este atât de fantastic se datorează faptului că înseamnă că putem atașa un număr de informații separate unui post, fără a trebui să-i scoatem din durere din conținut. Navigați la Tabloul de bord și scrieți un mesaj nou.

Vom folosi:

• Titlu ca numele persoanei
• Postați conținut ca note pentru persoana respectivă
• Categorii ca grup al persoanei (de muncă / legate de casă)
• Câmpuri customizate Pentru telefoanele de acasă, de lucru și telefoane mobile. Site-ul web și adresa de e-mail, adresa și, în final, o imagine a acestora.

Acum, câmpurile personalizate nu sunt la fel de descurajante, deoarece ele au sunet trebuie să le dea un nume (cheie) și un anumit conținut (valoare). Ceea ce este interesant este că, odată ce au fost folosite o singură dată, le puteți re-selecta dintr-un meniu derulant, astfel încât să nu confundați numele accidental. De asemenea, nu este necesar ca fiecare câmp personalizat să fie necesar, astfel încât să puteți lăsa unele date necompletate dacă nu aveți acele informații specifice (mai târziu când le vom obține, vom crea un link de editare / adăugare.

După ce adăugați câteva postări fictive, putem trece la afișarea conținutului prin intermediul fișierelor șablon.

Pasul 3 - Codul WordPress

Această carte de adrese (surpriză surpriză) va fi modelată de pe Apple Address Book:

Blurit din motive evidente, acea imagine afișează de asemenea secțiunile care sunt, deci este mai ușor de vizualizat în timp ce codificați! Vom începe cu index.php.

index.php

Această pagină este ceea ce toată lumea va vedea pentru prima dată când vor veni la Agendă, așa că trebuie să fie informativă. Ca și în previzualizarea de mai sus, toate paginile vor avea același aspect - Single.php va avea același aspect și simt, pentru a crea acel efect care nu a fost reîncărcat. Acest lucru este doar pentru browserele JS mai puțin, astfel încât acesta se degradează cu 100% grațios. Adică 100%. JQuery în acest lucru este doar pentru a accelera lucrurile de încărcare a conținutului, și (în cele din urmă) funcția de căutare live. Agenda trebuie să funcționeze fără aceste mărfuri!

Pentru a începe o temă WordPress, am întotdeauna câteva informații despre antetul de bază.

Schimbați ce se întâmplă între etichetele de titlu și pur și simplu "Address Book". Sub linkul stilului de stil, adăugați următorul cod pentru a aduce eventual codul JavaScript:

Deoarece toate informațiile din antet se fac, putem trece la codarea împreună a unui aspect structurat. Între etichetele corpului, adăugați aceasta:

Aceste secțiuni vor conține toate buclele postale. Evident. Să începem cu antetul. Se compune dintr-un h1 pentru titlu și forma de căutare. Înlocuiți comentariul:

Carte de adrese
 
 
 
 
 
 

Formularul de căutare nu este de fapt plugin-ul încă. Asta pentru că avem nevoie doar de rezultate, nu? Deci, folosim o altă funcție în principala secțiune care suprapune lista originală ca să apară ca și cum ar fi filtrarea tuturor datelor. Spanul care înfășoară textul h1 este astfel încât să putem adăuga o mică pictogramă favicon-esque la stânga lui.

Secțiunea de grupuri este chiar mai ușoară și mai scurtă.

Grupuri
 
 
„> Toate
  

Sesiunea principală, sau lista de nume, constă în bucla și rezultatele căutării live care suprapun această listă. Parametrul exclude înseamnă că nu se afișează "necategorizate", deoarece o categorie goală este enervantă!

Nume
 
  
„>
  
 

Am observat că am compactat bucla într-o cantitate foarte mică. De obicei, aceasta ar fi o practică proastă, dar pentru această aplicație WordPress nu este de fapt necesară. Obiectul query_posts obligă buclă să afișeze 9999 de postări în locul setării implicite a tabloului de bord. Funcția este inclusă într-un mod sigur, numai dacă plugin-ul este activat. Ce vom face acum. Deschideți secțiunea pluginurilor din tabloul de bord și activați plug-in-ul popup-căutare. Dacă nu este acolo, atunci nu ați descărcat și instalat pluginul. Instalați-l acum.

Încărcarea pe prima pagină este în esență goală, așa că avem nevoie doar de un titlu explicativ!

Selectați o intrare pentru vizualizare!

În cele din urmă, subsolul. Acest bloc are cea mai mare parte a codului și este prima întâlnire cu starea conectată condiționată! Îți voi explica puțin câte puțin.

 /wp-admin/post-new.php "title =" Adăugați o intrare "> /wp-admin/post.php?action=edit&post=ID; ?> "title =" Editați această carte ">  get_var ("SELECT COUNT (*) FROM $ wpdb-> posturi WHERE post_status = 'publicare'"); dacă (0 < $totcards) $totcards = number_format($totcards); echo $totcards.' cards'; ?>

Deci primele două etichete de ancorare sunt condiționate de $ user_ID. Această variabilă verifică dacă un utilizator este conectat (în acest caz care are privilegii de administrare), apoi afișează unele butoane de adăugare și editare. PHP ciudat php la sfârșitul ajunge numărul total de carduri de contact, așa că se afișează la fel ca Apple Address Book.

Asta e pentru index! În continuare vom lucra la single.php, așa că deschideți-o și vom începe!

single.php

index.php ar trebui să fie încă deschis, așa că, în esență, single.php este același aspect, copiați TOATE codul index.php pe single.php și salvați-l.

Deoarece este single.php, în mod prestabilit bucla va afișa doar o postare. Pentru a contracara acest lucru, am adăugat deja o funcție query_posts în index.php.

Single.php diferă de index în principal cu codul între loadArea. În loc de h2, bucla va completa acest lucru.

 
 <-- vast loop goes here. VAST. --> 
 < endwhile; endif; ?>

Conținutul de buclă, de aici încolo, constă din blocuri de PHP, care sunt relativ identice (barează imaginea și notele). $ Query_string este un mod scurt și murdar de revenire a parametrilor bucla înapoi la afișarea unei postări pentru single.php. Postarea începe cu o imagine.

ID, "entryImg"))! = ") ?>  "/>   /wp-admin/post.php?action=edit&post=ID; ?> # Meta-62" >    

Cod nebun! Primul "if" verifică dacă câmpul personalizat are conținut, comparându-l cu valoarea nimicului. Instrumentul "if" verificat atunci când se verifică dacă administratorul este conectat și, dacă da, oferă un link pentru a edita câmpul personalizat. Cea ciudată (... & post =ID; ?> # Meta-62). Folosind ID-ul postului avem o adresă URL care se modifică în mod dinamic, care rămâne relevantă la 100%! Sfârșitul adresei URL va fi diferit pentru tine! Am un selector DOM, dar poți folosi firebug pentru a afla ID-urile din divs-ul câmpului personalizat. Divul care conținea valoarea entrymmg pentru mine a fost # meta-62.

Trebuie să adăugăm și un mic titlu!

Pesă ușoară. Următorul este primul "bloc". Toate aceste blocuri sunt relativ la fel. De fapt, după primul e-mail inițial și site-ul web, sunt doar personaje statice.

"

Blocuri de e-mail / site-uri Web

ID, "e-mail"))! = ") ?> 
 E-mail: ID, "e-mail", adevărat); ?> ">ID, "e-mail", adevărat); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-56 "> Eliminați sau editați  
 E-mail„); ?>

Utilizarea greoaie a câmpurilor personalizate ... Instrucțiunea if verifică dacă câmpul personalizat are conținut, verificând-o cu "sau nimic", deci dacă nu este egal cu nimic (prin urmare, are conținut), afișați-l. conținut, afișați un link de adăugare / modificare.

În acest caz, copiați blocul și modificați "e-mailul" în TOATE etichetele câmpului personalizat pe "site-ul" și ucideți "mailto:" în valoarea href. Nu uitați să modificați linkul #meta - ##! Mina a fost de 57 pentru domeniul site-ului. Nu uitați nici eticheta puternică, nici valoarea postului de editare!

ID, "site"))! = ") ?> 
 E-mail: ID, "site", adevărat); ?> ">ID, "site", adevărat); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-57 "> Eliminați sau editați  
 website„); ?>

Telefoane / Blocuri de adrese

Toate acestea sunt la fel. Trebuie doar să schimbi patru lucruri pe bloc. Numele câmpurilor personalizate, eticheta puternică, valoarea href și conținutul linkului de editare. Iată primul bloc:

ID, "telefon-home"))! = ") ?> 
 Telefon fix: ID, "telefon-acasă", adevărat); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-66 "> Eliminați sau editați  
 Telefon fix„); ?>

Continuați și duplicați acest lucru de patru ori, o dată pentru fiecare domeniu particularizat. Ar trebui să aveți unul dintre aceste blocuri pentru: Telefonul de acasă, Telefonul de lucru, Telefonul mobil și adresa.

Note bloc

În cele din urmă, trebuie să afișăm niște note.

Notă: 

Minunat! Acesta este codul WordPress necesar! Rețineți cum funcționează telefonul de lucru. Mai târziu, vom face acest lucru în CSS pentru a avea o pictogramă plus. În prezent ar trebui să arate astfel:

Pasul 4 - CSS

CSS face site-ul să arate destul! Să mergem direct în ea. Trebuie să începem cu o resetare murdară, defenirea corpului și fundalul ambalajului. WrapperBg.png este o captură de ecran a cărții Apple Address Book actualizată. Adăugăm toate lucrurile de care avem nevoie în partea de sus.

* marja: 0; umplutura: 0; contur: 0;  corp font-family: "Lucida Grande", Lucida, Verdana, sans-serif;  #wrapper width: 621px; înălțime: 370px; margine: 50 pixeli automat; umplutură: 24px 40px 55px 40px; fundal: url (imagini / wrapperBg.png); 

Deja, dacă te uiți la previzualizare, forma ferestrei este deja acolo. În continuare, trebuie să ne dăm seama de antetul. Din fericire, am făcut-o pentru tine! ura!

#header text-align: center; înălțime: 55px;  #header h1 font-size: 12px; font-weight: normal; padding: 5px;  #header h1 span fundal: url (imagini / h1Spanbg.png) nu-repeta stânga; padding-left: 20px;  #searchform float: right; margin-dreapta: 10px; fundal: url (imagini / searchBg.png) nu-repeta stânga 1px; lățime: 135px; înălțime: 22px;  #s fundal: 0; frontieră: 0; linia-înălțime: 20px; lățime: 110px;  #searchsubmit background: 0; frontieră: 0; înălțime: 20px; lățime: 15px; marja: 0; 

Din fericire, acest lucru este necesar pentru a face ca antetul să fie făcut 100%.

Acum vom modela secțiunea grupuri, care este, de fapt, categoriile:

#wrapper h3 fundal: url (images / h3bg.png) repeat-x; înălțime: 16px; font-size: 10px; text-align: centru; linia-înălțime: 16px; font-weight: normal; frontal-dreapta: 1 pix solid gri;  #groups width: 161px; plutește la stânga;  #groups li a fundal: url (imagini / grupuriBg.png) no-repeat 10px 4px;  #groups li a: hover fundal: url (imagini / grupuriBg.png) no-repeat 10px 4px gri;  #groups li, #mainSection li umplutură: 0; font-size: 12px; overflow: ascuns;  ul li a text-decoration: nimic; culoarea neagra; umplutură: 3px 0 3px 30px; marja: 0; afișare: bloc; 

Și apoi secțiunea principală pentru a aluneca lângă secțiunea de grup:

#mainSection width: 160px; plutește la stânga; poziție: relativă;  #mainSection li a fundal: url (imagini / h1SpanBg.png) no-repeat 10px 5px IMPORTANT;  #mainSection a: hover fundal: url (imagini / h1SpanBg.png) no-repeat 10px 5px gri IMPORTANT;  #livesearchpopup_box position: absolute; top: 0; stânga: 0; latime: 158px! IMPORTANT; înălțime: 264px; frontieră: 0; 

Și cu asta, totul este împins în zonele respective, cu excepția subsolului. Dacă căutați, suprapunerea va trece sub posturile deja existente. Așa că trebuie să le poziționăm absolut. Ultimul selector de mai sus face asta.

Suprafața de încărcare trebuie încă să fie în stil. Pentru a vedea acest lucru pe deplin în acțiune, accesați o singură pagină făcând clic pe un contact. Înainte de a arăta astfel:

#loadArea position: relative; overflow: auto; înălțime: 280px; plutește la stânga; lățime: 279px; padding: 10px 10px 0 11px; font-size: 10px;  #loadArea puternic culoare: gri;  #loadArea #entryImg float: left; lățime: 48px; padding-right: 10px;  #loadArea p linie-înălțime: 16px; marginea inferioară: 1em; clar: ambele;  #loadArea a text-decoration: none; culoare: gri;  #loadArea span.add fundal: url (images / add.png) nu-repeta dreapta centru; padding: 3px 20px 1m; afișare: bloc; text-aliniere: drept; marginea superioară: 1em;  #loadArea a.edit-link afișare: bloc; float: dreapta; linia-înălțime: 16px; fundal: url (imagini / delete.png) nu-repeta dreapta 1px; padding: 0 20px;  #loadArea h2 font-size: 16px; înălțime: 55px;  p.notes border-top: 1px solid gri;  #load background: url (imagini / ajaxLoader.gif); lățime: 32px; înălțime: 32px; afișare: bloc; marja: 0 auto; poziția: absolută; stânga: 134px; top: 129px; 

Conectați-vă la wp-admin și verificați cum arată pe o singură pagină! #Load este pentru atunci când vom face unele jQuery se întâmplă. Dar pentru că este atașat în interiorul jQuery, nu face nimic rău pentru a avea aici.

Ultimul fragment din secțiunea CSS este fixarea subsolului. Unele CSS simple pentru a face acest lucru. Singurul lucru interesant este că trebuie să plutiți numărul de cărți la dreapta, ca și cum l-ați poziționat din stânga ar arăta ciudat când ați fost logat.

 #footer height: 20px; linia-înălțime: 18px; font-size: 11px; padding-top: 3px; clar: ambele;  #footer #totCărți float: right; margin-dreapta: 130px; text-shadow: #fff 1px 1px 2px;  #footer a.addÎntroduceți margin-left: 165px;  #footer a.editButton margin-left: 145px; 

CSS este acum terminat! Asta înseamnă că site-ul ar trebui să fie acum complet funcțional într-un browser fără jQuery, în esență finalizat. Dar aici, la NETTUTS, ne place să mergem în plus. Deci vom lucra la încărcarea contactelor cu AJAX pe pagina de pornire, în loc să reîncărcați pagina.

Acum, provocarea noastră ridică câteva probleme. Pluginul live-search-popup utilizează Prototype și, din păcate, dezvoltatorul nu a luat în considerare conflictul de bibliotecă JS. Deci, aceasta înseamnă că trebuie să folosim un selector prelungit și să definim setarea noConflict. Nu greu, doar un pic diferit.

Deschideți addressBook.js. În partea de sus, definim noConflict.

jQuery.noConflict ();

Aceasta este metoda lui jQuery de a vă asigura că codul nativ jQuery este 100% tout seule, unic de la toate celelalte biblioteci.

Acum, pentru apelul pentru documente. Ca și în cazul oricărui jQuery, trebuie să înfășurați codul în acest.

jQuery (document) .ready (funcția () // cod jQuery aici);

Acest tutorial utilizează o metodă similară de încărcare la tutorialul NETTUTS Cum se încarcă și animă conținutul cu jQuery. Să începem cu evenimentul.

jQuery ('# posts li a'). faceți clic pe (funcția () // loading code ...);

Acum trebuie să definim o variabilă care conține tot conținutul single.php care diferă de index.php. Acestea sunt toate câmpurile personalizate.

var cardContent = jQuery (acest) .attr ('href') + '# interior-content';

Ca și în cazul oricărui dezvoltator de AJAX, care nu respectă această cerință, care nu dorește să demonstreze că poate pune un încărcător pe conținutul lor! Încărcătorul în sine nu are nimic de-a face cu încărcarea reală, este doar afișat în timp ce încărcarea este în desfășurare!

jQuery ( '# încărcare') șterge (.); jQuery ( '# loadArea'). adăugați (“„); jQuery ( '# de încărcare') fadeIn (300).;

În cele din urmă, pentru încărcarea reală. Aceste funcții utilizează variabila și înlocuiesc ceea ce era în #loadArea div cu conținutul interior al single.php.

jQuery ('# loadArea'). fadeOut (300, loadTheContent); (), funcția showNewContent () jQuery ('# loadArea') funcția hideLoader (), funcția fadeIn (600, hideLoader) jQuery ('# sarcina') fadeOut ('normal'); return false;

Foarte bine!

Dacă navigați acum la pagina de pornire și faceți clic pe unul dintre nume, se va încărca automat! Se estompează chiar și în interior! Mi-ar plăcea să lucreze la rezultatele pluginului live-search-popup, dar este încărcat prin prototip, deci orice jQuery aplicat nu va funcționa prea bine. În caz contrar, acest lucru se încheie încă un alt mod extensiv WordPress poate fi folosit la potențialul său mai plin ca ... Destul de mult!