Som vi alla vet är WordPress så omfattande att du kan använda den för nästan vad som helst. Det finns även artiklar på webbplatser med galna titlar som 101 alternativa användningsområden för WordPress. Så jag tänkte, hej, varför inte? Jag satsar på att många människor vill skapa egna webbapplikationer, och i huvudsak kan WordPress göra det för dig. I denna video handledning, vi ska göra en online adressbok.

* Redaktörens anmärkning: Vi har en speciell behandling för dig idag. Denna handledning var ursprungligen avsett att ingå i vårt NETTUTS + -program. Programmet har dock tagit mycket längre tid än att vi ursprungligen förutsåg. Oroa dig inte, det kommer fortfarande! Innan dess, njut av den här på oss!

Denna handledning var ett massivt företag för Harley. Så snälla, om du inte har något emot, ta en stund till Digg det! Tack!

Läs vår intervju med Harley!

Förord

Denna adressbok kommer att ha verk. Ajax laddning, villkorliga admin saker, shiz. Detta betyder tyvärr att vi behöver uppfylla några krav, några saker som temat behöver. En kopia av jQuery till att börja med skulle vara praktisk. Utöver detta behöver temat några bilder! Ladda ner den här zip-filen, så kommer du senare att expandera i din temakatalog. Slutligen, en kopia av Live Search Plugin som jag har redigerat lite för CSS skäl. Original här

Och naturligtvis, som alltid, behöver du en WordPress-blogg som du har tillgång till. Det finns handledning om att köra Wordpress lokalt här för Windows, och här för OS X. På grund av arten av inläggets innehåll rekommenderar jag starkt att du börjar en ny WordPress-katalog.

Så du borde ha: jQuery, bilder, live search plugin och en WordPress-katalog. Super.

Steg 1 - Organisera filer.

Låt oss börja med att skapa de nödvändiga filerna. I katalogen wp-innehåll / teman på din WordPress-blogg, skapa en mapp som heter "adressbok". Lägg till jQuery-filen och bilderna i den här nya mappen. "Live-search-popup" går i mappen wp-content / plugins av uppenbara skäl.

Nu när de nedladdade filerna är på plats måste vi skapa några fler filer. I temakatalogen skapar du: addressBook.js, index.php, single.php och style.css. Medan vi hanterar dessa filer skapar vi temat meta. Öppna style.css och klistra in + redigera det här:

/ * Tema Namn: Adress Tema URI: http://net.tutsplus.com/ Beskrivning: Använda WordPress som en Adressbok Version: 1.0 Författare: Harley Alexander Författare URI: http://www.baffleinc.com/ * /

Nu har du skapat en del grundläggande information för att WordPress ska känna igen, navigera till temaväljningssidan (Design> Teman) i wp-admin och klicka på det nya AddressBook-blocket. För tillfället (om du använder en version av WP som visar en förhandsgranskning före aktivering) blir den tom. Oroa dig inte! Aktivera det!

Steg 2 - Postinnehåll

Nu är alla filer där och organiserade, vi kan gå vidare för att skapa några provinlägg för oss. Anledningen till att denna metod fungerar är att WordPress tillåter anpassade fält. Anpassade fält är just det - anpassat innehållsområde att fylla i. Ett fält för inläggsinnehåll skiljer sig från fältet med taggar eftersom anpassade fält skiljer sig från kategorifälten. Anledningen till att detta är så fantastiskt är att det innebär att vi kan bifoga separata bitar av information till ett inlägg utan att behöva smärta dem från innehållet. Navigera till instrumentpanelen och skriv ett nytt inlägg.

Vi använder:

• Titel som namnet på personen
• Posta innehåll som anteckningar för personen
• kategorier som grupp av personen (arbete / hemrelaterad)
• Anpassade fält För hem, arbete och mobiltelefoner. Webbplats och email, adress och slutligen en bild av dem.

