Zoals we allemaal weten, is WordPress zo uitgebreid dat je het voor bijna alles kunt gebruiken. Er zijn zelfs artikelen op sites met gekke titels, zoals 101 alternatieve gebruiksmogelijkheden voor WordPress. Dus ik dacht, hé, waarom niet? Ik wed dat veel mensen hun eigen webapps willen maken, en in wezen kan WordPress dat voor je doen. In deze video-zelfstudie, we gaan een online adresboek maken.

* Noot van de redactie: vandaag hebben we een speciale traktatie voor u. Deze zelfstudie was oorspronkelijk bedoeld als onderdeel van ons NETTUTS + -programma. Het programma heeft echter veel meer tijd nodig gehad om uit te rollen dan we aanvankelijk hadden verwacht. Maak je geen zorgen, het komt nog steeds! Tot die tijd, geniet ervan op ons!

Deze tutorial was een enorme onderneming voor Harley. Dus alsjeblieft, als je het niet erg vindt, neem even de tijd om het te Digg! Dank je!

Lees ons interview met Harley!

Voorwoord

Dit adresboek heeft de werken. Ajax laden, voorwaardelijke admin dingen, de shiz. Dit betekent helaas dat we aan enkele vereisten moeten voldoen, een paar dingen die het thema nodig heeft. Een kopie van jQuery om mee te beginnen zou handig zijn. Bovendien heeft het thema een paar afbeeldingen nodig! Download deze zip, die u later in uw themadirectory zult uitbreiden. Eindelijk een kopie van de Live Search-plug-in die ik enigszins heb bewerkt om CSS-redenen. Origineel hier

En natuurlijk, zoals altijd, heb je een WordPress-blog nodig waarop je toegang hebt. Er zijn tutorials over het uitvoeren van Wordpress lokaal hier voor Windows, en hier voor OS X. Vanwege de aard van de berichtinhoud beveel ik ten zeerste aan om een ​​nieuwe WordPress-map te starten.

U moet dus beschikken over: jQuery, afbeeldingen, live search-plug-in en een WordPress-directory. Super.

Stap 1 - Bestanden ordenen.

Laten we beginnen door de nodige bestanden te maken. Maak in de map wp-content / themes van uw WordPress-blog een map met de naam 'addressBook'. Voeg het jQuery-bestand en de afbeeldingen toe aan deze nieuwe map. De 'live-zoekpop-up' staat in de map wp-content / plugins om voor de hand liggende redenen.

Nu de gedownloade bestanden aanwezig zijn, moeten we nog een paar bestanden maken. Maak in de themamap: addressBook.js, index.php, single.php en style.css. Terwijl we met deze bestanden bezig zijn, maken we de meta voor het thema. Open style.css en plak + bewerk dit:

/ * Theme Name: AddressBook Theme URI: http://net.tutsplus.com/ Beschrijving: Gebruik WordPress als een adresboek Versie: 1.0 Auteur: Harley Alexander Auteur URI: http://www.baffleinc.com/ * /

