Som vi alle vet, er WordPress så omfattende at du kan bruke den til nesten alt. Det er til og med artikler på nettsteder med galne titler som 101 alternative bruksområder for WordPress. Så jeg trodde, hei, hvorfor ikke? Jeg slår på at mange mennesker vil lage egne webapplikasjoner, og i hovedsak kan WordPress gjøre det for deg. I denne videoopplæringen, Vi skal lage en online adressebok.

* Redaktørens merknad: Vi har en spesiell godbit for deg i dag. Denne opplæringen var opprinnelig ment å være en del av vårt NETTUTS + -program. Programmet har imidlertid tatt en lengre tid å rulle ut enn vi opprinnelig forventet. Ikke bekymre deg, det kommer fremdeles! Inntil da, nyt denne på oss!

Denne opplæringen var et enormt engasjement for Harley. Så vær så snill, hvis du ikke har noe imot, ta et øyeblikk til Digg det! Takk skal du ha!

Les vårt intervju med Harley!

Forord

Denne adresseboken kommer til å ha verkene. Ajax lasting, betinget admin ting, shiz. Dette betyr dessverre at vi trenger å møte noen få krav, noen ting temaet trenger. En kopi av jQuery til å begynne med ville være nyttig. Dessuten trenger temaet noen bilder! Last ned denne postkoden, som du senere vil utvide til temakatalogen. Endelig, en kopi av Live Search Plugin som jeg har redigert litt for CSS grunner. Original her

Og selvfølgelig, som alltid, trenger du en WordPress-blogg som du har tilgang til. Det er opplæringsprogrammer for å kjøre Wordpress lokalt her for Windows, og her for OS X. På grunn av innholdet i innlegget, anbefaler jeg sterkt at du starter en ny WordPress-katalog.

Så du bør ha: jQuery, bilder, live søk plugin og en WordPress katalog. Super.

Trinn 1 - Organisering av filer.

La oss starte med å lage de nødvendige filene. I katalogen wp-innhold / temaer på WordPress-bloggen din, opprett en mappe som heter 'adressebok'. Legg til jQuery-filen og bildene i denne nye mappen. "Live-søk-popup" går i mappen wp-content / plugins av åpenbare grunner.

Nå som de nedlastede filene er på plass, må vi lage noen flere filer. I temakatalogen, opprett: addressBook.js, index.php, single.php og style.css. Mens vi håndterer disse filene, oppretter vi temaet meta. Åpne style.css og lim inn + rediger dette:

/ * Tema Navn: AddressBook Theme URI: http://net.tutsplus.com/ Beskrivelse: Bruke WordPress som en Adressebok Versjon: 1.0 Forfatter: Harley Alexander Forfatter URI: http://www.baffleinc.com/ * /

Nå har du opprettet noen grunnleggende opplysninger for WordPress å gjenkjenne, navigere til temavalgssiden (Design> Temaer) i wp-admin, og klikk den nye AddressBook-blokken. For nå (hvis du bruker en versjon av WP som viser forhåndsvisning før aktivering), blir den tom. Ikke bekymre deg selv! Aktiver den!

Trinn 2 - Innlegg Innhold

Nå er alle filene der og organisert, vi kan fortsette å lage noen prøveinnlegg for oss. Grunnen til at denne metoden fungerer, er fordi WordPress tillater tilpassede felt. Egendefinerte felt er bare det - egendefinert innholdsområde å fylle ut. Et innleggsinnholdsfelt er forskjellig fra taggfeltet, da egendefinerte felt er forskjellige fra kategorivinduene. Grunnen til at dette er så fantastisk er at det betyr at vi kan feste separate biter av informasjon til et innlegg uten å måtte smertefullt fiske dem ut av innholdet. Naviger til oversikten, og skriv et nytt innlegg.

Vi bruker:

• Tittel som navnet på personen
• Legg inn innhold som notater for personen
• kategorier som gruppe av personen (arbeid / hjemme-relatert)
• Egendefinerte felt For hjemmet, arbeidet og mobiltelefonen. Nettsted og e-post, adresse og til slutt et bilde av dem.

