Hvad er skabelontag i WordPress?

En effektiv funktion, der ofte bruges af udviklere og temadesignere, når de bygger eller tilpasser et WordPress-websted, er skabelontagget. Forståelse af, hvad et skabelontag er, og hvordan det fungerer, kan forbedre din evne til at strukturere dynamisk indhold på din webside betydeligt.

Uanset om du er nybegynder eller en erfaren udvikler, forklarer denne guide alt, hvad du behøver at vide om skabelontags i WordPress, på en enkel måde.

Introduktion til skabelontags

I WordPress er et skabelontag en PHP-funktion, der bruges til at hente og vise data dynamisk. I stedet for at hardcode værdier som din hjemmesidetitel eller forfatterens navn, bruger du et tag til at hente dem fra databasen og vise dem, hvor det er nødvendigt.

Skabelontags bruges i WordPress-temafiler som header.php, footer.php, index.php og single.php. Disse funktioner hjælper med at definere strukturen på dit websted uden at duplikere kode flere gange.

Skabelontag vs. HTML<template> Element

Det er vigtigt ikke at forveksle WordPress-skabelontags med HTML<template> element. Selvom begge er nyttige, tjener de meget forskellige formål.

• HTML -koden indeholder kodefragmenter, der ikke gengives, når siden indlæses. Dette indhold kan klones og indsættes senere ved hjælp af JavaScript.

• Et skabelontag i WordPress er en PHP-funktion, der udskriver specifikt indhold eller information på en side, f.eks. indlæggets titel eller dato.

Selvom den er tæt beslægtet i koncept, bruges den ene primært til JavaScript-baseret frontend-rendering, og den anden til håndtering af backend PHP-skabeloner.

Anatomien af ​​et skabelontag

Her er et simpelt eksempel på et skabelontag:

<?php the_title(); ?>

Denne kode viser titlen på et WordPress-indlæg. Den bruger en foruddefineret funktion leveret af WordPress.

De fleste skabelontags følger et lignende format:

• En PHP-funktion
• Kan tage parametre (valgfrit)
• Kan gentage outputtet direkte eller returnere en værdi

Ekko vs. Retur

Nogle tags gentager deres indhold direkte, mens andre returnerer en værdi, du kan tildele en variabel. Se altid WordPress-dokumentationen for at kontrollere den forventede adfærd.

Almindeligt anvendte skabelontags

WordPress har forskellige indbyggede skabelontags, der gør det nemmere at vise dynamisk indhold. Disse tags er grupperet efter funktionalitet og bruges i vid udstrækning på tværs af temafiler.

Strukturelle tags

Strukturelle skabelontags inkluderer automatisk forskellige dele af dit temalayout. De hjælper dig med at opretholde ensartethed på tværs af flere sider uden at skulle omskrive koden.

<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>

Disse tags inkluderer andre skabelonfiler som header.php, footer.php og sidebar.php.

Udforsk yderligere: Header-tags – hvad er de, og hvordan bruger man dem?

Indholdstags

Indholdsskabelontags er vigtige for at vise dynamiske opslagsdata på din webside. De viser vigtige indholdselementer som titler, brødtekster og uddrag.

<?php the_title(); ?>
<?php the_content(); ?>
<?php the_excerpt(); ?>

Metadata-tags

Metadata-tags giver dig mulighed for at hente yderligere oplysninger relateret til opslaget, såsom forfatterens navn, opslagsdato eller kategorier. Disse beriger dit indhold med den rette kontekst.

<?php the_author(); ?>
<?php the_date(); ?>
<?php the_category(); ?>

Disse tags henter metadata om opslaget eller den bruger, der skrev det.

Oplysninger om webstedet Tags

Webstedsinformationstags henter indstillinger og oplysninger, der er defineret i dit WordPress-dashboard. Dette kan omfatte dit websteds navn, beskrivelse og basis-URL.

<?php bloginfo(‘name’); ?>
<?php bloginfo(‘description’); ?>
<?php bloginfo(‘url’); ?>

Disse tags henter data fra dine webstedsindstillinger.

Læs mere: Hvad er metatags

Skabelontags inde i løkken

WordPress Loop er en PHP-kodeblok, der behandler og viser indlæg. De fleste indholdsrelaterede skabelontags fungerer bedst, når de placeres i denne løkke.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php endwhile; endif; ?>

Inde i Loop'en fungerer tags som the_title() eller the_content() baseret på det aktuelle opslag i kontekst.

Sådan opretter du et brugerdefineret skabelontag

Nogle gange dækker standardskabelontags ikke alle dine behov. Det er her, brugerdefinerede skabelontags kommer ind i billedet.

For at oprette en, skriver du en brugerdefineret PHP-funktion i dit temas functions.php-fil:

funktion mytheme_display_random_number() {
echo rand(1, 100);
}

Du kan derefter kalde denne funktion i din temaskabelon på følgende måde:

<?php mytheme_display_random_number(); ?>

Bedste praksis

• Sæt altid præfiks på dine funktionsnavne for at undgå navngivningskollisioner.
• Rens og valider data før output.
• Brug WordPress-funktioner som esc_html() for at sikre sikkert output.

Hvornår og hvor skal man bruge skabelontags

At vide, hvornår og hvor man skal bruge et skabelontag, hjælper med at sikre, at dit WordPress-tema fungerer korrekt. Skabelontags placeres primært i temafiler som single.php, archive.php, page.php eller endda index.php, afhængigt af den type indhold, der gengives.

For eksempel:

• Inde i løkken skal du kalde the_title() for at vise titlen på hvert indlæg.
• I page.php eller single.php skal du indsætte en ensartet sidebar ved hjælp af get_sidebar().
• For at vise dit websteds tagline i header.phpskal du bruge bloginfo('description').

Forståelse af skabelonstrukturen hjælper med at bestemme den korrekte placering og sikre, at din webside indlæser dynamisk indhold effektivt.

Yderligere læsning: Sådan retter du duplikerede titeltags i WordPress for at forbedre SEO

Forskellen mellem skabelontags og skabelonfiler

Begyndere forveksler ofte skabelontags med skabelonfiler, som tjener forskellige formål i WordPress-temaudvikling.

• Skabelonfiler er komplette PHP-filer, såsom home.php, single.php eller 404.php, der definerer en websides overordnede layout eller struktur.

• Et skabelontag er en funktion, der er skrevet i disse filer for at vise specifikke data, såsom indhold af opslag, metadata eller webstedsoplysninger.

Du kan tænke på skabelonfiler som containere og skabelontags som de individuelle elementer, der udgør indholdet i den pågældende container.

Brug af betingede tags med skabelontags

Du kan kombinere skabelontags med betingede WordPress-tags for at kontrollere, hvornår indhold vises på en side. Dette gør det muligt for dit websted at opføre sig dynamisk baseret på kontekst.

Eksempel:

php

hvis (is_single()) {
titlen();
indholdet();
}

Denne kode sikrer, at indlæggets titel og indhold kun vises ved visning af enkelte indlæg. Brug af skabelontags hjælper dig med at skræddersy websidestrukturen og brugeroplevelsen uden hardcode.

Tips til ydeevne og sikkerhed

Skabelontags kan påvirke ydeevne og sikkerhed, hvis de ikke bruges korrekt.

• Escape-output: Brug altid funktioner som esc_url() og esc_html(), når du udskriver data.
• Cachedata: Gem gentagne forespørgsler ved hjælp af transienter for at forbedre ydeevnen.
• Undgå direkte DB-kald: Brug WordPress API-funktioner til at hente data.

Læs også: Hvordan tredjepartstags kan påvirke ydeevnen

Skabelontags vs. shortcodes

Både skabelontags og shortcodes bruges til at indsætte dynamisk indhold, men de adskiller sig i brug og formål.

• Skabelontags bruges i PHP-temafiler til at indsætte og styre dynamisk HTML-output direkte.
• Shortcodes bruges i indlægs- eller sideindhold via WordPress-editoren eller funktionen do_shortcode().

Brug for eksempel the_author() (et skabelontag) i single.php til at vise forfatterens navn, mens gallery (en shortcode) kan tilføjes i en indlægstekst.

Shortcodes er mere brugervenlige, mens skabelontags fungerer bag kulisserne i temakoden.

Udforsk yderligere: Sådan konfigurerer du Elementor-shortcodes til nem brug af skabeloner

Avanceret brug: Overførsel af parametre til skabelontags

Nogle skabelontags accepterer parametre til at tilpasse, hvordan data vises. Denne fleksibilitet giver dig mulighed for at tilpasse indholdspræsentationen uden at gentage kode.

Eksempel med wp_nav_menu():

php

php
wp_nav_menu(
array('theme_location' => 'primary',
'menu_class' => 'nav-menu',
'container' => 'nav',
));
?> Tag: Læser du dette?

Her overføres en række parametre for at definere menuens udseende og HTML-struktur. På samme måde giver tags som get_the_excerpt($post_id) dig mulighed for at hente uddraget for et specifikt indlæg, hvilket giver dig mere kontrol over, hvordan information hentes og vises.

SEO og tilgængelighedsovervejelser

Når du bruger skabelontags, skal du følge bedste praksis for SEO og tilgængelighed:

• Brug semantiske HTML-tags (<article> ,<section> ) sammen med skabelontags.
• Tilføj alt-attributter til billedtags ved hjælp af the_post_thumbnail().
• Sørg for, at overskrifterne bruger den korrekte struktur (<h1> ,<h2> ).

Eksempel:

<img src=”<?php echo get_the_post_thumbnail_url(); ?> "alt="<?php the_title(); ?> ">

Fejlfindingsskabelon-tags

Hvis et skabelontag ikke fungerer:

• Tjek om du er inde i Loopen.
• Bekræft funktionens eksistens ved hjælp af function_exists().
• Brug WP_DEBUG og fejllogfiler til at spore problemer.

Eksempel:

hvis ( function_exists('titlen') ) {
titlen();
}

Browserunderstøttelse og -kompatibilitet

Skabelontags er en del af PHP- og WordPress-kernen, så browserunderstøttelse er ikke et direkte problem. Men når du bruger JavaScript med HTML<template> element:

• De fleste moderne browsere (Chrome, Firefox, Safari, Edge) understøtter det.
• Ældre versioner af Internet Explorer gør ikke.
• Brug en polyfill for at tilføje støtte, hvis det er nødvendigt.

Læs mere: Vigtig guide til sikker opdatering af WordPress PHP-version

HTML<template> Element og JavaScript

Selvom det ikke er direkte en del af WordPress-skabelontags, er det vigtigt at forstå JavaScript- gengivelse.

Eksempel:

<template id=”card-template”>
<div class=”card”>
<img src=”” alt=””>
<p class=”description”></p>
</div>
</template>

const template = document.querySelector('#card-template');
const clone = template.content.cloneNode(true);
clone.querySelector('img').src = 'image.jpg';
clone.querySelector('.description').textContent = 'Kortbeskrivelse';
document.body.appendChild(clone);

Dette giver dig mulighed for at genbruge HTML-strukturer dynamisk, i koncept svarende til skabelontags, men implementeret med JavaScript.

Almindelige fejl at undgå

Her er nogle fejl, du skal være opmærksom på, når du bruger skabelontags:

• Brug af forkert kontekst: Tags som the_content() skal bruges i Loop'en; ellers fungerer de ikke som forventet.

• Glemmer at escape output: For at forhindre sikkerhedsproblemer skal du altid rense output med esc_html(), esc_url() eller lignende funktioner.

• Tjekker ikke browserkompatibilitet: Hvis du bruger HTML

• Hardkodning i stedet for tags: Undgå statiske værdier, når et skabelontag dynamisk kan trække fra databasen.

Ved at følge bedste praksis sikrer du, at dit websted forbliver sikkert, effektivt og nemt at vedligeholde.

Oversigt

Skabelontags i WordPress tilbyder en effektiv måde at vise dynamisk indhold, opretholde ren kode og forbedre webstedets fleksibilitet. Uanset om du viser indlægstitler, forfatternavne eller brugerdefinerede data, strømliner skabelontags din temaudvikling.

Ved at bruge dem korrekt sikrer du, at dine websider er velstrukturerede, tilgængelige og SEO-venlige. Oprettelse af brugerdefinerede skabelontags giver også mulighed for avanceret tilpasning, hvilket hjælper dig med at kontrollere præcis, hvad der vises, og hvordan.

Ofte stillede spørgsmål