Opret WordPress-tema: Trin for trin til tilpasset udvikling

Siden sin oprindelige lancering i 2003 har WordPress udviklet sig fra et simpelt blogværktøj til en kraftfuld og populær hjemmesidebygger og et omfattende CMS (content management system), der bruges af omkring 38% af hjemmesiderne på nettet! I betragtning af sin popularitet, hvis din hjemmeside skal skille sig ud fra mængden, skal du oprette et WordPress-tema, der er unikt for din hjemmeside.

I virkeligheden er det ikke underligt, at WordPress har formået at nå så langt og blive så populært.

Den mængde fleksibilitet, den har, og de funktioner, den hoster, muliggør dens brede anvendelse på tværs af forskellige hjemmesidetyper. Derudover er WordPress forholdsvis nem at bruge med minimal eller ingen tidligere erfaring med kodning eller webudvikling overhovedet.

Dette er årsagerne til WordPress' succeshistorie, og det er præcis årsagerne til næsten 40 procent af alle hjemmesider på World Wide Web er drevet af denne software. 

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

Introduktion til WordPress-temaudvikling 

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

Softwaren giver brugeren en bred vifte af forskellige redigeringsmuligheder, når det kommer til temaer fra WP-administrationsområdet.

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

Faktisk har WordPress.org en enorm database med temaer i deres temakatalog.

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

Hvert af disse temaer har et forskelligt layout, designmønster og funktioner.

Det er op til brugeren at finde et, der bedst passer til deres hjemmesides behov. I de fleste tilfælde er temaer lavet med bestemte brancher eller erhverv i tankerne, hvilket betyder, at for eksempel restaurantejere nemt kan finde temaer med bookingfunktioner.

Selvom der findes masser af fantastiske temaer, der måske passer til dine behov, kan man roligt sige, at hvis du vil lave noget enestående, bliver du stort set nødt til at gøre det selv. Hvis du ikke kan programmere, er et godt alternativ muligheden ville være at vælge en freelance softwareudvikler (priserne kan variere afhængigt af forskellige faktorer).

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

At komme i gang med at oprette dit helt eget tema som nybegynder kan ved første øjekast virke som en kæmpe opgave.

Det er dog ikke alt for kompliceret at oprette et brugerdefineret tema fra bunden i WP. Du behøver ikke at være en webudviklingsnørd, hvis du har det grundlæggende i kodning med PHP, kan du nemt lære at oprette et WordPress-tema.

Derudover kan det være ret givende at lave dit eget tema, især når du ser slutresultatet live på din hjemmeside.

Oprettelse af dit første brugerdefinerede WordPress-tema

For at komme i gang med at oprette et WordPress-tema, skal du bruge et par grundlæggende ting:

• Et WordPress-websted
• En god hostingplan
• Lidt tidligere erfaring med ting som lokale staging-miljøer
• Grundlæggende forståelse af CSS- og PHP-kodningssprog
• Et startertema

 

Forståelse af WordPress-skabelonhierarkiet 

I WordPress er skabelonfiler (byggestenene i dit tema) modulære og kan genbruges.

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 specifikke omstændigheder.

Se på diagrammet nedenfor - det forklarer, hvordan WordPress-skabelonhierarkiet er organiseret.

 

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

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

Forespørgselsstrengen er information gemt i linket på hver del af det websted, du forsøger at ændre. Enklere sagt analyserer WordPress informationen og udfører søgninger gennem skabelonhierarkiet for at finde en skabelonfil, der matcher de angivne oplysninger i forespørgselsstrengen.

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

Hvis du for eksempel skriver følgende URL http://example.com/post/this-post, WordPress vil finde de nødvendige skabelonfiler i følgende rækkefølge: 

1. Filer der matcher slug'en, i dette tilfælde, dette indlæg.
2. Filer, der matcher indlægs-ID'et.
3. En generisk single post-fil, som f.eks. single.php.
4. En arkivfil, i dette tilfælde, archive.php.
5.  index.php fil.

 