Nu är de anpassade fälten inte lika skrämmande som de låter du måste ge dem ett namn (nyckel) och lite innehåll (värde). Den häftiga saken om dem är att när de har använts en gång kan du omvala dem från en rullgardinsmeny så att du inte förväxlar namnen av misstag. Dessutom är inte alla anpassade fält nödvändigt, så du kan lämna några tomma om du inte har den specifika informationen (senare när vi får tema skapar vi faktiskt en redigering / lägg länk.

När du har lagt till några dummy-inlägg kan vi flytta till innehållet via mallfiler.

Steg 3 - WordPress Kod

Denna adressbok (överraskning överraskning) kommer att modelleras av Apple Adressboken:

Suddig av uppenbara skäl visar den bilden också vilka sektioner som är, så det är lättare att visualisera under kodning! Vi börjar med index.php.

index.php

Den här sidan är vad alla först kommer att se när de kommer till din adressbok, så det måste vara informativt. Liksom förhandsvisningen ovan kommer alla sidor att ha samma layout - Single.php kommer att ha samma utseende som att skapa den aldrig återladdade effekten. Detta är bara för JS-mindre webbläsare, så att det försämras 100% graciöst. Jag menar 100%. JQuery i det här är bara för att påskynda saker som laddar innehållet och (så småningom) direktsökningsfunktionen. Adressboken behöver fortfarande arbeta utan dessa varor!

För att starta ett WordPress-tema har jag alltid lite grundläggande information om huvudrubriken.

Ändra vad som är mellan titelkoderna till helt enkelt "Adressbok". Under länken stilark lägger du till följande kod för att få den eventuella JavaScript-koden:

Eftersom all information om huvudet är färdigt kan vi flytta in på kodning tillsammans en strukturerad layout. Tillsätt följande mellan kroppsetiketterna:

Dessa avsnitt innehåller alla postslingor. Självklart. Låt oss börja med rubriken. Den består av en h1 för titeln och sökformuläret. Byt kommentar:

Adressbok
 
 
 
 
 
 

Sökformuläret är egentligen inte plugin-programmet än. Detta beror på att vi bara behöver resultaten, eller hur? Så vi använder en annan funktion i huvudavsnittet som överlappar originallistan för att visas som om den filtrerar igenom alla data. Spänningen som förpackar h1-texten är så att vi kan lägga till en liten favikon-esque ikon till vänster om.

Grupperna är ännu enklare och kortare.

grupper
 
 
"> All
  

Huvudavdelningen, eller där namnlistan går, består av slingan och de levande sökresultaten som överlägger den här listan. Den uteslutna parametern betyder att den inte visar "uncategorized" eftersom en tom kategori är irriterande!

namn
 
  
">
  
 

Noterat Jag har komprimerat slingan till en mycket liten mängd. Vanligtvis är det här dåligt, men för denna applikation av WordPress är det inte faktiskt nödvändigt. Query_posts tvingar slingan att visa 9999 inlägg istället för Dashboard set default. Funktionen är inkluderad på ett säkert sätt, bara om plugin är aktiverat. Vilket ska vi göra nu. Öppna plugin-sektionen i instrumentpanelen och aktivera plugin för live-sökning-popup. Om det inte finns så har du inte laddat ner och installerat plugin. Installera det nu.

LastArea på framsidan är väsentligen tom, så vi behöver bara en förklarande titel!

Välj en post att visa!

Slutligen sidfoten. Det här blocket har flest koden och är det första mötet med villkorad inloggad status! Jag ska förklara bit för bit.

 /wp-admin/post-new.php "title =" Add Entry "> /wp-admin/post.php?action=edit&post=ID; ?> "title =" Redigera detta kort ">  get_var ("VÄLJ COUNT (*) FRÅN $ wpdb-> inlägg WHERE post_status = 'publicera'"); om (0 < $totcards) $totcards = number_format($totcards); echo $totcards.' cards'; ?>

Så de första två ankarkoderna är villkorade av $ user_ID. Denna variabel kontrollerar om en användare är inloggad (i det här fallet som har administratörsbehörigheter), och visar sedan några lägg till och redigera knappar. Den konstiga SQL-php i slutet får det totala antalet kontaktkort, så det visas precis som Apple Adressbok.

Det är det för index! Därefter arbetar vi på single.php, så öppna den och vi kommer igång!

single.php

index.php ska fortfarande vara öppen, så för att i grunden single.php är samma layout, kopiera ALL index.php-koden över till single.php, och spara den.

Eftersom det är single.php, kommer slingan som standard bara att visa ett inlägg. För att motverka detta har vi redan lagt till en query_posts-funktion i index.php.

Single.php skiljer sig från indexet huvudsakligen med koden mellan loadArea. I stället för h2 fyller slingan detta in.

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

Loop-innehållet består härifrån av block av PHP, som är relativt identiska (bar bilden och noterna). $ Query_string är ett kort och smutsigt sätt att återgå slingens parametrar tillbaka för att visa ett inlägg för single.php. Posten börjar med en bild.

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

Galen kod! Den första "om" kontrollerar om det egna fältet har något innehåll genom att jämföra det med värdet av ingenting. Det då angivna "if" -sättet kontrollerar om administratören är inloggad, och om så är en länk för att redigera det anpassade fältet. Den konstiga en (... & post =ID; ?> # Meta-62). Genom att använda post-ID har vi en dynamiskt ändringsadress som är 100% relevant! Slutet på webbadressen kommer att vara annorlunda för dig! Jag har en DOM-väljare, men du kan använda firebug för att ta reda på ID-numren för det egna fältets divs. Den div som innehåller entryImg-värdet för mig var # meta-62.

Vi måste också lägga till en liten titel!

Lätt som en plätt. Nästa är det första "blocket". Alla dessa block är relativt lika. Faktum är att de först efter den första första e-posten och webbplatsen är statiska tecken.

"

Email / Website Blocks

ID, "email"))! = ") ?> 
 E-post: ID, "e-post", sant); ?> ">ID, "e-post", sant); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-56 "> Ta bort eller Redigera  
 E-post'); ?>