Nå er de egendefinerte feltene ikke så skremmende som de høres ut, du må gi dem et navn (nøkkel) og noe innhold (verdi). Den kule tingen om dem er at når de har blitt brukt en gang, kan du velge dem på nytt fra en rullegardinmeny, slik at du ikke forveksler navn ved et uhell. Dessuten er ikke alle tilpassede felt nødvendig, så du kan legge noe tomt hvis du ikke har den spesifikke informasjonen (senere når vi får temaer, vil vi faktisk opprette en rediger / legg til link.

Etter at du har lagt til et par dummy innlegg, kan vi flytte på å vise innholdet via malfiler.

Trinn 3 - WordPress Kode

Denne adresseboken (overraskelsesoverraskelse) blir modellert av Apple Adressebok:

Sløret av åpenbare årsaker, viser bildet også hvilke seksjoner som er, så det er lettere å visualisere mens du kodes! Vi starter med index.php.

index.php

Denne siden er hva alle først vil se når de kommer til adresseboken din, så det må være informativ. Som forhåndsvisning ovenfor, vil alle sidene ha samme layout - Single.php vil ha samme utseende, som å skape den aldri re-loaded effekten. Dette er bare for JS-mindre nettlesere, slik at det nedbrytes 100% grasiøst. Jeg mener 100%. JQuery i dette er bare for å fange ting opp lasting av innholdet, og (til slutt) live søk funksjonen. Adresseboken trenger fortsatt å fungere uten disse produktene skjønt!

For å starte et WordPress-tema har jeg alltid noen grunnleggende headerinformasjon.

Endre hva som er mellom tittel-kodene til bare 'Adressebok'. Under koblingen stilark legger du til følgende kode for å få inn den eventuelle JavaScript-koden:

Siden all headerinformasjon er ferdig, kan vi flytte på koding sammen en strukturert layout. I mellom kroppstempelene legger du til dette:

Disse seksjonene vil inneholde alle postsløyfer. Åpenbart. La oss starte med overskriften. Den består av en h1 for tittelen og søkeskjemaet. Erstatt kommentaren:

Adressebok
 
 
 
 
 
 

Søkeformularen er egentlig ikke plugin-modulen ennå. Dette skyldes at vi bare trenger resultatene, ikke sant? Så vi bruker en annen funksjon i hovedavsnittet som overlegger den opprinnelige listen til å vises som om den filtrerer gjennom alle dataene. Spanet som pakker inn h1-teksten, er så vi kan legge til et lite favicon-esque ikon til venstre for.

Gruppeseksjonen er enda enklere og kortere.

grupper
 
 
"> All
  

Hovednavnet, eller hvor navnelisten går, består av sløyfen og de levende søkeresultatene som overlegger denne listen. Ekskluder parameter betyr at den ikke viser 'uncategorized' fordi en tom kategori er irriterende!

Navn
 
  
">
  
 

Legg merke til at jeg har komprimert sløyfen til en svært liten mengde. Vanligvis vil dette være dårlig praksis, men for denne applikasjonen av WordPress er det ikke egentlig nødvendig. Query_posts tvinger sløyfen til å vise 9999 innlegg i stedet for Dashboard-settet standard. Funksjonen er inkludert på en trygg måte, bare hvis plugin er aktivert. Som vi skal gjøre nå. Åpne plugin-delen i Dashboard, og aktiver popup-pluginet for live-søk. Hvis det ikke er det, har du ikke lastet ned og installert pluginet. Installer den nå.

LastArea på forsiden er i hovedsak tom, så vi trenger bare en forklarende tittel!

Velg en oppføring for å vise!

Endelig bunnteksten. Denne blokken har mest mulig kode, og er det første møtet med betinget logget status! Jeg skal forklare litt for litt.

 /wp-admin/post-new.php "title =" Add Entry "> /wp-admin/post.php?action=edit&post=ID; ?> "title =" Rediger dette kortet ">  get_var ("SELECT COUNT (*) FRA $ wpdb-> innlegg hvor post_status = 'publiser'"); hvis (0 < $totcards) $totcards = number_format($totcards); echo $totcards.' cards'; ?>

Så de to første ankermerkene er betinget av $ user_ID. Denne variabelen kontrollerer om en bruker er logget inn (i dette tilfellet som har administratorrettigheter), og viser deretter noen legg til og redigere knapper. Den rare SQL-php på slutten får totalt antall kontaktkort, så det vises akkurat som Apple Adressebok.

Det er det for indeks! Neste opp vil vi jobbe på single.php, så åpne den opp og vi kommer i gang!

single.php

index.php skal fortsatt være åpen, så fordi i det vesentlige single.php er det samme oppsettet, kopier ALLE index.php-koden over til single.php, og lagre den.

Fordi det er single.php, vil sløyfen som standard bare vise ett innlegg. For å motvirke dette har vi allerede lagt til en query_posts-funksjon i index.php.

Single.php er forskjellig fra indeksen, hovedsakelig med koden mellom loadArea. I stedet for h2 vil løkken fylle dette inn.

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

Loop-innholdet, fra nå av, består av blokker av PHP, som er relativt identiske (bar bildet og notatene). $ Query_string er en kort og skitten måte å tilbakestille loopens parametre tilbake for å vise ett innlegg for single.php. Innlegget starter med et bilde.

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

Gal kode! Den første "hvis" sjekker om det egendefinerte feltet har noe innhold, ved å sammenligne det med verdien av ingenting. Den såkalte "if" -erklæringen kontrollerer for å se om administrasjonen er logget inn, og hvis så gir en lenke for å redigere det egendefinerte feltet. Den rare en (... & post =ID; ?> # Meta-62). Ved å bruke post-ID har vi en dynamisk endringsadresse som forblir 100% relevant! Slutten på nettadressen vil være annerledes for deg! Jeg har en DOM-velg, men du kan bruke firebug for å finne ut IDene til det tilpassede feltets divs. Diven som inneholder oppføringenImg-verdien for meg var # meta-62.

Vi må legge til en liten tittel også!

Lett peasy. Neste er den første "blokk". Alle disse blokkene er relativt de samme. Faktisk, etter første første e-post og nettsted, er de bare statiske tegn.

"

E-post / Nettstedsblokker

ID, 'e-post'))! = ") ?> 
 e-post: ID, 'e-post', sant); ?> ">ID, 'e-post', sant); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-56 "> Fjern eller Rediger  
 e-post'); ?>

