Förra veckan undersökte vi, jQTouch, det ramverk vi skulle använda för att skapa vårt mobila wordpress-tema. Denna vecka kommer vi att hämta upp var vi slutade och tillämpa det vi lärde oss att skapa temafiler som vi ska använda för att integrera med ett WordPress-tema. Låt oss ta itu med det!

Startar av

Till att börja med använder vi en standardinstallation av jQTouch som vi hämtade förra veckan. För att hålla sakerna enkla, kommer vi att använda så mycket av standard jQTouch-funktionalitet som möjligt.

Först kopierar du huvuddemokatalogens innehåll (demo / huvud) och klistrar in den i huvudmappen jQTouch:

Eftersom vår blogglayout fungerar väldigt lik den här demo är det meningsfullt att börja från den tiden. När du har gjort det måste du uppdatera några av länkarna till JS- och CSS-filerna. De första 60 linjerna behöver du inte oroa dig för bortom det här. De är i grunden vad som gör jQTouch att jobba som det gör. Byt början av filen med följande:

Efter slutskriptetiketten ska du se en stilmärke. Det är här du vet att du kan sluta.

Index-sidan

Vi integrerar inte med Wordpress i den här delen av handledningen. Snarare skapar vi temat i vanlig HTML och sköljer sedan det till ett tema i nästa handledning. Med detta sagt måste vi ersätta standardindexinnehållet med realistiskt blogginnehåll. Välj allt innehåll mellan kroppstaggarna och radera det. Nu fyller vi tillbaka det med innehållet. Förra veckan täckte vi alla grundvalarna för jQTouch, så allt nedan borde vara en recension:

 
 
 
Wordpress Site
 Handla om 
 
 
 
 
 
 
 
Bloggartiklar 12
 
sidor 2
 
 
Externa länkar
 
 
Prenumerera
 
Twitter
 
Skrivbordssida
 
 
 
E-post
 
Donera
 
 
 
Lägg till den här sidan på din startsida för att visa den anpassade ikonen, startskärmen och helskärmsläge.
 
 
  
 
 
Mobil tema
Version 0,1 beta
 Av Connor Zwick
 
Skjut ditt innehåll över flera gränser till alla mobila enheter med internetanslutning
 använder den världsberömda Wordpress CMS och JQTouch.
 
 @connorzwick på Twitter 
 


Stänga
 
  
 
 
Sidor Sidor
 Hem 
 
sidor
 
 
Handla om
 
Historia
 
 
 
 
 
Sidor Sidor
 Hem 
 
sidor
 
 
Handla om
 
Historia
 
 
 
 
 
Sidor Sidor
 Hem 
 
 
Post titel
 
Av: Connor Zwick
 
Detta är en kort beskrivning. Här kommer det att bli ett kort utdrag av posten, för betraktaren att bedöma om han eller hon vill läsa mer. Det här är en kort beskrivning. Här kommer det att bli ett kort utdrag av posten, för betraktaren att bedöma om han eller hon vill läsa mer. Det här är en kort beskrivning. Här kommer det att vara ett kort utdrag av posten, för tittaren att bedöma om han eller hon vill läsa mer.
 
 

Som du kan se har vi lagt till några menyer, titelfält och till och med en AJAX-laddad blog.html-sida. Men allt ovan bör ses över. Om du tycker att det är förvirrande, läs den förra veckans inlägg.

Bloggsidan

Med jQTouch försökte vi hålla så mycket som möjligt på startsidan. Som du kan se har vi gjort det för det mesta ovan. Men för en blogg är det inte så realistiskt eftersom en blogg uppdateras ständigt och i nästan alla fall är det mycket viktigt att ladda alla blogginlägg på en sida också. Därför länkar vi inte till ett ankareobjekt på samma sida, utan snarare en ny HTML-fil. JQTouch laddar emellertid sömlöst in på webbplatsen.

Denna bloggsida kommer att vara en lista över alla senaste bloggartiklar. Så vad vill vi ha på den här sidan?

• En bloggbeskrivning
• Inläggstitlar
• Författare
• Efter utdrag
• Inläggsdatum

Så ganska mycket grunderna. Vi ska pakka in varje inlägg i en oordnad lista och sedan ett listobjekt. För att göra webbplatsen lite mer färgstark och grafiskt tilltalande, kommer vi också att formatera datumet för att se ut som kalenderdatumsutvecklingen. Om du inte vet vad jag pratar om, se nedan eller i förhandsvisningen från förra veckans inlägg. Vi kommer också att behöva lägga till en liten anpassad stil, så vi lägger till några klasser. Så här:

 
 
Post titel
 
juni
 
30
 
Av: Connor Zwick
 
Detta är en kort beskrivning. Här kommer det att vara ett kort utdrag av posten, för tittaren att bedöma om han eller hon vill läsa mer.
 

