Opret WordPress-tema: Trin for trin til tilpasset udvikling

Siden sin oprindelige lancering i 2003 har WordPress udviklet sig fra et simpelt bloggingværktøj til en stærk og populær websitebygger og et omfattende CMS (content management system), der bruges af ca. 38% af webstederne på nettet! I betragtning af dets popularitet skal du oprette WordPress-tema, der er unikt for dit websted, hvis dit websted skal skille sig ud fra mængden.

I virkeligheden er det ikke underligt, at WordPress var i stand til at gøre det hidtil og blive så populært.

Mængden af ​​fleksibilitet, den har, og de funktioner, den er vært for, tillader dens brede anvendelse på tværs af forskellige websitetyper. Desuden er WordPress ret let at bruge med ringe eller ingen tidligere erfaring med kodning eller webudvikling overhovedet.

Dette er årsagerne til WordPress succeshistorie og er netop årsagerne næsten 40 procent af alle websteder på World Wide Web er drevet af denne software. 

WordPress har en række praktiske funktioner, der gør webudvikling og programmering less kompliceret og mere tilgængelig for alle.

Introduktion til WordPress Theme Development 

En anden populær funktion, der gør WordPress så populær, er dens temaer. Temaet er simpelthen en samling af stilark og skabeloner, der definerer, hvordan et WP-drevet websted vil se ud og blive vist.

Softwaren giver brugeren en lang række forskellige redigeringsmuligheder, når det kommer til temaer fra WP-adminområdet.

Hundredvis af WordPress-temaer er helt gratis eller med mange andre til en rimelig pris på et par titusinder dollars.

Faktisk er WordPress.org vært for en enorm database med temaer i deres Temakatalog.

Andre websteder som Themeforest tilbyder også masser af premium-temaer fra forskellige udviklere.

Hver af disse temaer har forskellige layout, designmønstre og funktioner.

Det er op til brugeren at finde en, der passer bedst til deres websides behov. I de fleste tilfælde er temaer lavet med bestemte brancher eller erhverv i tankerne, hvilket betyder, at f.eks. Restaurantejere let kan finde temaer med reservationsfunktioner.

Mens der er masser af fantastiske temaer, der måske passer til dine behov, er det sikkert at sige, at hvis du vil gøre noget fremragende, skal du stort set selv gøre det. Hvis du ikke er i stand til at programmere, et godt alternativ mulighed ville være at gå til en freelance softwareudvikler (priserne kan variere afhængigt af forskellige faktorer).

I denne artikel vil vi dog gennemgå ALLE de nødvendige trin for at oprette dit helt eget tilpassede WordPress-tema til dit WP-drevne websted. Vi tager et kig på alle vigtige aspekter for at sikre, at du får det bedste, som WordPress har at tilbyde. 

Kom godt i gang med at oprette dit helt eget tema som nybegynder kan ved første øjekast virke som en enorm opgave.

At oprette et brugerdefineret tema fra bunden er dog ikke så kompliceret i WP. Du behøver ikke at være en webudviklings-whiz. Hvis du har det grundlæggende ved kodning med PHP, kan du nemt lære at oprette et WordPress-tema.

Desuden kan det være meget givende at oprette dit eget tema, især når du ser slutresultatet live på dit websted.

Oprettelse af dit første tilpassede WordPress-tema

For at komme i gang med at oprette et WordPress-tema har du brug for et par grundlæggende ting:

• Et WordPress-websted
• En god hostingplan
• Lidt forudgående erfaring med ting som lokale iscenesættelsesmiljøer
• Grundlæggende forståelse af CSS- og PHP-kodningssprog
• Et starttema

Forståelse af WordPress-skabelonhierarkiet 

I WordPress er skabelonfiler (byggestenene til dit tema) modulære og genanvendelige.

Skabelonfiler er ansvarlige for at generere siderne på dit WP-websted. Nogle af disse filer bruges på næsten alle dine sider, mens andre kun bruges under bestemte omstændigheder.

Se på nedenstående diagram - det forklarer, hvordan WordPress-skabelonhierarkiet er organiseret.

Skabelonfiler bestemmer det overordnede udseende af indholdet på webstedet. Hvis du vil oprette et header, skal du bruge et header.php fil, eller hvis du vil tilføje en kommentarsektion, skal du bruge comments.php fil. 

