Săptămâna trecută am explorat, jQTouch, cadrul pe care l-am folosi pentru a crea tema noastră wordpress mobilă. În această săptămână, vom alege locul unde am rămas și vom aplica ceea ce am învățat pentru a crea fișiere tematice pe care le vom folosi pentru a le integra într-o temă WordPress. Hai să ajungem la asta!

Demararea

Pentru început, vom folosi o instalare implicită de jQTouch pe care am descărcat-o săptămâna trecută. Pentru a păstra lucrurile simple, vom folosi cât mai mult din funcționalitatea implicită jQTouch.

Mai întâi, copiați conținutul directorului principal al demo-ului (demo / main) și inserați-l în folderul principal jQTouch:

Întrucât aspectul blogului nostru va funcționa foarte asemănător cu acest demo, este logic să începeți din acest punct. După ce ați făcut acest lucru, va trebui să actualizați câteva linkuri către fișierele JS și CSS. Primele 60 de linii nu trebuie să vă faceți griji dincolo de acest lucru. Ele sunt, în principiu, ceea ce face ca jQTouch să funcționeze așa cum o face. Înlocuiți începutul fișierului cu acesta:

După eticheta pentru sfârșitul scriptului, ar trebui să vedeți o etichetă de stil. Aici știți că vă puteți opri.

Pagina Index

Nu ne integrăm cu Wordpress în această parte a tutorialului. Mai degrabă, noi creăm tema în HTML obișnuit, iar apoi îl scoatem dintr-o temă în tutorialul următor. Acestea fiind spuse, trebuie să înlocuim conținutul indexului implicit, cu conținut realist în blog. Selectați tot conținutul dintre etichetele corporale și ștergeți-le. Acum o vom completa cu conținut. Săptămâna trecută, am acoperit toate fundamentele jQTouch, deci totul ar trebui să fie o revizuire:

 
 
 
Site-ul Wordpress
 Despre 
 
 
 
 
 
 
 
Articole de blog 12
 
Pagini 2
 
 
Linkuri externe
 
 
Abonati-va
 
Stare de nervozitate
 
Pagina desktop
 
 
 
E-mail
 
Dona
 
 
 
Adăugați această pagină în ecranul de întâmpinare pentru a vedea pictograma personalizată, ecranul de pornire și modul ecran complet.
 
 
  
 
 
Temă mobilă
Versiunea 0.1 beta
 De Connor Zwick
 
Împingeți conținutul pe mai multe frontiere către toate dispozitivele mobile conectate la internet
 folosind celebrul Wordpress CMS și JQTouch.
 
 @connorzwick pe Twitter 
 


Închide
 
  
 
 
Pagini de site
 Acasă 
 
Pagini
 
 
Despre
 
Istorie
 
 
 
 
 
Pagini de site
 Acasă 
 
Pagini
 
 
Despre
 
Istorie
 
 
 
 
 
Pagini de site
 Acasă 
 
 
Titlul postului
 
De: Connor Zwick
 
Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea sau nu să citească mai mult. Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea sau nu să citească mai mult. Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea să citească mai mult.
 
 

După cum puteți vedea, am adăugat câteva meniuri, bare de titlu și chiar o pagină blog.html încărcată de AJAX. Dar toate cele de mai sus ar trebui să fie revizuite. Dacă găsiți confuzie, vă rugăm să recitiți postul de săptămâna trecută.

Pagina blogului

Cu jQTouch, am încercat să păstrăm cât mai mult posibil pe pagina inițială. După cum puteți vedea, am făcut acest lucru în cea mai mare parte de mai sus. Dar, pentru un blog, acest lucru nu este foarte realist, deoarece un blog va fi actualizat în mod constant și, în aproape toate cazurile, ar fi foarte inexistent să încărcați toate postările pe blog într-o singură pagină. De aceea, pentru elementul din meniul blogului, nu am făcut legătura cu un element de ancorare de pe aceeași pagină, ci mai degrabă cu un nou fișier HTML. Cu toate acestea, jQTouch va încărca fără probleme acest lucru în site.

Această pagină de blog va fi o listă cu toate articolele recente din blog. Deci, ce vrem pe această pagină?

• O descriere a blogului
• Titlurile postului
• Autor postat
• Post extras
• Data postării

Deci, destul de mult de bază. Vom ambala fiecare post într-o listă neordonată și apoi o listă de listă. Pentru a face site-ul un pic mai colorat și atractiv din punct de vedere grafic, vom formata, de asemenea, data pentru a arata ca tendința data calendaristică. Dacă nu știți despre ce vorbesc, uitați-vă mai jos sau la previzualizarea postului de săptămâna trecută. Vom avea de asemenea nevoie să adăugăm puțin stil personalizat, așa că vom adăuga câteva clase. Asa:

 
 
Titlul postului
 
Iunie
 
30
 
De: Connor Zwick
 
Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea să citească mai mult.
 