Det är inte den mest semantiska användningen av listor, men det blir mer meningsfullt om en sekund. Vid utformningen av detta tema har vi ett dilemma. Vi har begränsat skärmutrymme, så vi kan antingen komprimera blogginlägg så att användarna kan se mer, eller vi kan expandera dem som ovan och ge läsarna en bättre bild av vad posten handlar om. Eller vi kan göra det enkelt och göra båda. I det här temat kommer vi att visa 5 utökade inlägg som ovan, och då kommer vi bara att visa 5 posttitlar nedan. Vi kan uppnå detta med en enkel meny:

 
Fler inlägg:
 
 
Post titel
 
Post titel
 
Post titel
 
Post titel
 
Post titel
 

Sätta bloggsidan tillsammans

Nu behöver vi bara sätta de två styckena ovan och lägga den i en jQTouch-sida. Vi behöver inte länka till JS-filer eller CSS på bloggsidan. Tänk på bloggsidan som ett PHP, om du är bekant med PHP. Annars, tänk på jQTouch som att hämta innehållet och sedan infoga det direkt i huvudindex-sidan. Det här är hela blog.html-filen:

 
 
 
blogg
 Hem 
 
 Detta är en kort beskrivning av bloggen. Här beskriver du syftet. 
 
 
Post titel
 
juni
 
30
 
Av: Connor Zwick
 
Detta är en kort beskrivning. Här kommer det att vara ett kort utdrag av posten, för tittaren att bedöma om han eller hon vill läsa mer.
 
 
 
Post titel
 
juni
 
30
 
Av: Connor Zwick
 
Detta är en kort beskrivning. Här kommer det att vara ett kort utdrag av posten, för tittaren att bedöma om han eller hon vill läsa mer.
 
 
 
Post titel
 
juni
 
30
 
Av: Connor Zwick
 
Detta är en kort beskrivning. Här kommer det att vara ett kort utdrag av posten, för tittaren att bedöma om han eller hon vill läsa mer.
 
 
 
Post titel
 
juni
 
30
 
Av: Connor Zwick
 
Detta är en kort beskrivning. Här kommer det att vara ett kort utdrag av posten, för tittaren att bedöma om han eller hon vill läsa mer.
 
 
 
Post titel
 
juni
 
30
 
Av: Connor Zwick
 
Detta är en kort beskrivning. Här kommer det att vara ett kort utdrag av posten, för tittaren att bedöma om han eller hon vill läsa mer.
 
 
Fler inlägg:
 
 
Post titel
 
Post titel
 
Post titel
 
Post titel
 
Post titel
 
 
 
 
 
Händelsestest
 AJAX Home 
 
 Det här var där posten skulle gå. 
 

Anpassad Styling

Nu nämnde jag tidigare att vi skulle behöva lägga till några anpassade CSS för att formatera bloggsidan. Denna handledning är inte inriktad på grunderna i CSS, så jag antar att du vet grunderna. Med det sagt kommer jag att täcka alla CSS3 som vi använder, vilket är en besvikelse väldigt liten. Endast gränsenradie, vilket är ganska självförklarande. Vi använder gränslinjen [top / bottom] - [vänster / höger] -radius för att ge kalendern runt hörnen:

 .blogg-titel border-bottom: 1px solid # 333333;  span.blog-title color: #fff; bredd: 100%; display: block; vadderande-botten: 10px;  .post-description, .post-author font-size: 12px; marginal-vänster: 75px;  .post-author margin-bottom: 3px;  .post, .page-author font-size: 13px; färg: #fff; marginal-botten: 5px;  #blog .rounded li position: relative;  .month position: absolute; bredd: 70px; text-align: center; bakgrund: # aa3939; färg: # f5f2f2; linjehöjd: 28px; padding-bottom: 5px; gränsen till vänstra radien: 4px; gränsen till höger-radie: 4px;  .date position: absolute; bredd: 70px; marginal-topp: 25px; typsnittstorlek: 40px; text-align: center; bakgrund: # f5f2f2; gränsen längst ner till vänster: 4px; gränsbotten-högra radie: 4px; 

Testa det ut

Om allt gick smidigt, borde du ha en arbetsplats! Vi omfattade också testning i den sista handledningen, men som en recension använder jag den officiella Apple iPhone Simulator. För att kunna köra simulatorn måste du ladda ner iOS SDK på Apples utvecklingscenter. Nedladdning av SDK kräver att du registrerar dig som en iPhone-utvecklare först (registrering är ledig), och du behöver en Mac som kör OS X Snow Leopard. Har du inte en Mac eller vill inte registrera dig som en iPhone-utvecklare? Inga bekymmer, du kan följa med nästan alla andra webbläsare, men dina resultat kan vara mindre exakta än mina (låt oss hoppas att ingen läser detta kör fortfarande IE6).

Gå vidare och öppna iPhone Simulator eller din webbläsare. Om du har Xcode och iOS SDK installerat, borde du bara kunna söka efter "Simulator" i strålkastare för att hitta applikationen.

Vi är klara för idag!

Nu när vi har skapat HTML för temat är allt vi behöver göra, det är ett WordPress-tema, och vi har ett färdigt mobiltema! Känn dig fri att leka med demofilerna och anpassa vad vi har gjort idag för din egen webbplats.