Come tutti sappiamo, WordPress è così esteso che puoi usarlo praticamente per qualsiasi cosa. Ci sono anche articoli su siti con titoli pazzi come 101 usi alternativi per WordPress. Così ho pensato, hey, perché no? Scommetto che molte persone vogliono creare le proprie Web App, ed essenzialmente WordPress può farlo per te. In questo video tutorial, faremo una rubrica online.

* Nota del redattore: abbiamo un trattamento speciale per te oggi. Questo tutorial era originariamente destinato a far parte del nostro programma NETTUTS +. Tuttavia, il programma ha richiesto molto più tempo per il lancio rispetto a quanto originariamente previsto. Non preoccuparti, sta ancora arrivando! Fino ad allora, goditi questo su di noi!

Questo tutorial è stato un impegno enorme per Harley. Quindi, per favore, se non ti dispiace, prenditi un momento per farlo! Grazie!

Leggi la nostra intervista con Harley!

Prefazione

Questa rubrica avrà i lavori. Caricamento Ajax, roba amministrativa condizionale, shiz. Questo, purtroppo, significa che dobbiamo soddisfare alcuni requisiti, alcune delle quali il tema ha bisogno. Una copia di jQuery per iniziare sarebbe utile. Oltre a questo, il tema ha bisogno di alcune immagini! Scarica questo zip, che successivamente espanderai nella directory dei temi. Infine, una copia del plug-in Live Search che ho modificato leggermente per ragioni CSS. Originale qui

E naturalmente, come sempre, avrai bisogno di un blog WordPress in esecuzione a cui hai accesso. Ci sono tutorial sull'esecuzione di Wordpress localmente qui per Windows, e qui per OS X. A causa della natura del contenuto del post, consiglio vivamente di iniziare una nuova directory WordPress.

Quindi dovresti avere: jQuery, immagini, plug-in di ricerca live e una directory di WordPress. Super.

Passaggio 1: organizzazione dei file.

Iniziamo creando i file necessari. Nella directory wp-content / themes del tuo blog WordPress, crea una cartella chiamata 'addressBook'. Aggiungi il file jQuery e le immagini in questa nuova cartella. Il 'live-search-popup' va nella cartella wp-content / plugins, per ovvi motivi.

Ora che i file scaricati sono a posto, dobbiamo creare altri file. Nella directory del tema, creare: addressBook.js, index.php, single.php e style.css. Mentre abbiamo a che fare con questi file, creeremo il meta del tema. Apri style.css e incolla + modifica questo:

/ * Nome del tema: URI del tema AddressBook: http://net.tutsplus.com/ Descrizione: Utilizzo di WordPress come Rubrica Versione: 1.0 Autore: Harley Alexander Autore URI: http://www.baffleinc.com/ * /

Ora hai creato alcune informazioni di base per riconoscere WordPress, vai alla pagina di selezione del tema (Design> Temi) in wp-admin e fai clic sul nuovo blocco AddressBook. Per ora (se stai usando una versione di WP che mostra un'anteprima prima dell'attivazione) Sarà vuota. Non preoccuparti però! Attivalo!

Passaggio 2: Pubblica contenuto

Ora tutti i file sono lì e organizzati, possiamo passare alla creazione di alcuni post di esempio per noi. Il motivo per cui questo metodo funziona è perché WordPress consente campi personalizzati. I campi personalizzati sono proprio questo: l'area del contenuto personalizzato da compilare. Un campo del contenuto del post è diverso dal campo del tag poiché i campi personalizzati sono diversi dai campi della categoria. Il motivo per cui è così fantastico è perché significa che possiamo allegare parti separate di informazioni a un post senza dover dolorosamente pescarle fuori dal contenuto. Passa alla Dashboard e scrivi un nuovo post.

Useremo:

• Titolo come il nome della persona
• Pubblica contenuti come le note per la persona
• categorie come gruppo della persona (lavoro / casa correlata)
• Campi personalizzati Per la casa, il lavoro e i telefoni cellulari. Sito web e email, indirizzo e infine un'immagine di loro.

