WordPress Custom Theme Tutorial

WordPress Custom Theme Tutorial

att lära sig att skapa anpassade WordPress-Teman öppnar en helt ny värld för dig att utforska. Det låter dig bygga anpassade mönster för dig själv, dina kunder och till och med bidra tillbaka till Open source-communityn.

i den här guiden kommer vi att ta dig från noll till att ha ett fullt fungerande tema som kan skickas till WordPress.org tema katalog.

för att följa med behöver du en grundläggande förståelse för HTML, CSS, PHP och hur WordPress fungerar.

all kod som används i den här guiden kommer att finnas tillgänglig för referens i detta Github-arkiv.

Steg #1: Skapa viktiga filer för ditt anpassade tema

ett fungerande WordPress-tema kan bestå av bara två filer: stil.css och index.php. Detta är möjligt på grund av WordPress mallhierarki.

när WordPress matar ut en webbsida söker den efter den mest specifika mallen som finns tillgänglig, om en mall inte existerar kommer den att flytta ner i hierarkin tills den hittar en som gör det. Här är ett praktiskt exempel:

användaren är på https://example.com/practical-example, vilket är en sida. WordPress kommer att försöka hitta en mall i denna ordning:

1. 1. • sida – {slug}.php-sidan slug är / praktiskt-exempel, WordPress kommer att se ut för att använda ditt-tema/sida-praktiskt-exempel.php
      • sida – {id}.php-sidan ID är 42, WordPress kommer att se ut att använda din-tema / sida-42.php.
      • sida.php-WordPress kommer att prova det allmänna syftet med ditt tema / sida.php-Mall.
      • singular.php-singular-mallen kan göra inlägg och sidor, så det är försökt efter den mer specifika sidan.php
      • index.php-slutligen din-tema / index.php används om ingen annan mall hittas.

Låt oss börja med att bygga ett tema med bara de väsentliga filerna och sedan kan vi lägga på Fler funktioner när vi utforskar hur de fungerar.

i /wp-content/themes/ skapar du en mapp med namnet my-custom-theme och skapar dessa två följande filer:

style.css

för att WordPress ska kunna känna igen vårt tema och mata ut det ordentligt i listan utseende av teman för teman måste vi placera en viss WordPress-specifik kod högst upp i stilen.css, det ser ut så här:

/*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*/

Tekniskt krävs inget av fälten, men om du vill att ditt tema ska se bra ut i wp-admin uppmuntras de mycket. De krävs också om du distribuerar ditt tema på WordPress.

1. 1. • Theme Name – du bör alltid ange ett temanamn. Om du inte gör det kommer mappnamnet att användas, my-custom-theme i vårt exempel.
      • Theme URI – om det används, bör temat URI ge en länk till en sida där besökare kan lära sig mer om temat.
      • författare-ditt namn går här.
      • författare URI – en länk till din personliga eller företags webbplats kan placeras här.
      • beskrivning-beskrivningen visas på WP-admin tema modal och även på WordPress tema notering.
      • Version-versionsnummer hjälper utvecklare att hålla reda på ändringar och låta användarna veta om de använder den senaste versionen. Vi följer SemVer-numreringssystemet för att ange svårighetsgraden av förändringar i en uppdatering.
      • licens – hur du licensierar ditt tema är upp till dig, men om du väljer en icke-GPL-kompatibel licens kommer du inte att kunna distribuera ditt tema på WordPress.
      • licens URI-Detta är helt enkelt en länk till licensen som anges ovan.
      • Textdomän-textdomänen används när du översätter ditt tema till andra språk. Oroa dig inte, vi kommer att utforska detta på djupet senare. För tillfället är det tillräckligt att veta att det är en bra praxis för temamappen och textdomänen att vara temanamnet åtskilda av bindestreck istället för mellanslag.
      • taggar-taggar används bara om du laddar upp ditt tema till WordPress.org tema katalog. De är grunden för funktionen Filter.

kopiera och klistra in ovanstående i stil.css och du kommer att ha något så här:

Obs: Det ser lite tomt ut just nu eftersom vi inte har en skärmdump ännu. Vi lägger till det senare.

