Costruisci un layout in stile Giornale di base con Wordpress e jQuery

I modelli di Grid / Giornale / Magazine stanno diventando sempre più predominanti nella community di wordpress skin e theme. Sembrano di classe, ma può essere scoraggiante sapendo da dove cominciare. In questo tutorial utilizziamo la potenza di jQuery per creare un layout di griglia con intestazioni che degradano le dimensioni!

Prefazione

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.

Step 1 - Iniziamo con le necessità ...

Crea una nuova cartella nella cartella "wp-content / themes /" e assegnagli il nome che vuoi dare al nome della skin che stiamo per realizzare. Crea 2 nuovi file in questa nuova cartella, uno chiamato 'index.php' e l'altro 'style.css'. Stiamo per iniziare con un codice wordpress di base. Questo 'codice base' è ciò che comincio ogni volta che creo un pieno skin wordpress, perché include la maggior parte delle informazioni necessarie. L'ho tenuto qui perché potresti volerlo sviluppare a pieno. Uso anche un foglio di stile predefinito per i miei temi, quindi copia questo snippet di codice nel tuo 'style.css' e modifica il contenuto rispettivamente. Il foglio di stile è collegato con la linea:

Avrai anche bisogno di 2 file JavaScript, uno dei quali è una copia di jQuery e un file .js vuoto chiamato myTheme.js. Non dimenticare di inserire questi in questo nel tuo capo elemento:

Non dimenticare di cambiare il nome di jQuery rel se stai usando un pacchetto diverso per me, che probabilmente sei. '' myTheme.js dovere vieni sotto il link jQuery, non sopra.

Nota: jQuery 1.2.6 è anche fornito con Wordpress 2.2 e versioni successive, quindi se non vuoi scaricarlo, puoi trovarlo in wp-includes / js / jquery / jquery.js. Per includere questo documento jQuery, usa questo al posto di jQuery rel sopra. Avrai comunque bisogno di myTheme.js!

Passaggio 2: il codice PHP / Wordpress / XHTML.

Dopo aver selezionato e attivato il tuo nuovo tema, apri "index.php" con il tuo editor preferito e prendi il codice!

Ecco tutto il XHTML/PHP/ Codice Wordpress, abbiamo bisogno di impostare il contenuto e i metadati per ogni post. Incolla o digita in mezzo il html apri e chiudi i tag. Lo spiegherò poco a poco sotto!

     Pubblica dettagli
 Pubblicato:  a .
 Scritto da: .
 Numero di commenti: .
 Pubblicato in: . 
 
  
   
<

divs

Il wrapper div fondamentalmente avvolge l'intera cosa in modo che possiamo spiegarlo meglio in seguito. Tutti i div sono piuttosto auto-esplicativi, e ho anche commentato la parte finale dei div, quindi li salterò mentre spiegherò. In breve, ho avvolto tutto di conseguenza quindi è facile da stile. il .left div è la colonna di sinistra, il. div è la colonna di destra, il .entry div è l'entrata del post, così via e così via. Ho usato le classi all'interno del ciclo, come se ci fossero più di un post, l'id di backup e creare un errore di convalida.

Il famoso Wordpress Loop.

Se non ottieni quello che è, torna alla scuola di wordpress. In pratica, scorre le informazioni del database rispetto alle chiamate effettuate all'interno del ciclo. Se chiedi il titolo, il loop cercherà nel database il titolo per te.

MetaData del post.

Pubblica dettagli
Pubblicato: a .
Scritto da: .
Numero di commenti: .
Pubblicato in: .

Ora per la roba nitida e grintosa. Tutto sopra contiene le informazioni che vogliamo mostrare sul post. Nel rispettivo ordine, chiediamo;

Data e ora - Chiediamo la data nel formato di l, jS F, Y (ad esempio domenica, 8 giugno 2008), e il tempo nel formato di g: i a (ad es. 16:45). Ho usato il tempo(); due volte, perché se usiamo l'appuntamento(); per chiedere la data, lo mostrerà solo una volta al giorno. Se hai postato numerosi post nello stesso giorno, la data non verrà mostrata una volta per post, ma una volta sul primo post della giornata.
Autore - Questo è auto-esplicativo, stiamo semplicemente chiedendo l'autore del post.
Numero di commenti - Ciò richiede il numero di commenti su un post. Se il post non ha commenti, restituirà il valore 'none'. Se ne ha uno, restituirà il valore '1' e, sì, lo hai indovinato! Se ne ha più di uno, restituirà un valore come "21" o "6", tutto a seconda del numero di commenti che il post ha.
Categoria - the_category (); chiede al database le categorie a cui è stato assegnato un post. Grazie a wordpress, non dobbiamo preoccuparci di utilizzare un ciclo foreach completo e raw come il (','); separa le categorie con una virgola per noi. Grazie Wordpress!