For at forstå skabelonhierarkiet skal du vide, at WordPress bruger noget kaldet en "forespørgselsstreng" til at bestemme, hvilken skabelon eller skabelonsæt der skal bruges til at oprette og vise en bestemt side.

Forespørgselsstrengen er oplysninger gemt i linket til hver del af webstedet, du prøver at ændre. I enklere termer analyserer WordPress informationen og udfører søgninger gennem skabelonhierarkiet for at finde en skabelonfil, der matcher den angivne info i forespørgselsstrengen.

Dette er dybest set en ordning, hvor WP ser efter matchende skabelonfiler, hver gang sider indlæses.

For eksempel, hvis du indtaster følgende URL http://example.com/post/this-post, WordPress finder de nødvendige skabelonfiler i følgende rækkefølge: 

1. Filer, der matcher sneglen, i dette tilfælde dette-indlæg.
2. Filer, der matcher post-ID'et.
3. En generisk enkeltpostfil, ligesom single.php.
4. En arkivfil, i dette tilfælde, archive.php.
5.  index.php fil.

Den sidste fil (index.php) kræves i hvert tema, da det er standard (eller reserve), hvis der ikke findes nogen anden fil i matchningsprocessen. understregninger (et WP-starttema) har de mest almindelige filer. Disse filer, der er inkluderet i dette tema, fungerer lige ud af kassen.

Du kan redigere dem, hvis du har lyst til at eksperimentere eller har brug for at oprette en brugerdefineret funktionalitet på dit websted.

Hvad er et WordPress starttema? 

Et starttema er et nøglegrundlag for et brugerdefineret WordPress-tema.

Du kan bruge det som grundlag for at få dit eget unikke tema i gang. Med et starttema kan du oprette dit helt eget tilpassede WordPress-tema uden at skulle designe eller kode et helt tema fra bunden.

WordPress-starttemaer indeholder alle filerne som defineret i ovenstående hierarki.

Brug af et starttema giver dig mulighed for at få en bedre forståelse af, hvordan WordPress fungerer, fordi det viser dig det grundlæggende, strukturen af ​​et tema, og hvordan de forskellige dele fungerer sammen.

Et specialbygget WordPress-tema kan anvendes på en række forskellige websitetyper fra præsentationer og kataloger til onlinebutikker bygget med WooCommerce, sociale medier eller hvad du ellers har brug for din hjemmeside til.  

At vælge starttemaer (såsom UnderStrap, Underscores og Bones) hjælper med at oprette WordPress-tema, der åbner døren til at bruge en række forskellige muligheder.

Brug af understregninger kan være det bedste valg for begyndere, da det tilbyder de vigtigste funktioner. Det kommer også fra en langvarig og pålidelig udvikler. Dette betyder, at det er mere sandsynligt, at det er kompatibelt, sikkert og pålideligt og vil have bedre support på lang sigt.

Hvorfor skal du bruge et starttema

Som nævnt ovenfor er et starttema et fundament, en plan, der hjælper dig med at komme med et unikt websted. Det fungerer allerede fuldt ud, men mangler stadig de definerende nøglefunktioner, der gør et brugervenligt websted. 

I det væsentlige skal det stadig være stylet og korrekt konfigureret. 

Når det er sagt, er starttemaer ideelle til dem, der har ringe eller ingen erfaring med WordPress eller webudvikling generelt. Det er en fantastisk måde at blive introduceret til emnet temaopbygning og lære det grundlæggende på WP-drevne websteder. 

Et WordPress Starter-tema sparer dig tid og kræver lidt eller ingen baggrundsviden i kodning og resten af ​​WordPress-kompleksiteterne. 

Du kan udnytte års hårdt arbejde fra udviklerne af starttemaet og bruge disse retningslinjer til at få en bedre forståelse af, hvordan WordPress og temadesign fungerer.   

Populære eksempler på startertemaer

• understregninger - Et pålideligt og berømt starttema, der giver begyndere et forspring temaudvikling. Underscores er temmelig grundlæggende og perfekte til at komme i gang med det samme, hvis du har alle de nødvendige værktøjer. Temaet er fantastisk til at forstå begreberne temaudvikling. Underscores handler om at starte et nyt projekt, der mere bør ses som et værktøjskasse, der konstant udvikler sig og less som en ramme.
  
  
• Roots - Dette starttema giver dig en tilgang, der er mere rettet mod udviklere, hvor dens markering er baseret på HTML5 Boilerplate. Det understøtter også mere avancerede værktøjer som f.eks Bootstrap Grunt. Roots-starttemaet inkluderer også et temaindpakning, som hjælper dig med at holde din proces strømlinet og eliminerer at kalde de samme skabelondele gentagne gange.