index.php

index.php är den enda andra strikt nödvändiga filen. Dess uppgift är att göra alla front-end utgång för vårt tema.

sedan index.php kommer att göra alla våra sidor (hem, inlägg, kategorier, arkiv) det kommer att göra mycket arbete. Till att börja med behöver vi ett huvud avsnitt som kommer att täcka HTML grunderna.

<!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>

detta är standard HTML med ett undantag, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head är en kärnfunktion som gör att WordPress och tredjeparts plugins kan infoga kod i rubriken utan att ändra dina mallfiler. Detta kallas en actionkrok.

om du är bekant med HTML kanske du märker att det inte finns en <Titel> tagg för att mata ut sidtiteln. Det beror på att WordPress kan använda wp_head-kroken för att dynamiskt infoga titeln.

en annan användning av wp_head är att köa stilar (.css) och skript (.js). Det finns mycket goda skäl att göra detta istället för att hårdkoda dem, vilket vi kommer att titta på senare.

därefter har vi sidans kropp:

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

body_class() är en hjälparfunktion som tillhandahålls av WordPress som kommer att mata ut en lista med användbara CSS-klasser som beskriver sidan som visas som:

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

body_class (); accepterar också en parameter så att du kan lägga till egna klasser, till exempel:

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

därefter har vi mallhuvudet.

<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 – >

här använder vi WordPress inbyggda mallfunktioner för att mata ut webbplatsens titel och beskrivning. Vi har också använt en hjälpfunktion, home_url (), för att länka webbplatsens titel tillbaka till hemsidan.

Nästa upp, sidans kropp:

<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 är här det blir intressant (och lite mer komplext). Här använder vi den viktigaste funktionen i WordPress, slingan. Slingan gör det hårda arbetet med att ta reda på vilken sida användaren är på och vad som ska visas. Den returnerar sedan en lista med ett eller flera ’inlägg’ som vi kan gå igenom och mata ut data med mallfunktioner.

om slingan inte returnerar några resultat, till exempel på en 404-sida eller raderat inlägg, använder vi en annan operatör för att visa ett fördefinierat meddelande.

utan någon av den omgivande koden ser en förenklad slinga ut så här:

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;?>

eftersom WordPress har sitt ursprung i bloggar använder många funktioner postterminologin, även om de kan returnera och mata ut alla typer av innehåll (inlägg, sidor, anpassade posttyper).

Slutligen har vi sidfoten, allt vi behöver göra här är att stänga HTML-taggarna vi öppnade tidigare. Det finns en annan action hook, wp_footer (), som aktivt används av WordPress och plugins för att inkludera skript i sidfoten som behövs för att göra sidan.

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

om du har följt med hittills kommer du att ha ett fullt fungerande WordPress-tema som ser ut så här:

vårt tema kommer inte att vinna några designpriser (det har ingen CSS) och det saknar många funktioner som användarna anser vara nödvändiga (sidofält, navigering, metadata, miniatyrer, paginering etc.) men det är en bra start!

Låt oss fortsätta och se hur vi kan förbättra det.

steg # 2: Skapa funktioner.php

funktioner.php är inte strikt en obligatorisk fil, men det ger så många fördelar att 99,99% av teman har det. I funktioner.php Du kan använda WordPress inbyggda tema funktionalitet och även lägga till din egen PHP-kod.

skapa en funktion.php i din temamapp nu när vi kommer att lägga till kod i den i nästa avsnitt.

lägga till en navigeringsmeny

de flesta, om inte alla webbplatser använder en navigeringsmeny, men hittills stöder vårt tema inte en. För att berätta för WordPress att vårt tema har en navigeringsmeny måste vi registrera den i funktioner.php så här:

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

Obs: register_nav_menus () accepterar en array så att du kan registrera mer än en meny om det behövs.

WordPress vet nu om vår meny, men vi behöver fortfarande mata ut det i vårt tema. Vi gör det genom att lägga till följande kod under webbplatsbeskrivningen i index.php:

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

nu har vi en (unstyled) navigeringsmeny:

lägga till en sidofält

