Lag WordPress-tema: trinn for trinn for tilpasset utvikling

Siden den opprinnelige lanseringen i 2003 har WordPress utviklet seg fra et enkelt bloggeverktøy til en kraftig og populær nettstedsbygger og et omfattende CMS (content management system) brukt av omtrent 38% av nettstedene på nettet! Gitt nettstedet ditt, hvis nettstedet ditt må skille seg ut fra mengden, må du opprette WordPress-tema som er unikt for nettstedet ditt.

I virkeligheten er det ikke rart at WordPress klarte å gjøre det så langt og bli så populært.

Mengden fleksibilitet den har og funksjonene den er vert for, tillater bred bruk på tvers av forskjellige nettstedstyper. Dessuten er WordPress ganske enkelt å bruke med liten eller ingen tidligere erfaring med koding eller nettutvikling overhodet.

Dette er årsakene bak WordPress suksesshistorie og er nettopp årsakene nesten 40 prosent av alle nettsteder på nettet drives av denne programvaren. 

WordPress har en rekke praktiske funksjoner som lager webutvikling og programmering less komplisert og mer tilgjengelig for alle.

Introduksjon til WordPress Theme Development 

En annen populær funksjon som gjør WordPress så populær er temaene. Temaet er rett og slett en samling stilark og maler som definerer hvordan et WP-drevet nettsted vil se ut og vises.

Programvaren gir brukeren et bredt utvalg av forskjellige redigeringsalternativer når det gjelder temaer fra WP-adminområdet.

Hundrevis av WordPress-temaer er helt gratis eller med mange andre til en rimelig pris på noen titalls dollar.

Faktisk er WordPress.org vert for en enorm database med temaer i temakatalogen.

Andre nettsteder som Themeforest tilbyr også mange premium-temaer fra forskjellige utviklere.

Hver av disse temaene har forskjellig layout, designmønster og funksjoner.

Det er opp til brukeren å finne en som passer best til nettstedets behov. I de fleste tilfeller lages temaer med tanke på bestemte bransjer eller yrker, noe som betyr at for eksempel restaurantiere enkelt kan finne temaer med bestillingsfunksjoner.

Selv om det er mange fantastiske temaer som passer dine behov, er det trygt å si at hvis du vil gjøre noe fremragende, må du ganske mye gjøre det selv. Hvis du ikke klarer å programmere, et godt alternativ alternativet ville være å gå for en frilans programvareutvikler (prisene kan variere avhengig av ulike faktorer).

I denne artikkelen skal vi imidlertid gå over ALLE trinnene som er nødvendige for å lage ditt eget WordPress-tema for ditt WP-drevne nettsted. Vi tar en titt på alle viktige aspekter for å sikre at du får det beste WordPress har å tilby. 

Å komme i gang med å lage ditt helt eget tema som nybegynner kan ved første øyekast virke som en enorm oppgave.

Det er imidlertid ikke så komplisert å lage et tilpasset tema fra bunnen av i WP. Du trenger ikke å være en webutvikler, hvis du har det grunnleggende om koding med PHP, kan du enkelt lære hvordan du lager et WordPress-tema.

Dessuten kan det være ganske givende å lage ditt eget tema, spesielt når du ser sluttresultatet live på nettstedet ditt.

Opprette ditt første tilpassede WordPress-tema

For å komme i gang med å lage et WordPress-tema, trenger du noen grunnleggende ting:

• Et WordPress-nettsted
• En god vertplan
• Litt tidligere erfaring med ting som lokale iscenesettelsesmiljøer
• Grunnleggende forståelse av CSS- og PHP-kodingsspråk
• Et startbilde

Forstå WordPress-malhierarkiet 

I WordPress er malfiler (byggesteinene til temaet ditt) modulære og gjenbrukbare.

Malfiler er ansvarlige for å generere sidene på ditt WP-nettsted. Noen av disse filene brukes på nesten alle sidene dine, mens andre bare brukes under spesifikke omstendigheter.

Ta en titt på diagrammet nedenfor - det forklarer hvordan WordPress malhierarkiet er organisert.

Malfiler vil avgjøre det generelle utseendet på innholdet på nettstedet. Hvis du vil opprette en topptekst, vil du bruke en header.php filen, eller hvis du vil legge til en kommentarseksjon, bruker du comments.php filen. 

For å forstå malhierarkiet, bør du vite at WordPress bruker noe som kalles en "spørringsstreng" for å bestemme hvilken mal eller malsett som skal brukes til å opprette og vise en bestemt side.