Roots bruger også CSS præprocessorer og understøtter LESS, en bagudkompatibel sprogudvidelse til CSS, der i væsentlig grad kan fremskynde processen med at udvikle dit tema.

Når det er sagt, giver Roots en mere pragmatisk tilgang og kræver lidt mere know-how fra udvikleren.  

6 grundlæggende trin til at udvikle dit WordPress-tema

Efter at have dækket det grundlæggende er du endelig klar til at komme i gang med at oprette et WordPress-tema.

Da denne artikel er mere rettet mod begyndere, bruger vi et starttema, men du er også fri til at oprette alt fra bunden uden nogen starttemaer.

Hvis det er den rute, du vil tage, så glem ikke, at du har brug for meget mere tid og bliver nødt til at fordybe dig lidt dybere i kodning og webudvikling generelt.

1. Opsætning af udviklingsmiljø

Dit første trin i processen skal være at skabe et udviklingsmiljø.

Dette er dybest set en server, du skal installere på din computer for at administrere og udvikle lokale WP-websteder. Et udviklingsmiljø giver dig mulighed for at udvikle dit websted sikkert udover at give dig flere muligheder for at skabe et lokalt miljø.

Ved brug af DesktopServer er en af ​​de ideelle stier, du kan tage. Det er en nem måde at få en lokal og hurtig version af WP, som er kompatibel med både Windows og Mac. Vælg den gratis version, registrer og download den, og installer derefter softwaren.

Når du har installeret, skal du åbne programmet og konfigurere dit lokale miljø.

Det er en ret simpel proces, og du vil være klar på få minutter. Efter installationen har du et websted og et udviklingsmiljø, der både fungerer og ligner ethvert live WP-websted.

2. Download og installer et starttema

De mest grundlæggende starttemaer (som Underscores) er nemme for de første timere at komme i gang med.

I modsætning til de fleste grundlæggende temaer tillader Underscores tilpasning af indstillinger gennem dens Avancerede indstillinger (som forfatter og beskrivelse) efter at have navngivet dit tema. 

Du kan også tilføje Syntactically Awesome StyleSheets eller SASS hvilket er et forbehandlings CSS-sprog, der giver dig mulighed for at introducere funktioner som indlejring, matematiske operationer, anvendelse af variabler osv.

Når du har foretaget dine valg, skal du bare klikke på Generer for at downloade .zip-filen med dit starttema.

Installer nu filen på dit lokale websted. Hvis du har gjort alt korrekt, kan du nu se en grundlæggende version af dit brugerdefinerede WordPress-tema.

Forståelse af WordPress Core-principperne 

Nu hvor det grundlæggende er oprettet, kan du komme på arbejde. Inden du dykker ind i tilpasningsprocessen, skal du dog blive fortrolig med kerneprincipperne og komponenterne i oprettelsen af ​​et WordPress-tema ved hjælp af kerneprincipperne i WP. 

Først og fremmest skal du lære om skabelon filer, de vigtigste byggesten til ethvert tema i WP.

Skabelonfiler bestemmer grundlæggende, hvordan dit layout og indhold vises på dit websted. Hvis du vil oprette et header, skal du bruge header.php fil, mens comments.php ville blive brugt til at vise eventuelle kommentarer.

Som diskuteret ovenfor bruger WP sit skabelonhierarki til at bestemme, hvilken skabelonfil den vælger at udføre det indhold, som en bruger anmoder om / har brug for. Du kan arbejde med disse filer, som de er, men i betragtning af at du er her for at oprette WordPress-tema, vil din hovedpart af arbejdet være at tilpasse disse filer til dine behov.

Når vi taler om WP-kerneprincipper, skal du også forstå konceptet bag The Loop.

Det er den kode, som WP primært bruger til at vise dit indhold, og det kan findes i alt indhold, der viser skabelonfiler, som f.eks index.php or sidebar.php. Det er et ret komplekst emne, men heldigvis kommer det sammen med starttemaet (hvis du bruger Underscores), hvilket betyder, at din proces skal være enklere. 

Du bliver nødt til at forstå konceptet og arbejde med det. Tjek nogle af eksemplerne i linket ovenfor for bedre at forstå, hvordan sløjfen bruges, og hvordan du kan tilpasse koden til dine behov.