vårt tema har inte heller ett sidofält (widgetområde), låt oss fixa det nu.

först måste vi registrera sidofältet 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' );

skapa nu sidofält.php i din temamapp och Lägg till följande kod:

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

här använder vi ett if-uttalande för att kontrollera om sidofältet är ’aktivt’ innan vi matar ut koden. En aktiv sidofält är en som användaren har lagt till minst en widget till.

det sista steget är att inkludera sidofältet i index.php, ovanför wp_footer () Lägg till ett get_sidebar () – samtal.

lägga till bilder

liksom sidofält och navigeringsmenyer kan vi inte bara mata ut bilder i vårt tema och förvänta oss att de ska fungera, vi måste berätta för WordPress att vi stöder den funktionen först. I funktioner.php Lägg till:

add_theme_support( 'post-thumbnails' );

nu kan vi lägga till the_post_thumbnail(); inom vår loop och miniatyrerna kommer att fungera. Det enda problemet är att de kommer att mata ut på WordPress maximala storlek 1920px x 2560px, vilket är för stort för de flesta användningsområden. Lyckligtvis har WordPress en annan hjälpfunktion: add_image_size ();

när en användare laddar upp en bild, och om bildstorleken definieras, kommer WordPress att generera en version av den uppladdade bilden i den storleken (samtidigt som originalet). Om användarens bild är mindre än de dimensioner du har ställt in gör WordPress ingenting eftersom det inte kan göra en bild större än originalet.

för att använda en optimerad funktionsbild istället för originalet, placera följande kod i funktioner.php:

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

den första parametern är handtaget, den andra är bildbredden och den tredje är höjden. Både höjd och bredd är valfria om du bara vill begränsa en dimension.

i index.php:

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

Enqueueing stilar och skript

tidigare uppgav vi att det är bättre att köa stilar och skript snarare än hårdkodning dem direkt i mallfilerna. Det beror på att enqueuing möjliggör mycket mer flexibilitet.

när det görs korrekt berättar enqueuing också WordPress vilka resurser som laddas. När WordPress vet vilka resurser som behövs kan det se till att samma resurs inte laddas mer än en gång. Detta är särskilt viktigt när du har ett extremt populärt bibliotek som jQuery eller FontAwesome som flera teman och plugins kommer att använda.

en annan fördel med enqueuing är att en resurs som är enqueued kan dequeued av en plugin, undvika behovet av att ändra mallfiler.

även om vårt tema har en stil.css-fil det använder inte det ännu, låt oss fråga 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() Är en hjälparfunktion som hämtar URI för det aktuella temats formatmall. Om vi frågade någon annan fil skulle vi behöva göra det istället:

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

vårt tema har inga skript, om det gjorde vi skulle köa dem så här:

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' );

ett undantag från ovanstående är skript som har förregistrerats av WordPress, i de fallen behöver du bara ange den första parametern ($handle):

wp_enqueue_script( 'jquery' );

lägga stil med CSS

vårt tema har starka fundament men saknar någon design, lägga till några grundläggande CSS till stil.css kommer att göra en enorm skillnad. Vi har lagt till runt ~100 rader CSS till vårt provtema som en demonstration och resultatet ser ut så här:

Title Tag

alla teman bör använda WordPress inbyggda funktionalitet för att generera Titel taggen, som aktiveras genom att lägga till denna kod till dina funktioner.php-fil: add_theme_support( 'title-tag' ); det är allt som finns till det, WordPress kommer att hantera produktionen av sidan <Titel> och om det behövs plugins kan ändra produktionen med hjälp av filter. SEO-plugins gör ofta detta i ett försök att ytterligare optimera titlarna.

steg # 3: Lägg till Malldelar

just nu är 80% av vår mallkod i index.php.

medan detta fungerar kommer det att resultera i mycket kodrepetition när vi har andra mallfiler som singular.php, sök.php, och arkiv.php. Malldelar gör temautveckling enklare genom att låta oss återanvända kod över mallar. Eftersom vår sidhuvud och sidfot kommer att vara densamma på varje sida är de en perfekt kandidat för att använda malldelar. Först skapa header.php och flytta följande kod från index.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 index.php ersätter ovanstående kod med:

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