Sterk bruk av egendefinerte felt ... Hvis setningen kontrollerer om det egendefinerte feltet har noe innhold, kan du kontrollere det mot "eller ingenting. Så hvis det ikke er lik ingenting (derfor har innhold), vis det. Ellers har det ikke noe innhold, vise en tillegg / rediger lenke.

Rett under dette, kopier den blokken og endre "email" i ALLE egendefinerte feltetiketter til "nettsted", og drep 'mailto:' i href-verdien. Ikke glem å endre #meta - ## linken! Mine var 57 for nettsiden feltet. Ikke glem den sterke taggen eller redigeringsverdien heller!

ID, 'nettsted'))! = ") ?> 
 e-post: ID, 'nettsted', sant); ?> ">ID, 'nettsted', sant); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-57 "> Fjern eller Rediger  
 nettsted'); ?>

Telefoner / Adresseblokker

Alt dette er nå det samme. Du trenger bare å endre fire ting per blokk. De egendefinerte feltnavnene, den sterke taggen, rediger lenkeens href-verdi og innhold. Her er den første blokken:

ID, 'telefonhjem'))! = ") ?> 
 Hjemmetelefon: ID, 'telefonhjem', sant); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-66 "> Fjern eller Rediger  
 Hjemmetelefon'); ?>

Gå videre og dupliser dette fire ganger, en gang for hvert tilpasset felt. Du bør ha en av disse blokkene for: Hjemme telefon, Arbeidstelefon, Mobiltelefon og adresse.

Notater Blokk

Til slutt må vi vise noen notater.

Merk: 