Den sidste fil (index.php) er påkrævet i alle temaer, da det er standardindstillingen (eller fallback-indstillingen), hvis der ikke kan findes nogen anden fil i matchningsprocessen. understregninger (et WP starter-tema) har de mest almindelige filer. Disse filer, der er inkluderet i dette tema, vil fungere direkte fra starten.

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

Hvad er et WordPress Starter-tema? 

Et startertema er det grundlæggende fundament for et brugerdefineret WordPress-tema.

Du kan bruge det som grundlag for at få dit eget unikke tema op at køre. Med et startertema kan du bygge dit helt eget brugerdefinerede 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 startertema giver dig en bedre forståelse af, hvordan WordPress fungerer, fordi det viser dig det grundlæggende, temaets struktur og hvordan de forskellige dele fungerer sammen.

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

At vælge begyndertemaer (som UnderStrap, Underscores og Bones) vil hjælpe med at skabe et WordPress-tema, der åbner døren for at bruge en række forskellige muligheder.

Brug af Underscores kan være det bedste valg for begyndere, da det tilbyder de vigtigste funktioner. Det kommer også fra en mangeårig og pålidelig udvikler. Det betyder, at det er mere sandsynligt, at det er kompatibelt, sikkert og pålideligt, og at det vil have bedre support i det lange løb.

Hvorfor skal du bruge et startertema

Som nævnt ovenfor er et startertema et fundament, en skabelon, der hjælper dig med at skabe et unikt websted. Det er allerede fuldt funktionelt, men mangler stadig de definerende nøglefunktioner, der gør et brugervenligt websted. 

I bund og grund skal det stadig styles og konfigureres korrekt. 

Når det er sagt, er begyndertemaer ideelle for 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 om WP-drevne websteder. 

Et WordPress Starter-tema sparer dig tid og kræver minimal eller ingen baggrundsviden om kodning og resten af ​​WordPress-kompleksiteten. 

Du kan udnytte mange å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 anerkendt startertema, der giver begyndere et forspring temaudviklingUnderscores er ret grundlæggende og perfekt til at komme i gang med det samme, hvis du har alle de nødvendige værktøjer. Temaet er fantastisk til at forstå koncepterne bag temaudvikling. Underscores handler om at starte et nyt projekt, hvilket bør ses mere som et konstant udviklende værktøjssæt og mindre som et framework.
  
  
• Roots – Dette startertema giver dig en tilgang, der er mere rettet mod udviklere, da dets markup er baseret på HTML5 Boilerplate. Det understøtter også mere avancerede værktøjer som f.eks. Bootstrap og GruntRoots-starttemaet indeholder også en temaindpakning, der hjælper dig med at strømline din proces og eliminerer behovet for at kalde de samme skabelondele gentagne gange.

Roots bruger også CSS-forbehandlingsprogrammer og understøtter LESS, en bagudkompatibel sprogudvidelse til CSS, der kan fremskynde processen med at udvikle dit tema betydeligt.

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

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

Efter at have gennemgået 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 startertema, men du kan også frit oprette alt fra bunden uden startertemaer.

Hvis det er den vej, du vil gå, så glem ikke, at du får 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 skridt i processen bør være at oprette et udviklingsmiljø.

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

Ved brug af DesktopServer er en af ​​de ideelle veje, du kan gå. 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 dig og download den, og installer derefter softwaren.

 

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

Det er en forholdsvis simpel proces, og du vil være klar på få minutter. Efter opsætningen har du en hjemmeside og et udviklingsmiljø, der både fungerer og ser ud som enhver live WP-hjemmeside.

2. Download og installer et starttema

De mest basale begyndertemaer (som Underscores) er nemme for førstegangsbrugere at komme i gang med.

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

Du kan også tilføje syntaktisk fantastiske stylesheets eller SASS som er et CSS-forbehandlingssprog, der gør det muligt at introducere funktioner som indlejring, matematiske operationer, brug af variabler osv.

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

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