3. Opret temadetaljer

Temaer er ikke rent kosmetiske komponenter.

Der er masser af forskellige funktioner, du kan tilføje til dit websted, som kan forbedre funktionaliteten. Vi diskuterer, hvordan du implementerer et par grundlæggende funktioner til at krydre dit websted.

Tilføjelse Kroge kan gøre det muligt for dig at køre forskellige PHP-handlinger, vise anden info eller indsætte stylingdata efter behov.

Kroge er kodestykker, der indsættes i skabelonfiler. De fleste af dem implementeres direkte som en del af kernen i WordPress, men nogle kroge er ret nyttige, når man også tilpasser temaer.

Her er en liste over de mest almindelige kroge og deres roller:

• wp_head () - tilføjes til element i header.php. Det muliggør scripts, stilarter og anden info, der kører, når webstedet begynder at indlæses.
• wp_footer () - normalt føjet til footer.php før tag, der ofte bruges til at indsætte kode til Google Analytics eller anden kode, der skal vises på hver side, men som er for tung til at indlæses i overskriften.  
• wp_meta () - Generelt fundet på sidebar.php, og det bruges oftest til at inkludere yderligere scripts (for eksempel en tagsky).
• kommentarform () - Føjet til comments.php direkte før filen lukkes tag for at vise kommentarer. 

Når du bruger Underscores, vil disse kroge allerede være inkluderet i temaet, men det er altid en god ide at lære mere om dem og se alle tilgængelige kroge. Kroge giver dig mulighed for at udvide funktionerne i dit tilpassede tema.  

4. Tilføjelse af stilarter ved hjælp af CSS

Cascading Style Sheets eller CSS definerer udseendet af indholdet på det websted, du opretter.

Ved anvendelse af style.css fil, som allerede er inkluderet i dit tema, kan du redigere alle de stilarter, der findes her, og gemme dem for at se, hvordan det ændrer dit design. Som standard indeholder den kun den grundlæggende styling.

CSS bruges til at muliggøre præsentation og adskillelse af indholdet på dit websted, alt fra layout til skrifttyper og indhold. CSS kan hjælpe med at gøre indholdet på dit websted mere tilgængeligt og mere fleksibelt.

At gå i dybden med, hvordan man bruger styling med WordPress-temaer, kan blive ret behåret og ligger uden for anvendelsesområdet for denne artikel. Hvis du ikke er for sikker på dette, kan du måske læse mere om CSS, inden du går videre.

5. Inkluderet JavaScript

Tilføjelse af JavaScript-filer til dit tema, hvis det er nødvendigt, kan øge interaktive funktioner og kapaciteter og få et bedre fungerende sted. Det er især nyttigt, når du vil inkorporere tredjeparts plugins på dine websteder, som f.eks. Specifikke video- eller lydafspillere, ting som glidere, popup-support og andre tredjepartsbiblioteker for at skabe avanceret funktionalitet.

For at bruge Javascript med dit tilpassede websted kan du oprette et opkald ved hjælp af syntaksen nedenfor for at tilføje scriptfilen til temaet.

Alternativt kan du bruge scriptet direkte i din header.php skabelonfil mellem metataggene og linket til stilarket, som du ville gøre i tilfælde af en HTML-side. Når du bruger den i headerfilen, skal den se sådan ud: 

Hvis du vil bruge JS direkte, skal du tilføje opkaldet til filerne direkte som nedenfor. Hvis du vil indstille en "send dette til en ven" -funktion, kan du sætte den under postens titel. Det ligner dette: 

" rel="bookmark">

<!--

e-mail-side ();

// ->

Du kan også indstille scripts ved hjælp af syntaks vist senere i denne artikel.

6. Test dit tema og eksporter det

Når du er færdig med alt det ovenstående, er det endelig tid til at teste dit oprettede tilpassede WordPress-tema for at sikre, at det kører problemfrit.

Til dette formål kan du bruge Temaenhedstest Data, et sæt dummy data, som du kan uploade til dit websted. Dataene består af stilvariationer og forskelligt indhold, så du kan se, hvor effektivt dit tema kan håndtere både forudsigelige og uforudsigelige data.

Test alt grundigt (ifølge ovenstående Codex-link), så du kan være sikker på, at det tema, du har oprettet, lever op til de krævede standarder og lever op til dine forventninger, inden du eksporterer det.

Når du er sikker på testen, kan du eksportere temaet.