Rått! Det er all WordPress-koden som trengs! Legg merke til hvordan arbeidstelefonen er en lenke. Senere vil vi stile dette i CSS for å få et plussikon. For tiden skal det se slik ut:

Trinn 4 - CSS

CSS gjør nettstedet ser pent ut! La oss hoppe rett inn i den. Vi må begynne med en skitten reset, kroppsforsvar og bakgrunnen til wrappen. WrapperBg.png er et skjermbilde av den faktiske Apple-adresseboken slettet. Vi legger til alt vi trenger på toppen.

* margin: 0; polstring: 0; oversikt: 0;  kropp font-family: "Lucida Grande", Lucida, Verdana, sans-serif;  #wrapper bredde: 621px; høyde: 370px; margin: 50px auto; polstring: 24px 40px 55px 40px; bakgrunn: url (bilder / wrapperBg.png); 

Allerede, hvis du ser på forhåndsvisningen, er vinduformen allerede der. Deretter må vi finne ut overskriften. Heldigvis har jeg gjort det for deg! Jippi!

#header text-align: center; høyde: 55px;  #header h1 font-size: 12px; font-weight: normal; polstring: 5px;  #header h1 span bakgrunn: url (bilder / h1Spanbg.png) no-repeat left; polstring-venstre: 20px;  #searchform float: right; margin-høyre: 10px; bakgrunn: url (images / searchBg.png) no-repeat left 1px; bredde: 135px; høyde: 22px;  # s bakgrunn: 0; grense: 0; linjehøyde: 20px; bredde: 110px;  #searchsubmit background: 0; grense: 0; høyde: 20px; bredde: 15px; margin: 0; 

Heldigvis, det var alt som trengs for å gjøre toppteksten 100% ferdig.

Nå stiler vi gruppeseksjonen, som faktisk er kategoriene:

#wrapper h3 (bakgrunn: url (images / h3bg.png) repeat-x; høyde: 16px; skriftstørrelse: 10px; tekst-align: center; linjehøyde: 16px; font-weight: normal; grense-høyre: 1px solid grå;  #grupper bredde: 161px; flyte: venstre;  #groups li a background: url (images / groupsBg.png) no-repeat 10px 4px;  #grupper li a: svever bakgrunn: url (bilder / grupperBg.png) no-repeat 10px 4px grå;  #groups li, #mainSection li padding: 0; skriftstørrelse: 12px; overløp: skjult;  ul li a text-decoration: none; farge svart; polstring: 3px 0 3px 30px; margin: 0; skjerm: blokk; 

Og så kommer hoveddelen til å gli inn ved siden av gruppeseksjonen:

#mainSection width: 160px; flyte: venstre; stilling: relativ;  #mainSection li a background: url (images / h1SpanBg.png) no-repeat 10px 5px! VIKTIG;  #mainSection li a: hover bakgrunn: url (bilder / h1SpanBg.png) no-repeat 10px 5px grå! VIKTIG;  #livesearchpopup_box posisjon: absolutt; topp: 0; venstre: 0; Bredde: 158px! VIKTIG; høyde: 264px; grense: 0; 

Og med det blir alt presset inn i sine respektive områder, bortsett fra bunnteksten. Hvis du søker, går overlegget under innleggene som allerede er der. Så vi må posisjonere dem helt. Den siste velgeren ovenfor gjør dette.

Lastområdet må fortsatt styles. For å se dette fullt ut i gang, gå til en enkelt side ved å klikke på en kontakt. Før det ser slik ut:

#loadArea posisjon: relative; overløp: auto; høyde: 280px; flyte: venstre; bredde: 279px; polstring: 10px 10px 0 11px; skriftstørrelse: 10px;  #loadArea strong color: gray;  #loadArea #entryImg float: left; bredde: 48px; polstring-høyre: 10px;  #loadArea p linjehøyde: 16px; margin-bunn: 1em; klare: begge;  #loadArea a text-decoration: none; farge: grå;  #loadArea span.add bakgrunn: url (images / add.png) no-repeat right center; polstring: 3px 20px 1em; skjerm: blokk; tekstjustering: høyre; margin-topp: 1em;  #loadArea a.edit-link display: block; flyte: høyre; linjehøyde: 16px; bakgrunn: url (images / delete.png) no-repeat right 1px; polstring: 0 20px;  #loadArea h2 font-size: 16px; høyde: 55px;  p.notes border-top: 1px solid grå;  #load bakgrunn: url (bilder / ajaxLoader.gif); bredde: 32px; høyde: 32px; skjerm: blokk; margin: 0 auto; posisjon: absolutt; igjen: 134px; topp: 129px; 