Ora i campi personalizzati non sono così scoraggianti come suonano devi dare loro un nome (chiave) e un certo contenuto (valore). Il bello di loro è che, una volta che sono stati usati una volta, è possibile riselezionarli da un menu a discesa in modo da non confondere i nomi per sbaglio. Inoltre, non tutti i campi personalizzati sono necessari, quindi puoi lasciare un po 'di spazio vuoto se non hai quelle informazioni specifiche (in seguito, quando avremo un argomento, creeremo effettivamente un link di modifica / aggiunta.

Dopo aver aggiunto un paio di post fittizi, possiamo passare alla visualizzazione del contenuto tramite file modello.

Passaggio 3 - Codice WordPress

Questa rubrica (sorpresa a sorpresa) sarà modellata sulla rubrica di Apple:

Sfocato per ovvi motivi, quell'immagine mostra anche quali sezioni sono, quindi è più facile visualizzare durante la codifica! Inizieremo con index.php.

index.php

Questa pagina è ciò che tutti vedranno per prima quando verranno nella tua rubrica, quindi deve essere informativo. Come l'anteprima sopra, tutte le pagine avranno lo stesso layout - Single.php avrà lo stesso aspetto e aspetto, in modo da creare quell'effetto mai ricaricato. Questo è solo per i browser JS-less, in modo che degradi al 100% con grazia. Intendo al 100%. Il jQuery in questo è solo per velocizzare il caricamento del contenuto e (eventualmente) la funzione di ricerca dal vivo. La rubrica deve comunque funzionare senza questi prodotti!

Per iniziare un tema WordPress, ho sempre alcune informazioni di base sull'intestazione.

Cambia cosa è tra i tag del titolo in semplicemente "Rubrica". Sotto il collegamento del foglio di stile, aggiungi il seguente codice, per inserire l'eventuale codice JavaScript:

Dal momento che tutte le informazioni dell'intestazione sono state fatte, possiamo passare alla codifica di un layout strutturato. Tra i tag del corpo, aggiungi questo:

Queste sezioni conterranno tutti i loop del post. Ovviamente. Iniziamo con l'intestazione. Consiste di una h1 per il titolo e il modulo di ricerca. Sostituisci il commento:

Rubrica
 
 
 
 
 
 

Il modulo di ricerca in realtà non è ancora il plug-in. Questo perché abbiamo solo bisogno dei risultati, giusto? Quindi usiamo una funzione diversa nella mainSection che si sovrappone all'elenco originale per apparire come se stesse filtrando attraverso tutti i dati. Lo span che avvolge il testo h1 è così che possiamo aggiungere una piccola icona favicon alla sinistra di.

La sezione gruppi è ancora più facile e più breve.

gruppi
 
 
"> Tutto
  

La sezione principale, o dove va la lista dei nomi, consiste del loop e dei risultati della ricerca live che si sovrappongono a questo elenco. Il parametro exclude significa che non viene visualizzato "non categorizzato" perché una categoria vuota è fastidiosa!

Nome
 
  
">
  
 

Ho notato che ho ridotto il loop a una quantità molto piccola. Di solito questa sarebbe una cattiva pratica, ma per questa applicazione di WordPress non è effettivamente necessaria. Il parametro query_posts forza il ciclo a visualizzare 9999 post anziché il set predefinito di dashboard. La funzione è inclusa in modo sicuro, solo se il plugin è attivato. Che faremo ora. Apri la sezione plugins del Dashboard e attiva il plug-in live-popup di ricerca. Se non è lì allora non hai scaricato e installato il plugin. Installalo ora.

Il loadArea sulla prima pagina è essenzialmente vuoto, quindi abbiamo solo bisogno di un titolo esplicativo!

Seleziona una voce da visualizzare!