Spørringsstrengen er informasjon som er lagret i lenken til hver del av nettstedet du prøver å endre. I enklere termer analyserer WordPress informasjonen og utfører søk gjennom malhierarkiet for å finne en malfil som samsvarer med den oppgitte informasjonen i spørringsstrengen.

Dette er i utgangspunktet et opplegg der WP ser etter matchende malfiler hver gang sider lastes inn.

For eksempel hvis du skriver inn følgende URL http://example.com/post/this-post, WordPress finner de nødvendige malfilene i følgende rekkefølge: 

1. Filer som samsvarer med sneglen, i dette tilfellet, denne posten.
2. Filer som samsvarer med post-ID.
3. En generisk enkeltpostfil, som single.php.
4. En arkivfil, i dette tilfellet, archive.php.
5. De index.php filen.

Den siste filen (index.php) kreves i hvert tema, da det er standard (eller tilbakeslag) hvis ingen andre filer kan bli funnet i samsvaringsprosessen. strek (et WP-starttema) har de vanligste filene. Disse filene som er inkludert i dette temaet fungerer rett ut av esken.

Du kan redigere dem hvis du har lyst til å eksperimentere, eller trenger å lage noen egendefinerte funksjoner på nettstedet ditt.

Hva er et WordPress starttema? 

Et starttema er et bare-bein grunnlag av et tilpasset WordPress-tema.

Du kan bruke det som grunnlag for å få ditt eget unike tema i gang. Med et starttema kan du bygge ditt eget WordPress-tema uten å måtte designe eller kode et helt tema fra bunnen av.

WordPress-starttemaer inneholder alle filene som definert i hierarkiet ovenfor.

Ved å bruke et starttema kan du få en bedre forståelse av hvordan WordPress fungerer fordi det viser deg det grunnleggende, strukturen til et tema og hvordan de forskjellige delene fungerer sammen.

Et spesialbygd WordPress-tema kan brukes på en rekke forskjellige nettstedstyper, fra presentasjoner og kataloger til nettbutikker bygget med WooCommerce, sosiale medier eller hva annet du måtte trenge nettstedet ditt for.  

Å velge starttemaer (for eksempel UnderStrap, Underscores og Bones) vil bidra til å lage WordPress-tema som åpner for å bruke en rekke forskjellige alternativer.

Å bruke Underscores kan være det beste valget for nybegynnere, da det tilbyr de viktigste funksjonene. Det kommer også fra en langvarig og pålitelig utvikler. Dette betyr at det er mer sannsynlig å være kompatibelt, sikkert og pålitelig, og vil ha bedre støtte på sikt.

Hvorfor bør du bruke et starttema

Som nevnt ovenfor er et starttema et fundament, en tegning som hjelper deg med å komme opp med et unikt nettsted. Den fungerer allerede fullt ut, men mangler fremdeles de definerende nøkkelfunksjonene som gjør et brukervennlig nettsted. 

I hovedsak må den fremdeles utformes og konfigureres riktig. 

Når det er sagt, er starttemaer ideelle for de som har liten eller ingen erfaring med WordPress eller nettutvikling generelt. Det er en fin måte å bli introdusert for temaet temabygging og lære det grunnleggende på WP-drevne nettsteder. 

Et WordPress Starter-tema sparer deg tid og krever liten eller ingen bakgrunnskunnskap i koding og resten av WordPress-kompleksitetene. 

Du kan utnytte mange års hardt arbeid fra utviklerne av starttemaet og bruke disse retningslinjene for å få en bedre forståelse av hvordan WordPress og temadesign fungerer.   

Populære eksempler på startertemaer

• strek - Et pålitelig og kjent starttema som gir nybegynnere et forsprang i temautvikling. Understrekk er ganske grunnleggende og perfekt for å komme i gang med en gang hvis du har alle nødvendige verktøy. Temaet er flott for å forstå begrepene temautvikling. Understrekk handler om å starte et nytt prosjekt som mer bør sees på som en verktøysett i stadig utvikling less som et rammeverk.
  
  
• Roots - Dette starttemaet gir deg en tilnærming som er mer rettet mot utviklere, med sin markering basert på HTML5 Boilerplate. Den støtter også mer avanserte verktøy som Bootstrap og Grunt. Roots starttema inkluderer også en temapakke som hjelper deg med å holde prosessen strømlinjeformet og eliminerer å ringe de samme maldelene gjentatte ganger.

