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

For en stund siden introduserte vi deg konseptet om å lage et WordPress-tema fra HTML. Vi delte opplæringen i to deler, og i dag handler vi om å utdanne de to opplæringsprogrammene, så se gjerne dette innlegget som den tredje serveringen i postserien. Målet mitt er å ta fra hverandre WordPress-temaet for å gi deg et klart bilde av hvordan det (temaet) fungerer.


Dette innlegget forutsetter at du har arbeidskunnskap om HTML og CSS. Jeg vil gå foran og erklære at det å ha HTML- og CSS-ferdigheter er en forutsetning for å utforme WordPress-temaer. En ting til, dette innlegget vil forbli klart fra store ord og vanskelige konsepter – det vil være lett å forstå, så vær klar til å ha det moro og lære.

Litt HTML grunning

Hver HTML-webside er delt inn i forskjellige deler ved å bruke

stikkord. For eksempel kan du knekke kroppen () av nettstedet ditt i flere seksjoner som blant annet navigasjon, topptekst, hovedinnhold, sidefelt og bunntekst.

Når du har websiden din i seksjoner, kan du bestille (eller ordne) delene slik du ønsker ved hjelp av CSS. Denne prosessen er kjent som styling, og den innebærer å legge til andre stilelementer som farge, størrelse, rammer, spesialeffekter osv. Slik er kraften til CSS, som – forresten – er en forkortelse for Cascading Style Sheets. Når du setter sammen HTMl- og CSS-filene dine og kaster inn et par bilder, ender du opp med et komplett nettsted.

Ting er ikke veldig forskjellige med WordPress-temaer. Som vi så i del 1 av Hvordan lage et WordPress-tema fra HTML, blir WordPress-temaer delt opp i forskjellige filer. Hvis du ikke kan oppdage noen likhet på dette punktet, la meg forklare.

Statiske HTML-nettsider er delt inn i divisjoner (det vi kalte seksjoner tidligere) ved å bruke

koder (eller tabeller hvis du virkelig er old school). På den annen side er WordPress-temaer delt opp i forskjellige php-filer, som deretter settes sammen igjen ved hjelp av malkoder.

Derfor, i stedet for å ha alle kroppselementer (topptekst, hovedinnhold, sidefelt, bunntekst osv.) Som bor i en enkelt fil (som tilfellet er med statisk HTML), lever hvert av kroppselementene (i WordPress-temaer) i en egen fil.

Så vil toppteksten leve i header.php, sidefeltet vil finne hjem i sidebar.php, hovedinnholdet vil leve i index.php, eller single.php (hvis det er et innlegg) eller page.php (hvis det er en side ). Bunntekstdelen vil leve i footer.php og så videre.

Følger du med? Sjekk ut illustrasjonen nedenfor:

html-wordpress = struktur

Fra illustrasjonen ovenfor, , og kalles malkoder. Deres arbeid er å hente header.php, sidebar.php og footer.php i den rekkefølgen fra temakatalogen, og vise innholdet i index.php, og dermed fullføre websiden.

Ikke la .php utvidelsen skremmer deg, innholdet i php-filer er bare HTML-kode som du er kjent med. F.eks. Kan header.php inneholde typisk navigasjon på HTML-listen. På samme måte kan du sette typisk HTML-kode i footer.php, sidebar.php og index.php.

Du kan også plassere loop.php funksjon i index.php (eller hvor som helst du vil) for å vise blogginnleggene dine, men jeg burde bremse ned og komme tilbake til anatomi av WordPress-temaer. Jeg har nevnt en ting eller to om loopen i del 2 om hvordan du lager et WordPress-tema fra HTML. og vi vil snakke om det (loopen) og andre funksjoner i fremtiden.

Går videre…

Et grunnleggende WordPress-tema består av minst fire malfiler, nemlig:

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

La oss se hva som går inn på hver av disse magisk filer:

Index.php malfil

Dette er hovedfilen som du ikke har et fungerende WordPress-tema uten. Det er den første (eller standard) filen som lastes inn når du besøker et WordPress-nettsted. Tenk på det som tilsvarer index.html.

En typisk index.php i WordPress-temaer vil se slik ut:





Du kan legge løkken mellom og for å vise blogginnlegg på hjemmesiden (index.php) som vist nedenfor:




Malfil for Header.php

Denne malfilene inneholder overskriftskoden, navigasjonen og HTML-hodekoden. I utgangspunktet lagrer header.php alt du vil vise på toppen av nettstedet ditt. Du vet, ting som tittelen på nettstedet ditt og sånt.

Du lenker også til CSS-stilarket i header.php. Her er et grunnleggende eksempel på header.php:





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







Dette er overskriftsseksjonen. Legg din logo og andre detaljer her.

Sidebar.php malfil

Sidebar.php inneholder alt du trenger for å vises på sidefeltet. Sidefeltet inneholder flere menyer, widgets, kategorier, sosiale medieikoner, tilpasset innhold, HTML-kode som reklame osv..

Sidebar.php kan inneholde ren HTML-merking eller php-funksjonskall avhengig av dine behov. Som sådan kan en grunnleggende sidepanel.php se ut:

Footer.php-malfil

Hva tror du går inn i footer.php? Du kan legge til din copyrightinformasjon her, tilleggsmenyer, lenker, ikoner for sosiale medier – alt du vil! Vil du se hvordan en grunnleggende footer.php ser ut? Her:

Legg inn bunntekstinnholdet her inkludert php-funksjonssamtaler (for å hente forskjellige malfiler, f.eks. Search.php) om nødvendig.

Legg merke til og lukke koder i footer.php? Kan du gjette hvorfor de må inkluderes i footer.php? Kan du på samme måte gjette hvorfor og åpningskoder er inkludert i header.php? Gi oss beskjed om dine gjetninger i kommentarfeltet på slutten av dette innlegget ��

De fire malfilene vi nettopp dekket over, utgjør et veldig grunnleggende WordPress-tema. Det er mange andre malfiler; det er en malfil for hvert element du ser på et WordPress-tema, det være seg kommentarer, søkeresultater og 404 feilsider bare for å nevne noen få.

For å forstå anatomien til et WordPress-tema fullt ut, må du gjøre deg kjent med forskjellige malfiler. Du kan bla gjennom alle brukbare malfliser hos WordPress.

Så har vi malkoder, som WordPress bruker for å hente malfiler fra temakatalogen. Du kan lære mer om malkoder, og rollen de spiller på WordPress.

Sammendrag

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

  • Malfiler som index.php, header.php, search.php, category.php osv
  • Maletiketter som , etc
  • CSS
  • Bilder og andre mediefiler
  • JavaScript-filer

Og her er en illustrasjon som oppsummerer anatomien til et WordPress-tema:

Ønsker du å fortsette å lære? Kassen den detaljerte tema anatomi guide i WordPress Codex.

Konklusjon

Hvert WordPress-tema du ser på nettet bruker den samme anatomiske strukturen (til og med vårt populære Total WordPress Theme), som du kan tilpasse for å imøtekomme dine behov. Når du har viklet hodet rundt det grunnleggende i WordPress-temautvikling, er det ingen grenser for hva du kan gjøre med / til WordPress-temaer..

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