Forståelse af WordPress' kerneprincipper 

Nu hvor det grundlæggende er sat op, kan du komme i gang. Men før du dykker ned i tilpasningsprocessen, skal du gøre dig bekendt med kerneprincipperne og komponenterne i at oprette et WordPress-tema ved hjælp af WP's kerneprincipper. 

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

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

Som nævnt ovenfor bruger WP sit skabelonhierarki til at bestemme, hvilken skabelonfil den vil vælge til at udføre det indhold, en bruger anmoder om/har brug for. Du kan arbejde med disse filer, som de er, men da du er her for at oprette et WordPress-tema, vil hovedparten af ​​dit arbejde være at tilpasse dem til dine behov.

 

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

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

Du skal forstå konceptet og arbejde med det. Se nogle af eksemplerne i linket ovenfor for bedre at forstå, hvordan løkken bruges, og hvordan du kan tilpasse koden til dine behov.

3. Opret temadetaljer

Temaer er ikke udelukkende kosmetiske komponenter.

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

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

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

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

• wp_head() - er tilføjet til element i header.php. Det aktiverer scripts, stilarter og andre oplysninger, der kører, når webstedet begynder at indlæses.
• wp_footer() - normalt tilføjet til footer.php før tag, der oftest 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æse i headeren.  
• wp_meta() - Findes generelt på sidebar.php, og bruges oftest til at inkludere yderligere scripts (f.eks. en tagcloud).
• kommentarformular() - Tilføjet til comments.php lige før filen lukkes tag for at vise kommentarer. 

Når du bruger Underscores, vil disse hooks allerede være inkluderet i temaet, men det er altid en god idé at lære mere om dem og se alle tilgængelige hooks. Hooks giver dig mulighed for at udvide mulighederne i dit brugerdefinerede 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 filen, 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 stil.

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

Det kan blive ret kompliceret at gå i dybden med, hvordan man bruger styling med WordPress-temaer, og det ligger uden for rammerne af denne artikel. Hvis du ikke er helt sikker på dette, kan det være en god idé at læse mere om CSS, før du går videre.

5. Inkludering af JavaScript

Tilføjelse af JavaScript-filer til dit tema, hvis det er nødvendigt, kan forbedre interaktive funktioner og muligheder og give et bedre fungerende websted. Det er især praktisk, når du vil integrere tredjeparts plugins på dine websteder, såsom specifikke video- eller lydafspillere, ting som sliders, popup-understøttelse og andre tredjepartsbiblioteker for at skabe avanceret funktionalitet.

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

Alternativt kan du bruge scriptet direkte i din header.php skabelonfilen mellem metatags og typografiarklinket, som du ville gøre med en HTML-side. Når du bruger den i headerfilen, skal den se nogenlunde sådan ud: 

Hvis du vil bruge JS direkte, så tilføj kaldet til filerne som vist nedenfor. Hvis du vil indstille en "send dette til en ven"-funktion, kan du placere den under indlægstitlen. Det ville se sådan ud: 

" rel="bookmark">

<!--

emailpage();

//-->

Du kan også sætte scripts i kø ved hjælp af syntaksen, der vises senere i denne artikel.

6. Test dit tema og eksporter det

Når du er færdig med alt ovenstående, er det endelig tid til at teste dit oprettede brugerdefinerede 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, der giver dig mulighed for at se, hvor effektivt dit tema kan håndtere både forudsigelige og uforudsigelige data.

Test alt grundigt (i henhold til ovenstående Codex-link), så du kan være sikker på, at det tema, du har oprettet, opfylder de nødvendige standarder og lever op til dine forventninger, før du eksporterer det.

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

Du kan udføre eksporten ved at finde det sted lokalt, hvor du installerede hjemmesideudviklingsmiljøet.

Åbn mappen og få adgang til  /wp-indhold/temaer/, hvor du kan finde det tema, du arbejdede på.