Du kan eksportere ved at finde det sted, hvor du installerede webstedsudviklingsmiljøet lokalt.

Åbn mappen og få adgang  / Wp-content / temaer /, hvor du kan finde det tema, du arbejdede med.

Opret nu et med et komprimeringsværktøj zip.fil baseret på mappen ved at komprimere den. Når du er færdig, er alt hvad du skal gøre, at uploade og installere det på ethvert WordPress-websted. Du kan også sende det til WordPress Temakatalog. 

Detaljeret WordPress Theme Development Guide

Nu hvor du har gjort det grundlæggende, viser de næste trin nogle yderligere detaljer om, hvordan du opretter WordPress-tema.

Oprettelse af brugerdefinerede temafiler / mapper

Som du allerede ved, oprettes WP-temaer fra forskellige skabelonfiler, som i det mindste vil omfatte en sidebar.php, header.php.og footer.php. Du kan ringe til disse ved hjælp af skabelonkoderne (get_header (), når du ringer til headeren, get_sidebar (), når du ringer til sidepanelet osv.).

Du kan også oprette brugerdefinerede versioner af disse filer med mindre ændringer som disse: sidebjælke-{your_custom_template} .php, header-{your_custom_template} .php og sidefod-{your_custom_template} .php. 

Du kan også kalde skabelontags med samme analogi med skabelonnavnet som en parameter som denne:

get_header ( 'din_custom_template' ); 

Sider oprettes af forskellige filer, hvilket betyder at du også kan oprette andre brugerdefinerede skabelonfiler og kalde dem på et vilkårligt sted på siden ved blot at bruge get_template_part (). Giv bare filen et passende navn, og brug den samme brugerdefinerede metode som med sidehoved-, sidefod- og sidefeltfiler. 

Lad os sige, at du vil oprette en skabelon, der håndterer dit indhold - du skal bare oprette en fil, der hedder content.php og udvid derefter filnavnet for at tilføje et specifikt layout. I dette tilfælde, lad det være indhold-produkt.php.

I sidste ende, når du indlæser skabelonfilen i temaet, ser det sådan ud:

get_template_part ('indhold', 'produkt') ;.

Brug af kataloger

For at linke til temakataloger skal du blot bruge funktionen get_theme_file_uri ();

Denne funktion returnerer den fulde URI til dit temas hovedmappe, og du kan bruge den til at referere til filer og undermapper ved hjælp af følgende eksempel:

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

Enqueue-scripts og StyleSheets

Når du kommer med dit eget tema, kan du også oprette brugerdefinerede typografiark og dine egne JavaScript-filer.

Når du gør dette, skal du sørge for at indlæse dem ved hjælp af WordPress-metoden, ellers er der en chance for, at dit tema og dine plugins muligvis ikke fungerer korrekt under alle omstændigheder.

Alt hvad du skal gøre er at oprette en funktion, der indkapsler alle stilarter og scripts. Til dette opretter WP både et håndtag og en sti for at finde filen og afhængighederne (hvis der er nogen), når dette sker, skal du bruge en krog til at indsætte typografiarkene og scripts. 

Den grundlæggende funktion til indkapsling af stil:

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

Til indkapsling af scripts:

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

Gå til Google-skrifttyper

Google-skrifttyper er en fremragende gratis ressource for skrifttyper til webdesignere, og de kan simpelthen føjes til dit tilpassede tema.

Først skal du finde en skrifttype, du kan lide, i Google-skrifttyrebiblioteket. Når du har fundet en skrifttype, du vil arbejde med, skal du blot klikke på knappen "Vælg denne stil", der fører dig til en ny side.

Hvis du ruller ned her, kan du finde brugsanvisningen i en boks med den nødvendige kode, som du kan tilføje til dit websted.   

Du kan tilføje skrifttyperne enten ved den standardmetode og den anbefalede metode, eller du kan vælge enten @import CSS-metoden eller ved hjælp af Javascript-metoden.

Du kan også tilføje det til WP ved at omslutte skrifttypen i dine temaer funktioner.php.fil eller ved hjælp af et specifikt plugin.

funktion 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 læse mere på hvordan man ændrer skrifttyper i et WordPress-tema her.

Opdeling af din side i sektioner (Header.php / Footer.php)

På de fleste websteder er sidehoved, sidefod og sidebjælke ens på alle sider. Det er rigtigt, at du i nogle tilfælde vil tilpasse et par ting, men generelt er de ensartede.

