vejledning til brugerdefinerede temaer

vejledning til brugerdefinerede temaer

at lære at oprette brugerdefinerede temaer åbner en helt ny verden for dig at udforske. Det giver dig mulighed for at opbygge brugerdefinerede designs til dig selv, dine kunder og endda bidrage tilbage til open source-samfundet.

i denne vejledning tager vi dig fra nul til at have et fuldt funktionelt tema, der kan indsendes til WordPress.org tema mappe.

for at følge med har du brug for en grundlæggende forståelse af HTML, CSS, PHP, og hvordan ordtryk fungerer.

al den kode, der bruges i denne vejledning, vil være tilgængelig til reference i dette Github-arkiv.

Trin #1: Oprettelse af vigtige filer til dit brugerdefinerede tema

et fungerende Ordtrykstema kan bestå af kun to filer: stil.CSS og indeks.php. Dette er muligt på grund af skabelonhierarkiet.

når den udsender en hjemmeside, søger den efter den mest specifikke skabelon, der er tilgængelig, hvis en skabelon ikke findes, vil den flytte ned i hierarkiet, indtil den finder en, der gør det. Her er et praktisk eksempel:

brugeren er på https://example.com/practical-example, som er en side. Vil forsøge at finde en skabelon i denne rækkefølge:

1. 1. • side – {slug}.php – siden slug er / praktisk-eksempel, vil ordtryk se at bruge din-tema / side-praktisk-eksempel.php
      • side-{id}.php-siden ID er 42, vil se ud til at bruge din-tema / side-42.php.
      • side.php vil forsøge det generelle formål dit-tema / side.php skabelon.
      • ental.php-entalskabelonen kan gengive indlæg og sider, så den er prøvet efter den mere specifikke side.php
      • indeks.php-endelig din-tema / indeks.php bruges, hvis der ikke findes nogen anden skabelon.

lad os starte med at opbygge et tema med kun de vigtige filer, og så kan vi lag på flere funktioner, når vi undersøger, hvordan de fungerer.

i /wp-content/themes/ skal du oprette en mappe med navnet my-custom-theme og oprette disse to følgende filer:

style.css

for at kunne genkende vores tema og udsende det korrekt i listen over udseende.css, det ser sådan ud:

/*Theme Name: My Custom ThemeTheme URI: https://yourwebsite.com/themeAuthor: Your NameAuthor URI: https://yourwebsite.comDescription: This is my first custom theme!Version: 1.0.0License: GNU General Public License v2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Text Domain: my-custom-themeTags: custom-background*/

teknisk set er ingen af felterne påkrævet, men hvis du vil have dit tema til at se godt ud i admin, så er de stærkt opmuntret. De er også påkrævet, hvis du distribuerer dit tema på .

1. 1. • tema navn – du bør altid angive et tema navn. Hvis du ikke gør det, vil mappenavnet blive brugt, my-custom-theme i vores eksempel.
      • tema URI – hvis det bruges, skal temaet URI give et link til en side, hvor besøgende kan lære mere om temaet.
      • forfatter – dit navn går her.
      • forfatter URI – et link til din personlige eller forretningsmæssige hjemmeside kan placeres her.
      • Description – beskrivelsen er vist i Modal-temaoversigten.
      • Version – versionsnumre hjælper udviklere med at holde styr på ændringer og lade brugerne vide, om de bruger den nyeste version. Vi følger SemVer-nummereringssystemet for at angive sværhedsgraden af ændringer i en opdatering.
      • Licens – hvordan du licenserer dit tema er op til dig, men hvis du vælger en ikke-GPL-kompatibel licens, kan du ikke distribuere dit tema.
      • Licens URI – dette er simpelthen et link til licensen anført ovenfor.
      • Tekstdomæne – tekstdomænet bruges, når du oversætter dit tema til andre sprog. Bare rolig, vi vil undersøge dette dybtgående senere. For nu er det nok at vide, at det er en god praksis for temamappen og tekstdomænet at være temanavnet adskilt af bindestreger i stedet for mellemrum.
      • Tags-Tags bruges kun, hvis du uploader dit tema til WordPress.org tema mappe. De er grundlaget for mekanismen’ Funktionsfilter’.

Kopier og indsæt ovenstående i stil.css, og du vil have noget som dette:

Bemærk: Det ser lidt tomt ud i øjeblikket, da vi ikke har et skærmbillede endnu. Vi vil tilføje det senere.

indeks.php

indeks.php er den eneste anden strengt nødvendige fil. Dens opgave er at gøre alle front-end output til vores tema.

siden indeks.php kommer til at gøre alle vores sider (hjem, indlæg, kategorier, arkiver) det kommer til at gøre en masse arbejde. For at starte har vi brug for et hovedafsnit, der dækker HTML-basics.