Finalmente il piè di pagina. Questo blocco ha la maggior quantità di codice ed è il primo incontro con lo stato di accesso condizionato! Spiegherò a poco a poco.

 /wp-admin/post-new.php "title =" Aggiungi voce "> /wp-admin/post.php?action=edit&post=ID; ?> "title =" Modifica questa scheda ">  get_var ("SELECT COUNT (*) FROM $ wpdb-> posts WHERE post_status = 'publish'"); se (0 < $totcards) $totcards = number_format($totcards); echo $totcards.' cards'; ?>

Quindi i primi due tag di ancoraggio sono condizionali su $ user_ID. Questa variabile controlla se un utente ha effettuato l'accesso (in questo caso che dispone dei privilegi di gestione), quindi visualizza alcuni pulsanti aggiungi e modifica. Lo strano php SQL alla fine ottiene il numero totale di schede di contatto, quindi viene visualizzato proprio come Apple Address Book.

Questo è tutto per l'indice! Ora lavoreremo su single.php, quindi apriamolo e inizieremo!

single.php

index.php dovrebbe essere ancora aperto, quindi poichè essenzialmente single.php è lo stesso layout, copia TUTTO il codice index.php su single.php e salvalo.

Perché è single.php, per impostazione predefinita il ciclo mostrerà solo un post. Per contrastare ciò, abbiamo già aggiunto una funzione query_posts in index.php.

Single.php differisce dall'indice principalmente con il codice compreso tra loadArea. Invece di h2, il ciclo lo riempirà.

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

Il contenuto del Loop, da qui in poi è composto da blocchi di PHP, che sono relativamente identici (barra l'immagine e le note). $ Query_string è un modo breve e sporco di ripristinare i parametri del loop per visualizzare un post per single.php. Il post inizia con un'immagine.

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

Codice pazzo! Il primo "se" controlla se quel campo personalizzato ha qualsiasi contenuto, confrontandolo con il valore di nulla. L'istruzione "if", quindi annidata, verifica se l'amministratore ha eseguito l'accesso e, in tal caso, fornisce un collegamento per modificare il campo personalizzato. Quello strano (... & post =ID; ?> # Meta-62). Usando l'ID post abbiamo un URL che cambia dinamicamente e che rimane al 100% pertinente! La fine dell'URL sarà diverso per te! Ho un selettore DOM, ma puoi usare firebug per trovare gli ID dei div del campo personalizzato. Il div contenente il valore entryImg per me era # meta-62.

Abbiamo bisogno di aggiungere anche un piccolo titolo!

Vai tranquillo. Il prossimo è il primo "blocco". Tutti questi blocchi sono relativamente gli stessi. Infatti, dopo la prima e-mail e il sito Web iniziali, sono solo caratteri statici.

"

Email / blocchi di siti web

ID, 'email'))! = ") ?> 
 E-mail: ID, "email", vero); ?> ">ID, "email", vero); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-56 "> Rimuovi o Modifica  
 E-mail'); ?>

Uso intensivo di campi personalizzati ... L'istruzione if controlla se il campo personalizzato ha qualsiasi contenuto, controllandolo con "o nulla. Quindi se non è uguale a nulla (quindi ha contenuto), visualizzalo. Altrimenti non ha contenuto, visualizzare un collegamento Aggiungi / Modifica.

Proprio sotto questo, copia quel blocco e cambia "email" in TUTTI i tag di campo personalizzati in "sito web", e uccidi "mailto:" nel valore href. Non dimenticare di cambiare il link #meta - ##! Il mio era 57 per il campo del sito web. Non dimenticare neanche il tag forte o il valore del post di modifica!

ID, "sito web"))! = ") ?> 
 E-mail: ID, "sito web", vero); ?> ">ID, "sito web", vero); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-57 "> Rimuovi o Modifica  
 Sito web'); ?>

Telefoni / blocchi di indirizzi

Tutti questi sono ora gli stessi. Hai solo bisogno di cambiare quattro cose per blocco. I nomi dei campi personalizzati, il tag forte, il valore href del link di modifica e il contenuto. Ecco il primo blocco:

ID, 'phone-home'))! = ") ?> 
 Telefono di casa: ID, 'phone-home', vero); ?> /wp-admin/post.php?action=edit&post=ID; ?> # meta-66 "> Rimuovi o Modifica  
 Telefono di casa'); ?>

Vai avanti e duplica questo quattro volte, una volta per ogni campo personalizzato. Si dovrebbe avere uno di questi blocchi per: telefono di casa, telefono di lavoro, telefono cellulare e indirizzo.

Blocco Note

Infine, dobbiamo mostrare alcune note.

Nota: 

Eccezionale! È tutto il codice WordPress necessario! Nota come il telefono di lavoro è un collegamento. Più avanti modificheremo questo in CSS per avere un'icona più. Attualmente dovrebbe assomigliare a questo:

Passaggio 4: CSS

CSS rende il sito molto carino! Facciamo un salto dentro. Dobbiamo iniziare con un reset sporco, la defenizione del corpo e lo sfondo dell'involucro. WrapperBg.png è uno screenshot della vera e propria Rubrica Indirizzi eliminata. Aggiungiamo tutte le cose di cui abbiamo bisogno in cima.

* margine: 0; padding: 0; contorni: 0;  body font-family: "Lucida Grande", Lucida, Verdana, sans-serif;  #wrapper width: 621px; altezza: 370 px; margine: 50px auto; imbottitura: 24px 40px 55px 40px; background: url (images / wrapperBg.png); 

Già, se guardi l'anteprima, la forma della finestra è già lì. In seguito, dobbiamo capire l'intestazione. Fortunatamente, l'ho fatto per te! Sìì!

#header text-align: center; altezza: 55 px;  #header h1 font-size: 12px; font-weight: normal; imbottitura: 5px;  #header h1 span background: url (images / h1Spanbg.png) no-repeat left; padding-left: 20px;  #searchform float: right; margin-right: 10px; background: url (images / searchBg.png) no-repeat left 1px; larghezza: 135 px; altezza: 22px;  # s background: 0; confine: 0; altezza della linea: 20px; larghezza: 110 px;  #searchsubmit background: 0; confine: 0; altezza: 20px; larghezza: 15px; margine: 0; 

Fortunatamente, questo è tutto ciò che serve per rendere l'intestazione 100% fatto.

Ora modifichiamo la sezione dei gruppi, che in realtà sono le categorie:

# wrapper h3 background: url (images / h3bg.png) repeat-x; altezza: 16px; font-size: 10px; allineamento del testo: centro; altezza della linea: 16px; font-weight: normal; border-right: 1px grigio fisso;  #groups width: 161px; fluttuare: a sinistra;  #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 grigio;  #groups li, #mainSection li padding: 0; font-size: 12px; overflow: nascosto;  ul li a text-decoration: none; colore nero; imbottitura: 3px 0 3px 30px; margine: 0; blocco di visualizzazione; 

E poi la sezione principale da inserire accanto alla sezione del gruppo:

#mainSection width: 160px; fluttuare: a sinistra; posizione: relativa;  #mainSection li a background: url (images / h1SpanBg.png) no-repeat 10px 5px! IMPORTANTE;  #mainSection li a: hover background: url (images / h1SpanBg.png) no-repeat 10px 5px grigio! IMPORTANTE;  #livesearchpopup_box position: absolute; inizio: 0; a sinistra: 0; larghezza: 158 px! IMPORTANTE; altezza: 264 px; confine: 0; 

E con questo, tutto è spinto nelle rispettive aree, tranne il footer. Se cerchi, l'overlay passerà sotto i post che sono già presenti. Quindi dobbiamo posizionarli assolutamente. L'ultimo selettore sopra fa questo.

L'area di carico deve ancora essere stilizzata. Per vederlo pienamente in azione, vai a una singola pagina facendo clic su un contatto. Prima che assomigli a questo:

#loadArea position: relativo; overflow: auto; altezza: 280 px; fluttuare: a sinistra; larghezza: 279 px; imbottitura: 10px 10px 0 11px; font-size: 10px;  #loadArea strong color: gray;  #loadArea #entryImg float: left; larghezza: 48px; padding-right: 10px;  #loadArea p line-height: 16px; margin-bottom: 1em; chiaro: entrambi;  #loadArea a text-decoration: none; colore: grigio;  #loadArea span.add background: url (images / add.png) no-repeat right center; imbottitura: 3px 20px 1em; blocco di visualizzazione; allineamento del testo: giusto; margin-top: 1em;  #loadArea a.edit-link display: block; float: giusto; altezza della linea: 16px; background: url (images / delete.png) no-repeat right 1px; imbottitura: 0 20px;  #loadArea h2 font-size: 16px; altezza: 55 px;  p.notes border-top: 1px grigio fisso;  #load background: url (images / ajaxLoader.gif); larghezza: 32 px; altezza: 32px; blocco di visualizzazione; margine: 0 auto; posizione: assoluta; a sinistra: 134 px; superiore: 129 px; 

Accedi a wp-admin e controlla come appare su una singola pagina! Il #load è per quando succederà qualche jQuery. Ma poiché viene aggiunto in jQuery, non fa male averlo qui.

L'ultimo bit della sezione CSS è quello di sistemare il footer. Alcuni semplici CSS per farlo. L'unica cosa interessante qui è che devi far fluttuare il numero di carte a destra, come se lo avessi posizionato da sinistra sarebbe sembrato strano quando ti sei loggato.

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

Il CSS ora è tutto finito! Ciò significa che il sito dovrebbe essere completamente funzionante in un browser senza jQuery, sostanzialmente completato. Ma qui a NETTUTS, ci piace fare il possibile. Quindi lavoreremo per caricare i contatti con AJAX sulla home page invece di ricaricare la pagina.

Ora la nostra sfida pone alcuni problemi. Il plug-in live-search-popup utilizza Prototype e purtroppo lo sviluppatore non considera il conflitto della libreria JS. Questo significa che dobbiamo usare un selettore allungato e definire l'impostazione noConflict. Non difficile, solo un po 'diverso.

Apri addressBook.js. In cima, definiamo il noConflict.

jQuery.noConflict ();

Questo è il metodo di jQuery per assicurarsi che tutto il codice jQuery nativo sia al 100% tout seule, unico da tutte le altre librerie.

Ora per la chiamata pronta per il documento. Come con qualsiasi jQuery, è necessario avvolgere il codice in questo.

jQuery (document) .ready (function () // jQuery Code here);

Questo tutorial usa un metodo simile per caricare il tutorial di NETTUTS Come caricare e animare il contenuto con jQuery. Iniziamo con l'evento.

jQuery ('# posts li a'). click (function () // loading code ...);

Ora dobbiamo definire una variabile che contenga tutto il contenuto di single.php che differisce da index.php. Questo è tutti i campi personalizzati.

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

Come con qualsiasi sviluppatore AJAX che si rispetti di sé, che non vuole mostrare di poter mettere un caricatore sul proprio contenuto! Lo stesso caricatore non ha nulla a che fare con il caricamento effettivo, è appena mostrato mentre il caricamento è in corso!

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

Infine, per il caricamento effettivo. Queste funzioni usano la variabile e sostituiscono ciò che era nel div #loadArea con il contenuto interno di single.php.

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

Molto bene!

Se ora vai alla home page e fai clic su uno dei nomi, verrà caricato automaticamente! Si dissolve anche dentro e fuori! Mi piacerebbe che questo funzionasse sui risultati del plug-in live-search-popup, tuttavia è caricato tramite prototipo, quindi qualsiasi jQuery applicato non funzionerà troppo bene. Altrimenti, questo conclude ancora un altro modo in cui WordPress può essere usato per il suo pieno potenziale come ... Praticamente qualsiasi cosa!