Mobile WordPress Theming giorno 3

Benvenuto nell'ultima versione di Mobile WordPress Theming. La scorsa settimana abbiamo creato la versione HTML del tema WordPress che creeremo in questo tutorial. Entro la fine di questo tutorial, avremo un tema WordPress di base che può essere applicato a qualsiasi sito WordPress esistente. La prossima settimana lo impaccheremo e finiremo. Andiamo fino in fondo!

Mindset Theming Mindset

Per quei lettori che non hanno familiarità con la creazione di temi WordPress, prima di iniziare la creazione di temi è necessario comprendere alcuni principi fondamentali su come funziona WordPress. WordPress è un framework per i blog. È progettato per offrire contenuti all'utente nel modo più flessibile possibile. WordPress memorizza i tuoi contenuti e ti fornisce gli strumenti per servirli come desideri. Con "skinning" dei dati forniti da WordPress, un processo noto anche come "tematizzazione", puoi distinguere l'aspetto del tuo blog. Ogni volta che si desidera modificare o migliorare un sito WordPress, è necessario scrivere un plug-in o creare un tema. I plugin sono appropriati se stai modificando o aggiungendo funzionalità di base di WordPress. Tuttavia, se si desidera modificare lo stile di WordPress, quindi modificare o creare un tema. Non modificare direttamente il codice WordPress principale. Probabilmente questo rovinerà WordPress, specialmente quando è necessario aggiornare le versioni in seguito.

Iniziare Nudo

A meno che tu non sia estremamente innovativo e unico, quasi tutti i temi WordPress condividono le stesse fondamenta. Hanno tutti bisogno di un colpo di testa, un corpo, un footer, uno stile di base, ecc. Detto questo, invece di reinventare la ruota, useremo un "tema nudo". Come suggerisce il nome, un tema nudo è il più nudo possibile. Generalmente, c'è uno stile molto piccolo oltre ai ripristini e allo snippet utile occasionale che probabilmente utilizzerai nel tuo progetto. Ci sono un sacco di varietà di temi nudi in rete. Quindi, a seconda del progetto, potresti decidere su un altro. Non esiste il miglior tema nudo. Per questo progetto, ho deciso di usare WordPress-naked. Puoi prenderne una copia nella loro pagina Codice Google. Per una grande collezione di temi nudi, puoi anche visitare l'articolo di speckboy.com.

Installazione di WordPress

Ora abbiamo bisogno di un'installazione WordPress sul tema. Puoi installarne uno sul tuo server, se ne hai uno, oppure installarlo localmente.

server

Se si installa localmente, assicurarsi di disporre di un server di test locale. Per Windows, WAMP o EasyPHP sono buone scelte. Se su Linux, controlla XAMP. Se su un Mac, controlla MAMP. Per questo tutorial, eseguiremo MAMP.

WordPress

Basta andare su WordPress.org per scaricare l'ultima versione di WordPress.

Installa WordPress sul server

Copia la directory di WordPress nella directory del tuo server e installa. Questo non è un tutorial sull'installazione di WordPress. Ci sono molti tutorial che lo fanno già come questo.

Dopo aver installato WordPress, copia la directory del tema nudo nel wp-content / themes directory. Quindi accedi a WordPress, vai a Aspetto> Temi e seleziona le nude.

"Vestire il tema"

Ora che il tema è attivo, possiamo apportare modifiche e vederle subito. Innanzitutto, modifica le informazioni sul tema che si trova nella parte superiore di style.css. Qui è dove si dichiara il nome del tema, l'autore, ecc. In questo caso, l'ho modificato come segue:

 / ** Nome del tema: URI del tema MyTouch: http://www.connorzwick.com Versione: .9 Autore: Connor Zwick Autore URI: http://www.connorzwick.com Tag: semplice, mobile, jqtouch, ajax Licenza: Descrizione GPL: un tema creato pensando alla felixibility. Permette a chiunque di scegliere come tema mobile. * /