Il contenuto.

Fa più auto-esplicativo di quello? Chiediamo il titolo (avvolto in a h2 elemento in modo che possiamo adattarlo di conseguenza) e il contenuto (incluso in a .iscrizione div in modo che tutto il contenuto sia annidato nel proprio div per facilitarne lo styling e l'accesso.). 'more ...' tra parentesi sono per quando usi il tag nell'editor di post wordpress.

Andiamo ... La fine del ciclo!

I coniglietti di codice dovrebbero ottenere questo ... È ancora il ciclo di base! Si chiude fuori dal ciclo in modo che solo le "funzioni" contenute all'interno del ciclo vengano eseguite più e più volte.

Passaggio 3: il CSS: Layout.

Accidenti! Hai sfidato tutto il codice wordpress di cui abbiamo bisogno per questo tutorial! Molto bene! Dovrebbe sembrare qualcosa di brutto come questo:

Nota: ho usato il contenuto del mio server locale (che è il mio blog) come contenuto di riempimento, quindi il tuo contenuto non rispecchierà il mio.

Ora che abbiamo tutte le funzioni xhtml e php di mezzo, possiamo passare a renderlo bello con i CSS! Gioia!

Apri ancora "style.css" con il tuo editor preferito, e se non l'hai già fatto, incolla questo codice in esso. Ma avresti dovuto farlo comunque, altrimenti non avresti potuto attivare il tema!

In questo tutorial, utilizzo la bellezza di "float" e "clear" di css per far fluttuare i dettagli del post (o metadati, qualunque sia il nome che si desidera chiamare), e il contenuto affiancato e un post dopo l'altro. Ecco il codice di layout di base: (NOTA: Questo NON renderà la tua pagina abbastanza SOLO ancora.)

/ * ----- LAYOUT ----- * / #wrapper width: 600px; margine: 0 auto;  .post clear: both; larghezza: 600 px;  .post .left width: 180px; fluttuare: a sinistra; padding-right: 20px;  .post .right width: 400px; float: giusto; imbottitura: 0 25px 20px;

Semplice:

#wrapper - Questi attributi posizionano tutto ciò che abbiamo nel mezzo della nostra pagina, e con una larghezza di 600px.
#inviare - i post possono accidentalmente salire accanto a un post precedente malamente fluttuato o uno che non ha abbastanza contenuti perché stiamo usando galleggianti. L'attributo 'clear' si assicura che sia spostato fino in fondo all'elemento precedente, indipendentemente da cosa.
.left e .right div - Questi sono flottanti rispettivamente a sinistra e a destra, perché è questo che li fa andare fianco a fianco! Se non abbiamo impostato le larghezze delle div, questa tecnica non funzionerebbe. Ho reso la colonna dei dettagli del post leggermente più sottile della colonna del contenuto, perché vogliamo maggiore attenzione e più spazio per il contenuto (considerando che nella colonna "post details" è presente meno contenuto).
Ho fatto i miei calcoli e ho fatto in modo che la larghezza totale aumentasse fino a 600, quindi entrambe le colonne si adattano bene al div genitore .post:180px + 20px (padding, quindi abbiamo una certa spaziatura) + 400px = 600px

Sìì! Ora, rendiamola carina!

Passaggio 4: CSS: Styling.

Quindi abbiamo ridotto il layout dello scheletro, ma sembra ancora un po 'brutto:

Questo è quando usiamo il vero potere dei nostri fogli di stile a cascata. Copia o digita quanto segue nel tuo style.css sotto il precedente codice 'Layout':

/ * ----- STYLES ----- * / body font: 75% / 18px Georgia, "Times New Roman", Times, serif; background-color: # e4e4e4;  a color: # 006082; decorazione del testo: nessuna;  .post .left text-align: right; colore: # 898989;  .post .left p.postmetadata strong display: block; text-transform: maiuscolo;  .right background-color: #fff; altezza minima: 150 px;  .entry color: # 3c3c3c;  .entry p img padding: 0 10px 7px 0; fluttuare: a sinistra;  a.more-link display: block; padding-top: 10px; text-transform: maiuscolo;

La ripartizione.

Questa è una manciata di codice da elaborare e potrebbe sembrare scoraggiante, ma in realtà è davvero semplice! Poiché la maggior parte di voi è probabilmente adeguata ai CSS, sarò veloce e scattante attraverso questa parte.

corpo - Qui è che impostiamo la dimensione standard di testo / carattere e il colore di sfondo
un - Rende tutti i collegamenti belli.
.post - Cambia il colore del testo in una sfumatura grigia e allinea i paragrafi a destra.
.post. p.postmetadata forte - Fa risaltare i "Dettagli Post" capitalizzando e cambia l'elemento forte in un elemento di blocco per allineare i dettagli del post con i paragrafi di contenuto.
.destra - Questo è un po 'di confusione, quindi lo spiegherò in modo approfondito. Ovviamente, il colore di sfondo è ora bianco, in modo che il contenuto salti fuori dalla pagina. L'attributo 'min-height' però è tale che se il contenuto del post è in realtà più breve dei dettagli del post, non interromperà il colore bianco continuo lungo la pagina.
.iscrizione - Rende il testo del contenuto un grigio scuro.
.voce p img - consente di riprendere immagini all'interno dell'area del contenuto e consente al testo di avvolgere l'immagine.
a.more-link - La classe "più-link" viene automaticamente aggiunta da wordpress per individuare il "di più ..." che abbiamo aggiunto alla funzione "the_content ()". Lo trasformiamo in maiuscolo, quindi gli utenti presumono che non sia un collegamento regolare / esterno e che gli diano anche un po 'di spazio.

Quel CSS dovrebbe portarlo ad assomigliare a questo:

Passaggio 5: jQuery.

Così è molto importante sembra tutto buono senza JavaScript - Quanto sopra ci compensa qui. Ma per creare il nostro vero stile quotidiano, intestazioni degradanti, abbiamo bisogno di un gustoso jQuery! Apri "myTheme.js" e lascia che si rompano! Quello che vogliamo ottenere, è qualcosa di simile a questo (mockup di Photoshop):

Nota la differenza? Aumenteremo la dimensione della prima intestazione del post "eroe" e cambieremo anche il colore.

Quindi, il secondo post o "cattivo" sarà leggermente grigio con una dimensione ancora più piccola, mentre i post successivi rimarranno di dimensioni uniformi.

Affronteremo questo problema aggiungendo le classi 'eroe' e 'villain' al nostro primo e secondo'post ', rispettivamente, a cui applicheremo un piccolo CSS aggiuntivo. Aggiungiamo la classe ai div '.post' e non al h2 elementi perché vogliamo modificare anche alcuni dei contenuti contenuti, ad esempio la dimensione del contenuto e l'icona aggiuntiva sul link più nel post "eroe". Perché eroi e cattivo chiedi? Perché il Cattivo viene sempre dopo l'Eroe. Ed è un concetto facile da capire.

Sembra complicato, ma in realtà è solo 4 righe di codice (distanziato). Tutto questo va a "myTheme.js":

$ (document) .ready (function () $ (". post: first"). addClass ("hero"); $ (". post: nth-child (2)"). addClass ("villain"); );

Grande! JavaScript non intrusivo! Lo adoro! Dovrebbe essere in "myTheme.js".

Spiegazione

Abbiamo appena usato un piccolo frammento di selettori incredibilmente potenti, preziosi e versatili di jQuery. Ora abbiamo aggiunto in modo discreto le classi ".hero" al primo ".post" div sulla pagina e la classe ".villain" al secondo ".post" div sulla pagina. Lasciami spiegare come.

```
$ (Document) .ready (function () 
```
Questa è la funzione super speciale di jQuery di avviare la funzione JavaScript definita dopo questa riga. Quando il $ (Document) è .pronto() avviare il funzione() stiamo per definire. utilizzando $ (Document) .ready (function () è tanto più veloce di usare il 'default': window.onload () funzione, perché il window.onload () la funzione attende il intero documento da caricare. Questo include tutte le immagini, iframe, ecc. Dobbiamo solo aspettare il nucleo XHTML il documento ha terminato il caricamento per eseguire il nostro script, quindi utilizziamo lo speciale di jQuery $ (Document) .ready (function () per far andare le cose più velocemente e avere meno lag tra il tempo di navigazione iniziale e l'avvio di javascript. Un po 'di confusione eh? Per semplificare, il metodo di jQuery è più veloce. Ricordatelo.
```
$ ( "Post: prima. ") AddClass (" eroe");.
```
Yay per potenti selettori! jQuery ha un'incredibile gamma di selettori, alcuni dei quali provengono dai CSS3, ma possiamo usarli adesso. Questa linea ci dice di ottenere: $ () il primo elemento ".post": .posta: prima e aggiungi l'eroe della classe: .addClass ( "eroe") ad esso. Ora possiamo applicare lo stile in CSS, ma non abbiamo ancora toccato o modificato il codice XHTML del div ".post" in alcun modo.
```
$ ( "Dopo: nth-child (2) ") addClass (" cattivo");.
```
Più selettori super forti! jQuery non solo ci consente di selezionare il: primo elemento di un tipo, ma ci consente anche di selezionare qualsiasi numero di elementi! utilizzando : Nth-child (#) possiamo selezionare qualunque tipo dell'elemento che vogliamo su una pagina. Se volessimo il 30 °
sulla pagina, il markup sarebbe $ ( "P: nth-child (30)"). Semplice da capire?

I selettori di jQuery però non sono limitati ai numeri! Ci sono molti molti altri selettori che ti permettono di scegliere l'elemento esatto di cui hai bisogno. Puoi visualizzarli visitando la sezione selettore sui documenti jQuery.

Passaggio 6: il jQuery CSS.

Grande. Con tutto questo, possiamo ora concentrarci sul lato visivo delle cose. Non è più necessario spiegare, approfondiamo il CSS. Aggiungi o digita questo nella parte inferiore di "style.css" nella cartella "myTheme". Affinché il "più-link" funzioni, scarica questa freccia dal pacchetto di icone famfamfam silk e inseriscila nella nuova cartella "immagini" all'interno della cartella "myTheme".

/ * ----- jQUERY ----- * / .hero .left p.postmetadata margin-top: 30px;  .hero .left p.postmetadata strong margin-bottom: 20px;  .hero .right h2 font-size: 46px; stile di carattere: corsivo; font-weight: normal; margin-bottom: 0.5em;  .hero .right p font-size: 14px;  .hero a.more-link background: url (images / arrow_right.png) no-repeat in basso a destra; fluttuare: a sinistra; padding-right: 20px;  .villain .left p.postmetadata margin-top: 20px;  .villain .left p.postmetadata strong margin-bottom: 15px;  .villain .right h2 font-size: 32px; font-weight: normal; colore: # 747474;  .villain .right p img float: right; riempimento: 0 0 7px 10px;

Spiegazione

Ora dovresti essere abbastanza adeguato con i CSS, quindi lo farò molto rapida esecuzione di questo nuovo CSS.
Questo è il CSS che cambia l'aspetto del post ".hero". "

.hero.left p.postmetadata - Lo riduciamo leggermente, quindi è in linea con la nostra nuova dimensione di intestazione.
.hero.left p.postmetadata strong - Spingiamo tutto in grassetto "post details" in modo che sia in linea con il testo del contenuto.
.eroe. bene h2 - Questo fa risaltare la nostra intestazione 'eroe'. Lo facciamo più grande e lo mettiamo in corsivo.
.eroe, bene p - Aumenta la dimensione del carattere del nostro contenuto di eroe.
.eroe a.more-link - Aggiungi la piccola freccia verde dal pacchetto di seta famfamfam.

E anche, il CSS che cambia il post di ".villain".

.villain.left p.postmetadata - Fa lo stesso dell'eroe postmetadata, lo spinge verso il basso.
.furfante. postazione forte - Fa la stessa cosa dell'eroe allineamento postmetadata.
.cattivo. Giusto h2 - Qui rendiamo l'intestazione malvagio grigia, non in grassetto e un po 'più grande dei post uniformi.
.cattivo. ok p img - L'immagine del cattivo deve risaltare, giusto? Lo facciamo semplicemente a destra (quindi il testo lo avvolge) e cambiamo di conseguenza il padding.

Incartare

Molto bene! In questo tutorial abbiamo trattato un metodo di base per arricchire il nostro contenuto di wordpress usando i selettori di jQuery! Tuttavia non sono esclusivi di jQuery. Troverai tutti questi selettori in CSS3 (quando tutti i browser lo supportano!). Adoriamo jQuery perché li portano a noi adesso. Ecco il nostro prodotto finale.

Codice