Kraftig användning av anpassade fält ... Om uppgiften kontrollerar om det anpassade fältet har något innehåll, kontrollerar du det mot "eller ingenting. Så om det inte motsvarar något (har därför innehåll), visa det. Annars har det ingen innehåll, visa en länk till lägg till / redigera.

Höger under detta, kopiera det blocket och ändra "email" i ALL de anpassade fältet taggar till "webbplats" och döda "mailto:" i href-värdet. Glöm inte att ändra #meta - ## länken! Gruvan var 57 för webbplatsen. Glöm inte heller den starka taggen eller redigera postvärdet!

ID, "webbplats"))! = ") ?> 
 E-post: ID, "webbplats", sant); ?> ">ID, "webbplats", sant); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-57 "> Ta bort eller Redigera  
 Hemsida'); ?>

Telefoner / Adressblocks

Alla dessa är nu samma. Du behöver bara ändra fyra saker per block. De anpassade fältnamnen, den starka taggen, redigeringsklänks href-värde och innehåll. Här är det första blocket:

ID, "telefonhem"))! = ") ?> 
 Hemtelefon: ID, "telefon-hem", sant); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-66 "> Ta bort eller Redigera  
 Hemtelefon'); ?>

Fortsätt och duplicera det fyra gånger, en gång för varje anpassat fält. Du borde ha ett av dessa block för: Hemtelefon, Arbetstelefon, Mobiltelefon och adress.

Notes Block

Slutligen måste vi visa några anteckningar.

Notera: 

Grymt bra! Det är all den WordPress-kod som behövs! Observera hur arbetstelefonen är en länk. Senare utformar vi detta i CSS för att få en plusikon. För tillfället ska det se ut så här:

Steg 4 - CSS

CSS gör webbplatsen snygg! Låt oss hoppa in i det. Vi måste börja med en smutsig återställning, kroppsförnekelse och bakgrunden till omslaget. WrapperBg.png är en skärmdump av den faktiska Apple Adressboken raderad. Vi lägger till alla de saker vi behöver på toppen.

* marginal: 0; vaddering: 0; kontur: 0;  kropp font-family: "Lucida Grande", Lucida, Verdana, sans-serif;  #wrapper width: 621px; höjd: 370px; marginal: 50px auto; vaddering: 24px 40px 55px 40px; bakgrund: url (bilder / wrapperBg.png); 

Redan, om du tittar på förhandsgranskningen finns redan fönstret. Därefter måste vi ta reda på rubriken. Lyckligtvis har jag gjort det för dig! Jippie!

#header text-align: center; höjd: 55px;  #header h1 font-size: 12px; typsnitt: normal; vaddering: 5px;  #header h1 span bakgrund: url (bilder / h1Spanbg.png) no-repeat left; stoppning-vänster: 20px;  #searchform float: right; marginal-höger: 10px; bakgrund: url (images / searchBg.png) no-repeat left 1px; bredd: 135px; höjd: 22px;  # s bakgrund: 0; gräns: 0; linjehöjd: 20px; bredd: 110px;  #searchsubmit background: 0; gräns: 0; höjd: 20px; bredd: 15px; marginal: 0; 

Lyckligtvis, det var allt som behövs för att göra huvudet 100% gjort.

Nu ska vi ställa in avsnittet Grupper, som egentligen är kategorierna:

#wrapper h3 background: url (images / h3bg.png) repeat-x; höjd: 16px; typsnittstorlek: 10px; text-align: center; linjehöjd: 16px; typsnitt: normal; gräns-höger: 1px solid grå;  #grupper bredd: 161px; flyta till vänster;  #grupper i en background: url (images / groupsBg.png) no-repeat 10px 4px;  #grupper li a: sväva bakgrund: url (bilder / grupperBg.png) no-repeat 10px 4px grå;  #groups li, #mainSection li padding: 0; fontstorlek: 12px; överflöde: gömd;  ul li a text-decoration: none; svart färg; vaddering: 3px 0 3px 30px; marginal: 0; display: block; 

Och sedan huvuddelen att glida in vid sidan av gruppavsnittet:

#mainSection width: 160px; flyta till vänster; position: relativ;  #mainSection li a background: url (images / h1SpanBg.png) no-repeat 10px 5px! VIKTIGT;  #mainSection li a: sväva background: url (images / h1SpanBg.png) no-repeat 10px 5px grå! VIKTIGT;  #livesearchpopup_box position: absolute; topp: 0; vänster: 0; Bredd: 158px! VIKTIGT; höjd: 264px; gräns: 0; 

Och därmed trycks allt in i sina respektive områden, förutom sidfoten. Om du söker kommer överlägget att gå under de inlägg som redan finns där. Så vi måste placera dem absolut. Den sista väljaren ovan gör det här.

Lastområdet behöver fortfarande stylas. För att se detta helt i åtgärd, gå till en enda sida genom att klicka på en kontakt. Innan det ser ut så här:

#loadArea position: relative; överflöde: auto; höjd: 280px; flyta till vänster; bredd: 279px; vaddering: 10px 10px 0 11px; typsnittstorlek: 10px;  #loadArea strong färg: grå;  #loadArea #entryImg float: left; bredd: 48px; padding-right: 10px;  #loadArea p linjehöjd: 16px; marginal-botten: 1em; klara: båda;  #loadArea a text-decoration: none; färg: grå;  #loadArea span.add bakgrund: url (images / add.png) no-repeat right center; vaddering: 3px 20px 1em; display: block; textjustera: höger; margin-top: 1em;  #loadArea a.edit-länk display: block; float: right; linjehöjd: 16px; bakgrund: url (images / delete.png) no-repeat right 1px; vaddering: 0 20px;  #loadArea h2 font-size: 16px; höjd: 55px;  p.notes border-top: 1px solid grå;  #load background: url (images / ajaxLoader.gif); bredd: 32px; höjd: 32px; display: block; marginal: 0 auto; position: absolut; vänster: 134px; topp: 129px; 

