En introduktion til anatomi af et WordPress-tema

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

For et stykke tid siden introducerede vi dig konceptet om at oprette et WordPress-tema fra HTML. Vi deler oplæringen i to dele, og i dag handler vi om at uddele de to tutorials, så føl dig fri til at betragte dette indlæg som den tredje servering i postserien. Mit mål er at adskille WordPress-temaet for at give dig et klart billede af, hvordan det (temaet) fungerer.


Dette indlæg antager, at du har et arbejdsmæssigt kendskab til HTML og CSS. Jeg vil gå videre og erklære, at det at have HTML- og CSS-færdigheder er en forudsætning for at designe WordPress-temaer. En ting til, dette indlæg forbliver klart af store ord og vanskelige begreber – det vil være let at forstå, så vær klar til at have det sjovt og lære.

Lidt HTML-priming

Hver HTML-webside er opdelt i forskellige dele vha

tag. For eksempel kan du bryde kroppen () på dit websted i flere sektioner, såsom navigation, header, hovedindhold, sidebjælke og sidefod blandt andre.

Når du har din webside i sektioner, kan du bestille (eller arrangere) sektionerne, som du ønsker ved hjælp af CSS. Denne proces er kendt som styling, og den involverer tilføjelse af andre stilelementer som farve, størrelse, rammer, specialeffekter osv. Sådan er kraften i CSS, der – forresten – er en forkortelse for Cascading Style Sheets. Når du sætter dine HTMl- og CSS-filer sammen og kaster et par billeder, ender du med et komplet websted.

Tingene er ikke meget forskellige med WordPress-temaer. Som vi så i del 1 af Sådan opretter du et WordPress-tema fra HTML, er WordPress-temaer opdelt i forskellige filer. Hvis du ikke kan se nogen lighed på dette tidspunkt, så lad mig forklare det.

Statiske HTML-websider er opdelt i opdelinger (hvad vi kaldte sektioner tidligere) ved hjælp af

tags (eller tabeller, hvis du virkelig er old school). På den anden side er WordPress-temaer opdelt i forskellige php-filer, som derefter sættes sammen ved hjælp af skabelon tags.

Derfor, i stedet for at have alle organelementer (header, hovedindhold, sidebjælke, sidefod osv.), Der bor i en enkelt fil (som tilfældet er med statisk HTML), lever hvert af bodyelementerne (i WordPress-temaer) i en separat filer.

Så overskriften lever i header.php, sidebjælken finder hjem i sidebar.php, hovedindholdet lever i index.php eller single.php (hvis det er et indlæg) eller side.php (hvis det er en side ). Sidefodssektionen lever i footer.php og så videre.

Er du med? Se illustrationen herunder:

html-wordpress = struktur

Fra vores illustration ovenfor, , og kaldes skabelon tags. Deres arbejde er at hente header.php, sidebar.php og footer.php i den rækkefølge fra dit temakatalog, og vise indholdet i din index.php og dermed udfylde websiden.

Lad ikke det .php udvidelse skræmmer dig, indholdet i php-filer er bare HTML-kode, som du er bekendt med. For eksempel kan din header.php indeholde typisk navigation på HTML-listen. Tilsvarende kan du placere typisk HTML-kode i footer.php, sidebar.php og index.php.

Du kan også placere loop.php funktion i din index.php (eller hvor som helst du har lyst til) for at få vist dine blogindlæg, men jeg burde bremse og komme tilbage til anatomi af WordPress-temaer. Jeg har nævnt en ting eller to om løkken i del 2 om, hvordan man opretter et WordPress-tema fra HTML. og vi vil tale om det (loopen) og andre funktioner i fremtiden.

Komme videre…

Et grundlæggende WordPress-tema består af mindst fire skabelonfiler, nemlig:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Lad os se hvad der går ind i hver af disse magiske filer:

Index.php skabelon fil

Dette er den vigtigste fil, uden hvilken du ikke har et fungerende WordPress-tema. Det er den første (eller standard) fil, der indlæses, når du besøger et WordPress-websted. Overvej det som ækvivalent med index.html.

En typisk index.php i WordPress-temaer vil se sådan ud:





Du kan tilføje løkken mellem og for at få vist blogindlæg på hjemmesiden (index.php) som vist nedenfor:




Header.php-skabelonfil

Denne skabelonfiler indeholder din header-kode, navigation og HTML-hovedkode. Grundlæggende gemmer header.php alt hvad du vil vise øverst på dit websted. Du ved, ting som titlen på dit websted og lignende ting.

Du linker også til dit CSS-stilark i header.php. Her er et grundlæggende eksempel på header.php:





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







Dette er overskriftsafsnit. Læg dit logo og andre detaljer her.

Sidebar.php-skabelonfil

Sidebar.php indeholder alt hvad du har brug for for at kunne vises på din / sidebjælken. Sidepanelet indeholder yderligere menuer, widgets, kategorier, sociale medieikoner, brugerdefineret indhold, HTML-kode, såsom annoncer osv..

Sidebar.php kan indeholde ren HTML-markering eller php-funktionskald afhængigt af dine behov. Som sådan kan en grundlæggende sidebar.php se ud:

Footer.php skabelon fil

Hvad tror du går ind i footer.php? Du kan sætte dine copyright-oplysninger her, yderligere menuer, links, ikoner på sociale medier – alt hvad du vil! Vil du gerne se, hvordan en grundlæggende footer.php ser ud? Her:

Placer dit sidefodsindhold her inklusive opkald til php-funktion (for at hente forskellige skabelonfiler f.eks. Search.php) om nødvendigt.

Bemærk! og lukke tags i footer.php? Kan du gætte, hvorfor de skal inkluderes i footer.php? På samme måde kan du gætte, hvorfor og åbningskoder er inkluderet i header.php? Fortæl os dine gætter i kommentarsektionen i slutningen af ​​dette indlæg ��

De fire skabelonfiler, vi lige har dækket ovenfor, udgør et meget grundlæggende WordPress-tema. Der er mange andre skabelonfiler; der er en skabelonfil for hvert element, du ser på et WordPress-tema, det være sig kommentarer, søgeresultater og 404 fejlsider bare for at nævne et par.

For fuldt ud at forstå anatomien i et WordPress-tema skal du gøre dig bekendt med forskellige skabelonfiler. Du kan gennemse alle brugbare skabelonfliser på WordPress.

Så har vi skabelonmærker, som WordPress bruger til at hente skabelonfiler fra temagrammet. Du kan lære mere om skabelon tags, og den rolle, de spiller på WordPress.

Resumé

Et WordPress-tema består af følgende anatomiske elementer:

  • Skabelonfiler såsom index.php, header.php, search.php, category.php osv
  • Skabelon tags såsom , etc
  • CSS
  • Billeder og andre mediefiler
  • JavaScript-filer

Og her er en illustration, der opsummerer anatomien i et WordPress-tema:

Ønsker du at fortsætte med at lære? Check det detaljerede tema anatomi guide i WordPress Codex.

Konklusion

Hvert WordPress-tema, du ser på internettet, bruger den samme anatomiske struktur (endda vores populære Total WordPress-tema), som du kan tilpasse til at imødekomme dine behov. Når du har viklet hovedet omkring det grundlæggende i WordPress-temaudvikling, er der ingen grænser for, hvad du kan gøre med / til WordPress-temaer.

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