Roots bruker også CSS forprosessorer og støtter LESS, en bakoverkompatibel språkutvidelse for CSS, som kan øke hastigheten på prosessen med å utvikle temaet ditt.

Når det er sagt, gir Roots en mer pragmatisk tilnærming og krever litt mer kunnskap fra utvikleren.  

6 grunnleggende trinn for å utvikle WordPress-temaet ditt

Etter å ha dekket det grunnleggende, er du endelig klar til å komme i gang med å lage et WordPress-tema.

Siden denne artikkelen er mer rettet mot nybegynnere, bruker vi et starttema, men du er også fri til å lage alt fra bunnen av uten noen starttemaer.

Hvis det er ruten du vil ta, ikke glem at du trenger mye mer tid og trenger å fordype deg litt dypere i koding, og webutvikling generelt.

1. Sette opp utviklingsmiljøet

Det første trinnet i prosessen bør være å skape et utviklingsmiljø.

Dette er i utgangspunktet en server du trenger å installere på datamaskinen din for å administrere og utvikle lokale WP-nettsteder. Et utviklingsmiljø lar deg utvikle nettstedet ditt trygt, i tillegg til at du gir deg flere muligheter for å skape et lokalt miljø.

Ved hjelp av DesktopServer er en av de ideelle stiene du kan ta. Det er en enkel måte å få en lokal og rask versjon av WP som er kompatibel med både Windows og Mac. Velg gratisversjonen, registrer og last ned den, og installer deretter programvaren.

Når du har installert, åpner du programmet og konfigurerer ditt lokale miljø.

Det er en ganske enkel prosess, og du vil være klar på få minutter. Etter oppsettet har du et nettsted og utviklingsmiljø som både fungerer og ser ut som alle live WP-nettsteder.

2. Last ned og installer et starttema

De mest grunnleggende starttemaene (som Underscores) er enkle for første omganger å komme i gang med.

I motsetning til de fleste grunnleggende temaer tillater Underscores å tilpasse alternativer gjennom Avanserte alternativer (som forfatter og beskrivelse) etter å ha navngitt temaet ditt. 

Du kan også legge til Syntactically Awesome StyleSheets eller SASS som er et forhåndsbehandlet CSS-språk som lar deg introdusere funksjoner som hekking, matematikkoperasjoner, bruk av variabler osv.

Etter å ha valgt er alt du trenger å gjøre å klikke på Generer for å laste ned .zip-filen med starttemaet ditt.

Nå installerer du filen på ditt lokale nettsted. Hvis du har gjort alt riktig, kan du nå se en grunnleggende versjon av ditt tilpassede WordPress-tema.

Forstå WordPress-kjerneprinsippene 

Nå som det grunnleggende er satt opp, kan du komme deg på jobb. Før du dykker inn i tilpasningsprosessen, må du imidlertid bli kjent med kjerneprinsippene og komponentene i å lage et WordPress-tema ved hjelp av kjerneprinsippene til WP. 

Først og fremst må du lære om malfiler, de viktigste byggesteinene for ethvert tema i WP.

Malfiler bestemmer i utgangspunktet hvordan layout og innhold skal vises på nettstedet ditt. Hvis du vil opprette en topptekst, vil du bruke header.php fil, mens comments.php brukes til å vise eventuelle kommentarer.

Som diskutert ovenfor bruker WP malhierarkiet for å bestemme hvilken malfil den vil velge for å utføre innholdet en bruker ber om / trenger. Du kan jobbe med disse filene som de er, men gitt at du er her for å lage WordPress-tema, vil det meste av arbeidet være å tilpasse disse filene etter dine behov.

Når vi snakker om WP-kjerneprinsipper, bør du også forstå konseptet bak The Loop.

Det er koden WP primært bruker for å vise innholdet ditt, og det finnes i alt innhold som viser malfiler, som i index.php or sidebar.php. Det er et ganske komplekst emne, men heldigvis følger det med starttemaet (hvis du bruker Underscores), noe som betyr at prosessen din bør være enklere. 

Du må forstå konseptet og jobbe med det. Ta en titt på noen av eksemplene i lenken over, for å bedre forstå hvordan sløyfen brukes og hvordan du kan tilpasse koden etter dine behov.

3. Opprett temadetaljer

temaer er ikke bare kosmetiske komponenter.

Det er mange forskjellige funksjoner du kan legge til på nettstedet ditt, noe som kan forbedre funksjonaliteten. Vi skal diskutere hvordan du implementerer noen få grunnleggende funksjoner for å krydre nettstedet ditt.