Logga in på wp-admin och kontrollera hur det ser ut på en enda sida! #Load är för när vi får lite jQuery händer. Men eftersom det är bifogat i jQuery gör det ingen skada att ha den här inne.

Den sista delen av CSS-avsnittet är att fixa upp sidfoten. Några enkla CSS att göra detta. Det enda intressanta här är att du måste flyta antalet kort till höger, som om du placerade det från vänster så skulle det se konstigt när du loggade in.

 #footer height: 20px; linjehöjd: 18px; typsnittstorlek: 11px; padding-top: 3px; klara: båda;  #footer #totCards float: right; marginal-höger: 130px; textskugga: #fff 1px 1px 2px;  #footer a.addEntry margin-left: 165px;  #footer a.editButton margin-left: 145px; 

CSS är nu klar! Det betyder att webbplatsen nu ska vara fullt fungerande i en webbläsare utan jQuery, i huvudsak klar. Men här på NETTUTS gillar vi att gå den extra milen. Så vi arbetar med att göra kontakterna laddade med AJAX på hemsidan istället för att ladda om sidan.

Nu står vår utmaning för några problem. Plugin för live-sökning-popup använder prototyp, och tyvärr utvecklaren inte övervägde JS-bibliotekskonflikt. Så det betyder att vi måste använda en längre väljare och definiera noConflict-inställningen. Inte svårt, bara lite annorlunda.

Öppna adressboken. Överst definierar vi noConflicten.

jQuery.noConflict ();

Det här är jQuerys metod för att se till att alla jQuery-inbyggda kod är 100% tout seule, unikt från alla andra libaries.

Nu för dokumentet klart samtal. Som med alla jQuery måste du pakka in koden i det här.

jQuery (dokument) .ready (funktion () // jQuery-kod här);

Denna handledning använder en liknande metod för att ladda till NETTUTS-handledningen Hur man laddar in och animerar innehåll med jQuery. Låt oss börja med evenemanget.

jQuery ('# inlägg li a'). klicka (funktion () // laddningskod ...);

Nu måste vi definiera en variabel som innehåller allt single.php-innehåll som skiljer sig från index.php. Detta är alla anpassade fält.

var cardContent = jQuery (this) .attr ('href') + '# innerinnehåll';

Som med någon självständig AJAX-utvecklare, som inte vill visa upp att de kan lägga en lastare på innehållet! Lastaren själv har inget att göra med den faktiska belastningen, det visas bara när lastningen pågår!

jQuery ( '# belastning) bort (). jQuery ( '# loadArea). bifoga (''); jQuery ( '# belastning') FadeIn (300).;

Slutligen, för den faktiska belastningen. Dessa funktioner använder variabeln och ersätter vad som var i #loadArea div med innerhalten single.php.

jQuery ('# loadArea'). fadeOut (300, loadTheContent); Funktion loadNewContent () jQuery ('# loadArea'). fadeIn (600, hideLoader); funktion hideLoader () jQuery ('# loadArea'). jQuery ('# load'). fadeOut ('normal'); returnera false;

Bra gjort!

Om du navigerar till hemsidan nu och klickar på ett av namnen, laddas det automatiskt! Det svävar även in och ut! Jag skulle älska att detta skulle fungera på resultaten av plugin för live-search-popup, men det laddas via prototyp, så det är inte så bra att någon jQuery appliceras. Annars avslutar detta ännu ett omfattande sätt att WordPress kan användas till dess fullare potential som ... Ganska mycket vad som helst!