Nu este cea mai semantică utilizare a listelor, dar va avea mai multă sens într-o secundă. În proiectarea acestei teme, avem o dilemă. Avem un spațiu redus pe ecran, astfel încât să putem comprima postările de pe blog, astfel încât utilizatorii să poată vedea mai multe sau să le extindem ca mai sus și să oferim cititorilor o idee mai bună despre ceea ce reprezintă postul. Sau am putea să o facem simplu și să facem amândouă. În această temă, vom arăta 5 posturi extinse ca mai sus, iar apoi vom afișa doar 5 titluri postate mai jos. Putem realiza acest lucru cu un meniu simplu:

 
Mai multe mesaje:
 
 
Titlul postului
 
Titlul postului
 
Titlul postului
 
Titlul postului
 
Titlul postului
 

Punerea împreună a paginii blogului

Acum, trebuie doar să punem cele două bucăți deasupra împreună și să le punem într-o pagină jQTouch. Nu este necesar să conectăm fișierele JS sau CSS în pagina de blog. Gândiți-vă la pagina de blog ca un PHP include dacă sunteți familiarizat cu PHP. În caz contrar, gândiți-vă la jQTouch ca primind conținutul și apoi introducându-l direct în pagina principală a indexului. Acesta este întregul fișier blog.html:

 
 
 
Blog
 Acasă 
 
 Aceasta este o scurtă descriere a blogului. Aici descrieți scopul. 
 
 
Titlul postului
 
Iunie
 
30
 
De: Connor Zwick
 
Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea să citească mai mult.
 
 
 
Titlul postului
 
Iunie
 
30
 
De: Connor Zwick
 
Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea să citească mai mult.
 
 
 
Titlul postului
 
Iunie
 
30
 
De: Connor Zwick
 
Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea să citească mai mult.
 
 
 
Titlul postului
 
Iunie
 
30
 
De: Connor Zwick
 
Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea să citească mai mult.
 
 
 
Titlul postului
 
Iunie
 
30
 
De: Connor Zwick
 
Aceasta este o scurtă descriere. Aici va fi un scurt fragment al postului, pentru ca spectatorul să decidă dacă vrea să citească mai mult.
 
 
Mai multe mesaje:
 
 
Titlul postului
 
Titlul postului
 
Titlul postului
 
Titlul postului
 
Titlul postului
 
 
 
 
 
Testarea evenimentelor
 AJAX Home 
 
 Aceasta ar fi locul în care postul ar merge. 
 

Styling personalizat

Acum, am menționat mai devreme că va trebui să adăugăm câteva CSS personalizate pentru a formata pagina de blog. Acest tutorial nu se concentrează pe elementele de bază ale CSS, deci presupun că știți fundamentele. Acestea fiind spuse, voi acoperi toate CSS3 pe care le folosim, ceea ce este dezamăgitor de foarte puțin. Numai raza de graniță, care este destul de explicativă. Folosim raza de frontieră - [sus / jos] - [stânga / dreapta] pentru a da colțurile rotunde din calendar:

 .blog-title border-bottom: 1px solid # 333333;  span.blog-title culoare: #fff; lățime: 100%; afișare: bloc; padding-bottom: 10px;  .post-descriere, .post-autor font-size: 12px; margin-stânga: 75px;  .post-autor margin-bottom: 3px;  .post, .page-author font-size: 13px; culoare: #fff; margin-bottom: 5px;  #blog. înclinată li poziție: relativă;  lună poziție: absolută; lățime: 70px; text-align: centru; fundal: # aa3939; culoare: # f5f2f2; linie-înălțime: 28px; padding-bottom: 5px; raza de sus-dreapta-stânga: 4px; raza de sus-dreapta-dreapta: 4px; . data position: absolute; lățime: 70px; margin-top: 25px; font-size: 40px; text-align: centru; fundal: # f5f2f2; raza de jos-stânga-dreapta: 4px; raza de jos-dreapta-dreapta: 4px; 

Testează-l

Dacă totul a mers fără probleme, ar trebui să aveți un site de lucru! Am testat și în ultimul tutorial, dar ca recenzie voi folosi Apple iPhone Simulator oficial. Pentru a rula simulatorul, va trebui să descărcați SDK-ul iOS la centrul de dezvoltare al Apple. Descărcarea SDK-ului necesită înregistrarea mai întâi ca dezvoltator pentru iPhone (înregistrarea este gratuită) și veți avea nevoie de un Mac care rulează OS X Snow Leopard. Nu aveți un Mac sau nu doriți să vă înregistrați ca dezvoltator de iPhone? Nu vă faceți griji, puteți urmări împreună cu aproape orice alt browser, dar rezultatele dvs. pot fi mai puțin exacte decât a mea (să sperăm că nimeni nu citește acest lucru este încă rulează IE6).

Continuați și deschideți Simulatorul iPhone sau browser-ul dvs. de alegere. Dacă aveți Xcode și SDK-ul iOS instalat, ar trebui să puteți căuta doar "Simulator" în centrul atenției pentru a găsi aplicația.

Am terminat pentru azi!

Acum că am creat HTML-ul pentru temă, tot ce trebuie să facem este să-l pătrundem într-o temă wordpress și avem o temă mobilă terminată! Simțiți-vă liber să jucați cu fișierele demo și să personalizați ceea ce am făcut astăzi pentru propriul site.