Opret nu en med et komprimeringsværktøj zip.fil baseret på mappen ved at komprimere den. Når du er færdig, skal du blot uploade og installere den på et hvilket som helst WordPress-websted. Du kan også indsende den til WordPress Temakatalog. 

Detaljeret WordPress-temaudviklingsguide

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

Oprettelse af brugerdefinerede temafiler/mapper

Som du allerede ved, oprettes WP-temaer ud fra forskellige skabelonfiler, som som minimum vil indeholde en sidebar.php, header.php.og footer.phpDu kan kalde disse ved hjælp af skabelontaggene (get_header(), når man kalder headeren, get_sidebar(), når man kalder sidebjælken osv.).

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

Du kan også kalde skabelontaggene med samme analogi med skabelonnavnet som en parameter sådan her:

get_header( 'din_brugerdefinerede_skabelon' ); 

Sider oprettes af forskellige filer, hvilket betyder, at du også kan oprette andre brugerdefinerede skabelonfiler og kalde dem på et hvilket som helst sted på siden ved blot at bruge get_template_part(). Giv blot filen et passende navn, og brug den samme brugerdefinerede metode som med header-, footer- og sidebar-filerne. 

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

Når du endelig indlæser skabelonfilen i temaet, vil det se nogenlunde sådan ud:

get_template_part('indhold', 'produkt');

Brug af mapper

For at linke til temamapper 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:

echo get_theme_file_uri( 'billeder/logo.png' );

Sæt scripts og stylesheets i kø

Når du udvikler dit eget tema, kan du også oprette brugerdefinerede stylesheets og dine egne JavaScript-filer.

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

Alt du skal gøre er at oprette en funktion, der sætter alle styles og scripts i kø. Til dette opretter WP både et handle og en path for at finde filen og afhængighederne (hvis der er nogen). Når dette sker, skal du bruge en hook til at indsætte stylesheets og scripts. 

Den grundlæggende funktion for enqueing-stil:

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

For at sætte scripts i kø:

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

Sæt Google Fonts i kø

Google Fonts er en fremragende gratis ressource af skrifttyper til webdesignere, og de kan nemt tilføjes til dit brugerdefinerede tema.

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

Hvis du scroller ned hertil, kan du finde instruktionerne til deres brug i en boks med den nødvendige kode, som du kan tilføje til dit websted.   

Du kan tilføje skrifttyperne enten via standard- og den anbefalede metode, eller du kan vælge enten @import CSS-metoden eller Javascript-metoden.

Du kan også tilføje den til WP ved at sætte skrifttypen i kø i dit temas funktioner.php.fil eller ved at bruge 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', falsk );

}

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 vil header, footer og sidebjælke være ens på alle sider. Det er sandt, at du i nogle tilfælde vil have brug for at tilpasse et par ting, men generelt er de ensartede.

Så for at opdele siden i en header og en footer skal du klippe og indsætte fra index.php side, de relevante dele, der skal være i header/footer og sidebar. Dette afhænger lidt af din nuværende index.php.

Hvis du for eksempel bruger understregninger, er header og footer allerede defineret korrekt i header.php og footer.php.

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

På de fleste websteder indeholder overskrifterne de vigtigste overskriftsstile og navigation til webstedet.   

Start fra tilføje før lukningen Du burde have noget i retning af dette. Dette er baseret på understrekningsstarter-temaet, men du kan justere headeren efter behov for at lave dine egne tilpasninger.

header.php

 

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

?>

>

">

>

det_brugerdefinerede_logo();
hvis (is_forside() && is_home()):
?>
" rel="home">

andet:
?>
" rel="home">

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

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

 

Den samme proces bør også gælde for sidefoden.

Brug af Functions.php

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

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

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

Du kan blot oprette en functions.php-fil ved at oprette en almindelig tekstfil, som du kalder functions.php, og placere den i temaets mappe. Med denne fil kan du aktivere indlægsformater, navigationsmenuer og indlægsminiaturebilleder sammen med WP-handlinger og -filtre. 

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

Brug af hovedindstillinger i temaet