Intestazione

WordPress prima guarda il file index.php nella directory dei temi. Questo file è come il resto dei file del tema sono incorporati. Se lo guardi, lo vedrai prima prendere tutto il contenuto dall'intestazione. È qui che dobbiamo iniziare. Inizia cancellando tutto dal Doctype fino al tag e incollando nel seguente modo:

     <?php if(is_home()) bloginfo('name'); else wp_title("); ?>

Questo è copiato direttamente dalla testa di ciò che abbiamo fatto la scorsa settimana, tranne che per due cose. Noterai che tutti i collegamenti a file JS, CSS o Image sono stati preceduti dallo snippet di PHP con template. Questa è una funzione di WordPress che farà eco all'URL del file modello. Questo aiuterà a risolvere eventuali problemi che avremmo con il collegamento a file statici, perché ora abbiamo collegato dinamicamente a loro. In secondo luogo, noterai che ci siamo collegati a un foglio di stile invece di mettere tutti i nostri stili direttamente nella nostra intestazione. Questo è solo per amor di pulizia. Detto questo, se stai seguendo i tuoi file, assicurati di copiare e incollare lo styling in style.css

Come puoi vedere, semplicemente aggiungendo i collegamenti dell'intestazione, jQTouch sta già facendo la sua magia.

Messa in piega

Come accennato in precedenza, abbiamo scaricato tutto lo stile in un foglio di stile. Possiamo anche rimuovere i preset che il tema nudo è venuto con. Quando tutto è detto e fatto, il foglio di stile dovrebbe assomigliare a questo:

 / ** Nome del tema: URI del tema MyTouch: http://www.connorzwick.com Versione: .9 Autore: Connor Zwick Autore URI: http://www.connorzwick.com Tag: semplice, mobile, jqtouch, ajax Licenza: Descrizione GPL: un tema creato pensando alla felixibility. Permette a chiunque di scegliere come tema mobile. * / body.fullscreen #home .info display: none;  #about padding: 100px 10px 40px; text-shadow: rgba (255, 255, 255, 0.3) 0px -1px 0; dimensione del font: 13px; allineamento del testo: centro; sfondo: # 161618;  #about p margin-bottom: 8px;  #about a color: #fff; font-weight: bold; decorazione del testo: nessuna;  / * Inizia qui la personalizzazione * / .blog-title border-bottom: 1px solid # 333333;  span.blog-title color: #fff; larghezza: 100%; blocco di visualizzazione; imbottitura-fondo: 10px;  .post-description, .post-author font-size: 12px; margin-left: 75px;  .post-description min-height: 75px;  .post-author margin-bottom: 3px;  .post, .page-author font-size: 13px; colore: #fff; margin-bottom: 5px;  #blog .rounded li position: relative;  .month position: absolute; larghezza: 70 px; allineamento del testo: centro; sfondo: # aa3939; colore: # f5f2f2; altezza della linea: 28px; imbottitura-fondo: 5px; border-top-left-radius: 4px; border-top-right-radius: 4px;  .date position: absolute; larghezza: 70 px; margin-top: 25px; font-size: 40px; allineamento del testo: centro; sfondo: # f5f2f2; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;

Questo è quasi esattamente ciò che abbiamo creato la settimana scorsa. Aggiungeremo uno stile qui se abbiamo bisogno di ulteriori personalizzazioni.

index.php

Ancora, index.php è il file che incorpora il resto dei file del tema. Quindi, per prima cosa, dobbiamo chiamare il file header.php. È piuttosto semplice:

Ora possiamo iniziare a incollare nuovamente i frammenti della settimana scorsa. Inizieremo con il corpo:

    Sito WordPress
 Di

Ci siamo fermati prima della voce del menu del blog per un motivo. Non vogliamo che l'articolo del blog sia un'opzione se non abbiamo post, quindi dovremo introdurre più WordPress PHP qui:

  Articoli del blog 12

Fondamentalmente, stiamo controllando se abbiamo post con la funzione have_posts (), e se lo facciamo stiamo visualizzando la voce di menu. Se non lo facciamo, non mostriamo nulla. Probabilmente potremmo farla franca lasciando solo il tag else, ma voglio mostrare che se volevi mettere qualcosa come "Nessun post del blog in questo momento" potresti farlo. Quindi terminiamo la dichiarazione IF

Ora possiamo incollare più contenuti della scorsa settimana:

 pagine 2
  Link esterno
  sottoscrivi
 cinguettio
 Pagina desktop
 
  E-mail
 Donare
 
  Aggiungi questa pagina alla schermata iniziale per visualizzare l'icona personalizzata, la schermata di avvio e la modalità a schermo intero.

Tema del cellulare
Versione 0.1 beta
Di Connor Zwick

Spingi i tuoi contenuti oltre i limiti di tutti i dispositivi mobili connessi a Internet
utilizzando il famoso WordPress CMS e JQTouch.

@connorzwick su Twitter

Vicino

Pagine del sito

Casa

pagine

Di
Storia

Ci siamo fermati di nuovo perché stiamo aggiungendo qualcos'altro anche questa settimana. La scorsa settimana, abbiamo dimostrato le funzionalità AJAX di jQTouch afferrando il blog.html e caricandolo. Ora che ci stiamo integrando con WordPress, è molto più semplice usare solo lo stesso tag di ancoraggio della pagina. Quindi abbiamo integrato la parte del blog nella pagina index.php.

Quello che faremo è innanzitutto controllare che ci siano ancora dei post. Quindi, avvieremo un ciclo while e creeremo una voce di elenco non ordinata per ogni articolo del blog. All'interno di questo ciclo, è possibile vedere che abbiamo utilizzato alcune funzioni del modello WordPress. Sono tutti abbastanza auto-esplicativi. Per il momento, M è una scorciatoia per un'abbreviazione di tre lettere del mese, e j rappresenta il numero del giorno senza lo 0 iniziale (cioè 9 non 09).

   blog
 Casa 
  Questa è una breve descrizione del blog. Qui descrivi lo scopo. 
     ">
 
 
 Di: 
 Leggi di più')); ?>

Quindi il resto della pagina:

   Pagine del sito
 Casa 
 pagine
  Di
 Storia
 
 
   Pagine del sito
 Casa 
  Titolo del post
 Di: Connor Zwick
 Questa è una breve descrizione. Qui ci sarà un breve estratto del post, affinché lo spettatore giudichi se lui o lei vuole leggere di più. Questa è una breve descrizione. Qui ci sarà un breve estratto del post, affinché lo spettatore giudichi se lui o lei vuole leggere di più. Questa è una breve descrizione. Qui ci sarà un breve estratto del post, affinché lo spettatore giudichi se vuole leggere di più.

Alla fine includiamo un file footer. Per questo tema, il file footer non viene utilizzato, quindi non ne abbiamo davvero bisogno. Ma sto lasciando il tema aperto, quindi lo includeremo comunque. Per questo tema, vogliamo solo il taggalo lì.

PHP Rimuovi P dal contenuto

Come avrai notato. Il testo estratto per gli articoli del blog è più grande di quanto dovrebbe essere. Il motivo è perché abbiamo usato la funzione the_content (), che racchiude l'estratto in un tag p aggiuntivo. come lo aggiustiamo? Abbiamo bisogno di aggiungere una riga all'inizio del file index.php:

Incartare

Ora tutto sembra a posto. Ma ci sono ancora molte altre cose da trattare come singoli post, ricerca, impaginazione e commenti prima che questo sia un tema completo e utile! Spero che tu abbia imparato molto, e assicurati di controllare l'ultimo post di questa serie la prossima settimana!

Codice