Legge kroker kan gjøre det mulig å kjøre forskjellige PHP-handlinger, vise annen info eller sette inn stylingdata etter behov.

Kroker er kodebiter som settes inn i malfiler. De fleste av dem er direkte implementert som en del av kjernen i WordPress, men noen kroker er ganske nyttige når du også tilpasser temaer.

Her er en liste over de vanligste krokene og deres roller:

• wp_head () - er lagt til element i header.php. Det muliggjør skript, stiler og annen informasjon som kjører når siden begynner å lastes inn.
• wp_footer () - vanligvis lagt til footer.php før tag, brukes ofte til å sette inn kode for Google Analytics eller annen kode som må vises på hver side, men som er for tung til å lastes inn i overskriften.  
• wp_meta () - Vanligvis funnet på sidebar.php, og det brukes ofte til å inkludere flere skript (for eksempel en taggsky).
• kommentarform () - Lagt til comments.php rett før filen lukkes tag for å vise kommentarer. 

Når du bruker Underscores, vil disse krokene allerede være inkludert i temaet, men det er alltid en god ide å lære mer om dem og se alle tilgjengelige kroker. Kroker lar deg utvide funksjonene til ditt tilpassede tema.  

4. Legge til stiler ved hjelp av CSS

Cascading Style Sheets eller CSS definerer utseendet til innholdet på nettstedet du oppretter.

Ved å bruke style.css filen, som allerede er inkludert i temaet ditt, kan du redigere noen av stilene som finnes her og lagre dem for å se hvordan det endrer designet ditt. Som standard inneholder den bare den grunnleggende stylingen.

CSS brukes til å muliggjøre presentasjon og separering av innholdet på nettstedet ditt, alt fra layout til skrift og innhold. CSS kan bidra til å gjøre innholdet på nettstedet ditt mer tilgjengelig og mer fleksibelt.

Å gå i dybden om hvordan du bruker styling med WordPress-temaer kan bli ganske hårete og ligger utenfor omfanget av denne artikkelen. Hvis du ikke er så sikker på dette, kan det være lurt å lese mer om CSS før du går videre.

5. Inkludert JavaScript

Hvis du legger til JavaScript-filer til temaet ditt, kan det øke interaktive funksjoner og muligheter og få et bedre fungerende nettsted. Det er spesielt nyttig når du vil innlemme tredjeparts plugins på nettstedene dine, som spesifikke video- eller lydspillere, ting som glidebrytere, popup-støtte og andre tredjepartsbiblioteker for å skape avansert funksjonalitet.

For å bruke Javascript med det egendefinerte nettstedet ditt, kan du ringe med syntaksen nedenfor for å legge til skriptfilen til temaet.

Alternativt kan du bruke skriptet direkte i din header.php malfilen mellom metakoder og stilarkoblingen, slik du gjør i tilfellet med en HTML-side. Når du bruker den i toppteksten, bør den se ut slik: 

Hvis du vil bruke JS direkte, legg til samtalen for filene direkte som nedenfor. Hvis du vil angi en "send dette til en venn" -funksjon, kan du sette den under tittelen på innlegget. Det ser ut som dette: 

" rel="bookmark">

<!--

e-postside ();

// ->

Du kan også legge inn skript ved hjelp av syntaksen som vises senere i denne artikkelen.

6. Test temaet og eksporter det

Når du er ferdig med alt det ovennevnte, er det endelig på tide å teste det opprettet tilpassede WordPress-temaet for å sikre at det går greit.

For dette formålet kan du bruke Temaenhetstest Data, et sett med dummy data som du kan laste opp til nettstedet ditt. Dataene består av stilvariasjoner og ulikt innhold som gjør at du kan se hvor effektivt temaet ditt kan håndtere både forutsigbare og uforutsigbare data.

Test alt grundig (i henhold til ovennevnte Codex-lenke) slik at du kan være sikker på at temaet du har laget oppfyller de nødvendige standardene og lever opp til dine forventninger før du eksporterer det.

Når du er trygg på testingen, kan du eksportere temaet.

Du kan eksportere ved å finne stedet du installerte nettstedsutviklingsmiljøet lokalt.

Åpne mappen og få tilgang  / Wp-content / themes /, hvor du kan finne temaet du jobbet med.

Nå, med et kompresjonsverktøy, oppretter du en zip. fil basert på mappen ved å komprimere den. Når du er ferdig er alt du trenger å gjøre å laste opp og installere det på et WordPress-nettsted. Du kan også sende den til WordPress Temakatalog. 

Detaljert guide for WordPress temautvikling

Nå som du har gjort det grunnleggende, vil de neste trinnene vise noen ekstra detaljer om hvordan du oppretter WordPress-tema.

Opprette egendefinerte temafiler / kataloger

Som du allerede vet, blir WP-temaer opprettet fra forskjellige malfiler som i det minste vil inneholde en sidebar.php, header.php.og footer.php. Du kan ringe disse ved hjelp av malkodene (get_header (), når du ringer på toppteksten, get_sidebar (), når du ringer til sidefeltet osv.).

Du kan også lage tilpassede versjoner av disse filene med små modifikasjoner som disse: sidefelt-{your_custom_template} .php, Overskrift-{your_custom_template} .php og bunntekst-{your_custom_template} .php. 

Du kan også ringe maletikettene med samme analogi med malnavnet som en parameter som denne:

get_header ( 'din_tilpasset_mal' ); 

Sider er laget av forskjellige filer, noe som betyr at du også kan opprette andre egendefinerte malfiler og ringe dem på et gitt sted på siden ved å bruke get_template_part (). Bare gi filen et passende navn og bruk den samme egendefinerte metoden som med topp-, bunn- og sidefeltfiler. 

La oss si at du vil lage en mal som håndterer innholdet ditt - du trenger bare å lage en fil som heter content.php og utvid deretter filnavnet for å legge til et bestemt layout. I dette tilfellet, la det være innhold-produkt.php.

Til slutt, når du laster malfilen i temaet, vil den se ut slik:

get_template_part ('content', 'product') ;.

Bruke kataloger

For å koble til temakataloger, bruk bare funksjonen get_theme_file_uri ();

Denne funksjonen vil returnere full URI til temaets hovedmappe, og du kan bruke den til å referere til filer og undermapper ved å bruke følgende eksempel:

ekko get_theme_file_uri ('bilder / logo.png');

Enqueue-skript og stilark

Når du kommer med ditt eget tema, kan du også lage tilpassede stilark og dine egne JavaScript-filer.

Når du gjør dette, må du sørge for å laste dem inn ved hjelp av WordPress-metoden, ellers er det en sjanse for at temaet og pluginene dine ikke fungerer riktig under alle omstendigheter.

Alt du trenger å gjøre er å lage en funksjon som omgir alle stilene og manusene. For dette oppretter WP både et håndtak og en bane for å finne filen og avhengighetene (hvis det er noen). Når dette skjer, må du bruke en krok for å sette inn stilarkene og skriptene. 

Den grunnleggende funksjonen for enqueing stil:

wp_enqueue_style ($ handle, $ src, $ deps, $ ver, $ media);

For innhegning av skript:

wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer); 

Begynn Google Fonts

Google-skrifter er en utmerket gratis ressurs for skrifter for webdesignere, og de kan bare legges til ditt tilpassede tema.

Først må du finne en skrifttype du liker i Google-fontbiblioteket. Når du har funnet en skrift du vil jobbe med, klikker du bare på "Velg denne stilen" -knappen, som tar deg til en ny side.

Hvis du blar nedover her, kan du finne instruksjonene for bruken av dem i en rute med den nødvendige koden du kan legge til på nettstedet ditt.   

Du kan legge til skrifttyper enten ved standardmetoden og anbefalt metode, eller du kan velge enten @import CSS-metoden eller Javascript-metoden.

Du kan også legge den til WP ved å omslutte skriften i temaene dine funksjoner.php.filen eller ved å bruke et bestemt plugin.