Hovedindstillingerne tillader ændring af visse temaindstillinger uden at skulle ændre temafiler eller kode. En detaljeret beskrivelse af dette ligger uden for denne artikels rammer, så vi henviser dig 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-løkken

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

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

Grundlæggende gennemgår den indlæggene for de aktuelle sider et ad gangen ved at udføre den handling, der er angivet i temaet. 

Du kan bruge løkken til

• Visning af indhold og kommentarer
• Visning af indlægstitler og uddrag på bloggens hjemmeside
• Vis data fra brugerdefinerede felter og brugerdefinerede opslagstyper
• Vis indholdet på individuelle sider ved hjælp af skabelontags.
• Tilpas Loop for at vise og manipulere indhold i skabelonfiler

Hvis du bruger Underscores starter-temaet, finder du WordPress-løkken i single.php- og page.php-filerne. Du kan se på disse filer for at forstå, hvordan det fungerer og/eller kan bruges.

 

get_header();
?>

mens (have_posts()):
indlægget();

get_template_part( 'skabelondele/indhold', get_post_type() );

navigationen_efter_indlægget(
array (
'prev_text' => ' ' . esc_html__( 'Forrige:', 'daves-tema' ) . ' %title ',
'next_text' => ' ' . esc_html__( 'Næste:', 'daves-tema' ) . ' %title ',
)
);

// Hvis kommentarer er åbne, eller vi har mindst én kommentar, skal du indlæse kommentarskabelonen.
hvis (kommentarer_åbne() || hent_kommentarer_nummer()):
kommentarer_skabelon();
endif;

endwhile; // Slut på løkken.
?>

get_sidebar();
get_footer();

 

Menu og sider

Primær menu

Du kan vælge din primære menu i WP Menu Editor (placeret under Udseende - Menu). Dit tema understøtter muligvis mere end én navigationsmenu forskellige steder i dit tema. 

Der er også måder at registrere yderligere menuer på, for eksempel kan du oprette en "fodmenu".

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

Brugerdefineret side

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

Selvom denne fil påvirker alle enkeltsider 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 burde det være ret ligetil.

index.php

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

Du skal bruge dette til at håndtere alt, der ikke håndteres af resten af ​​skabelonfilerne.

Arkiv.php

archive.php Skabelonen bruges til at vise tag-, forfatter-, kategori- og andre brugerdefinerede arkivsider.

At oprette en arkivside kan være en god måde at samle alt dit indhold på én side.

Boligtype

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

En typisk category.php-skabelon vil se sådan ud:

/ **

* En simpel kategoriskabelon

*/

get_header(); ?>

// Tjek om der er nogen indlæg at vise

hvis (have_indlæg()): ?>

Kategori:

// Vis valgfri kategoribeskrivelse

 hvis (kategoribeskrivelse()): ?>

// Løkken

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

" rel="bookmark" title="Permanent link til <?php the_title_attribute(); ?>">

ved

 <?php

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

?>

<?php endwhile;

ellers: ?>

Beklager, ingen indlæg matchede dine kriterier.

Sidebar.php

Sidebjælken er det område, hvor du kan placere dine widgets i et WP-tema. Oftest er den i 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 sidens indhold, men ting som links til forskellige områder af dit websted, tilmeldingsformularer, annoncer, links til sociale medier og så videre.

Typisk bruges sidebjælken sammen med WP-widgets.   

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

funktion wpb_widgets_init() {

    register_sidebar( array(

        'navn' => __( 'Hovedsidebjælke', 'wpb' ),

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

        'beskrivelse' => __( 'Hovedsidebjælken vises til højre på hver side undtagen forsideskabelonen', 'wpb' ),

        'før_widget' => ' ',

        'efter_widget' => ' ',

        'før_titel' => ' ',

        'efter_titel' => ' ',

    ));

    register_sidebar( array(

        'navn' =>__( 'Forsidesidebjælke', 'wpb'),

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

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

        'før_widget' => ' ',

        'efter_widget' => ' ',

        'før_titel' => ' ',

        'efter_titel' => ' ',

    ));

    }

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å din hjemmeside.