Så for at opdele siden i en sidehoved og sidefod skal du klippe og indsætte fra index.php side, de relevante dele, der skal være i sidehoved / sidefod og sidebjælke. Dette afhænger lidt af dit nuværende index.php.

For eksempel, hvis du bruger understregninger, er overskrift og sidefod allerede defineret korrekt i header.php og footer.php.

Lad os fortsætte dette eksempel, som om vi opretter indholdet til overskriften.

På de fleste websteder indeholder overskrifterne de væsentligste hovedformater og navigation til webstedet.   

Start fra tilføje inden lukningen . Du burde have noget som dette. Dette er baseret på understregningstemaet, men du vil måske tilpasse overskriften efter behov for at oprette dine egne tilpasninger.

header.php

/ **
* Overskriften til vores tema
*
* Dette er skabelonen, der viser alle de sektion og alt indtil
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @ pakke Daves_Theme
*/

?>

>

">

>

the_custom_logo ();
hvis (is_front_page () && is_home ()):
?>
" rel="home">

andet:
?>
" rel="home">

endif;
$ daves_theme_description = get_bloginfo ('beskrivelse', 'display');
hvis ($ daves_theme_description || is_customize_preview ()):
?>

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

Den samme proces skal også gælde for sidefoden.

Brug af Funktioner.php

Temaet functions.php fil er en skabelonfil i WP-temaet, der fungerer som en "master", der indlæses automatisk både for administratorer og front-end-sider på et websted.

Normalt definerer den funktioner, handlinger, filtre og klasser, som andre skabelonfiler bruger i temaet. Det kan også bruges til at udvide temaets funktionalitet gennem yderligere kroge, handlinger og filtre.

Du kan nemt finde funktioner.php-filen i temamappen. Du kan tilføje indbyggede WP og almindelige PHP-funktioner til filtre og kroge, som allerede er defineret i WP-kernen.

Du kan blot oprette en functions.php-fil ved at oprette en almindelig tekstfil, som du navngiver functions.php og placere den i temaets bibliotek. Med denne fil kan du aktivere postformater, navigationsmenuer og post-miniaturer sammen med WP-handlinger og filtre. 

Tjek funktioner.php-filen fra et starttema for at se et par eksempler på, hvad der kan gøres. Du kan også søge efter artikler, der bruger functions.php, der udvider funktionerne på et WordPress-websted ved hjælp af funktionsfilen.

Brug af hovedindstillinger i temaet

Hovedindstillingerne tillader ændring af bestemte temaindstillinger uden at ændre temafiler eller skulle ændre kode. En detaljeret beskrivelse af dette er uden for denne artikels anvendelsesområde, så vi henviser til et par artikler, der forklarer dette koncept i detaljer.

1. Indstillinger API beskrivelse på WordPress Codex.
2. Komplet guide til WordPress Indstillinger API

WordPress-sløjfen

Som vi har diskuteret før, er Loop en standardmekanisme, der bruges af WP til at vise indlæg gennem skabelonfiler.

Ved hjælp af loop-mekanismen henter WP indlæggene på aktuelle sider og formaterer dem i henhold til "instruktionerne" i loop'en.

Dybest set løber den igennem stillingerne for de aktuelle sider en ad gangen ved at udføre den handling, der er angivet i temaet. 

Du kan bruge løkken til

• Viser indhold og kommentarer
• Visning af posttitler og uddrag på blogens startside
• Vis data fra brugerdefinerede felter og brugerdefinerede posttyper
• Vis indholdet på de enkelte sider ved hjælp af skabelontags.
• Tilpas løkken for at få vist og manipulere indhold i skabelonfiler

Hvis du bruger Underscores starttema, finder du WordPress-sløjfen, der bruges i single.php- og page.php-filerne. Det kan være en god idé at se på disse filer for at forstå, hvordan det fungerer og / eller kan bruges.

get_header ();
?>

mens (have_posts ()):
Posten();

get_template_part ('skabelon-dele / indhold', get_post_type ());

the_post_navigation (
array (
'prev_text' => ' '. esc_html __ ('Forrige:', 'daves-tema'). ' % titel ',
'next_text' => ' '. esc_html __ ('Næste:', 'daves-tema'). ' % titel ',
)
);

// Hvis kommentarer er åbne, eller vi har mindst en kommentar, skal du indlæse kommentar skabelon.
hvis (comments_open () || get_comments_number ()):
kommentarer_skabelon ();
endif;

