1. 1. WordPress-opplæring: Hvordan lage et WordPress-tema fra HTML (del 1)
  2. 2. Leser for øyeblikket: WordPress-opplæring: Hvordan lage et WordPress-tema fra HTML (del 2)
  3. 3. Et intro til anatomi av et WordPress-tema

I del en av denne opplæringen dekket vi det grunnleggende om å konvertere en HTML-mal til et WordPress-tema. Hvis du er en smule nysgjerrig, lærte vi noen få ting om å dele opp HTML-maler i PHP-filer, sette dem sammen igjen, styling og navngi WordPress-temaer. Virkelig, vi lærte mye, og du vil sette deg inn i konseptene vi dekket i vår første opplæring for å glede deg over denne andre serveringen. I dagens innlegg vil vi ta ting et hakk høyere. Vi vil dekke noen flere områder slik at du kan lage et fullt funksjonelt WordPress-tema. Så uten videre, her går vi.


Konfigurere bilder og JavaScript-filer

Hvis du hadde bilder i den originale HTML-malen (index.html), merket du sannsynligvis at de sluttet å vise seg etter å ha haket opp malen til PHP-filer. Ikke bekymre deg i det hele tatt, det er akkurat slik PHP er. Hvis du for eksempel hadde en logo i overskriftsdelen, så …

your_logo_alt_text

… du må leke litt med koden. Koden jeg vil avsløre om et øyeblikk, vil hjelpe nettlesere med å finne logoen din (eller et hvilket som helst annet bilde) i din Bilder mappe, som er (eller bør være) en undermappe i hovedkatalogen til temaet ditt. Så for å vise logoen din i overskriftsdelen, åpner du header.php-filen og erstatter koden ovenfor med følgende:

your_logo_alt_text

Funksjonen get_template_directory_uri () returnerer url for temakatalogen. Så hvis du legger til logoen din i en bildemappe, vil koden ta tak i den logoen.

Legg merke til noen forskjell? Det er klart at dette kodestykket bare fikser logoen din. For å fikse andre bilder, må du skrive kodene på lignende måte. Lett peasy ting.

La oss gå videre til JavaScript. Hvis HTML-nettstedet ditt brukte JavaScript, lager du en mappe med navnet js og plasser skriptene dine der. Du kan ringe dem i header.php-filen ved å bruke følgende kode:

Koden ovenfor bruker example.js som en illustrasjon. Ikke glem å erstatte den delen med navnet på JavaScript-filen.

Selvfølgelig, hvis du lager et tema for noen andre, burde du virkelig laste js-filene dine med wp_enqueue_scripts. Sjekk ut AJs innlegg om å legge til JavaScript i WordPress-temaer for mer info og tips.

Malfiler

I del en av denne opplæringen nevnte vi fire grunnleggende malfiler, nemlig index.php, header.php, sidebar.php og footer.php. Malfiler styrer hvordan nettstedet ditt skal vises på nettet. Maler får informasjon fra din WordPress ‘MySQL-database og oversetter den til HTML-kode som vises i nettlesere. Med andre ord er malfiler byggesteinene til WordPress-temaer. For å få en bedre forståelse av maler, la oss fordype oss i et konsept kjent mal hierarki.

Vi vil bruke en analogi. Hvis en besøkende klikker på en kategorilink (dvs. lenke til en kategori) som http://www.yoursite.com/blog/category/your-category/, bruker WordPress malen hierarki for å generere riktig fil (og innhold) som forklart nedenfor:

  • For det første vil WordPress se etter en malfil som samsvarer med kategorien ID
  • Hvis kategoriens ID for eksempel er 2, vil WordPress se etter en malfil med navnet kategori-2.php
  • Hvis kategori-2.php ikke er tilgjengelig, vil WordPress gå for en generell kategorimalfil som for eksempel kategori.php
  • Hvis denne malfilen også ikke er tilgjengelig, vil WordPress se etter en generisk arkivmal som archive.php
  • Hvis den generiske arkivmalen ikke eksisterer, vil WordPress falle tilbake på hovedmalfilen, index.php

Slik fungerer WordPress-maler, og du kan bruke disse filene til å tilpasse WordPress-temaet ditt til dine behov. Andre malfiler inkluderer:

home.php eller index.phpBrukes til å gjengi blogginnleggene indeksen
front-page.phpBrukes til å gjengi statiske sider eller siste innlegg som angitt på forsiden
single.phpBrukes til å gjengi en enkel postside
én- {post-type} phpBrukes til å gjengi tilpassede innleggstyper f.eks. Hvis posttypen var et produkt, ville WordPress bruke single-product.php
page.phpBrukes til å gjengi statiske sider
category.php eller archive.phpBrukes til å gjengi indeks for Category Archive
author.phpBrukes til å gjengi forfatteren
date.phpBrukes til å gjengi dato
search.phpBrukes til å gjengi søkeresultater
404.phpBrukes til å gjengi feilsiden for server 404

Dette er bare en kort liste, det er mange andre WordPress maler. Temaet for maler er stort, og den beste måten å lære å spille med malfiler er ved å lese det omfattende Temautvikling bibliotek hos WordPress. Alternativt kan du lese den kortere Maleseksjon hos WordPress Codex.

Maletiketter

Da vi nettopp introduserte malfiler, er det bare rimelig å nevne en ting eller to om malkoder, og hvilken rolle de spiller i WordPress-tema. I følge WordPress.org brukes “… malkoder i bloggens mal for å vise informasjon dynamisk eller på annen måte tilpasse bloggen din, og gir verktøyene for å gjøre den så individuell og interessant som du er.”

I vår forrige veiledning møtte du noen få malkoder som get_header, get_sidebar, get_footer og bloginfo. I den følgende delen legger vi til noen få malkoder til vårt nyopprettede WordPress-tema. Jeg antar at du allerede har inkludert DOCTYPE-erklæringen i header.php-filen din. Hvis du ikke har det, her er koden:

DOCTYPE-deklarasjonen gir din HTML-kode mening. Med det ute av veien, la oss endre HTML-koden som åpnes. Vi vil inkludere en lang attributt ved å bruke språk_attributter som så:

Koden ovenfor vil generere følgende:

Når DOCTYPE-erklæringen og language_attribute-koden er på plass, er temastruktur legitim og nettlesere vil forstå koden din. Hvis du oppretter et tema for en blogg, er det viktig å plassere lenker til pingback-URL og RSS-feed i hodet. Legg til følgende kode i header.php:

La du merke til hvordan vi ansatte bloginfo-tagg å inkludere RSS-strømmen (‘rss2_url’) og pingback (‘pingback_url’)? Før du lagrer header.php-filen, legger du også til følgende kode:

Den ovennevnte wp_head-taggen vil trekke inn stilark og JavaScript-filer som kreves av programtilleggene dine. Hvis du legger ut dette lille koden, kan det hende at plugins ikke fungerer som ønsket. Med det ute av veien, la oss legge til sidetitler til WordPress-temaet vårt ved å bruke bloggenfo-koden – nok en gang. Legg til følgende kode i header.php-filen din:

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

Den første taggen wp_title vil legge til tittelen på siden eller innlegget ditt og den andre taggen bloginfo (‘navn’) vil legge til bloggenavnet ditt. Nå som ditt WordPress-tema har sidetitler, hva med å lage et skjermbilde for temaet vårt, pakke temaet på nytt og ta en hvil?

Lage et skjermbilde for ditt tema

Når du lastet opp testtemaet første gang, må du ha lagt merke til at det manglet et skjermbilde i WordPress temapanel. Det så trist ut, spesielt hvis du hadde andre temaer med fargerike skjermbilder. Men bekymre deg ikke, det er veldig enkelt å lage et skjermbilde for temaet ditt. Bare lag et bilde ved å bruke din favorittbildeditor (f.eks. Adobe Photoshop) eller ta et skjermbilde av temaet ditt. Forsikre deg om at bildet ditt er 600px bredt og 450px høyt. Lagre bildet som screenshot.png i temamappen din. Lagre alle endringer, komprimér temamappen i et ZIP-arkiv. Last opp temaet og aktiver det for å se de nye endringene ��

Konklusjon

Jeg vil tro denne andre opplæringen ga deg dypere innsikt i å lage et WordPress-tema fra statisk HTML. I løpet av en nær fremtid vil jeg introdusere deg for andre aspekter ved WordPress-tema, men i mellomtiden har jeg forberedt følgende ressurser bare for deg:

Glad å skape!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me