Til dette formål skal du oprette en brugerdefineret skabelon til et enkelt indlæg. Dette minder meget om at oprette brugerdefinerede sider. Ved at følge de grundlæggende retningslinjer, der anvendes der, kan du også nemt oprette individuelle indlæg. 

Oprettelse af et fremhævet billede

For at tilføje understøttelse af 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 tjekke, om muligheden for fremhævet billede er tilgængelig. Der er stor sandsynlighed for, at WP ikke viser det automatisk, så for at vise billedet skal du muligvis foretage små ændringer i dine skabeloner, der viser, 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 indlægslister med flere poster, end der er plads til på en enkelt side, eller når du vil opdele længere indlæg ved hjælp af mærke.

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

indlægsnav_link();

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

næste_indlæg_link();

link til forrige_indlæg();

Kommentarer 

Kommentarer er en essentiel del af enhver blog eller side. De giver besøgende på hjemmesiden mulighed for at kontakte dig, give feedback, stille spørgsmål og generelt skabe et dybere bånd til din hjemmeside og dit indhold.

Alle kommentarer vises i administratorområdet, og der er flere funktioner, du kan tilføje, lige fra at aktivere kommentarer kun for bestemte brugere til kommentarmoderering.

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

Andre sider og filer 

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

Brug af forældre/underordnet tema

Overordnet tema

Forældretemaer i WP er temaer, der erklæres som "forældre" af andre temaer, nemlig undertemaer.

Et undertema bruges til at give designere og udviklere mulighed for at tilpasse temaer uden at forstyrre muligheden for at opdatere det overordnede tema. Dette skyldes, at hvis en udvikler ændrer de originale temafiler, så går ændringerne tabt, når der udføres en temaopdatering.

Forældretemaer videregiver dog deres funktioner og funktionalitet til deres undertemaer. Udviklere kan frit foretage ændringer i undertemaets funktionalitet og funktioner uden at det påvirker overordnetemaets opgraderingsmuligheder.

Barn tema

Underordnede temaer arver funktionaliteten fra de overordnede temaer. De bruges primært til at ændre et eksisterende tema uden at miste tidligere tilføjet brugerdefineret stil under temaopdateringer.  

Underordnede temaer fremskynder udviklingsprocessen, fordi det er nemt at lave ændringer med dem.

De fleste temaer opretter et undertema og gør det tilgængeligt sammen med temaet, så alle, der bruger temaet, kan tilpasse det via undertemaet. Vi definerer, hvordan man opretter et undertema, i vores artikel her.

Brug af udviklingsrammer

Dette udtryk refererer til de kodebiblioteker, der bruges i temaudvikling. 

Udviklingsframeworks blev skabt for at fungere som skabeloner til overordnede temaer med al funktionalitet. Grundlæggende set, ligesom med overordnede temaer, forbliver frameworks uberørte, mens udviklere kan foretage ændringer i underordnede temaer.

Dette gør udviklingen hurtigere og gør det lettere at fjerne fejl i specifikke tema-frameworks. Bemærkelsesværdige udviklingsframeworks inkluderer Genesis tema ramme, Themify og Divi af Elegant Themes.

Opsummering af hvordan man opretter et WordPress-tema

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

Alt i alt, selvom du skal have en god forståelse af WordPress og PHP, er det ikke en så krævende proces. Det er vigtigt at kende det grundlæggende i webudvikling, og du kan forstå WordPress-kernen mere detaljeret, efterhånden som du udvikler. Hvis du ikke har lyst til at være opgaven endnu, er det okay, tag dig god tid og eksperimenter lidt.

Når du har lavet et par fejl, vil du begynde at lære mere og mere. Det er også godt at kigge på kodebasen for andre populære temaer for at forstå, hvad de gør, og få en god idé om fremgangsmåder, der giver mening.

Lad os endelig vide, hvis du har spørgsmål i kommentarerne nedenfor.