<!DOCTYPE html><html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head>

dette er standard HTML med en undtagelse, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head er en kernefunktion, der gør det muligt at indsætte kode i overskriften uden at ændre dine skabelonfiler. Dette kaldes en actionkrog.

hvis du er bekendt med HTML, kan du bemærke, at der ikke er en < Titel> tag til output sidetitlen. Det er fordi, at du kan bruge den til dynamisk at indsætte titlen.

en anden brug af vp_head er at forespørge stilarter (.CSS) og scripts (.js). Der er meget gode grunde til at gøre dette i stedet for hardcoding dem, som vi vil se på senere.

Dernæst har vi sidens krop:

<body <?php body_class(); ?>>

body_class () er en hjælpefunktion, der leveres af , der udsender en liste over nyttige CSS-klasser, der beskriver den side, der vises, såsom:

class="page page-id-2 page-parent page-template-default logged-in"

body_class (); accepterer også en parameter, så du kan tilføje dine egne klasser, for eksempel:

<body <?php body_class( 'wide-template blue-bg' ); ?>>

Dernæst har vi skabelonoverskriften.

<header class="site-header"><p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p><p class="site-description"><?php bloginfo( 'description' ); ?></p></header><! – .site-header – >

her bruger vi’ indbyggede skabelonfunktioner til at udskrive sidens titel og beskrivelse. Vi har også brugt en hjælpefunktion, home_url (), til at linke sidetitlen tilbage til hjemmesiden.

næste op, sidens krop:

<div class="site-content"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();?><article <?php post_class(); ?>><header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header><! – .entry-header – ><div class="entry-content"><?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?></div><! – .entry-content – ></article><! – #post-## – ><?php// If comments are open or we have at least one comment, load up the comment template.if ( comments_open() || get_comments_number() ) :comments_template();endif;endwhile;else :?><article class="no-results"><header class="entry-header"><h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1></header><! – .entry-header – ><div class="entry-content"><p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p></div><! – .entry-content – ></article><! – .no-results – ><?phpendif;?></div><! – .site-content – >

det er her, det bliver interessant (og lidt mere komplekst). Her bruger vi det vigtigste element i ordtryk, sløjfen. Sløjfen gør det hårde arbejde med at finde ud af, hvilken side brugeren er på, og hvad der skal vises. Derefter returnerer den en liste over et eller flere ‘indlæg’, som vi kan løbe igennem og output data ved hjælp af skabelonfunktioner.

hvis sløjfen ikke returnerer nogen resultater, for eksempel på en 404-side eller slettet post, bruger vi en anden operatør til at vise en foruddefineret meddelelse.

uden nogen af den omgivende kode ser en forenklet sløjfe sådan ud:

if ( have_posts() ) : // check if the loop has returned any posts.while ( have_posts() ) : // loop through each returned post.the_post(); // set up the content so we can use template tags like the_title().the_title(); // output the post title.the_content(); // output the post content.endwhile;else : echo 'No Page Found'; // output an error message if there are no posts.endif;?>

mange funktioner bruger’ post ‘ – terminologien, selvom de kan returnere og udsende enhver form for indhold (indlæg, sider, brugerdefinerede posttyper).

endelig har vi sidefoden, alt hvad vi skal gøre her er at lukke de HTML-tags, vi åbnede tidligere. Der er en anden handlingskrog, som bruges aktivt af ordtryk og plugins til at inkludere scripts i sidefoden, der er nødvendig for at gengive siden.

<?php wp_footer(); ?></body></html>

hvis du har fulgt med indtil videre, vil du have et fuldt funktionelt Ordtrykstema, der ser sådan ud:

vores tema vil ikke vinde nogen designpriser (det har ingen CSS), og det mangler en masse funktioner, som brugerne anser for væsentlige (sidebjælker, navigation, metadata, miniaturebilleder, paginering osv.) men det er en god start!

lad os fortsætte og se, hvordan vi kan forbedre det.

Trin #2: Opret funktioner.php

funktioner.php er ikke strengt en påkrævet Fil, men det giver så mange fordele, at 99,99% af temaerne har det. I funktioner.php du kan bruge den indbyggede tema funktionalitet og også tilføje din egen brugerdefinerede PHP kode.

Opret en Funktioner.php i din temamappe nu, da vi tilføjer kode til den i de næste afsnit.

tilføjelse af en navigationsmenu

de fleste, hvis ikke alle hjemmesider bruger en navigationsmenu, men indtil nu understøtter vores tema ikke en. Vores tema har en navigationsmenu, vi skal registrere det i funktioner.php som dette:

register_nav_menus( array( 'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),);

Bemærk: register_nav_menus () accepterer et array, så du kan registrere mere end en menu, hvis det er nødvendigt.

nu ved vi om vores menu, men vi skal stadig sende det i vores tema. Det gør vi ved at tilføje følgende kode under sidebeskrivelsen i indekset.php:

wp_nav_menu( array( 'theme_location' => 'menu-1',) );

nu har vi en (unstyled) navigationsmenu:

tilføjelse af en sidebjælke

vores tema har heller ikke en sidebjælke (kontrolområde), lad os rette det nu.

først skal vi registrere sidebjælken i funktioner.php:

function my_custom_theme_sidebar() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'my-custom-theme' ), 'id' => 'sidebar-1', ) );}add_action( 'widgets_init', 'my_custom_theme_sidebar' );

Opret nu sidebjælke.php i din temamappe og tilføj følgende kode:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?> <ul class="sidebar"> <?php dynamic_sidebar('sidebar-1' ); ?> </ul><?php } ?>

her bruger vi en IF-erklæring til at kontrollere, om sidebjælken er ‘aktiv’, før vi udsender koden. En aktiv sidebjælke er en, som brugeren har tilføjet mindst en kontrol til.

det sidste trin er at inkludere sidebjælken i indeks.tilføj et get_sidebar () opkald.

tilføjelse af fremhævede billeder

ligesom sidebjælker og navigationsmenuer kan vi ikke bare udsende fremhævede billeder i vores tema og forvente, at de fungerer. I funktioner.php Tilføj:

add_theme_support( 'post-thumbnails' );

nu kan vi tilføje the_post_thumbnail(); inden for vores loop og miniaturebillederne fungerer. Det eneste problem er, at de vil producere ved maksimal størrelse på 1920ph 2560ph, hvilket er for stort til de fleste anvendelser.

når en bruger uploader et billede, og hvis billedstørrelse er defineret, genererer en version af det uploadede billede i den størrelse (mens originalen bevares). Hvis brugerens billede er mindre end de dimensioner, du har angivet, vil det ikke gøre noget, da det ikke kan gøre et billede større end originalen.

hvis du vil bruge et optimeret funktionsbillede i stedet for originalen, skal du placere følgende kode i funktioner.php:

add_image_size( 'my-custom-image-size', 640, 999 );

den første parameter er håndtaget, den anden er billedbredden og den tredje er højden. Både højde og bredde er valgfri, hvis du kun vil begrænse en dimension.

i indeks.php:

the_post_thumbnail( 'my-custom-image-size' );

forespørgsel stilarter og Scripts

tidligere sagde vi, at det er bedre at spørge stilarter og scripts i stedet for at hardcoding dem direkte ind i skabelonfilerne. Det skyldes, at forespørgsel giver mulighed for meget mere fleksibilitet.

når det gøres korrekt, fortæller forespørgslen også, hvilke ressourcer der indlæses. Når du ved, hvilke ressourcer der er brug for, kan du sikre dig, at den samme ressource ikke indlæses mere end en gang. Dette er især vigtigt, når du har et ekstremt populært bibliotek som f.eks.

en anden fordel ved forespørgsel er, at en ressource, der spørges, kan afkøbes af et plugin, så man undgår behovet for at ændre skabelonfiler.

selvom vores tema har en stil.css-fil det bruger det ikke endnu, lad os spørge det nu:

function my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() er en hjælpefunktion, der henter URI for det aktuelle temas stilark. Hvis vi undersøgte en anden fil, skulle vi gøre dette i stedet:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

vores tema har ikke nogen scripts, hvis det gjorde, ville vi spørge dem sådan:

function my_custom_theme_enqueue() {wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

i disse tilfælde behøver du kun at levere den første parameter ($handle):

wp_enqueue_script( 'jquery' );

tilføjelse af stil med CSS

vores tema har stærke fundamenter, men mangler ethvert design og tilføjer nogle grundlæggende CSS til stil.css vil gøre en kæmpe forskel. Vi har tilføjet omkring ~100 linjer CSS til vores prøve tema som en demonstration, og resultatet ser sådan ud:

Title Tag

alle temaer skal bruge den indbyggede funktionalitet til at generere title tag, som er aktiveret ved at tilføje denne kode til dine funktioner.php-fil: add_theme_support( 'title-tag' ); det er alt, hvad der er til det, ordtryk håndterer output på siden <Titel> og om nødvendigt kan plugins ændre output ved hjælp af filtre. SEO-plugins gør dette ofte i et forsøg på at optimere titlerne yderligere.

Trin #3: Tilføj Skabelondele

lige nu er 80% af vores skabelonkode i indeks.php.

mens dette fungerer, vil det resultere i en masse kodegentagelse, når vi har andre skabelonfiler såsom ental.php, søg.php og Arkiv.php. Skabelondele gør temaudvikling lettere ved at give os mulighed for at genbruge kode på tværs af skabeloner. Da vores sidehoved og sidefod vil være den samme på hver side, er de en perfekt kandidat til at bruge skabelondele. Opret først header.php og flytte følgende kode fra indekset.php:

<!DOCTYPE html><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="<https://gmpg.org/xfn/11>"><?php wp_head(); ?></head> <header class="site-header"> <p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> </p> <p class="site-description"><?php bloginfo( 'description' ); ?></p><?phpwp_nav_menu( array( 'theme_location' => 'menu-1',) );?> </header><! – .site-header – >

i indeks.php erstatter ovenstående kode med:

<?php get_template_part( 'header' ); ?>

Bemærk: Når du får en skabelon del, du skal udelade .php fra skabelonen del håndtag.

opret derefter en sidefodskabelondel ved at flytte denne kode til sidefod.php og gentagelse af ovenstående proces:

<?php wp_footer(); ?></body></html>

endelig flytter vi koden’ no-results ‘ til en skabelondel, da den sandsynligvis vil blive brugt i flere skabeloner. Opret indhold-ingen.php og flyt denne kode til den nye fil.

<article class="no-results"> <header class="entry-header"> <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1> </header><! – .entry-header – > <div class="entry-content"> <p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> </div><! – .entry-content – ></article><! – .no-results – >

dit indeks skal nu se sådan ud:

<?php get_template_part( 'header' ); ?> <div class="site-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <?php the_post_thumbnail(); ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><! – .entry-header – > <div class="entry-content"> <?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?> </div><! – .entry-content – > </article><! – #post-## – > <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; else : get_template_part( 'content-none' ); endif;?></div><! – .site-content – ><?phpget_sidebar();get_template_part( 'footer' );

selvom ovenstående fungerer perfekt, er der en lille forbedring, vi kan gøre. Har hjælper funktioner til at inkludere sidehoved, sidefod og sidebar skabelon dele. Da det er en bedste praksis at bruge kernefunktionalitet, hvor det er muligt, bør vi bruge dem i stedet.

Erstat get_template_part( 'header' ); med get_header(); og get_template_part( 'footer' );medget_footer();

Trin #4: Tilføj ental.php, arkiv.php, søg.php og 404.php

grundlaget, vi afsluttede med skabelondele, betaler udbytte, når vi tilføjer nye skabelonfiler til vores tema. Nedenfor har vi listet de mest almindelige. For at undgå at overvælde dig med kodeeksempler har vi i stedet linket til kildekoden på Github.

ental.php

indlæg og sider, når de vises på deres egne URL ‘er, betragtes som’ ental’, da layoutet for det meste vil være det samme for begge disse sidetyper. Men i tilfælde af at det ikke er, kan du bruge den mere specifikke side.php og single.php (post) i stedet.

eksempel kode – ental.php

arkiv.php

Arkivskabeloner adskiller sig normalt fra entalskabeloner på to måder: de viser uddrag snarere end det fulde indhold og har en arkivoverskrift, der forklarer indholdet.

se tilbage til skabelonhierarkiet, og du vil se, at arkivskabelonen dækker alle typer arkiver (forfatter, kategori, tag, taksonomi, dato), hvis dette ikke fungerer til din brugssag, kan du stadig bruge de mere specifikke skabeloner:

1. 1. • forfatter.php
      • kategori.php
      • tag.php
      • taksonomi.php
      • dato.php

eksempel kode-arkiv.php

søg.php

kan man søge efter hjemmesider ved hjælp af ?s= URL parameter, for eksempel yourwebsite.com?s=test. Søgning.php skabelon udsender resultaterne af disse søgninger.

eksempel kode – søgning.php

404.php

det andet udsagn, vi tilføjede i indekset.php fanger” side ikke fundet ” fejl, men du vil måske afkoble denne funktionalitet i sin egen skabelonfil for at få mere kontrol over output. Det er brugen af 404.php skabelon fil.

Eksempelkode – 404.php

Trin #5: hjælpefiler

hvis du distribuerer dit tema til offentligheden, er følgende filer afgørende. Uden disse, vil dit tema blive afvist fra tema repositories og markedspladser.

skærmbillede.PNG

skærmbilledet vises på listen over temaer, når brugeren vælger et nyt tema. Her er nogle bedste fremgangsmåder, du skal følge:

1. 1. • Screenshots skal være 1200ph 900ph
      • Screenshots skal være i.png eller .JPG-format
      • skærmbilleder skal være en nøjagtig gengivelse af temaet
      • skærmbilleder skal optimeres (brug tinypng.com eller lignende)

readme.

bruger ingen oplysninger fra readme.det trækker alt, hvad det har brug for fra Stil.css. På den anden side trækker temakataloget vigtige oplysninger fra readme-filen og betragter den som en påkrævet Fil.

de fleste udviklere bruger readme.den centrale placering til at gemme alle oplysninger om deres tema. En simpel readme.TDC ser sådan ud:

=== Theme Name ===Requires at least: 5.0Tested up to: 5.2Requires PHP: 5.6License: GPLv2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Short description. No more than 150 chars.== Description ==Theme desc.== Changelog === 1.0 =* Added new option== Resources ==* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, (<https://opensource.org/licenses/MIT>)

1. 1. • kræver i det mindste-dette er den mindste version af ordtryk, som dit tema er kompatibelt med.
      • testet op til – dette felt angiver den seneste version af dit tema er blevet testet med.
      • kræver PHP – dette felt angiver den mindste version af PHP dit tema vil fungere på.
      • Beskrivelse – Dette beskrivelsesfelt vises ikke i øjeblikket nogen steder.
      • Changelog – changelog bruges ikke overalt, men udviklere og nogle brugere vil henvise til denne fil for at se, hvilke ændringer der er foretaget.
      • ressourcer – de fleste tredjepartsressourcer kræver tilskrivning af en slags. Ressourceafsnittet er et bredt accepteret sted at placere dem. Selv for ressourcer, der ikke eksplicit kræver tilskrivning, er det stadig en god praksis at liste dem her, så brugerne er opmærksomme på licenserne for ressourcer, de bruger.

Trin #6: Opret sideskabeloner

sideskabeloner giver udviklere mulighed for at oprette brugerdefinerede skabeloner, der kan bruges til individuelle indlæg og sider. For eksempel har de fleste temaer et layout med to kolonner (indhold-sidebjælke), men på nogle sider vil brugeren måske bare fokusere på indholdet og ikke vise et sidebjælke. Det er her en sideskabelon kan hjælpe.

Hvordan oprettes “sideskabeloner”?

i vores temamappe skal du oprette en ny mappe med navnet ‘sideskabeloner’ og inden for den mappe oprette en fil kaldet single-column.php. For at fremskynde tingene skal du kopiere al koden fra ental.php til side-skabeloner / single-kolonne.php og fjern opkaldet til get_sidebar (), da denne skabelon ikke har brug for det.

nu skal vi tilføje en speciel overskrift, der fortæller Dette er en sideskabelon, det ser sådan ud:

/*Template Name: Single Column TemplateTemplate Post Type: post, page*/

koden er selvforklarende, vi fortæller blot navnet på skabelonen, og hvilke posttyper den kan bruges sammen med.

det er alt, hvad der er til det, vores nye sideskabelon er nu tilgængelig i editoren under ‘Sideattributter’.

Trin #7: Gør dit tema kompatibelt med RTL.css

ikke alle sprog læses fra venstre mod højre. Arabisk og hebraisk læses for eksempel fra højre mod venstre (RTL). Der er en enkel måde at gøre dit tema kompatibelt med RTL-sprog.

Opret en ny fil i din temamappe kaldet rtl.CSS, derefter kopiere og indsætte følgende kode:

body {direction: rtl;unicode-bidi: embed;}

hvis et RTL-sprog er det aktive sprog på en hjemmeside, ved at indlæse denne CSS-fil automatisk.

dette er en meget grundlæggende implementering af RTL-funktionalitet for at komme i gang. Hvis du er interesseret i at lære mere her er to fantastiske ressourcer:

højre til venstre Sprogunderstøttelsesdokumentation

tyve tyve RTL-kode

Trin #8: Følg altid bedste praksis

bedste praksis har udviklet sig over tid for at gøre det lettere at opbygge og vedligeholde temaer. Ikke alene vil følge disse principper hjælpe dig, men de vil også gøre det lettere for andre udviklere, når de har brug for at arbejde med din kode.

1) Brug Starter temaer

Starter temaer giver en solid base for dig at bygge dit tema på. Typisk er de lette, indeholder lidt eller ingen styling og ingen konfigurationsmuligheder. Over tid kan du bygge din egen starter tema, som du kan basere alle dine projekter på, men for nu her er nogle populære muligheder:

1. 1. • understregninger
      • stillads
      • HTML5 Blank

2) kodningsstandarder

