WordPress Tutorial: Hur man skapar ett WordPress-tema från HTML (del 2)

  1. 1. WordPress Tutorial: Hur man skapar ett WordPress-tema från HTML (del 1)
  2. 2. Läser för tillfället: WordPress Tutorial: Hur man skapar ett WordPress-tema från HTML (del 2)
  3. 3. En introduktion till anatomi av ett WordPress-tema

I en del av denna handledning täckte vi grunderna för att konvertera en HTML-mall till ett WordPress-tema. Om du är lite nyfiken, lärde vi oss några saker om att dela HTML-mallar i PHP-filer, sätta tillbaka dem, utforma och namnge WordPress-teman. Vi har verkligen lärt oss mycket, och du kommer att vilja bekanta dig med de koncept som vi behandlade i vår första handledning för att njuta av den andra portionen. I dagens inlägg kommer vi att ta saker och ting högre. Vi kommer att täcka några fler områden så att du kan skapa ett fullt funktionellt WordPress-tema. Så, utan vidare, här går vi.


Konfigurera bilder och JavaScript-filer

Om du hade bilder i din ursprungliga HTML-mall (index.html), märkte du antagligen att de slutade visa efter att ha hackat mallen till PHP-filer. Oroa dig inte alls, det är precis som PHP är. Om du till exempel hade en logotyp i ditt rubrikavsnitt så …

your_logo_alt_text

… du måste spela lite med koden. Koden jag kommer att avslöja på ett ögonblick hjälper webbläsare att hitta din logotyp (eller någon annan bild) i din bilder -mappen, som är (eller borde vara) en undermapp av ditt temas huvudkatalog. Så för att visa din logotyp i rubrikavsnittet öppnar du filen header.php och ersätter koden ovan med följande:

your_logo_alt_text

Funktionen get_template_directory_uri () returnerar webbadressen för din temakatalog. Så om du lägger till din logotyp i en bildmapp, kommer koden att ta tag i logotypen.

Lägg märke till någon skillnad? Uppenbarligen kommer denna kodkod bara att fixa din logotyp. För att fixa andra bilder måste du skriva om deras koder på liknande sätt. Lätt peasy grejer.

Låt oss gå vidare till JavaScript. Om din HTML-webbplats använde JavaScript, skapar du en mapp med namnet js och placera dina skript där. Du kan ringa dem i header.php-filen med följande kod:

Ovanstående kod använder example.js som en illustration. Glöm inte att byta ut den delen med namnet på din JavaScript-fil.

Naturligtvis om du skapar ett tema för någon annan, borde du verkligen ladda dina js-filer med wp_enqueue_scripts. Kolla in AJ: s inlägg om att lägga till JavaScript till WordPress-teman för mer information och tips.

Mallfiler

I en del av denna handledning nämnde vi fyra grundläggande mallfiler nämligen index.php, header.php, sidebar.php och footer.php. Mallfiler styr hur din webbplats ska visas på webben. Mallar får information från din WordPress ‘MySQL-databas och översätter samma till HTML-kod som visas i webbläsare. Med andra ord är mallfiler byggstenarna i WordPress-teman. För att få en bättre förståelse av mallar, låt oss gå in i ett koncept som kallas mall hierarki.

Vi kommer att använda en analogi. Om en besökare klickar på en kategorilänk (dvs. länk till en kategori) som http://www.yoursite.com/blog/category/your-category/, använder WordPress mallhierarki för att generera rätt fil (och innehåll) som förklaras nedan:

  • Först letar WordPress efter en mallfil som matchar kategori-ID
  • Om kategorin-ID till exempel är 2 kommer WordPress att leta efter en mallfil med namnet kategori-2.php
  • Om kategori-2.php inte är tillgängligt, kommer WordPress att gå för en generisk kategorimallfil som kategori.php
  • Om den här mallfilen inte är tillgänglig också kommer WordPress att leta efter en generisk arkivmall som arkiv.php
  • Om den generiska arkivmallen inte finns, kommer WordPress att falla tillbaka på huvudmallfilen, index.php

Så fungerar WordPress-mallar och du kan använda dessa filer för att anpassa ditt WordPress-tema för att passa dina behov. Andra mallfiler inkluderar:

home.php eller index.phpAnvänds för att göra blogginläggets index
front-page.phpAnvänds för att rendera statiska sidor eller senaste inlägg som anges på förstasidan
single.phpAnvänds för att återge en enda inläggssida
single- {post-typ} .phpAnvänds för att återge anpassade inläggstyper, t.ex. om posttyp var en produkt, skulle WordPress använda single-product.php
page.phpAnvänds för att rendera statiska sidor
category.php eller archive.phpAnvänds för att rendera Category Archive-index
author.phpAnvänds för att återge författaren
date.phpAnvänds för att återge datum
search.phpAnvänds för att göra sökresultat
404.phpAnvänds för att rendera servern 404-felsida

Det här är bara en kort lista, det finns många andra WordPress-mallar. Ämnet med mallar är stort, och det bästa sättet att lära sig att spela med mallfiler är genom att läsa det omfattande Temautveckling bibliotek på WordPress. Alternativt kan du läsa kortare Mallavsnitt på WordPress Codex.

Mall Taggar

Eftersom vi just introducerade mallfiler är det bara rättvist att nämna en sak eller två om malltaggar och den roll de spelar i WordPress-teman. Enligt WordPress.org används “… malltaggar i din bloggs mall för att visa information dynamiskt eller på annat sätt anpassa din blogg, vilket ger verktygen för att göra den så individuell och intressant som du är.”

I vår tidigare handledning mötte du några malltaggar som get_header, get_sidebar, get_footer och bloginfo. I följande avsnitt lägger vi till några malltaggar till vårt nyligen skapade WordPress-tema. Jag antar att du redan har inkluderat DOCTYPE-deklarationen i din header.php-fil. Om du inte har det här är koden:

DOCTYPE-deklarationen ger din HTML-kod mening. Med det ur vägen, låt oss ändra den öppnande HTML-taggen. Vi kommer att inkludera ett lang attribut med hjälp av språk_attributtagg såhär:

Ovanstående kod genererar följande:

Med DOCTYPE-deklarationen och language_attribute-taggen på plats är ditt temas struktur legitim och webbläsare förstår din kod. Om du skapar ett tema för en blogg är det viktigt att placera länkar till din pingback-URL och RSS-flöde i huvudet. Lägg till följande kod i din header.php:

Visste du hur vi anställde? bloginfo-tagg att inkludera RSS-flöde (‘rss2_url’) och pingback (‘pingback_url’)? Innan du sparar din header.php-fil ska du lägga till följande kod:

Ovanstående wp_head-tagg drar in formatmallar och JavaScript-filer som krävs av dina plugins. Om du lämnar bort det lilla kodstycket, kanske dina plugins inte fungerar som önskat. Med det ur vägen, låt oss lägga till sidtitlar till vårt WordPress-tema med – återigen – bloginfo-taggen. Lägg till följande kod i din header.php-fil:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

Den första taggen wp_title lägger till titeln på din sida eller inlägg och den andra taggen bloginfo (“namn”) lägger till ditt bloggnamn. Nu när ditt WordPress-tema har sidtitlar, hur kan vi skapa en skärmdump för vårt tema, packa om temat och ta en vila?

Skapa en skärmdump för ditt tema

När du laddade upp ditt testtema första gången måste du ha märkt att det saknade en skärmdump i WordPress temapanel. Det såg tråkigt ut, särskilt om du hade andra teman med färgglada skärmdumpar. Men oroa dig inte, att skapa en skärmdump för ditt tema är väldigt enkelt. Skapa bara en bild med din favoritbildredigerare (t.ex. Adobe Photoshop) eller ta en skärmbild av ditt tema. Se till att din bild är 600px bred och 450px hög. Spara bilden som screenshot.png i din temamapp. Spara alla ändringar, komprimera din temamapp i ett ZIP-arkiv. Ladda upp temat och aktivera det för att se dina nya ändringar ��

Slutsats

Jag vill tro att denna andra handledning gav dig djupare insikt i hur du skapar ett WordPress-tema från statisk HTML. I en snar framtid kommer jag att presentera andra aspekter av WordPress-teman, men under tiden har jag förberett följande resurser precis för dig:

Lycklig skapande!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map