WordPress-tutorial: Sådan opretter du et WordPress-tema fra HTML (del 2)

  1. 1. WordPress-tutorial: Sådan opretter du et WordPress-tema fra HTML (del 1)
  2. 2. I øjeblikket læser: WordPress-tutorial: Sådan opretter du et WordPress-tema fra HTML (del 2)
  3. 3. En introduktion til anatomi af et WordPress-tema

I del et af denne tutorial dækkede vi det grundlæggende ved at konvertere en HTML-skabelon til et WordPress-tema. Hvis du er en smule nysgerrig, lærte vi et par ting om at opdele HTML-skabeloner i PHP-filer, sætte dem sammen igen, style og navngive WordPress-temaer. Virkelig, vi lærte meget, og du vil gøre dig bekendt med de koncepter, vi dækkede i vores første tutorial til at nyde denne anden portion. I dagens indlæg tager vi tingene et hakk højere. Vi vil dække et par flere områder, så du kan oprette et fuldt funktionelt WordPress-tema. Så uden videre, her går vi.


Konfiguration af billeder og JavaScript-filer

Hvis du havde billeder i din originale HTML-skabelon (index.html), har du sandsynligvis bemærket, at de stoppede med at vise, efter at hakket skabelonen op i PHP-filer. Bare rolig ikke, det er lige som PHP er. For eksempel, hvis du havde et logo i dit overskriftssnit sådan …

your_logo_alt_text

… du bliver nødt til at lege lidt med koden. Koden, jeg vil afsløre i et øjeblik, hjælper browsere med at finde dit logo (eller ethvert andet billede) i dit billeder mappe, som er (eller burde være) en undermappe i dit temas hovedmappe. Så for at vise dit logo i overskriftsafsnittet, skal du åbne filen header.php og erstatte ovenstående kode med følgende:

your_logo_alt_text

Funktionen get_template_directory_uri () returnerer url’en til dit temakatalog. Så hvis du tilføjer dit logo til en billedmappe, griber koden det logo.

Bemærk nogen forskel? Naturligvis vil dette stykke kode kun løse dit logo. For at rette andre billeder skal du omskrive deres koder på lignende måde. Let tærlige ting.

Lad os gå videre til JavaScript. Hvis dit HTML-websted anvendte JavaScript, skal du oprette en navngivet mappe js og placer dine scripts der. Du kan kalde dem i header.php-filen ved hjælp af følgende kode:

Ovenstående kode bruger example.js som en illustration. Glem ikke at erstatte den del med navnet på din JavaScript-fil.

Selvfølgelig, hvis du opretter et tema til en anden, skal du virkelig indlæse dine js-filer med wp_enqueue_scripts. Checkout AJ’s indlæg om tilføjelse af JavaScript til WordPress-temaer for mere info og tip.

Skabelonfiler

I del et af denne tutorial nævnte vi fire grundlæggende skabelonfiler, nemlig index.php, header.php, sidebar.php og footer.php. Skabelonfiler styrer, hvordan dit websted skal vises på nettet. Skabeloner henter oplysninger fra din WordPress ‘MySQL-database og oversætter den samme til HTML-kode, der vises i webbrowsere. Med andre ord er skabelonfiler byggestenene i WordPress-temaer. For at få en bedre forståelse af skabeloner, lad os undersøge et koncept kendt som skabelon hierarki.

Vi bruger en analogi. Hvis en besøgende klikker på et kategori-link (dvs. link til en kategori) såsom http://www.yoursite.com/blog/category/your-category/, bruger WordPress skabelonhierarki til at generere den rigtige fil (og indhold) som forklaret nedenfor:

  • For det første vil WordPress kigge efter en skabelonfil, der matcher kategori-ID
  • Hvis kategoriens ID for eksempel er 2, vil WordPress kigge efter en skabelonfil med navnet kategori-2.php
  • Hvis kategori-2.php ikke er tilgængelig, vil WordPress gå efter en generisk kategoriskabelonfil, såsom kategori.php
  • Hvis denne skabelonfil også ikke er tilgængelig, vil WordPress kigge efter en generisk arkivskabelon såsom archive.php
  • Hvis den generiske arkivskabelon ikke findes, falder WordPress tilbage på hovedskabelonfilen, index.php

Sådan fungerer WordPress-skabeloner, og du kan bruge disse filer til at tilpasse dit WordPress-tema, så det passer til dine behov. Andre skabelonfiler inkluderer:

home.php eller index.phpBruges til at gengive blogindlægsindekset
front-page.phpBruges til at gengive statiske sider eller seneste indlæg, som de er angivet på forsiden
single.phpBruges til at gengive en enkelt postside
enkelt- {post-typen} .phpBruges til at gengive tilpassede indlægstyper f.eks. hvis posttypen var et produkt, ville WordPress bruge single-product.php
page.phpBruges til at gengive statiske sider
category.php eller archive.phpBruges til at gengive Category Archive-indekset
author.phpBruges til at gengive forfatteren
date.phpBruges til at gengive dato
search.phpBruges til at gengive søgeresultater
404.phpBruges til at gengive fejlsiden til server 404

Dette er kun en kort liste, der er mange andre WordPress-skabeloner. Emnet for skabeloner er stort, og den bedste måde at lære at lege med skabelonfiler er ved at læse det omfattende Temaudvikling bibliotek hos WordPress. Alternativt kan du læse den kortere Skabeloner Afsnit på WordPress Codex.

Skabelon tags

Da vi lige har introduceret skabelonfiler, er det kun rimeligt at nævne en ting eller to om skabelonmærker, og den rolle, de spiller i WordPress-tema. Ifølge WordPress.org bruges “… skabelon tags i din blogs skabelon til at vise oplysninger dynamisk eller på anden måde tilpasse din blog, hvilket giver værktøjerne til at gøre den så individuel og interessant som du er.”

I vores tidligere tutorial mødte du et par skabelon tags såsom get_header, get_sidebar, get_footer og bloginfo. I det følgende afsnit tilføjer vi et par skabelonmærker til vores nyoprettede WordPress-tema. Jeg antager, at du allerede har inkluderet DOCTYPE-erklæringen i din header.php-fil. Hvis du ikke har det, her er koden:

DOCTYPE-erklæringen giver din HTML-kode mening. Lad os ændre det åbne HTML-tag med det ude af vejen. Vi inkluderer en lang attribut ved hjælp af sprog_attributttag ligesom:

Ovenstående kode genererer følgende:

Med DOCTYPE-erklæringen og sprog_attributtag på plads, er dit temas struktur legitim, og browsere vil forstå din kode. Hvis du opretter et tema til en blog, er det vigtigt at placere links til din pingback-URL og RSS-feed i dit hoved. Tilføj din kode i din header.php:

Bemærkede du, hvordan vi beskæftigede os med bloginfo-tag at inkludere RSS-feed (‘rss2_url’) og pingback (‘pingback_url’)? Før du gemmer din header.php-fil, skal du også tilføje følgende kode:

Ovenstående wp_head-tag trækker stilark og JavaScript-filer, der kræves af dine plugins. Hvis du udelader dette lille stykke kode, fungerer dine plugins muligvis ikke som ønsket. Med det ude af vejen, lad os tilføje sidetitler til vores WordPress-tema ved hjælp af – endnu en gang – bloginfo-tagget. Tilføj din kode i din header.php-fil:

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

Det første tag wp_title tilføjer titlen på din side eller dit indlæg og det andet tag bloginfo (‘navn’) tilføjer dit blognavn. Nu hvor dit WordPress-tema har sidetitler, hvad med at oprette et skærmbillede til vores tema, pakke temaet igen og hvile dig?

Oprettelse af et skærmbillede til dit tema

Når du uploadede dit testtema første gang, skal du have bemærket, at det manglede et skærmbillede i WordPress-temapanel. Det så trist ud, især hvis du havde andre temaer med farverige skærmbilleder. Men rol ikke, det er meget let at oprette et skærmbillede til dit tema. Opret bare et billede ved hjælp af din yndlingsbilledseditor (f.eks. Adobe Photoshop) eller tag et skærmbillede af dit tema. Sørg for, at dit billede er 600px bredt og 450px højt. Gem billedet som screenshot.png i din temamappe. Gem alle ændringer, komprimér din temamappe i et ZIP-arkiv. Upload temaet, og aktiver det for at se dine nye ændringer ��

Konklusion

Jeg vil tro, at denne anden tutorial gav dig en dybere indsigt i at oprette et WordPress-tema fra statisk HTML. I den nærmeste fremtid vil jeg introducere dig til andre aspekter af WordPress-tema, men i mellemtiden har jeg forberedt følgende ressourcer lige til dig:

Glad at skabe!

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