Nu heb je wat basisinformatie voor WordPress gemaakt om te herkennen, navigeer je naar de Thema-selectiepagina (Ontwerp> Thema's) in wp-admin en klik je op het nieuwe Adresboek-blok. Voor nu (als u een versie van WP gebruikt die een voorbeeld toont voordat u deze activeert), is deze leeg. Maak je echter geen zorgen! Activeer het!

Stap 2 - Plaats inhoud

Nu zijn alle bestanden daar en georganiseerd, we kunnen doorgaan met het maken van enkele voorbeeldberichten voor ons. De reden dat deze methode werkt, is omdat WordPress aangepaste velden toestaat. Aangepaste velden zijn precies dat - een aangepast inhoudsgebied dat moet worden ingevuld. Het berichtinhoudsveld wijkt af van het veld Tags omdat aangepaste velden anders zijn dan de categorievelden. De reden dat dit zo fantastisch is, is omdat het betekent dat we afzonderlijke stukjes informatie aan een bericht kunnen koppelen zonder ze pijnlijk uit de inhoud te moeten vissen. Navigeer naar het dashboard en schrijf een nieuw bericht.

We zullen gebruiken:

• Titel als de naam van de persoon
• Inhoud plaatsen als de notities voor de persoon
• Categorieën als groep van de persoon (werk / thuis gerelateerd)
• Aangepaste velden Voor thuis, op het werk en mobiele telefoons. Website en e-mailadres, adres en ten slotte een afbeelding van hen.

Nu zijn de aangepaste velden niet zo ontmoedigend als ze klinken, je moet ze een naam (sleutel) en een bepaalde inhoud (waarde) geven. Het leuke aan hen is dat wanneer ze eenmaal zijn gebruikt, je ze opnieuw kunt selecteren in een vervolgkeuzemenu zodat je namen niet per ongeluk verwart. Ook is niet elk aangepast veld noodzakelijk, dus je kunt een beetje blanco laten als je die specifieke informatie niet hebt (later zullen we een link aanmaken / toevoegen).

Nadat u een paar dummy-berichten hebt toegevoegd, kunnen we de inhoud verplaatsen via sjabloonbestanden.

Stap 3 - WordPress Code

Dit adresboek (verrassingsverrassing) zal worden gemodelleerd naar het Apple-adresboek:

Wazig om duidelijke redenen, laat die afbeelding ook zien welke secties dat zijn, dus het is gemakkelijker om te visualiseren tijdens het coderen! We beginnen met index.php.

index.php

Deze pagina is wat iedereen als eerste ziet wanneer ze naar je adresboek komen, dus het moet informatief zijn. Net als het bovenstaande voorbeeld hebben alle pagina's dezelfde lay-out. Single.php ziet er hetzelfde uit en lijkt hetzelfde effect te hebben dat nooit opnieuw is geladen. Dit is alleen voor browsers zonder JS, zodat het voor 100% gracieus verslechtert. Ik bedoel 100%. De jQuery hierin is alleen maar om het laden van de inhoud te versnellen en (uiteindelijk) de live zoekfunctie. Het adresboek moet nog wel werken zonder deze grondstoffen!

Om een ​​WordPress-thema te starten, heb ik altijd een aantal algemene koptekstinformatie.

Verander van whats tussen de title-tags naar simpelweg 'Address Book'. Voeg onder de stylesheet-link de volgende code toe om de uiteindelijke JavaScript-code in te voeren:

Omdat alle informatie over de koptekst is voltooid, kunnen we coderen en een gestructureerde lay-out samenstellen. Voeg tussen de body-tags dit toe:

Deze secties bevatten alle post-loops. Duidelijk. Laten we beginnen met de kop. Het bestaat uit een h1 voor de titel en het zoekformulier. Vervang de opmerking:

Adresboek
 
 
 
 
 
 

Het zoekformulier is nog niet de plugin. Dit komt omdat we alleen de resultaten nodig hebben, toch? Dus gebruiken we een andere functie in de mainSection die de oorspronkelijke lijst overlapt om te worden weergegeven alsof het alle gegevens filtert. De overspanning die de h1-tekst omwikkelt, is zodat we een klein favicon-achtig pictogram links van kunnen toevoegen.

De groepssectie is nog eenvoudiger en korter.

groepen
 
 
"> Alle
  

De mainSection, of waar de naamlijst staat, bestaat uit de loop en de live zoekresultaten die deze lijst overlappen. De parameter uitsluiten betekent dat het niet 'ongecategoriseerd' wordt weergegeven, omdat een lege categorie irritant is!

Naam
 
  
">
  
 

Merk op dat ik de lus tot een zeer kleine hoeveelheid heb samengeperst. Meestal zou dit een slechte gewoonte zijn, maar voor deze toepassing van WordPress is het niet echt nodig. De query_posts dwingt de lus om 9999 berichten weer te geven in plaats van de standaardinstelling van het Dashboard. De functie is op een veilige manier opgenomen, alleen als de plug-in is geactiveerd. Wat we nu gaan doen. Open het gedeelte Plug-ins van het Dashboard en activeer de plug-in Live-zoekpop-up. Als het er niet is, hebt u de plug-in niet gedownload en geïnstalleerd. Installeer het nu.

De loadArea op de voorpagina is in wezen leeg, dus we hebben alleen een verklarende titel nodig!

Selecteer een item om te bekijken!

Eindelijk de voettekst. Dit blok heeft de meeste hoeveelheid code en is de eerste ontmoeting met voorwaardelijke ingelogde status! Ik zal het beetje bij beetje uitleggen.

 /wp-admin/post-new.php "title =" Item toevoegen "> /wp-admin/post.php?action=edit&post=ID KAART; ?> "title =" Bewerk deze kaart ">  get_var ("SELECT COUNT (*) VAN $ wpdb-> posts WHERE post_status = 'publish'"); als (0 < $totcards) $totcards = number_format($totcards); echo $totcards.' cards'; ?>

Dus de eerste twee ankertags zijn afhankelijk van $ user_ID. Deze variabele controleert of een gebruiker is aangemeld (in dit geval met beheerdersbevoegdheden) en geeft vervolgens enkele knoppen voor toevoegen en bewerken weer. De rare SQL-php aan het eind krijgt het totale aantal contactkaarten, dus het wordt net als Apple Address Book weergegeven.

Dat is het voor index! Vervolgens werken we aan single.php, dus open het en we gaan aan de slag!

single.php

index.php moet nog steeds open zijn, dus omdat in wezen single.php dezelfde lay-out is, kopieer ALLE index.php-code naar single.php en sla deze op.

Omdat het single.php is, toont de lus standaard slechts één bericht. Om dit tegen te gaan, hebben we al een query_posts-functie in index.php toegevoegd.

Single.php verschilt van de index voornamelijk met de code tussen de loadArea. In plaats van de h2 vult de lus dit in.

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

De Loop-inhoud, vanaf hier bestaat uit blokken van PHP, die relatief identiek zijn (bar de afbeelding en de notities). De $ query_string is een korte en vuile manier om de parameters van de lus terug te zetten naar het weergeven van één bericht voor single.php. De post begint met een afbeelding.

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

Crazy code! De eerste 'als' controleert of dat aangepaste veld inhoud heeft, door het te vergelijken met de waarde van niets. De vervolgens genummerde 'if'-opdracht controleert of de beheerder is aangemeld en geeft zo ja een koppeling om het aangepaste veld te bewerken. De rare (... & post =ID KAART; ?> # Meta-62). Door de post-ID te gebruiken, hebben we een dynamisch veranderende URL die 100% relevant blijft! Het einde van de URL zal anders zijn voor jou! Ik heb een DOM-selector, maar je kunt firebug gebruiken om de ID's van de div's van het aangepaste veld te achterhalen. De div met de entryImg-waarde voor mij was # meta-62.

We moeten ook een kleine titel toevoegen!

Makkelijk. Het volgende is het eerste 'blok'. Al deze blokken zijn relatief hetzelfde. In feite zijn het na de eerste initiële e-mail en website gewoon statische tekens.

"

Blokken e-mail / website

ID, 'email'))! = ") ?> 
 E-mail: ID, 'e-mail', waar); ?> ">ID, 'e-mail', waar); ?> /wp-admin/post.php?action=edit&post=ID KAART; ?> # meta-56 "> Verwijderen of bewerken  
 E-mail'); ?>