notera: när du får en malldel, du måste utelämna .php från malldelen handtag.

skapa sedan en sidfotmall genom att flytta den här koden till sidfot.php och upprepa ovanstående process:

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

slutligen flyttar vi’ no-results ’ – koden till en malldel också, eftersom den sannolikt kommer att användas i flera mallar. Skapa innehåll-ingen.php och flytta den här koden till den nya filen.

<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 – >

ditt index ska nu se ut så här:

<?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' );

medan ovanstående kommer att fungera perfekt, finns det en liten förbättring vi kan göra. WordPress har hjälpfunktioner för att inkludera sidhuvud, sidfot och sidofältmalldelar. Eftersom det är en bästa praxis att använda kärnfunktionalitet där det är möjligt bör vi använda dem istället.

ersätt get_template_part( 'header' ); med get_header(); och get_template_part( 'footer' ); med get_footer();

steg #4: Lägg till singular.php, arkiv.php, sök.php och 404.php

grunden vi avslutade med malldelar kommer att betala utdelning när vi lägger till nya mallfiler till vårt tema. Nedan har vi listat de vanligaste. För att undvika att överväldiga dig med kodexempel har vi länkat till källkoden på Github istället.

singular.php

inlägg och sidor, när de visas på sina egna webbadresser, betraktas som ’Singular’ eftersom layouten oftast kommer att vara densamma för båda dessa sidtyper. Men om det inte är det kan du använda den mer specifika sidan.php och singel.php (post) istället.

exempelkod – singular.php

arkiv.php

Arkivmallar skiljer sig vanligtvis från singulära mallar på två sätt: de visar utdrag snarare än hela innehållet och har en arkivhuvud som förklarar innehållet.

gå tillbaka till mallhierarkin så ser du att arkivmallen täcker alla typer av arkiv (författare, kategori, tagg, taxonomi, datum) om detta inte fungerar för ditt användningsfall kan du fortfarande använda de mer specifika mallarna:

1. 1. • författare.php
      • kategori.php
      • märka.php
      • taxonomi.php
      • datum.php

exempel kod-arkiv.php

sök.php

WordPress webbplatser kan sökas med hjälp av ?s= URL-parameter, till exempel yourwebsite.com?s=test. Sökning.php Mall matar ut resultaten av dessa sökningar.

exempel kod – sök.php

404.php

det andra uttalandet Vi lade till i index.php fångar” page not found ” – fel, men du kanske vill koppla bort den funktionaliteten i sin egen mallfil för att få mer kontroll över utmatningen. Det är användningsfallet för 404.php mallfil.

Exempelkod-404.php

Steg # 5: tillhörande filer

om du distribuerar ditt tema till allmänheten är följande filer nödvändiga. Utan dessa kommer ditt tema att avvisas från temaförvar och marknadsplatser.

skärmdump.PNG

skärmbilden visas i listan wp-admin teman när användaren väljer ett nytt tema. Här är några bästa metoder du bör följa:

1. 1. • skärmdumpar ska vara 1200px x 900px
      • skärmdumpar ska vara i .png eller .jpg-format
      • skärmdumpar ska vara en korrekt representation av temat
      • skärmdumpar ska optimeras (använd tinypng.com eller liknande)

readme.Txt

WordPress använder Ingen information från readme.txt, det drar allt det behöver från stil.css. Å andra sidan drar WordPress-temakatalogen viktig information från readme-filen och anser att den är en obligatorisk fil.

de flesta utvecklare använder readme.txt som den centrala platsen för att lagra all information om deras tema. En enkel readme.txt ser ut så här:

=== 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 åtminstone-det här är den minsta versionen av WordPress som ditt tema är kompatibelt med.
      • testad upp till – det här fältet anger den senaste versionen av WordPress ditt tema har testats med.
      • kräver PHP-detta fält anger den minsta versionen av PHP ditt tema kommer att fungera på.
      • Beskrivning-Det här beskrivningsfältet visas för närvarande inte någonstans.
      • Changelog-ändringsloggen används inte någonstans, men utvecklare och vissa användare kommer att referera till den här filen för att se vilka ändringar som har gjorts.
      • resurser-de flesta tredjepartsresurser kräver tilldelning av något slag. Avsnittet Resurser är en allmänt accepterad plats att sätta dem. Även för resurser som inte uttryckligen kräver tillskrivning är det fortfarande en bra praxis att lista dem här så att användarna är medvetna om licenserna för resurser de använder.