i sidste ende; // Slutningen af ​​sløjfen.
?>

get_sidebar ();
get_footer ();

Menu og sider

Primær menu

Du kan vælge din primære menu i WP Menu Editor (findes i Udseende - Menu). Dit tema understøtter muligvis mere end en navigationsmenu forskellige steder inden for dit tema. 

Der er også måder at registrere yderligere menuer på, f.eks. Kan du oprette en "sidefod" -menu.

Se på WordPress codex for at forstå, hvordan du gør dette: https://codex.wordpress.org/Navigation_Menus

Brugerdefineret side

WP tillader oprettelse af sider og indlæg som standard. Det styrer sidens udseende gennem page.php skabelonfil.

Mens denne fil påvirker alle enkelte sider i dit tema, kan du ændre deres layout og udseende. Redigering af disse brugerdefinerede sideskabeloner i WP kræver lidt HTML, PHP og CSS, men igen skal det være ret ligetil.

index.php

Denne skabelon er standardbackback-skabelonen i WordPress til visning af en hvilken som helst side, når skabelonhierarkiet ikke kan finde nogen anden side, der matcher dine givne parametre.

Du bliver nødt til at bruge dette til at tage højde for alt, hvad der ikke håndteres af resten af ​​skabelonfilerne.

Arkiv.php

archive.php skabelon bruges til at vise tag, forfatter, kategori og andre arkiverede sider.

Oprettelse af en arkivside kan være en god måde at trække alt dit indhold på en enkelt side.

Boligtype

I WP-webudvikling er det ikke ualmindeligt at bruge forskellige skabeloner til kategorier, brugerdefinerede posttyper, taksonomier og tags. Ved at oprette forskellige skabelonkategorier kan du medtage forskellige funktioner på hver kategoriside.   

En typisk category.php-skabelon vil ligne dette:

/ **

* En simpel kategoriskabelon

*/

get_header (); ?>

// Kontroller, om der er nogen indlæg, der skal vises

hvis (have_posts ()):?>

Kategori:

// Vis valgfri kategoribeskrivelse

 hvis (kategoribeskrivelse ()):?>

// Sløjfen

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

ved

 <?php

  comments_popup_link ('Ingen kommentarer endnu', '1 kommentar', '% kommentarer', 'kommentarer-link', 'Kommentarer lukket');

?>

<?php endwhile;

andet:?>

Beklager, ingen indlæg matchede dine kriterier.

Sidepanel.php

Sidebjælken er det område, hvor du kan placere dine widgets i et WP-tema. Oftest er det på højre side eller under dit indhold på alle sider.

Sidebjælker bruges til at vise ting, der ikke er direkte forbundet med indlægget eller sideindholdet, men ting som f.eks. Links til forskellige områder på dit websted, tilmeldingsformularer, annoncer, links til sociale medier og så videre.

Sidebjælken bruges typisk sammen med WP-widgets.   

Sådan kan du tilføje en widget-klar sidebjælke til dit tema:

funktion wpb_widgets_init () {

    register_sidebar (array (

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

        'id' => 'sidebjælke-1',

        'beskrivelse' => __ ('Hoved sidebjælken vises til højre på hver side undtagen forsiden skabelon', 'wpb'),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    register_sidebar (array (

        'name' => __ ('Sidebjælke på forsiden', 'wpb'),

        'id' => 'sidebjælke-2',

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

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    }

add_action ('widgets_init', 'wpb_widgets_init');

Individuelle indlægssider (single.php)

Lad os sige, at du vil bruge en anden skabelon eller et andet layout til en bestemt artikel på dit websted.

Til dette skal du oprette en brugerdefineret skabelon til et enkelt indlæg. Dette ligner stort set oprettelse af brugerdefinerede sider. Ved at følge de grundlæggende retningslinjer, der anvendes der, kan du også nemt oprette individuelle indlæg. 

Oprettelse af et udvalgt billede

For at tilføje support til fremhævede billeder skal du blot tilføje følgende kode til temaet functions.php fil:

add_theme_support ( 'post-miniaturer'); 

Nu kan du gå til dine sider eller indlæg og kontrollere, om den fremhævede billedmulighed er tilgængelig. Chancerne er, at WP ikke viser det automatisk, så for at få vist billedet skal du muligvis foretage små ændringer i dine skabeloner, hvor sider og indlæg vises ved at tilføje denne kode:

Paginering 

Denne funktion giver dig mulighed for at bladre frem og tilbage gennem dine indholdssider. Du kan bruge denne funktion, når du ser postlister med flere poster, end der kan passe på en enkelt side, eller når du vil opdele længere indlæg ved hjælp af tag.

Den enkleste form for paginering er at placere posts_nav_link (). -Funktionen i skabelonen efter sløjfen. Dette genererer links både til den næste side med indlæg (når du opdeler indlægslister) og til de tidligere indlæg, hvor det er relevant.  

posts_nav_link ();

Du kan også bruge next_posts_link & prev_posts_link til at kontrollere, hvor linket til forrige og næste indlæg vises.

næste_posts_link ();

previous_posts_link ();

Kommentarer 

Kommentarer er en vigtig del af enhver blog eller side. Det giver webstedsbesøgende mulighed for at nå ud til dig, give feedback, stille spørgsmål og generelt skabe en dybere bånd til dit websted og dit indhold.

Alle kommentarer vises i admin-området, og der er flere funktioner, du kan tilføje, fra kun at aktivere kommentarer for bestemte brugere til moderering af kommentarer.

Du kan bruge comments.php-filen til at tilpasse udseendet og følelsen af ​​kommentarer i dit tema.

Andre sider og filer 

Afhængigt af dine behov kan du finde eller oprette forskellige sider og filer og kan skræddersy dem til dine præferencer ved at bruge de samme eller lignende retningslinjer som nævnt ovenfor. 

Brug af forældre / barn tema

Overordnet tema

Forældretemaer i WP er temaer, der erklæres "forældre" af andre temaer, nemlig børnetemaer.

Et underordnet tema bruges til at tillade designere og udviklere at oprette tilpasninger til temaer uden at bryde muligheden for at opdatere det overordnede tema. Dette skyldes, at hvis en udvikler ændrer de originale temafiler, går ændringerne tabt, når de udfører en temaopdatering.

Forældretemaer videregiver dog deres funktioner og funktionalitet til deres børnetemaer. Udviklere kan frit foretage ændringer i børnetemaets funktionalitet og funktioner uden at påvirke det overordnede temas opgraderbarhed.

Barn tema

Børnetemaer arver funktionaliteten i overordnede temaer. De bruges primært til at ændre et eksisterende tema uden at miste nogen tidligere tilføjet tilpasset styling under temaopdateringer.  

Børnetemaer fremskynder udviklingsprocessen, fordi det er let at oprette ændringer med dem.

De fleste temaer opretter et barnetema og gør det tilgængeligt med temaet, så enhver, der bruger temaet, kan tilpasse det gennem barnetemaet. Vi definerer, hvordan man opretter et barnetema, i vores artikel her.

Brug af udviklingsrammer

Dette udtryk refererer til kodebibliotekerne, der bruges i temaudvikling. 

Udviklingsrammer blev oprettet til at fungere som overordnede temaskabeloner med al funktionalitet. Grundlæggende, som med overordnede temaer, forbliver rammerne uberørte, mens udviklere kan udføre ændringer i underordnede temaer.

Dette gør udviklingen hurtigere og letter det at slippe af med bugs i specifikke temarammer. Bemærkelsesværdige udviklingsrammer inkluderer Genesis tema ramme, Themify og Divi by Elegant Themes.

Indpakning af, hvordan man opretter WordPress-tema

Ovenstående har været en detaljeret trinvis vejledning til at komme i gang med at udvikle dit eget brugerdefinerede WordPress-tema.

Alt i alt, mens du skal have en god forståelse af WordPress og PHP, er det ikke sådan en krævende proces. At kende grundlæggende webudvikling er vigtigt, og du kan forstå WordPress-kernen mere detaljeret, når du udvikler dig. Hvis du ikke har lyst til at være op til opgaven endnu, er det okay, tag dig tid og eksperimentér lidt.

Når du har lavet et par fejl, begynder du at lære mere og mere. Det er også godt at se på kodebasen for andre populære temaer for at forstå, hvad de laver og få en god idé om praksis, der giver mening.

Fortæl os, hvis du har spørgsmål i kommentarerne nedenfor.

Om forfatteren

Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/E-mail: david@collectiveray.com

David har arbejdet i eller omkring online / digital industri i de sidste 18 år. Han har stor erfaring inden for software- og webdesignindustrien ved hjælp af WordPress, Joomla og nicher, der omgiver dem. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencemæssig fordel ved hjælp af en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag.