Mobile WordPress Theming giorno 2

La scorsa settimana abbiamo esplorato, jQTouch, il framework che useremo per creare il nostro tema mobile wordpress. Questa settimana riprenderemo da dove avevamo interrotto e applicheremo ciò che abbiamo imparato a creare i file del tema che useremo per integrare un tema WordPress. Andiamo ad esso!

Iniziare

Per cominciare, useremo un'installazione predefinita di jQTouch che abbiamo scaricato la settimana scorsa. Per semplificare le cose, utilizzeremo il maggior numero possibile di funzionalità jQTouch predefinite.

Per prima cosa copia i contenuti della directory demo principale (demo / main) e incollali nella cartella principale di jQTouch:

Dal momento che il nostro layout del blog funzionerà in modo molto simile a questa demo, ha senso iniziare da quel punto. Dopo averlo fatto, dovrai aggiornare alcuni dei link ai file JS e CSS. Le prime 60 linee di cui non hai davvero bisogno di preoccuparti al di là di questo. Sono fondamentalmente ciò che fa funzionare jQTouch come fa. Sostituisci l'inizio del file con questo:

    jQTouch β

Dopo il tag di script di fine, dovresti vedere un tag di stile. Questo è dove sai che puoi fermarti.

La pagina dell'indice

Non stiamo integrando con Wordpress in questa parte del tutorial. Piuttosto, stiamo creando il tema in HTML ordinario, e poi lo scuoiamo su un tema nel prossimo tutorial. Detto questo, dobbiamo sostituire il contenuto dell'indice predefinito, con contenuti di blog realistici. Seleziona tutto il contenuto tra i tag del corpo e cancellalo. Ora lo riempiremo di contenuti. La scorsa settimana, abbiamo coperto tutti i fondamenti di jQTouch, quindi tutto sotto dovrebbe essere una recensione:

   Sito Wordpress
 Di 
   
 
 
  Articoli del blog 12
 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
 
 
   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ù.

Come puoi vedere, abbiamo aggiunto alcuni menu, barre del titolo e persino una pagina blog.html con caricamento AJAX. Ma tutto quanto sopra dovrebbe essere rivisto. Se trovi qualcosa di confuso, rileggi il post della scorsa settimana.

La pagina del blog

Con jQTouch, abbiamo cercato di mantenere il più possibile sulla pagina iniziale. Come puoi vedere, lo abbiamo fatto per la maggior parte sopra. Ma per un blog, questo non è molto realistico perché un blog sarà costantemente aggiornato e, in quasi tutti i casi, sarebbe molto inefficiente caricare tutti i post del blog in un'unica pagina. Questo è il motivo per cui per la voce del menu del blog, non ci siamo collegati a un elemento di ancoraggio nella stessa pagina, ma piuttosto a un nuovo file HTML. Tuttavia, jQTouch lo caricherà senza problemi nel sito.

Questa pagina del blog sarà un elenco di tutti gli articoli del blog più recenti. Quindi cosa vogliamo in questa pagina?

Una descrizione del blog
Pubblica titoli
Post autore
Estratto post
Data di pubblicazione

Quindi praticamente le basi. Abbiamo intenzione di avvolgere ogni post in un elenco non ordinato e quindi in un elemento della lista. Per rendere il sito un po 'più colorato e graficamente accattivante, modificheremo anche la data in modo che assomigli all'andamento della data del calendario. Se non sai di cosa sto parlando, guarda sotto o nell'anteprima del post della scorsa settimana. Dovremo anche aggiungere un po 'di stile personalizzato, quindi aggiungeremo alcune classi. Come questo:

  Titolo del post
 giugno
 30
 Di: Connor Zwick
 Questa è una breve descrizione. Qui ci sarà un breve estratto del post, affinché lo spettatore giudichi se vuole leggere di più.