kodningsstandarder er en måde at formatere din kode på en ensartet måde på tværs af hele kodebasen. Der findes kodningsstandarder for HTML, CSS, Javascript og PHP. Mens brug af en kodningsstandard ikke har nogen indflydelse på slutbrugeroplevelsen, gør det din kode meget mere læsbar. Selvom du ikke bruger kodningsstandarderne, anbefaler vi altid at bruge en standard.

1. 1. • WordPress.org kodningsstandarder
      • arbejdsprogrammer
      • PHP kodningsstandarder

3) Brug lokalisering

takket være det hårde arbejde af frivillige, er tilgængelig på hundredvis af sprog. Hvis dit tema skal frigives offentligt, skal det bygges på en måde, der gør det muligt at oversætte det også.

bare rolig, det er super nemt at gøre. Alt, hvad vi skal gøre, er at sørge for, at alle strenge føres gennem en ‘lokaliseringsfunktion’ i stedet for at blive output direkte.

i stedet for dette:

<?php echo 'Previous Post'; ?>

det gør vi i stedet:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() er en lokaliseringsfunktion, der accepterer en streng og et tekstdomæne. Funktionen returnerer en oversættelse af den medfølgende streng eller den oprindelige streng, hvis en oversættelse ikke er tilgængelig.

4) Undgå Plugin-funktionalitet