funksjon wpb_add_google_fonts () {

wp_enqueue_style ('wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false);

}

add_action ('wp_enqueue_scripts', 'wpb_add_google_fonts');

Hvis du vil kan du lese mer på hvordan endre fonter i et WordPress-tema her.

Deler siden din inn i seksjoner (Header.php / Footer.php)

På de fleste nettsteder vil topptekst, bunntekst og sidefelt være det samme på alle sidene. Det er sant at du i noen tilfeller vil tilpasse noen få ting, men generelt er de konsistente.

Så, for å dele siden i en topptekst og bunntekst, vil du klippe og lime inn fra index.php side, de relevante delene som skal være i topptekst / bunntekst og sidefelt. Dette avhenger litt av din nåværende index.php.

Hvis du for eksempel bruker understrekninger, er topptekst og bunntekst allerede definert riktig i header.php og footer.php.

La oss fortsette dette eksemplet som om vi oppretter innholdet til overskriften.

På de fleste nettsteder inneholder overskriftene viktige hodestiler og navigering til nettstedet.   

Start fra legge til før avslutningen . Du burde ha noe slikt. Dette er basert på understreket starttema, men det kan være lurt å tilpasse overskriften etter behov for å lage dine egne tilpasninger.

header.php

<?php
/ **
* Overskriften for temaet vårt
*
* Dette er malen som viser alle seksjon og alt frem til
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @ pakke Daves_Theme
*/

?>

>

">

>

<?php
the_custom_logo ();
hvis (is_front_page () && is_home ()):
?>
" rel="home">
<?php
annet:
?>
" rel="home">
<?php
endif;
$ daves_theme_description = get_bloginfo ('beskrivelse', 'skjerm');
hvis ($ daves_theme_description || is_customize_preview ()):
?>

<?php
wp_nav_menu (
array (
'theme_location' => 'menu-1',
'menu_id' => 'primærmeny',
)
);
?>

Den samme prosessen bør også gjelde bunnteksten.

Bruke Functions.php

Temaet functions.php filen er en malfil i WP-temaet som fungerer som en "master" som lastes automatisk både for administratorer og front-end sider på et nettsted.

Vanligvis definerer den funksjoner, handlinger, filtre og klasser som andre malfiler bruker i temaet. Det kan også brukes til å utvide funksjonaliteten til temaet gjennom flere kroker, handlinger og filtre.

Du finner enkelt functions.php-filen i temamappen. Du kan legge til innebygde WP og vanlige PHP-funksjoner i filtre og kroker som allerede er definert i WP-kjernen.

Du kan ganske enkelt opprette en functions.php-fil ved å opprette en ren tekstfil som du navngir functions.php og sette den i temaets katalog. Med denne filen kan du aktivere innleggsformater, navigasjonsmenyer og innleggsminiaturer sammen med WP-handlinger og filtre. 

Ta en titt på functions.php-filen fra et starttema for å se noen eksempler på hva som kan gjøres. Du kan også søke etter artikler som bruker functions.php som utvider funksjonene til et WordPress-nettsted ved hjelp av funksjonsfilen.

Bruke hovedinnstillinger i temaet

Hovedinnstillingene tillater å endre visse temainnstillinger uten å endre temafiler eller å måtte endre noen kode. En detaljert beskrivelse av dette er utenfor omfanget av denne artikkelen, så vi vil henvise deg til et par artikler som forklarer dette konseptet i detalj.

1. Innstillinger API beskrivelse på WordPress Codex.
2. Komplett guide til WordPress Innstillinger API

WordPress-løkken

Som vi har diskutert tidligere, er Loop en standardmekanisme som brukes av WP for å vise innlegg gjennom malfiler.

Ved hjelp av loop-mekanismen henter WP innleggene på gjeldende sider og formaterer dem i henhold til "instruksjonene" i loop.

I utgangspunktet går den gjennom innleggene for de aktuelle sidene en om gangen ved å utføre handlingen som er spesifisert i temaet. 

Du kan bruke løkken til

• Viser innhold og kommentarer
• Viser innleggstitler og utdrag på bloggsiden
• Vis data fra egendefinerte felt og egendefinerte innleggstyper
• Vis innholdet på individuelle sider ved hjelp av maletiketter.
• Tilpass Loop for å vise og manipulere innhold i malfiler

Hvis du bruker Underscores starttema, finner du WordPress-sløyfen som brukes i single.php- og page.php-filene. Det kan være lurt å se på disse filene for å forstå hvordan det fungerer og / eller kan brukes.

get_header ();
?>

<?php
mens (have_posts ()):
posten();

get_template_part ('mal-deler / innhold', get_post_type ());

the_post_navigation (
array (
'prev_text' => ' '. esc_html __ ('Forrige:', 'daves-tema'). ' % tittel ',
'next_text' => ' '. esc_html __ ('Neste:', 'daves-tema'). ' % tittel ',
)
);

// Hvis kommentarer er åpne eller vi har minst en kommentar, kan du laste opp kommentarmalen.
hvis (comments_open () || get_comments_number ()):
comments_template ();
endif;

slutter; // End of the loop.
?>

<?php
get_sidebar ();
get_footer ();

Meny og sider

Hovedmeny

Du kan velge din primære meny i WP-menyeditoren (plassert på Utseende - Meny). Temaet ditt støtter kanskje mer enn én navigasjonsmeny på forskjellige steder i temaet. 

Det er også måter å registrere flere menyer på, for eksempel kan det være lurt å lage en "bunntekst" -meny.

Ta en titt på WordPress-kodeksen for å forstå hvordan du gjør dette: https://codex.wordpress.org/Navigation_Menus

Tilpasset side

WP tillater oppretting av sider og innlegg som standard. Den styrer sidens utseende gjennom page.php malfil.

Selv om denne filen påvirker alle enkeltsidene i temaet ditt, kan du endre layout og utseende. Redigering av disse egendefinerte sidemalene i WP krever litt HTML, PHP og CSS, men nok en gang skal det være ganske greit.

index.php

Denne malen er standard reservemal i WordPress for visning av en hvilken som helst side når malhierarkiet ikke finner noen annen side som samsvarer med de angitte parametrene.

Du må bruke dette for å imøtekomme alt som ikke håndteres av resten av malfilene.

Arkiv.php

De archive.php malen brukes til å vise tag, forfatter, kategori og andre arkiv tilpassede sider.

Å lage en arkivside kan være en god måte å trekke alt innholdet på en enkelt side.

Kategori

I WP-webutvikling er det ikke uvanlig å bruke forskjellige maler for kategorier, tilpassede innleggstyper, taksonomier og koder. Ved å opprette forskjellige malkategorier kan du inkludere forskjellige funksjoner på hver kategoriside.   

En typisk kategori.php-mal vil se ut som denne:

<?php

/ **

* En enkel kategorimal

*/

get_header (); ?>

<?php

// Sjekk om det er noen innlegg å vise

if (have_posts ()):?>

Kategori:

<?php

// Vis valgfri kategoribeskrivelse

 hvis (kategoribeskrivelse ()):?>

<?php

// Loop

while (have_posts ()): the_post (); ?>

av

 <?php

  comments_popup_link ('Ingen kommentarer ennå', '1 kommentar', '% kommentarer', 'kommentarer-lenke', 'Kommentarer lukket');

?>

<?php endwhile;

annet:?>

Beklager, ingen innlegg stemte med dine kriterier.

Sidepanel.php

Sidefeltet er området der du kan plassere widgetene dine i et WP-tema. Som oftest er det på høyre side eller under innholdet ditt på alle sider.

Sidefelt brukes til å vise ting som ikke er direkte knyttet til innlegget eller siden, men ting som lenker til forskjellige områder på nettstedet ditt, påmeldingsskjemaer, annonser, sosiale medier og så videre.

Sidefeltet brukes vanligvis i forbindelse med WP-widgets.   

Slik kan du legge til et widget-klart sidefelt til temaet ditt:

funksjon wpb_widgets_init () {

    register_sidebar (array (

        'name' => __ ('Main Sidebar', 'wpb'),

        'id' => 'sidefelt-1',

        'beskrivelse' => __ ('Hovedfeltet vises til høyre på hver side bortsett fra forsidesmalen', 'wpb'),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    register_sidebar (array (

        'name' => __ ('Sidebjelke på forsiden', 'wpb'),

        'id' => 'sidefelt-2',

        'beskrivelse' => __ ('Vises på den statiske forsidemalen', 'wpb'),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    }

add_action ('widgets_init', 'wpb_widgets_init');

Individuelle innleggssider (single.php)

La oss si at du vil bruke en annen mal eller layout for en bestemt artikkel på nettstedet ditt.

For dette må du opprette en tilpasset mal for enkelt innlegg. Dette er ganske likt å lage tilpassede sider. Ved å følge de grunnleggende retningslinjene som brukes der, kan du enkelt opprette individuelle innlegg også. 

Opprette et utvalgt bilde

For å legge til støtte for utvalgte bilder, bare legg til følgende kode i temaet functions.php file:

add_theme_support ('post-miniatyrer'); 

Nå kan du gå til sidene eller innleggene dine og sjekke om alternativet for utvalgt bilde er tilgjengelig. Sjansen er stor for at WP ikke viser det automatisk, så hvis du vil vise bildet, må du kanskje gjøre små endringer i malene dine der sider og innlegg vises ved å legge til denne koden:

Paginering 

Denne funksjonen lar deg bla gjennom og tilbake gjennom innholdssidene dine. Du kan bruke denne funksjonen når du ser på innleggslister med flere oppføringer enn det som kan passe på en enkelt side, eller når du vil dele opp lengre innlegg ved å bruke stikkord.

Den enkleste formen for paginering er å plassere posts_nav_link (). -Funksjonen i malen etter løkken. Dette genererer lenker både til neste innleggsside (når du deler opp innleggslister) og til forrige innlegg der det er aktuelt.  

posts_nav_link ();

Du kan også bruke next_posts_link & prev_posts_link for å kontrollere hvor forrige og neste innleggssidekobling vises.

next_posts_link ();

previous_posts_link ();

Kommentar 

Kommentarer er en viktig del av enhver blogg eller side. Det gir besøkende på nettstedet muligheten til å nå ut til deg, gi tilbakemelding, stille spørsmål og generelt skape et dypere bånd med nettstedet ditt og innholdet ditt.

Alle kommentarer vises i adminområdet, og det er flere funksjoner du kan legge til, fra å aktivere kommentarer bare for spesifikke brukere til moderering av kommentarer.

Du kan bruke comments.php-filen til å tilpasse utseendet og følelsen av kommentarer i temaet ditt.

Andre sider og filer 

Avhengig av dine behov, kan du finne eller opprette forskjellige sider og filer og tilpasse dem til dine preferanser ved å bruke de samme eller lignende retningslinjene som er nevnt ovenfor. 

Bruke foreldre / barn tema

Foreldretema

Overordnede temaer i WP er temaer som blir erklært "foreldre" av andre temaer, nemlig barnetemaer.

Et underordnet tema brukes til å la designere og utviklere lage tilpasninger til temaer uten å bryte muligheten for å oppdatere det overordnede temaet. Dette skyldes at hvis en utvikler endrer de originale temafilene, går endringene tapt når du utfører en temaoppdatering.

Overordnede temaer videreformidler imidlertid funksjonene og funksjonaliteten til barnetemaene. Utviklere står fritt til å gjøre endringer i barnets temas funksjonalitet og funksjoner uten å påvirke det overordnede temaets oppgraderbarhet.

Barn tema

Barnetemaer arver funksjonaliteten til foreldretemaene. De brukes primært til å modifisere et eksisterende tema uten å miste tidligere lagt til tilpasset styling under temaoppdateringer.  

Barnetemaer fremskynder utviklingsprosessen fordi det er enkelt å lage modifikasjoner med dem.

De fleste temaer vil lage et barnetema og gjøre det tilgjengelig med temaet, slik at alle som bruker temaet kan tilpasse det gjennom barnetemaet. Vi definerer hvordan du lager et barnetema, i vår artikkel her.

Bruke utviklingsrammer

Dette begrepet refererer til kodebibliotekene som brukes i temautvikling. 

Utviklingsrammer ble opprettet for å tjene som overordnede temamaler med all funksjonalitet. I utgangspunktet, som med overordnede temaer, forblir rammene uberørt mens utviklere kan utføre endringer i barnetemaer.

Dette gjør utviklingen raskere og letter det å bli kvitt bugs i bestemte temarammer. Merkbare utviklingsrammer inkluderer Genesis tema rammeverk, Themify og Divi by Elegant Themes.

Innpakning av hvordan du oppretter WordPress-tema

Ovennevnte har vært en detaljert trinnvis guide for å komme i gang med å utvikle ditt eget tilpassede WordPress-tema.

Alt i alt, mens du trenger å ha en god forståelse av WordPress og PHP, er det ikke en så krevende prosess. Å vite det grunnleggende om nettutvikling er viktig, og du kan forstå WordPress-kjernen mer detaljert når du utvikler deg. Hvis du ikke har lyst til å være med på oppgaven ennå, er det greit, ta deg god tid og eksperimentere litt.

Når du har gjort noen feil, begynner du å lære mer og mer. Det er også bra å ta en titt på kodebasen til andre populære temaer for å forstå hva de gjør og få en god ide om praksis som gir mening.

Gi oss beskjed hvis du har spørsmål i kommentarene nedenfor.

om forfatteren

Forfatter: David Attardnettside: https://www.linkedin.com/in/dattard/E-post: david@collectiveray. Med

David har jobbet i eller rundt den elektroniske / digitale industrien de siste 18 årene. Han har lang erfaring innen programvare- og webdesignindustrien ved å bruke WordPress, Joomla og nisjer rundt dem. Som digital konsulent er hans fokus på å hjelpe bedrifter med å få et konkurransefortrinn ved å bruke en kombinasjon av deres nettside og digitale plattformer som er tilgjengelige i dag.