Veelvuldig gebruik van aangepaste velden ... De if-opdracht controleert of het aangepaste veld inhoud heeft, door het te controleren op "of niets." Dus als het niet gelijk is aan niets (dus inhoud heeft), geef het weer. inhoud, geef een link voor toevoegen / bewerken weer.

Recht daaronder, kopieer dat blok en verander de 'e-mail' in ALLE aangepaste veldlabels naar 'website' en kill de 'mailto:' in de href-waarde. Vergeet niet om de #meta - ## link te veranderen! De mijne was 57 voor het websiteveld. Vergeet ook niet de sterke tag of de waarde van de bewerkingspost!

ID, 'website'))! = ") ?> 
 E-mail: ID, 'website', waar); ?> ">ID, 'website', waar); ?> /wp-admin/post.php?action=edit&post=ID KAART; ?> # meta-57 "> Verwijderen of bewerken  
 Website'); ?>

Telefoons / adresblokken

Al deze zijn nu hetzelfde. Je hoeft per blok maar vier dingen te veranderen. De aangepaste veldnamen, de sterke tag, de href-waarde en inhoud van de bewerkingslink. Hier is het eerste blok:

ID, 'phone-home'))! = ") ?> 
 Telefoon thuis: ID, 'phone-home', waar); ?> /wp-admin/post.php?action=edit&post=ID KAART; ?> # meta-66 "> Verwijderen of bewerken  
 Telefoon thuis'); ?>

Ga je gang en dupliceer dit vier keer, een keer voor elk aangepast veld. U moet een van deze blokken hebben voor: Thuistelefoon, Werktelefoon, Mobiele telefoon en adres.

