1. WordPress-opplæring: Hvordan lage et WordPress-tema fra HTML (del 1)
2. WordPress-opplæring: Hvordan lage et WordPress-tema fra HTML (del 2)
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.
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:
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:
index.php
header.php
sidebar.php
footer.php
La oss se hva som går inn på hver av disse magiskfiler:
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:
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:
Legg det tilpassede innholdet eller HTML-koden her.
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:
07.06.2020
Et intro til anatomi av et WordPress-tema
Jeffrey Wilson Tips
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.
Contents
Litt HTML grunning
Hver HTML-webside er delt inn i forskjellige deler ved å bruke
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
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:
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:
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:
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 merke til og