Mobile WordPress Theming Dag 3

Välkommen till den senaste delen av Mobile WordPress Theming. Förra veckan skapade vi HTML-versionen av WordPress-temat som vi kommer att skapa i den här handledningen. I slutet av denna handledning kommer vi att ha ett grundläggande WordPress-tema som kan tillämpas på alla befintliga WordPress-webbplatser. Nästa vecka ska vi paketera och avsluta det. Låt oss komma precis ner till det!

WordPress Thing Mindset

För de läsare som inte är bekant med att skapa WordPress-teman, måste du förstå vissa grundläggande principer för hur WordPress fungerar innan du börjar theming. WordPress är ett bloggarande ramverk. Den är utformad för att kunna erbjuda innehåll till användaren på ett så flexibelt sätt som möjligt. WordPress lagrar ditt innehåll och ger dig verktyg för att tjäna det så du önskar. Med "skinning" serverar data WordPress, en process som även kallas "teman", kan du skilja utseendet på din blogg. När du vill ändra eller förbättra en WordPress-webbplats, bör du antingen skriva ett plugin eller skapa ett tema. Plugins är lämpliga om du ändrar eller lägger till grundläggande WordPress-funktionalitet. Om du ändå vill ändra stilen på WordPress, kan du antingen redigera eller skapa ett tema. Ändra inte bara kärna WordPress-kod direkt. Detta kommer sannolikt att rota upp WordPress, speciellt när du behöver uppdatera versioner senare.

Börja Naked

Om du inte är extremt innovativ och unik, delar nästan alla WordPress-teman samma grund. De behöver alla en rubrik, en kropp, en sidfot, grundläggande styling osv. Som sagt, istället för att återuppfinna hjulet, kommer vi att använda ett "nätt tema". Som namnet antyder är ett naket tema det mest möjliga. Generellt finns det mycket litle styling förutom återställningar och den enstaka användbar kod som du sannolikt kommer att använda i ditt projekt. Det finns gott om sorter av nakna teman på nätet. Så beroende på projektet kan du bestämma dig för en annan. Det finns inget bäst naket tema. För det här projektet bestämde jag mig för att använda WordPress-nakna. Du kan ta en kopia över på deras Google Kod-sida. För en bra samling nakna teman kan du också besöka speckboy.coms artikel.

Installera WordPress

Nu behöver vi en WordPress-installation till temat. Du kan antingen installera en på din server om du har en, eller installera den lokalt.

server

Om du installerar lokalt, se till att du har en lokal testserver. För Windows är WAMP eller EasyPHP bra val. Om i linux kolla XAMP. Om du är på Mac, kolla MAMP. För den här handledningen kör vi MAMP.

Wordpress

Gå bara till WordPress.org för att hämta den senaste versionen av WordPress.

Installera WordPress på Server

Kopiera WordPress-katalogen till din serverns katalog och installera. Det här är inte en handledning om hur du installerar WordPress. Det finns många handledningar som gör det redan som det här.

När du har installerat WordPress, kopiera den nakna temakatalogen till wp-content / teman katalogen. Logga sedan in på WordPress, gå till Utseende> Teman och välj de nakna domarna.

"Klä på temat"

Nu när vi har temat aktivt kan vi göra ändringar och se dem direkt. Ändra först temainformationen som ligger i toppen av style.css. Det här är där du förklarar temanamnet, författaren etc. I det här fallet har jag ändrat det enligt följande:

 / ** Tema Namn: MyTouch Theme URI: http://www.connorzwick.com Version: .9 Författare: Connor Zwick Författare URI: http://www.connorzwick.com Taggar: simple, mobile, jqtouch, ajax Licens: GPL Beskrivning: Ett tema skapat med felixibility i åtanke. Tillåter att någon väljer ett mobilt tema. * /

Rubrik

WordPress ser först på index.php-filen i temakatalogen. Den här filen är hur resten av temafilerna ingår. Om du tittar på det ser du först att allt innehåll hämtas från rubriken. Det är här vi måste börja. Börja med att ta bort allt från Doctype till tagga och klistra in följande:

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