Logg inn på wp-admin, og sjekk hvordan det ser ut på en enkelt side! #Load er for når vi får noe jQuery skjer. Men fordi det er lagt til i jQuery, gjør det ingen skade for å ha det her inne.

Den siste delen av CSS-delen er å fikse opp bunnteksten. Noen enkle CSS å gjøre dette. Det eneste interessante her er at du må flyte antall kort til høyre, som om du plasserte det fra venstre, ville det se rart ut når du var logget inn.

 #footer høyde: 20px; linjehøyde: 18px; skriftstørrelse: 11px; polstring: 3px; klare: begge;  #footer #totCards float: right; margin-høyre: 130px; tekstskygge: #fff 1px 1px 2px;  #footer a.addEntry margin-left: 165px;  #footer a.editButton margin-left: 145px; 

CSS er nå ferdig! Det betyr at nettstedet skal nå være fullt funksjonelt i en nettleser uten jQuery, i hovedsak ferdig. Men her på NETTUTS, liker vi å gå den ekstra mile. Så vi jobber med å få kontaktene lastet med AJAX på hjemmesiden i stedet for å laste siden på nytt.

Nå utfordrer vår utfordring noen problemer. Plugin for live-søk-popup bruker prototype, og dessverre har utvikleren ikke vurdert JS-bibliotekskonflikt. Så dette betyr at vi må bruke en lengre velger og definere noConflict-innstillingen. Ikke vanskelig, bare litt annerledes.

Åpne adressebok.js. Høyst definerer vi noConflict.

jQuery.noConflict ();

Dette er jQuery's metode for å sikre at alle jQuery-innbyggerkoden er 100% tout seule, unikt fra alle andre libarier.

Nå for dokumentet klar samtale. Som med noen jQuery, må du pakke inn koden i dette.

jQuery (dokument) .ready (funksjon () // jQuery kode her);

Denne opplæringen bruker en lignende metode for lasting til NETTUTS opplæringen Hvordan laste inn og animere innhold med jQuery. La oss starte med arrangementet.

jQuery ('# posts li a'). klikk (funksjon () // loading code ...);

Nå må vi definere en variabel som inneholder alt single.php innhold som er forskjellig fra index.php. Dette er alle de egendefinerte feltene.

var cardContent = jQuery (dette) .attr ('href') + '# indre innhold';

Som med en selvstendig respekterende AJAX-utvikler, hvem vil ikke vise at de kan sette en laster på innholdet deres! Lasteren selv har ingenting å gjøre med selve lasten, det vises bare mens lastingen pågår!

jQuery ( '# load') fjerne (.); jQuery ( '# loadArea'). append (''); jQuery ( '# load') fadeIn (300).;

Til slutt, for den faktiske lastingen. Disse funksjonene bruker variabelen, og erstatter hva som var i #loadArea div med innerinnholdet i single.php.

jQuery ('# loadArea'). fadeOut (300, loadTheContent); Funksjon loadNewContent () jQuery ('# loadArea'). fadeIn (600, hideLoader); funksjon hideLoader () jQuery ('# loadArea'). jQuery ('# load'). fadeOut ('normal'); returnere false;

Bra gjort!

Hvis du navigerer til hjemmesiden nå og klikker på et av navnene, lastes det automatisk! Det fader selv inn og ut! Jeg vil gjerne ha det til å fungere på resultatene av live-search-popup-pluginet, men det er lastet via prototype, så noen jQuery-applikasjoner vil ikke fungere for godt. Ellers konkluderer dette med enda en omfattende måte WordPress kan brukes til sitt fulle potensial som ... Ganske mye noe!