Share
La cosa bella di WordPress è che non limita il modo in cui il contenuto viene visualizzato, ma fornisce un "framework" di modi per farlo. Ancora meglio, è possibile cambiare il display in base al contenuto. Durante la scrittura di questo tutorial è stato difficile spiegare cosa sta succedendo ... Ma il modo migliore è questo: il post verrà visualizzato all'interno del ciclo in base al suo contenuto o alle differenze contestuali. In ogni caso, include file specifici che corrispondono alla categoria del post.
Questo tutorial presume che tu abbia un motore WordPress in esecuzione su un server a cui hai accesso per caricare file, scaricare file e navigare. Se vuoi eseguire un server locale sul tuo computer con un'installazione di wordpress, c'è un tutorial su questo qui per Windows, e qui per OS X.
Permettetemi di descrivere un po 'più in profondità ciò che faremo. Molti siti WordPress sono più di un semplice blog in questi giorni. Per coloro che integrano un blog, un sistema di notizie e un portafoglio, ci sono molti modi per distinguere tra ciascuno di questi post. Per cominciare, la quantità di meta informazioni che WordPress attribuisce a ciascun post è monumentale. Date, categorie, campi personalizzati, opzioni, tag, quantità di tag, ecc. Continua. Selezionando uno di questi, è possibile manipolare WordPress per visualizzare alcune cose anche quando cambia il contesto (ad esempio nome di una diversa categoria, tag diverso, ecc.). Il metodo che sto per insegnare è quando una determinata categoria è associata a un determinato post e quindi inserire un file diverso di conseguenza. Contestualmente! Se la contesto è un blog, mostralo come un post sul blog! Se la contesto è di un elemento del portfolio, lo mostra come un elemento del portfolio! Quindi, così via. L'hai capito. Andiamo!
Ho preparato un paio di file; style.css, index.php e alcune immagini (grazie ai siti TUTs!). Li costruiremo per creare il nostro prodotto finale. Scaricalo e posiziona la cartella nella cartella wp-content / themes. Ora vai su WordPress Dashboard, fai clic su "design" o "presentazione" se stai ancora vivendo nell'età della pietra e seleziona il tema "File di contesto". Grande! Ora è attivato, possiamo immergerci nella modifica dei file e andare avanti con il tutorial.
Perché il metodo funzioni, un gruppo di post deve avere una certa categoria. Per questo, ho dato ad alcuni di loro la categoria "Blog", alcuni "loroNews", e ho lasciato il resto come gruppo di portfolio, senza alcuna categoria specifica. Assicurati di farlo, altrimenti i risultati non saranno troppo vari. Quindi assicurati che i tuoi post (almeno per questo tutorial) siano raggruppati in qualche modo. È vitale!
Il modo funzionale per descrivere cosa succede dipende dalla categoria, un file specifico è incluso per il codice del ciclo. L'emirarchia si presenta così:
Un post sul blog finirà per assomigliare a questo:
Un articolo di News apparirà in questo modo:
E tutti gli altri post, o elementi del portfolio, assomiglieranno a questo:
Notate le piccole filigrane in alto a destra di ogni post? Questa è la prova che il nostro sistema funzionerà!
Comunque. Tra i tag del corpo, abbiamo bisogno di un'intestazione e un ciclo. Aggiungi questo:
"title =" Home ">
In seguito, dobbiamo ottenere la categoria per ogni post. Questo usa una sintassi Custom WordPress / PHP. Di solito è possibile utilizzare get_the_category per il valore, ma è possibile ottenere QUALSIASI informazione sulla categoria tramite questo metodo (va sotto o sostituisce il commento in PHP):
foreach ((get_the_category ()) as $ category) $ categoryName = $ category-> cat_name. ";
Ora con quello, dobbiamo controllare questo valore rispetto a un valore. Se hai chiamato le tue categorie "Blog" o "loroNews", ora possiamo controllare la variabile $ categoryName con esattamente quei nomi / valori. Ricorda che questo è nel ciclo, quindi questo controllo è fatto per ogni singolo post.
if ($ categoryName == 'Blog') include (TEMPLATEPATH. '/ blogTemplate.php'); elseif ($ categoryName == 'theirNews') include (TEMPLATEPATH. '/ newsTemplate.php'); else (include (TEMPLATEPATH. '/ portfolioTemplate.php'));
Ogni riga del 3 sopra è relativamente uguale. Il PHP '==' significa 'è uguale a'. È due = s perché quando si usa solo uno = definisce una variabile. Non quello che vogliamo. Se, elseif, e else ci sono alcuni tag PHP condizionali. Puoi utilizzare più istruzioni elseif se desideri avere più di tre file!
Con il PHP fatto, possiamo ora creare i file reali che sono inclusi sopra. La cosa interessante di questo modello è che puoi mantenere l'intero ciclo, categoria e include tutto all'interno di un set di tag PHP. Efficienza!
Questi file sono fondamentalmente ciò che va nel ciclo, costituito da tag modello di loop. Quindi possiamo assegnare ogni categoria con la filigrana in alto a destra, una classe diversa viene applicata a ciascun file di categoria diverso. Altrimenti, questa è tutta roba di base su WordPress. Crea un nuovo file chiamato "blogTemplate.php" nella cartella dei temi, e riempilo con qualche bontà PHP!
"title ="">
Pubblicato da | registrato sotto
"> Ulteriori informazioni | |
Solo una cosa da notare. So che è una pessima pratica per motivi SEO, ma the_content (") ha i 2 in modo che non venga visualizzato alcun 'read more'. Il link" Leggi altro "nel postMetaData compensa!
Questo è abbastanza minimalista. Anche l'intestazione è più piccola!
Visita la fonte |
Infine, l'ultimo file modello secondario.
; ?>/images/portfolio.png )
"title ="">
"> Visualizza progetto
E questo è tutto il PHP / HTML di cui avrai bisogno! Se carichi la tua pagina di WordPress, ora assomiglierà a qualcosa come in basso:
Nota che puoi già vedere le differenze in ogni post!
Ora per renderlo carino! Iniziamo con un codice predefinito. Questo è per impostare un aspetto di base, sbarazzarsi di cose che non vogliamo e tag stile generale (cioè intestazioni, ecc).
a decorazione del testo: nessuna; colore: # b93a00; * margin: 0; padding: 0; body background: # 000; colore: # 5b5b5b; famiglia di font: "Lucida Grande", Lucida, Verdana, sans-serif; font-size: 75%; h1, h2, h3, h1 a, h2 a, h3 a font-family: "Trebuchet MS", Arial, Helvetica; colore: #fff; letter-spacing: -2px; decorazione del testo: nessuna; h1 a: hover, h2 a: hover, h3 a: hover color: # 8b8b8b; h2 font-size: 35px; margin-bottom: 10px; h3 font-size: 20px; colore: # a8a8a8; letter-spacing: -1px; imbottitura-fondo: 20px;
Ora abbiamo bisogno di una struttura per la nostra pagina.
# wrapper margin: 0 auto; larghezza: 500 px; font-size: 11px; #header height: 150px; famiglia di font: Georgia, "Times New Roman", Times, serif; border-bottom: 1px solido; border-color: # 222; #content padding-top: 20px; .post margin-bottom: 40px; altezza minima: 150 px;
Successivamente aggiungeremo le piccole filigrane blackground in:
.blog background: url (images / blogbg.png) no-repeat in alto a destra; .portfolio background: url (images / portfoliobg.png) no-repeat in alto a destra; altezza minima: 150 px; .news background: url (images / newsbg.png) no-repeat in alto a destra; padding-right: 100px;
Il nostro tema sta prendendo forma! Tutto ciò che rimane sono alcuni stili di immagine e lo stile di postMetaData!
#header h1 font-size: 50px; padding-top: 30px; #header p.description font-style: italic; font-size: 16px; .post img float: left; padding-right: 10px; imbottitura-fondo: 20px; .post p padding-bottom: 15px; .postInfo padding: 10px; .postMetaData padding: 10px; sfondo: # 141414; margine: 10px 0; larghezza: 480 px; blocco di visualizzazione; chiaro: entrambi; .postMetaData a color: # 06f;
L'ultima sezione di codice necessaria, il tuo tema dovrebbe ora apparire completo! Questo tutorial ti insegna un paio di cose. Un modo versatile per ottenere informazioni sulle categorie, come utilizzarle in combinazione con tag condizionali e raggruppare PHP!
La scorsa settimana ti ho portato a creare un Dashboard / Desktop dall'aspetto pulito. Ragazzi, sarete totalmente FLIP quando sentirete cosa c'è in questo tutorial pieno zeppo! Maggiore attenzione al Dashboard (giuro che è più bello di quanto sembri e richiede un sacco di codice), e andrò anche a capire come creare uno stack (separato dal dock, mi dispiace jqDock non mi piace accoccolato
Continua a leggere
jQuery aggiunge un sacco di fantastiche funzionalità ai tuoi siti web. Può fare una serie di cose, dall'animazione all'AJAX. Di solito è disapprovato fare affidamento su jQuery per progettare i tuoi siti, ma è divertente scatenarsi di tanto in tanto. In questo tutorial ti insegnerò come usare jQuery per creare una Dashboard completamente codificata, proprio come Leopard! Questo può essere utile per nascondere un sacco di gadget o widget per i quali non hai spazio!
Continua a leggere
CSSEdit è un'altra fantastica applicazione di sviluppo web, che prende il WebKit di Apple dai regni per offrire una fantastica esperienza di editing CSS visuale in tempo reale. Ma è proprio così! Le persone lo sanno solo come editor CSS visuale, quando in realtà è molto di più! Uso questi 5 fantastici suggerimenti per mantenere il mio flusso di lavoro veloce e scorrevole.
Continua a leggere
in Lavorare con CMS di Harley
WP_Query è un potente strumento per controllare ciò che esce dal tuo ciclo. Oggi vi insegnerò tutto su come usarlo per creare un tema a 3 colonne con un giornale che abbia tutti i post principali del blog nella colonna principale e, a lato, una serie di post con una determinata categoria. Useremo il 960 framework CSS per il layout di base e il reset del nostro tema, taglierà molto lavoro su ciò che è necessario!
Continua a leggere
Accentsconagua
; ?>/images/portfolio.png )