når en bruger ændrer temaet, skal kun præsentationslaget ændres. Indholdet og funktionaliteten skal forblive stort set den samme. Hvad dette betyder er, at enhver funktion, der påvirker, hvordan Ordtryksroller skal være indeholdt i et plugin, ikke dit tema. Nogle eksempler på plugin-funktionalitet inkluderer:

1. 1. • brugerdefinerede posttyper
      • sidebyggere
      • deling af sociale medier
      • søgemaskineoptimering (SEO)

selvom det kan virke praktisk (og muligvis et salgsargument) at inkludere SEO-kontroller i et tema, skader det faktisk brugeren på lang sigt. I fremtiden bliver de nødt til at ændre deres tema, men kan ikke, fordi alle deres SEO-konfigurationer er tæt koblet til det aktuelle tema. I modsætning hertil, hvis konfigurationerne blev gemt i et plugin, kunne de ændre tema uden at bekymre sig.

5) præfiks (forhindre konflikter)

for at forhindre konflikter skal alle funktioner, klasser og globale variabler oprettet af dit tema være præfiks. Dette er vigtigt, fordi det er umuligt at vide, hvilken anden kode der kører på din brugers hjemmeside. Præfiks forhindrer navn sammenstød og fatale fejl.

dit temas navn adskilt af bindestreger eller understregninger fungerer som et præfiks det meste af tiden. Hvis temanavnet er meget langt, kan initialerne fungere i stedet.

Theme Name: Scaffoldclass Scaffold_Class {}function scaffold_function() {}global $scaffold_globalTheme Name: My Long Theme Nameclass MLTN_Class {}function mltn_function() {}global $mltn_global

6) Brug kernefunktionalitet

hvor den findes, skal du altid bruge kernefunktionalitet i modsætning til at genopfinde hjulet. Dette inkluderer, men er ikke begrænset til sidebjælker, navigationsmenuer, miniaturer efter indlæg, brugerdefinerede overskrifter og brugerdefinerede baggrunde. Disse funktioner er blevet kæmpet-testet af millioner af brugere og er aktivt vedligeholdt og forbedret.

hvis du har brug for at ændre funktionaliteten eller output af en kernefunktion, er det muligt at bruge en af de mange kroge og filtre. For eksempel wp_nav_menu() har en’ rollator ‘ parameter, så du kan have fuld kontrol over output.

7) Escaping og desinficering af Data

som temaudvikler skal du være fortrolig med at undslippe og desinficere data for at beskytte dine brugere mod potentielle udnyttelser.

Escaping

Escaping er processen med at kontrollere data er sikker, før den er output og desinficering kontrollerer data, før den gemmes i databasen.

har hjælpefunktioner, som du kan bruge til at undslippe data, så du ikke behøver at bygge dem selv. esc_html er et eksempel på en escaping-funktion. Dette er, hvad en unescaped output ligner:

echo get_theme_mod( 'error_page_title' );

for at undslippe output gør vi dette:

echo esc_html( get_theme_mod( 'error_page_title' ) );

nogle andre escaping funktioner, du bør være opmærksom på, er esc_attr (), absint (), esc_url().

det er også muligt at oversætte og undslippe en streng ved hjælp af en enkelt funktion:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

bliver:

echo esc_html__( '404 Not Found', 'my-custom-theme' );// oresc_html_e( '404 Not Found', 'my-custom-theme' );

Tip: hvor som helst i dit tema, hvor du har echo $, skal du kontrollere, om det skal undslippes, det gør det normalt.

desinficering

hvis du tilføjer indstillinger til dit tema, skal du sørge for, at de data, som brugerne indtaster til disse indstillinger, er sikre, før de kommer ind i databasen. Det har en række funktioner, der kan hjælpe med at rense input.

når du tilføjer en indstilling til dit tema ved hjælp af tilpasnings-API, har den en parameter for kaldet ‘desinficerings_callback’, som accepterer navnet på en desinficeringsfunktion. Ethvert input, som indstillingen tager, kontrolleres af den funktion, du giver til ‘desinfice_callback’, før den kommer ind i databasen.

det fremhæver vigtigheden af desinficering, at hvis selv en af dine indstillinger mangler desinficering_callback, vil den ikke blive accepteret i temakataloget.

$wp_customize->add_setting( 'my_custom_theme_setting', array( 'sanitize_callback' => 'sanitize_text_field' // A core sanitization function. ));

en officiel liste over desinficerings-og escapingfunktioner kan ses her: Dataresanisering/Escaping

trin #9: distribuer dit tema

temaer kan distribueres via forskellige kanaler afhængigt af det resultat, du vil opnå. Hvis dit resultat blot er at bidrage til open source-samfundet, er der ingen bedre måde at gøre det på end at uploade dit tema til mappen. Hvis du i stedet ønsker at sælge dit tema og tjene penge direkte, er der også måder at gøre det på.

her er de førende hjemmesider for temadistribution:

1) WordPress.org (bedste sted at hente overførsler og brugere)

den primære fordel ved at være vært for dit tema er, at du får et synlighedsforøg fra dit tema, der ikke kun ses på ordtrykket.men også på hjemmesiden.

en anden fordel ved at være vært for dit tema er det indbyggede opdateringssystem. Hvis du opdaterer dit tema, får alle brugere besked i deres dashboards og får en nem vej til at opdatere til den nyeste version.

WordPress.org accepterer kun gratis temaer, men det betyder ikke, at du ikke kan tjene penge. Et gratis tema kan være en god kanal til promovering af dit premium-tema, plugin eller service.

2) WordPress.com

WordPress.com værter både gratis og premium temaer. De har dog ikke været åbne for nye forfatterindlæg i et par år nu.

3) ThemeForest

ThemeForest er den førende markedsplads for premium temaer. Det bedst sælgende tema (Avada) har et salg på over $5.000.000.

generelt køberne på tema skov forventer fuldt udstyret “multi-purpose” temaer. Alle de øverste temaer har Side builder funktionalitet og understøttes af hold af udviklere. Det er et meget svært marked at bryde ind for nye forfattere.

4) Creative Market og Mojo Marketplace

Creative Market og Mojo Marketplace er små aktører på markedet for premium-temaer, hvorfor vi grupperede dem sammen. De tilbyder begge effektivt den samme service som ThemeForest, men i mindre skala.

5) Github

Github er den nemmeste måde at gøre dit gratis tema offentligt. Der er ingen gennemgangsproces og ingen retningslinjer at følge. Du vil dog ikke drage fordel af synligheden af wordpress.org og bliver nødt til at opbygge din egen opdateringsmekanisme, så brugerne kan få de nyeste versioner.

Trin #10: Test og forbedr kode

1) test af dit tema

Temaenhedstest

Temaenhedstesten er en standard indholdsimportfil, der indeholder en bred vifte af indholdstyper og kantsager. Det er nemt at uploade til dit udviklingsmiljø og vil fremhæve mange scenarier, du måske har overset.

VP_DEBUG

som temaudvikler er det absolut minimum, du skal gøre, at teste dit tema med VP_DEBUG aktiveret. Dit tema skal returnere ingen fejl eller advarsler, når er indstillet til sand.

det er også vigtigt at gentage testen med de forskellige PHP-versioner, som dit tema understøtter. Med hver større PHP-udgivelse er der nye ændringer, advarsler og afskrivninger. Det er ikke ualmindeligt, at et tema er fejlfrit på PHP5.6, men viser fejl på PHP7.

for at aktivere VP_DEBUG skal du tilføje følgende kode til VP-config.php:

DEFINE( 'WP_DEBUG', true );

Monster kontrol

Monster kontrol er et nyttigt plugin, der lader dig tilføje 13 core kontroller til din sidebjælke på en gang. Kernekontrollerne bruger en række HTML-elementer, hvilket gør dem perfekte til at teste dit tema.

Theme Sniffer

Theme Sniffer er et plugin oprettet af Theme anmeldelse Team (TRT). Det fanger en masse (men ikke alle) undslippe og lokalisering fejl. Det kontrollerer også dit tema mod Kodningsstandarderne.

2) indsendelse af dit tema til WordPress.org

i begyndelsen af denne vejledning sagde vi, at når du nåede slutningen, ville du have et tema, du kunne indsende til wordpress.org. lad os se på den proces.

Upload proces

upload processen er enkel. Opret eller log ind på din konto, og naviger derefter til denne side– https://wordpress.org/themes/upload/

du kan lynlåse dit tema og uploade det lige nu, men her er nogle ting, du måske vil vide først.

krav

Temaanmeldelsesteamet (TRT) har et strengt sæt krav. Dit tema accepteres ikke i biblioteket, før det opfylder alle kravene.

gennemgangsproces

når du uploader et tema, er der en totrins gennemgangsproces, den skal bestå, før den kan accepteres i mappen.

først udføres en automatisk kontrol, så snart du trykker på Upload. Bag kulisserne fungerer den automatiserede checker på en meget lignende måde som Theme Sniffer-pluginet. Hvis det finder nogen fejl, vil det afvise temaet, og uploadprocessen slutter der.

hvis dit tema passerer den automatiske kontrol, slutter det sig til en kø af temaer, der venter på en menneskelig gennemgang. Den menneskelige gennemgang afsluttes af frivillige fra TRT. Antallet af temaer i køen overstiger langt antallet af korrekturlæsere, hvilket betyder, at det ofte kan tage 2-3 måneder for dit tema at nå fronten af køen.

det er bydende nødvendigt, at dit tema er fejlfri og overholder alle kravene, når det når det menneskelige gennemgangsstadium, som om det har mere end 3 væsentlige fejl, det kan afvises. Hvis et tema afvises på det menneskelige gennemgangsstadium, skal det slutte sig til køen bagpå, hvilket betyder at vente 2-3 måneder igen på en anden menneskelig gennemgang.

Nyttig Ressource:

det er værd at bemærke, at TRT altid er på udkig efter nye korrekturlæsere, Frivilligt arbejde kan være en god læringsoplevelse og en måde at bidrage til open source-samfundet.

3) dit tema notering

Tillykke, dit tema er blevet godkendt! Du har nu din egen liste, der ser sådan ud.

her er en oversigt over, hvad du kan forvente at se på denne side:

1. 1. • Screenshot-skærmbilledet er det første, potentielle brugere ser, så gør det så tiltalende som muligt. Men husk, at det stadig skal være en nøjagtig gengivelse af temaet og ikke en photoshop-gengivelse. Tag inspiration fra de mest populære temaer.
      • Description – den beskrivelse, der er trukket fra Stil.css er et ideelt sted at beskrive dit tema, og det er nøglefunktioner. Det hjælper også med at liste anbefalede eller krævede plugins her. Beskrivelsen understøtter ikke nogen formatering (fed, kursiv, hyperlinks) eller endda linjeskift.
      • Tags – dette er en repræsentation af de tags, du har angivet i stil.css. Kun disse tags her accepteres.
      • Forhåndsvisningsknap-forhåndsvisningen er genereret af wordpress.org og som temaudviklere har vi ingen kontrol over output. Desværre, da forhåndsviseren bruger grundlæggende indhold og ingen konfiguration, resulterer det ofte i en mindre end perfekt forhåndsvisning.
      • link til Temahjemmeside – URL ‘en til Forhåndsvisningsknappen trækkes fra feltet’ tema URI ‘ i din stil.css. Der er strenge krav om, at denne URL kun skal bruges til at vise en side, der viser oplysninger om dit tema.
      • aktive installationer – dette er antallet af hjemmesider, der aktivt bruger temaet. Nummeret afrundes til nærmeste ti, hundrede eller tusind. Det er ikke muligt at hente et nøjagtigt nummer.
      • overførsler per dag – Dette er hvor mange gange dit tema er blevet hentet. En ‘hent’ kan være en ny overførsel eller en temaopdatering.
      • anmeldelser-for at en bruger kan skrive en anmeldelse, skal de være logget ind på en wordpress.org konto. Generelt er anmeldelser svære at få, medmindre du udtrykkeligt beder dine brugere om at indsende dem.
      • Support – Den indbyggede supportplatform er fantastisk til at styre og løse problemer med dit tema. Brugeren skal være logget ind for at oprette en supporttråd.
      • oversættelser – oversættelsesplatformen er en fantastisk ressource. Hvis du har fulgt rådene i hele denne vejledning til lokalisering af dit tema, vil dine brugere være i stand til at oversætte det til andre sprog og udvide din potentielle brugerbase ud over kun engelsktalende brugere.

4) Opdatering af dit tema

når du foretager ændringer i dit tema i fremtiden og har brug for at opdatere den version, der er hostet på , er processen enkel.

Opdater først feltet’ Version: ‘og changelog i readme.TST. Luk derefter filen og upload den igen ved hjælp af den samme uploadside som før.

systemet genkender det som en opdatering og godkender det automatisk, så det ikke kræver en anden menneskelig gennemgang.