Notes Block

Ten slotte moeten we enkele opmerkingen weergeven.

Notitie: 

Geweldig! Dat is alle benodigde WordPress-code! Merk op hoe de Work Phone een link is. Later zullen we dit in CSS opmaken om een ​​plusteken te hebben. Momenteel zou het er zo uit moeten zien:

Stap 4 - CSS

CSS zorgt ervoor dat de site er mooi uitziet! Laten we er meteen in springen. We moeten beginnen met een vuile reset, de body defenition en de achtergrond van de wrapper. WrapperBg.png is een screenshot van het daadwerkelijke Apple-adresboek dat is leeggemaakt. We voegen daarboven alle dingen toe die we nodig hebben.

* marge: 0; opvulling: 0; overzicht: 0;  lichaam font-family: "Lucida Grande", Lucida, Verdana, sans-serif;  #wrapper width: 621px; hoogte: 370 px; marge: 50px auto; opvulling: 24px 40px 55px 40px; achtergrond: url (images / wrapperBg.png); 

Als u naar het voorbeeld kijkt, is de venstervorm al aanwezig. Vervolgens moeten we de header uitvinden. Gelukkig heb ik het voor je gedaan! Yay!

#header text-align: center; hoogte: 55px;  #header h1 font-size: 12px; font-gewicht: normaal; opvulling: 5px;  #header h1 span background: url (images / h1Spanbg.png) no-repeat links; padding-links: 20px;  #searchform float: right; margin-right: 10px; achtergrond: url (images / searchBg.png) no-repeat left 1px; breedte: 135 px; hoogte: 22 px;  #s achtergrond: 0; rand: 0; regelhoogte: 20px; breedte: 110 px;  #searchsubmit background: 0; rand: 0; hoogte: 20 px; breedte: 15px; marge: 0; 

Gelukkig was dat alles wat nodig was om de header 100% klaar te krijgen.

Nu stylen we de groepensectie, wat eigenlijk de categorieën zijn:

#wrapper h3 background: url (images / h3bg.png) repeat-x; hoogte: 16 px; lettergrootte: 10px; text-align: center; regelhoogte: 16px; font-gewicht: normaal; border-right: 1px effen grijs;  #groups width: 161px; zweven: links;  #groups li a background: url (images / groupsBg.png) no-repeat 10px 4px;  #groups li a: hover background: url (images / groupsBg.png) no-repeat 10px 4px grijs;  #groepen li, #mainSection li opvulling: 0; lettergrootte: 12px; overloop verborgen;  ul li a text-decoration: none; de kleur zwart; opvulling: 3px 0 3px 30px; marge: 0; weergave: blok; 

En dan het hoofdgedeelte dat naast de groepssectie glijdt:

#mainSection width: 160px; zweven: links; positie: relatief;  #mainSection li a background: url (images / h1SpanBg.png) no-repeat 10px 5px! BELANGRIJK;  #mainSection li a: hover background: url (images / h1SpanBg.png) no-repeat 10px 5px gray! BELANGRIJK;  #livesearchpopup_box positie: absoluut; boven: 0; links: 0; breedte: 158 px! BELANGRIJK; hoogte: 264px; rand: 0; 

En daarmee wordt alles in zijn respectievelijke gebieden geduwd, behalve de voettekst. Als u zoekt, gaat de overlay onder de berichten die er al zijn. We moeten ze dus absoluut positioneren. De laatste selector hierboven doet dit.

Het laadgebied moet nog steeds worden gestyled. Als u dit volledig in actie wilt zien, gaat u naar een enkele pagina door op een contact te klikken. Voordat het er zo uit zal zien:

#loadArea position: relative; overloop: automatisch; hoogte: 280 px; zweven: links; breedte: 279px; opvulling: 10px 10px 0 11px; lettergrootte: 10px;  #loadArea strong kleur: grijs;  #loadArea #entryImg float: left; breedte: 48 px; opvulling rechts: 10px;  #loadArea p line-height: 16px; margin-bottom: 1em; beiden opschonen;  #loadArea a text-decoration: none; kleur: grijs;  #loadArea span.add background: url (images / add.png) no-repeat rechter midden; opvulling: 3px 20px 1em; weergave: blok; text-align: right; margin-top: 1em;  #loadArea a.edit-link display: block; zweven: rechts; regelhoogte: 16px; achtergrond: url (images / delete.png) no-repeat right 1px; opvulling: 0 20px;  #loadArea h2 font-size: 16px; hoogte: 55px;  p.notes border-top: 1px effen grijs;  #load background: url (images / ajaxLoader.gif); breedte: 32px; hoogte: 32 px; weergave: blok; marge: 0 auto; positie: absoluut; links: 134 px; top: 129 px; 

Log in op de wp-admin en kijk hoe het eruitziet op een enkele pagina! De #load is voor als we wat jQuery laten gebeuren. Maar omdat het is toegevoegd in de jQuery, doet het geen kwaad om het hier te hebben.

Het laatste stukje van de CSS-sectie is om de voettekst op te lossen. Enkele eenvoudige CSS om dit te doen. Het enige interessante ding hier is dat je het aantal kaarten naar rechts moet zweven, alsof je het van links zou plaatsen, het zou raar lijken als je ingelogd was.

 #footer height: 20px; regelhoogte: 18px; font-size: 11px; padding-top: 3px; beiden opschonen;  #footer #totCards float: right; margin-right: 130 px; text-shadow: #fff 1px 1px 2px;  #footer a.addEntry margin-left: 165px;  #footer a.editButton margin-left: 145px; 

De CSS is nu helemaal klaar! Dat betekent dat de site nu volledig functioneel zou moeten zijn in een browser zonder jQuery, in wezen voltooid. Maar hier bij NETTUTS doen we graag een stapje extra. We zullen dus werken aan het laden van de contacten met AJAX op de startpagina in plaats van de pagina opnieuw te laden.

Nu vormt onze uitdaging een paar problemen. De live-zoekpop-up Plug-in gebruikt Prototype en helaas heeft de ontwikkelaar geen JS-bibliotheekconflict overwogen. Dit betekent dus dat we een langere selector moeten gebruiken en de noConflict-instelling moeten definiëren. Niet moeilijk, alleen een beetje anders.

Open addressBook.js. Helemaal bovenaan definiëren we de noConflict.

jQuery.noConflict ();

Dit is de methode van jQuery om ervoor te zorgen dat alle native code van jQuery 100% is tout seule, uniek van alle andere bibliotheken.

Nu voor de documentklare oproep. Zoals met elk jQuery, moet je de code hieromheen hullen.

jQuery (document) .ready (function () // jQuery-code hier);

Deze tutorial gebruikt een vergelijkbare methode om te laden naar de NETTUTS-tutorial. Inhoud laden en animeren met jQuery. Laten we beginnen met het evenement.

jQuery ('# posts li a'). klik (functie () // laadcode ...);

Nu moeten we een variabele definiëren die alle single.php-inhoud bevat die verschilt van index.php. Dit zijn alle aangepaste velden.

var cardContent = jQuery (this) .attr ('href') + '# inner-content';

Zoals met elke zichzelf respecterende AJAX-ontwikkelaar, die niet wil laten zien dat ze een loader op hun inhoud kunnen zetten! De lader zelf heeft niets te maken met het daadwerkelijk laden, hij wordt alleen getoond tijdens het laden!

jQuery ( '# load') te verwijderen ().; jQuery ( '# loadArea'). toevoegen (''); jQuery ( '# load') fadeIn (300).;

Eindelijk, voor het daadwerkelijk laden. Deze functies gebruiken de variabele en vervangen wat in de #loadArea div stond met de innerlijke inhoud van single.php.

jQuery ('# loadArea'). fadeOut (300, loadTheContent); functie loadTheContent () jQuery ('# loadArea'). load (cardContent, ", showNewContent ()); functie showNewContent () jQuery ('# loadArea'). fadeIn (600, hideLoader); function hideLoader () jQuery ('# load'). fadeOut ('normaal'); return false;

Goed gedaan!

Als u nu naar de startpagina navigeert en op een van de namen klikt, wordt deze automatisch geladen! Het vervaagt zelfs in en uit! Ik zou graag zien dat dit werkt aan de resultaten van de live-zoekpop-up-plug-in, maar het wordt geladen via een prototype, dus toegepast jQuery zal niet zo goed werken. Anders sluit dit nog een andere uitgebreide manier waarop WordPress kan worden gebruikt om zijn vollediger potentieel als ... Vrijwel alles!