Non è l'uso più semantico delle liste, ma avrà più senso in un secondo. Nel progettare questo tema, abbiamo un dilemma. Abbiamo uno spazio limitato sullo schermo, quindi possiamo comprimere i post del blog in modo che gli utenti possano vederne altri, oppure possiamo espanderli come sopra e dare ai lettori un'idea migliore di cosa tratta il post. Oppure potremmo renderlo semplice e fare entrambe le cose. In questo tema, mostreremo 5 post espansi come sopra, e quindi mostreremo solo 5 post di titoli. Possiamo ottenere questo con un semplice menu:

 Altri messaggi:
  Titolo del post
 Titolo del post
 Titolo del post
 Titolo del post
 Titolo del post

Mettendo insieme la pagina del blog

Ora, abbiamo solo bisogno di mettere insieme i due pezzi sopra e metterli in una pagina jQTouch. Non è necessario collegarsi a file JS o CSS nella pagina del blog. Se hai familiarità con PHP, pensa alla pagina del blog come PHP. Altrimenti, pensa a jQTouch come ottenere il contenuto e poi inserirlo direttamente nella pagina principale dell'indice. Questo è l'intero file blog.html:

   blog
 Casa 
  Questa è una breve descrizione del blog. Qui descrivi lo scopo. 
  Titolo del post
 giugno
 30
 Di: Connor Zwick
 Questa è una breve descrizione. Qui ci sarà un breve estratto del post, affinché lo spettatore giudichi se vuole leggere di più.
 
  Titolo del post
 giugno
 30
 Di: Connor Zwick
 Questa è una breve descrizione. Qui ci sarà un breve estratto del post, affinché lo spettatore giudichi se vuole leggere di più.
 
  Titolo del post
 giugno
 30
 Di: Connor Zwick
 Questa è una breve descrizione. Qui ci sarà un breve estratto del post, affinché lo spettatore giudichi se vuole leggere di più.
 
  Titolo del post
 giugno
 30
 Di: Connor Zwick
 Questa è una breve descrizione. Qui ci sarà un breve estratto del post, affinché lo spettatore giudichi se vuole leggere di più.
 
  Titolo del post
 Giugno
 30
 Di: Connor Zwick
 Questa è una breve descrizione. Qui ci sarà un breve estratto del post, affinché lo spettatore giudichi se vuole leggere di più.
 
 Altri messaggi:
  Titolo del post
 Titolo del post
 Titolo del post
 Titolo del post
 Titolo del post
 
 
   Test degli eventi
 AJAX Home 
  Questo sarebbe dove sarebbe andato il post.

Styling personalizzato

Ora, ho detto prima che avremmo bisogno di aggiungere alcuni CSS personalizzati per formattare la pagina del blog. Questo tutorial non è incentrato sulle basi del CSS, quindi presumo che tu conosca i fondamenti. Detto questo, coprirò qualsiasi CSS3 che usiamo, il che è molto poco deludente. Solo raggio di confine, che è piuttosto auto-esplicativo. Usiamo border- [top / bottom] - [left / right] -radius per dare gli angoli arrotondati del calendario:

 .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-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;

Provalo

Se tutto è andato liscio, dovresti avere un sito funzionante! Abbiamo esaminato anche i test nell'ultimo tutorial, ma come recensione userò il simulatore Apple iPhone ufficiale. Per poter eseguire il simulatore, è necessario scaricare l'SDK iOS nel centro sviluppatori Apple. Scaricare l'SDK richiede innanzitutto la registrazione come sviluppatore di iPhone (la registrazione è gratuita) e avrai bisogno di un Mac con OS X Snow Leopard. Non hai un Mac o non vuoi registrarti come sviluppatore iPhone? Nessun problema, puoi seguire con quasi tutti gli altri browser, ma i tuoi risultati potrebbero essere meno accurati dei miei (speriamo che nessuno a leggerlo stia ancora eseguendo IE6).

Vai avanti e apri l'iPhone Simulator o il browser che preferisci. Se hai installato Xcode e l'SDK di iOS, dovresti riuscire a cercare "Simulatore" sotto i riflettori per trovare l'applicazione.

Abbiamo finito per oggi!

Ora che abbiamo creato l'HTML per il tema, tutto ciò che dobbiamo fare è adattarlo a un tema wordpress e abbiamo un tema mobile finito! Sentiti libero di giocare con i file demo e personalizzare ciò che abbiamo fatto oggi per il tuo sito.

Codice