Detta kopieras direkt från huvudet av vad vi gjorde förra veckan, förutom två saker. Du kommer märka att eventuella länkar till JS, CSS eller bildfiler har blivit upplagda av mall url PHP-kod. Detta är en WordPress-funktion som kommer att ekosera URL-adressen till mallfilen. Det här hjälper till att åtgärda eventuella problem vi skulle ha med att koppla till statiska filer, för nu har vi dynamiskt kopplat till dem. För det andra märker du att vi länkade till ett stilark istället för att lägga all vår stil direkt i vår rubrik. Detta är bara för renhetens skull. Som sagt, om du följer med egna filer, se till att du kopierar och klistrar in stilen i style.css

Som du kan se, bara genom att lägga till länkarna, jobbar jQTouch redan med sin magi.

styling

Som tidigare nämnts dumpade vi all styling till ett stilark. Vi kan också ta bort förinställningarna som det nakna temat kom med. När allt är sagt och gjort, borde stilarket se ut så här:

 / ** Tema Namn: MyTouch Theme URI: http://www.connorzwick.com Version: .9 Författare: Connor Zwick Författare URI: http://www.connorzwick.com Taggar: simple, mobile, jqtouch, ajax Licens: GPL Beskrivning: Ett tema skapat med felixibility i åtanke. Tillåter att någon väljer ett mobilt tema. * / body.fullscreen #home .info display: none;  #about vaddering: 100px 10px 40px; textskugga: rgba (255, 255, 255, 0,3) 0px -1px 0; typsnittstorlek: 13px; text-align: center; bakgrund: # 161618;  #om p margin-bottom: 8px;  #om en färg: #fff; font-weight: bold; text-dekoration: ingen;  / * Börja anpassning här * / .blog-title 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-description min-height: 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;

Det här är nästan exakt vad vi skapade förra veckan. Vi lägger till styling här om vi behöver ytterligare anpassningar.

index.php

Återigen är index.php filen som innehåller resten av temafilerna. Så först måste vi ringa header.php-filen. Det är ganska enkelt:

Nu kan vi börja klistra in från förra veckans utdrag igen. Vi börjar med kroppen:

    WordPress Site
 Handla om

Vi slutade före bloggmenyobjektet av en anledning. Vi vill inte att blogginlägget är ett alternativ om vi inte har några inlägg, så vi måste introducera lite mer WordPress PHP här:

  Bloggartiklar 12

I grund och botten kontrollerar vi om vi har inlägg med funktionen have_posts (), och om vi gör det visar vi menyalternativet. Om vi inte gör det visar vi inte något. Vi kan förmodligen komma undan med att bara lämna ut den andra taggen också, men jag vill visa att om du ville lägga något där som "Inga blogginlägg just nu" kunde du. Då slutar vi bara IF-uttalandet

Nu kan vi klistra in mer av förra veckans innehåll:

 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

Vi stannade igen eftersom vi lägger till något annat denna vecka också. Förra veckan demonstrerade vi AJAX-funktionerna för jQTouch genom att ta tag i blog.html och ladda den. Nu när vi integrerar med WordPress är det dock mycket enklare att bara använda samma sidoranker. Så vi integrerade bloggdelen i index.php-sidan.

Vad vi ska göra är först, kontrollera att vi har inlägg igen. Sedan börjar vi en stundslinga och skapar ett obestämt listobjekt för varje bloggartikel. Inuti denna loop kan du se att vi använde några fler WordPress-mallfunktioner. De är alla ganska självförklarande. För tiden är M en genväg för en bokstavsförkortning för månaden och j representerar dagnumret utan ledande 0 (dvs 9 inte 09).

   blogg
 Hem 
  Detta är en kort beskrivning av bloggen. Här beskriver du syftet. 
     ">
 
 
 Av: 
 Läs mer')); ?>

Då resten av sidan:

   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.

I slutet ingår vi en footer-fil. För detta tema används inte footer-filen, så vi behöver verkligen inte den. Men jag lämnar temat öppet slutade så vi ska inkludera det ändå. För detta tema vill vi bara ha tagga in där.

PHP Ta bort P från innehåll

Som du kanske har märkt. Utdragstexten för bloggartiklarna är större än vad den borde vara. Orsaken är att vi använde funktionen the_content (), som sveper utdraget i en extra p-tagg. Hur fixar vi det här? Vi måste lägga till en rad överst i index.php-filen:

Sammanfatta

Nu ser allt ut rätt. Men det finns fortfarande mycket fler saker att täcka som enskilda inlägg, sökning, pagination och kommentarer innan det här är ett komplett och användbart tema! Jag hoppas att du lärde dig mycket, och se till att du kolla in den sista inlägget i den här serien nästa vecka!

Koda