steg # 6: Skapa sidmallar

sidmallar tillåter utvecklare att skapa anpassade mallar som kan användas för enskilda inlägg och sidor. Till exempel har de flesta teman en layout med två kolumner (innehållssidebar) men på vissa sidor kanske användaren bara vill fokusera på innehållet och inte visa ett sidofält. Det är där en sidmall kan hjälpa.

hur skapas ”sidmallar”?

i vår temamapp skapar du en ny mapp med namnet ’sidmallar’ och i den mappen skapar du en fil som heter single-column.php. För att påskynda saker kopiera all kod från singular.php till sida-mallar / enda kolumn.php och ta bort samtalet till get_sidebar () eftersom den här mallen inte behöver det.

nu måste vi lägga till en speciell rubrik som berättar för WordPress att det här är en sidmall, det ser ut så här:

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

koden är självförklarande, vi berättar helt enkelt WordPress namnet på mallen och vilka posttyper den kan användas med.

det är allt som finns, vår nya sidmall är nu tillgänglig i redigeraren under ’Sidattribut’.

Steg #7: Gör ditt tema kompatibelt med RTL.css

inte alla språk läses från vänster till höger. Arabiska och hebreiska läses till exempel från höger till vänster (RTL). Det finns ett enkelt sätt att göra ditt tema kompatibelt med RTL-språk.

skapa en ny fil i din temamapp som heter rtl.css, kopiera och klistra in följande kod:

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

om ett RTL-språk är det aktiva språket på en WordPress-webbplats, vet WordPress att ladda denna CSS-fil automatiskt.

Detta är en mycket grundläggande implementering av RTL-funktionalitet för att komma igång. Om du är intresserad av att lära dig mer här är två fantastiska resurser:

höger till vänster Språkstöddokumentation

tjugo tjugo RTL-kod

steg #8: Följ alltid bästa praxis

bästa praxis har utvecklats över tiden för att göra det lättare att bygga och underhålla WordPress-Teman. Inte bara kommer att följa dessa principer hjälpa dig men de kommer också att göra det lättare för andra utvecklare när de behöver arbeta med din kod.

1) använd Start teman

start teman ger en solid bas för dig att bygga ditt tema på. Vanligtvis är de lätta, innehåller liten eller ingen styling och inga konfigurationsalternativ. Med tiden kan du bygga din egen starter tema som du kan basera alla dina projekt på, men nu här är några populära alternativ:

1. 1. • understreck
      • byggnadsställning
      • HTML5 Tom

2) Lär känna WordPress kodningsstandarder

kodningsstandarder är ett sätt att formatera din kod på ett konsekvent sätt över hela kodbasen. WordPress har kodningsstandarder för HTML, CSS, Javascript och PHP. När du använder en kodningsstandard har ingen effekt på slutanvändarupplevelsen, det gör din kod mycket mer läsbar. Även om du inte använder WordPress-kodningsstandarderna rekommenderar vi alltid att du använder en standard.

1. 1. • WordPress.org kodningsstandarder
      • WPCS
      • PHP kodningsstandarder

3) Använd Lokalisering

tack vare volontärernas hårda arbete finns WordPress tillgängligt på hundratals språk. Om ditt tema kommer att släppas offentligt måste det byggas på ett sätt som gör att det också kan översättas.

oroa dig inte, det är super lätt att göra. Allt vi behöver göra är att se till att alla strängar passerar genom en ’lokaliseringsfunktion’ snarare än att matas ut direkt.

istället för detta:

<?php echo 'Previous Post'; ?>

vi gör detta istället:

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

__() är en lokaliseringsfunktion som accepterar en sträng och en textdomän. Funktionen returnerar en översättning av strängen som tillhandahålls, eller den ursprungliga strängen om en översättning inte är tillgänglig.

4) Undvik Plugin-funktionalitet

när en användare ändrar temat bör endast presentationsskiktet ändras. Innehållet och funktionaliteten bör förbli mestadels densamma. Vad detta betyder är att alla funktioner som påverkar hur WordPress-roller ska finnas i ett plugin, inte ditt tema. Några exempel på plugin-funktionalitet inkluderar:

1. 1. • anpassade inläggstyper
      • sidbyggare
      • delning av sociala medier
      • sökmotoroptimering (SEO)

även om det kan verka bekvämt (och eventuellt en försäljningsplats) att inkludera SEO-kontroller i ett tema, gör det faktiskt ont för användaren på lång sikt. I framtiden kommer de att behöva ändra sitt tema men kan inte eftersom alla deras SEO-konfigurationer är tätt kopplade till det aktuella temat. Däremot, om konfigurationerna lagrades i ett plugin kunde de ändra tema utan att oroa sig.

5) prefix (förhindra konflikter)

för att förhindra konflikter bör alla funktioner, klasser och globala variabler som skapats av ditt tema vara prefix. Detta är viktigt eftersom det är omöjligt att veta vilken annan kod som körs på din användares webbplats. Prefixing förhindrar namnkollisioner och dödliga fel.

ditt temas namn åtskilda av streck eller understreck fungerar som ett prefix för det mesta. Om temanamnet är mycket långt kan initialerna fungera istället.

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) Använd kärnfunktionalitet

där det finns, bör du alltid använda kärnfunktionalitet i motsats till att återuppfinna hjulet. Detta inkluderar, men är inte begränsat till sidofält, navigeringsmenyer, miniatyrbilder, anpassade rubriker och anpassade bakgrunder. Dessa funktioner har testats av miljontals användare och underhålls och förbättras aktivt.

om du behöver ändra funktionaliteten eller utmatningen av en kärnfunktion är det möjligt att använda en av de många krokarna och filtren WordPress erbjuder. Till exempel wp_nav_menu() har en ’walker’ parameter så att du kan ha fullständig kontroll över utgången.

7) Escaping and Sanitizing Data

som temautvecklare måste du vara bekant med att fly och sanera data för att skydda dina användare från potentiella utnyttjanden.

Escaping

Escaping är processen att kontrollera data är säker innan den matas ut och sanering kontrollerar data innan den sparas i databasen.

WordPress har hjälpfunktioner som du kan använda för att undkomma data så att du inte behöver bygga dem själv. esc_html är ett exempel på en flyktfunktion. Så här ser en obestämd utgång ut:

echo get_theme_mod( 'error_page_title' );

för att undkomma utgången gör vi detta:

echo esc_html( get_theme_mod( 'error_page_title' ) );

några andra flyktfunktioner du bör vara medveten om är esc_attr(), absint(), esc_url().

det är också möjligt att översätta och fly en sträng med en enda funktion:

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

blir:

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

tips: var som helst i ditt tema där du har echo $ bör du kontrollera om det behöver rymmas, det gör det vanligtvis.

sanering

om du lägger till Inställningar i ditt tema måste du se till att de data som användarna matar in till dessa inställningar är säkra innan de går in i databasen. WordPress har ett antal funktioner för att hjälpa till med sanering av inmatning.

när du lägger till en inställning till ditt tema med Customizer API har den en parameter för kallad ’sanitize_callback’ som accepterar namnet på en saneringsfunktion. Alla indata som inställningen tar kontrolleras av funktionen du anger till ’sanitize_callback’ innan den går in i databasen.

det belyser vikten av sanering att om ens en av dina inställningar saknar sanitize_callback kommer det inte att accepteras i WordPress-temakatalogen.

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

en officiell lista över sanering och flyktfunktioner kan ses här: Data Sanitization/Escaping

steg #9: distribuera ditt WordPress-tema

teman kan distribueras via olika kanaler beroende på vilket resultat du vill uppnå. Om ditt resultat är att helt enkelt bidra till Open source-communityn finns det inget bättre sätt att göra det än att ladda upp ditt tema till WordPress-katalogen. Om du istället vill sälja ditt tema och tjäna pengar direkt finns det sätt att göra det också.

här är de ledande webbplatser för tema distribution:

1) WordPress.org (bästa stället att få nedladdningar och användare)

den främsta fördelen med värd ditt tema på WordPress är att du får en synlighet boost från ditt tema ses inte bara på wordpress.org hemsida men också i wp-admin dashboard.

en annan fördel med att vara värd för ditt tema med WordPress är det inbyggda uppdateringssystemet. Om du uppdaterar ditt tema kommer alla användare att meddelas i sina wp-admin-instrumentpaneler och få en enkel väg att uppdatera till den senaste versionen.

WordPress.org accepterar bara gratis teman, men det betyder inte att du inte kan tjäna pengar. Ett gratis tema kan vara en bra kanal för att marknadsföra ditt premiumtema, plugin eller tjänst.

2) WordPress.com

WordPress.com värdar både gratis och premium teman. De har dock inte varit öppna för nya författarinlagor på några år nu.

3) ThemeForest

ThemeForest är den ledande marknaden för premiumteman. Det mest sålda temat (Avada) har en försäljning på över $5,000,000.

generellt sett köpare på Tema Skog förväntar fullfjädrad” multi-purpose ” teman. Alla de bästa teman har sidbyggare funktionalitet och stöds av team av utvecklare. Det är en mycket svår marknad att bryta sig in för nya författare.

4) Creative Market och Mojo Marketplace

Creative Market och Mojo Marketplace är små aktörer på marknaden för premiumteman, varför vi grupperade dem tillsammans. De erbjuder båda effektivt samma service som ThemeForest men i mindre skala.

5) Github

Github är det enklaste sättet att göra ditt gratis tema offentligt. Det finns ingen granskningsprocess och inga riktlinjer att följa. Men du kommer inte att dra nytta av synligheten för wordpress.org och kommer att behöva bygga din egen uppdateringsmekanism för användare att få de senaste versionerna.

steg #10: Testa och förbättra koden

1) Testa ditt tema

Temaenhetstest

Temaenhetstestet är en standard WordPress-innehållsimportfil som innehåller ett brett utbud av innehållstyper och kantfall. Det är enkelt att ladda upp till din utvecklingsmiljö och kommer att lyfta fram många scenarier som du kanske har förbisett.

WP_DEBUG

som temautvecklare är testning av ditt tema med WP_DEBUG aktiverat det minsta du borde göra. Ditt tema bör returnera några fel eller varningar när WP_DEBUG är inställd på true.

det är också viktigt att upprepa testet med de olika PHP-versionerna som ditt tema stöder. Med varje större PHP-utgåva finns det nya ändringar, varningar och avskrivningar. Det är inte ovanligt att ett tema är felfritt på PHP5.6 men visar fel på PHP7.

för att aktivera WP_DEBUG, Lägg till följande kod i wp-config.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget är en bra plugin som låter dig lägga till 13 kärn widgets till sidofältet på en gång. Kärn widgets använder en mängd olika HTML-element som gör dem perfekta för att testa ditt tema.

Theme Sniffer

Theme Sniffer är ett plugin skapat av Theme Review Team (TRT). Det fångar en hel del (men inte alla) fly och lokaliseringsfel. Det kontrollerar också ditt tema mot WordPress-kodningsstandarderna.

2) Skicka in ditt tema till WordPress.org

i början av den här guiden sa vi att när du nådde slutet skulle du ha ett tema du kunde skicka in till wordpress.org. Låt oss titta på den processen.

uppladdningsprocessen

uppladdningsprocessen är enkel. Skapa eller logga in på ditt WordPress-konto och navigera sedan till den här sidan– https://wordpress.org/themes/upload/

du kan zip ditt tema och ladda upp det just nu, men här är några saker du kanske vill veta först.

krav

Theme Review Team (TRT) har en strikt uppsättning krav. Ditt tema accepteras inte i katalogen förrän det uppfyller alla krav.

granskningsprocess

när du laddar upp ett tema finns det en tvåstegs granskningsprocess som den måste passera innan den kan accepteras i katalogen.

först utförs en automatisk kontroll så snart du trycker på Upload. Bakom kulisserna fungerar den automatiska kontrollen på ett mycket liknande sätt som Theme Sniffer-plugin. Om det hittar några fel kommer det att avvisa temat och uppladdningsprocessen slutar där.

om ditt tema passerar den automatiska kontrollen går det med i en kö av teman som väntar på en mänsklig recension. Den mänskliga granskningen kompletteras av volontärer från TRT. Antalet teman i kön överstiger antalet granskare, vilket innebär att det ofta kan ta 2-3 månader för ditt tema att nå framsidan av kön.

det är absolut nödvändigt att ditt tema är felfritt och uppfyller alla krav när det når det mänskliga granskningsstadiet som om det har mer än 3 signifikanta fel kan det avvisas. Om ett tema avvisas på human review-scenen måste det återansluta kön på baksidan, vilket innebär att man väntar 2-3 månader igen för en annan human review.

Användbar Resurs: De vanligaste WordPress-Temautvecklingsfelen (och hur man fixar dem)

det är värt att notera att TRT alltid letar efter nya granskare, volontärarbete kan vara en bra inlärningsupplevelse och ett sätt att bidra till öppen källkod.

3) ditt tema notering

Grattis, ditt tema har godkänts! Du har nu en egen lista som ser ut så här.

här är en översikt över vad du kan förvänta dig att se på den här sidan:

1. 1. • skärmdump-skärmdumpen är det första potentiella användare ser så gör det så tilltalande som möjligt. Men kom ihåg att det fortfarande måste vara en korrekt representation av temat och inte en photoshop-återgivning. Ta inspiration från de mest populära teman.
      • beskrivning-beskrivningen som dras från stil.css är en idealisk plats att beskriva ditt tema och det är viktiga funktioner. Det hjälper också att lista rekommenderade eller obligatoriska plugins här. Beskrivningen stöder inte någon formatering (fet, kursiv, hyperlänkar) eller till och med radbrytningar.
      • taggar-Det här är en representation av taggarna du listade i stil.css. Endast dessa taggar här accepteras.
      • Preview – knappen-förhandsgranskningen genereras av wordpress.org och som temautvecklare har vi ingen kontroll över produktionen. Tyvärr, eftersom förhandsgranskaren använder grundläggande innehåll och ingen konfiguration resulterar det ofta i en mindre än perfekt förhandsgranskning.
      • theme Homepage Link-webbadressen för förhandsgranskningsknappen dras från fältet ’Theme URI’ i din stil.css. Det finns strikta krav på att denna URL endast får användas för att visa en sida som visar information om ditt tema.
      • aktiva installationer-det här är antalet webbplatser som aktivt använder temat. Numret avrundas till närmaste tio, hundra eller tusen. Det är inte möjligt att hämta ett exakt nummer.
      • nedladdningar Per dag-det här är hur många gånger ditt tema har laddats ner. En ’Download’ kan vara en ny nedladdning eller ett tema uppdatering.
      • recensioner-för att en användare ska kunna lämna en recension måste de vara inloggade på en wordpress.org konto. Generellt sett är recensioner svåra att få om du inte uttryckligen ber dina användare att skicka in dem.
      • Support-den inbyggda supportplattformen är utmärkt för att hantera och lösa problem med ditt tema. Användaren måste vara inloggad för att skapa en stödtråd.
      • översättningar-översättningsplattformen är en fantastisk resurs. Om du har följt råden i den här guiden för att lokalisera ditt tema kommer dina användare att kunna översätta det till andra språk och utöka din potentiella användarbas utöver bara engelsktalande användare.

4) Uppdatera ditt tema

när du gör ändringar i ditt tema i framtiden och behöver uppdatera versionen som finns på WordPress är processen enkel.

uppdatera först fältet’ Version: ’och ändringsloggen i readme.txt. Zip sedan filen och ladda upp den igen med samma uppladdningssida som tidigare.

systemet kommer att känna igen det som en uppdatering och godkänner det automatiskt så att det inte kräver en annan mänsklig granskning.