WordPress Custom Theme Tutorial

WordPress Custom Theme Tutorial

het leren maken van aangepaste WordPress thema ‘ s opent een hele nieuwe wereld voor u om te verkennen. Het stelt u in staat om aangepaste ontwerpen te bouwen voor uzelf, uw klanten en zelfs een bijdrage te leveren aan de open-source gemeenschap.

in deze gids nemen we u mee van nul naar het hebben van een volledig functioneel thema dat kan worden ingediend bij de WordPress.org themamap.

om te volgen heb je een basiskennis nodig van HTML, CSS, PHP en hoe WordPress werkt.

alle code die in deze gids wordt gebruikt zal beschikbaar zijn voor referentie in deze GitHub repository.

Stap # 1: Het creëren van essentiële bestanden voor uw aangepaste thema

een functionerende WordPress thema kan bestaan uit slechts twee bestanden: stijl.css en index.php. Dit is mogelijk vanwege WordPress template hiërarchie.

wanneer WordPress een webpagina uitvoert, zoekt het naar de meest specifieke sjabloon die beschikbaar is, als een sjabloon niet bestaat, zal het naar beneden in de hiërarchie gaan totdat het er een vindt die dat wel doet. Hier is een praktisch voorbeeld:

de gebruiker bevindt zich op https://example.com/practical-example, een pagina. WordPress zal proberen om een sjabloon te vinden in deze volgorde:

1. 1. • page-{slug}.php – de pagina slug is / praktisch-voorbeeld, WordPress zal kijken om uw-thema/pagina-praktisch-voorbeeld te gebruiken.php
      • page – {id}.php – de pagina-ID is 42, WordPress zal kijken naar uw-thema/pagina-42 te gebruiken.php.
      • page.php-WordPress zal proberen de general-purpose uw-thema / pagina.php template.
      • enkelvoud.php-de enkelvoudige sjabloon kan berichten en pagina ‘ s weer te geven, dus het is geprobeerd na de meer specifieke pagina.php
      • index.php-tot slot Uw-thema / index.php wordt gebruikt als er geen andere sjabloon is gevonden.

laten we beginnen met het bouwen van een thema met alleen de essentiële bestanden en dan kunnen we laag op meer functies als we verkennen hoe ze werken.

maak in /wp-content/themes/ een map met de naam my-custom-theme aan en maak deze twee volgende bestanden aan:

stijl.css

voor WordPress om ons thema te herkennen en goed uit te voeren in het uiterlijk → thema ‘ s lijst moeten we een aantal WordPress-specifieke code te plaatsen op de top van de stijl.css, het ziet er zo uit:

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

technisch zijn geen van de velden vereist, maar als u wilt dat uw thema er goed uitziet in wp-admin dan worden ze zeer aangemoedigd. Ze zijn ook nodig als u het verspreiden van uw thema op WordPress.

1. 1. • thema Naam-je moet altijd leveren een thema naam. Als je dat niet doet dan wordt de mapnaam gebruikt, my-custom-theme in ons voorbeeld.
      • thema-URI-indien gebruikt, moet de thema-URI een link geven naar een pagina waar bezoekers meer over het thema kunnen leren.
      • auteur-uw naam staat hier.
      • auteur URI-een link naar uw persoonlijke of zakelijke website kunt u hier plaatsen.
      • beschrijving-de beschrijving wordt weergegeven op de wp-admin thema modal en ook op de WordPress thema lijst.
      • versie-versienummers helpen ontwikkelaars wijzigingen bij te houden en gebruikers te laten weten of ze de nieuwste versie gebruiken. We volgen het semver nummering systeem om de ernst van de veranderingen in een update aan te geven.
      • Licentie – hoe u uw thema licentie is aan u, maar als u kiest voor een niet-GPL-compatibele licentie dan zult u niet in staat zijn om uw thema te distribueren op WordPress.
      • Licentie-URI – dit is gewoon een link naar de licentie hierboven vermeld.
      • tekstdomein-het tekstdomein wordt gebruikt bij het vertalen van uw thema in andere talen. Maak je geen zorgen we zullen dit later grondig onderzoeken. Voor nu, het is genoeg om te weten dat het een goede praktijk voor de themamap en de tekst-domein om de themanaam gescheiden door koppeltekens in plaats van spaties.
      • Tags-Tags worden alleen gebruikt als u uw thema uploadt naar de WordPress.org themamap. Zij vormen de basis van het ‘Functiefilter’ – mechanisme.

kopieer en plak het bovenstaande in stijl.css en je krijgt iets als dit:

Opmerking: Het ziet er een beetje leeg op dit moment als we nog geen screenshot hebben. We zullen dat later toevoegen.

index.php

index.php is het enige andere strikt vereiste bestand. Zijn taak is om alle front-end output voor ons thema te maken.

sinds index.php gaat worden het renderen van al onze pagina ‘ s (home, berichten, categorieën, Archieven) het gaat veel werk te doen. Om te beginnen hebben we een head sectie nodig die de HTML basis zal behandelen.

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

dit is standaard HTML met één uitzondering, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head is een kernfunctie waarmee WordPress en plug-ins van derden code in de header kunnen invoegen zonder uw sjabloonbestanden te wijzigen. Dit heet een actiehaak.

als u bekend bent met HTML, kunt u merken dat er geen <titel> tag is om de paginatitel uit te voeren. Dat komt omdat WordPress de wp_head hook kan gebruiken om dynamisch de titel in te voegen.

een ander gebruik van wp_head is om stijlen (.css) en scripts (.js). Er zijn zeer goede redenen om dit te doen in plaats van ze hardcoderen, die we later zullen bekijken.

vervolgens hebben we de hoofdtekst van de pagina:

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

body_class() is een helper functie die door WordPress die een lijst van nuttige CSS-klassen die de pagina die wordt weergegeven beschrijven zal uitvoeren, zoals:

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

body_class (); accepteert ook een parameter zodat je je eigen klassen kunt toevoegen, bijvoorbeeld:

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

vervolgens hebben we de template header.

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

hier gebruiken we WordPress ‘ ingebouwde template functies om de Site titel en beschrijving uit te voeren. We hebben ook een helperfunctie gebruikt, home_url (), om de sitetitel terug te linken naar de homepage.

volgende pagina, de hoofdtekst van de pagina:

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

hier wordt het interessant (en wat complexer). Hier zijn we met behulp van de belangrijkste functie van WordPress, de lus. De lus doet het harde werk van het uitzoeken welke pagina de gebruiker is op en wat moet worden getoond. Het geeft dan een lijst van een of meer ‘berichten’ die we kunnen lus door en output gegevens met behulp van template functies.

als de lus geen resultaten oplevert, bijvoorbeeld op een 404-pagina of verwijderde post, gebruiken we een else-operator om een vooraf gedefinieerd bericht te tonen.

zonder de omgevingscode ziet een vereenvoudigde lus er als volgt uit:

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

opmerking: omdat WordPress zijn oorsprong heeft in bloggen, veel functies gebruik maken van de’ post ’terminologie, hoewel ze kunnen terugkeren en output elk type van de inhoud (berichten, pagina’ s, aangepaste post types).

tenslotte hebben we de voettekst, alles wat we hier hoeven te doen is de HTML-tags sluiten die we eerder hebben geopend. Er is een andere actie hook, wp_footer (), die actief wordt gebruikt door WordPress en plugins om scripts op te nemen in de voettekst die nodig is om de pagina te maken.

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

Als u tot nu toe hebt gevolgd, hebt u een volledig functioneel WordPress thema dat er als volgt uitziet:

ons thema zal geen design awards winnen (het heeft geen CSS) en het mist veel functies die gebruikers essentieel achten (zijbalken, navigatie, metadata, miniaturen, paginering, enz.) maar het is een geweldige start!

laten we verder gaan en zien hoe we het kunnen verbeteren.

Stap # 2: functies maken.php

functies.php is niet strikt een vereist bestand, maar het biedt zo veel voordelen dat 99,99% van de thema ‘ s hebben. In functies.php u kunt gebruik maken van WordPress ‘ ingebouwde thema functionaliteit en ook uw eigen aangepaste PHP-code toe te voegen.

Maak een functie aan.php in uw thema map nu als we zullen het toevoegen van code om het in de volgende secties.

een navigatiemenu toevoegen

de meeste, zo niet alle websites maken gebruik van een navigatiemenu, maar tot nu toe ondersteunt ons thema er geen. Om WordPress te vertellen ons thema heeft een navigatiemenu, moeten we het registreren in functies.php zoals dit:

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

opmerking: register_nav_menus () accepteert een array zodat je meer dan één menu kunt registreren indien nodig.

WordPress Weet nu over ons menu, maar we moeten het nog steeds uitvoeren in ons thema. We doen dat door het toevoegen van de volgende code onder de site beschrijving in index.php:

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

nu hebben we een (unstyled) navigatiemenu:

het toevoegen van een zijbalk

ons thema heeft ook geen zijbalk (widget gebied), laten we dat nu oplossen.

eerst moeten we de zijbalk in functies registreren.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' );

Maak nu zijbalk.php in uw thema map en voeg de volgende code:

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

hier gebruiken we een if statement om te controleren of de zijbalk ‘actief’ is voordat we de code uitvoeren. Een actieve zijbalk is er een waaraan de gebruiker ten minste één widget heeft toegevoegd.

de laatste stap is het opnemen van de zijbalk in de index.php, boven wp_footer() voeg een get_sidebar () aanroep toe.

het toevoegen van aanbevolen afbeeldingen

net als sidebars en navigatiemenu ‘ s, kunnen we niet alleen output aanbevolen afbeeldingen in ons thema en verwachten dat ze werken, moeten we WordPress vertellen dat we ondersteunen die functie eerst. In functies.php toevoegen:

add_theme_support( 'post-thumbnails' );

nu kunnen we de_post_thumbnail()toevoegen; binnen onze lus en de miniaturen zullen werken. Het enige probleem is dat ze zullen uitvoeren op WordPress maximale grootte van 1920px x 2560px, die te groot is voor de meeste toepassingen. Gelukkig heeft WordPress nog een helperfunctie: add_image_size ();

wanneer een gebruiker een afbeelding uploadt, en als de afbeeldingsgrootte is gedefinieerd, zal WordPress een versie van de geüploade afbeelding op die grootte genereren (met behoud van het origineel). Als de afbeelding van de gebruiker kleiner is dan de afmetingen die u hebt ingesteld WordPress zal niets doen als het kan niet een afbeelding groter dan het origineel te maken.

om een geoptimaliseerde functieafbeelding te gebruiken in plaats van het origineel, plaatst u de volgende code in functies.php:

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

de eerste parameter is het handvat, de tweede is de breedte van de afbeelding en de derde is de hoogte. Zowel de hoogte als de breedte zijn optioneel voor het geval u slechts één dimensie wilt beperken.

in index.php:

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

Enqueueing Styles and Scripts

eerder zeiden we dat het beter is om stijlen en scripts te onderzoeken in plaats van ze direct in de template bestanden te hardcoderen. Dat komt omdat enqueuing zorgt voor veel meer flexibiliteit.

wanneer dit correct is gedaan, vertelt enqueuing WordPress ook welke bronnen worden geladen. Wanneer WordPress weet welke bronnen nodig zijn, kan het ervoor zorgen dat dezelfde bron niet meer dan één keer wordt geladen. Dit is vooral belangrijk als je een zeer populaire bibliotheek zoals jQuery of FontAwesome dat meerdere thema ‘ s en plugins zal worden gebruik te maken.

een ander voordeel van enqueuing is dat een bron die wordt gevraagd kan worden gedequeued door een plugin, waardoor de noodzaak om sjabloonbestanden te wijzigen wordt vermeden.

hoewel ons thema een stijl heeft.css-bestand het is nog niet met behulp van het, laten we enqueue dat 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() is een helperfunctie die de URI van het stylesheet van het huidige thema ophaalt. Als we een ander bestand zouden onderzoeken, zouden we dit in plaats daarvan moeten doen.:

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

ons thema heeft geen scripts, als het wel zo was zouden we ze zo onderzoeken:

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

een uitzondering op het bovenstaande is scripts die vooraf zijn geregistreerd door WordPress, in die gevallen hoeft u alleen de eerste parameter ($handle):

wp_enqueue_script( 'jquery' );

stijl toevoegen met CSS

ons thema heeft een sterke basis, maar mist elk ontwerp, het toevoegen van een aantal fundamentele CSS aan stijl.css zal een enorm verschil maken. We hebben ongeveer ~100 lijnen van CSS toegevoegd aan ons voorbeeld thema als een demonstratie en het resultaat ziet er als volgt uit:

Title Tag

alle thema ‘ s moeten gebruik maken van de ingebouwde functionaliteit van WordPress om de title tag te genereren, die wordt ingeschakeld door deze code aan uw functies toe te voegen.php-bestand: add_theme_support( 'title-tag' ); dat is alles wat er is, WordPress zal de uitvoer van de pagina <titel> behandelen en indien nodig plugins kunnen de uitvoer met behulp van filters wijzigen. SEO plugins doen dit vaak in een poging om de titels verder te optimaliseren.

Stap # 3: Sjabloondelen toevoegen

op dit moment is 80% van onze sjablooncode in index.php.

hoewel dit werkt zal het resulteren in een hoop code herhaling wanneer we andere template bestanden zoals enkelvoud.php, zoek.php, en archief.php. Template-onderdelen maken de ontwikkeling van thema ‘ s eenvoudiger doordat we code kunnen hergebruiken tussen sjablonen. Omdat onze kop-en voettekst op elke pagina hetzelfde zullen zijn, zijn ze een perfecte kandidaat voor het gebruik van sjabloononderdelen. Maak eerst header.php en verplaats de volgende code van 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 – >

in index.php vervang de bovenstaande code met:

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

Notes: wanneer u een sjabloondeel krijgt, moet u de weglaten .php van het template deel handvat.

maak vervolgens een footer-sjabloon door deze code naar footer te verplaatsen.php en het herhalen van het bovenstaande proces:

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

tot slot verplaatsen we de’ no-results ‘ code ook naar een sjabloondeel, omdat het waarschijnlijk in meerdere sjablonen wordt gebruikt. Inhoud aanmaken-geen.php en verplaats deze code naar het nieuwe bestand.

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

uw index ziet er nu zo uit:

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

hoewel het bovenstaande perfect zal werken, is er een lichte verbetering die we kunnen maken. WordPress heeft helper functies voor het opnemen van de header, footer en sidebar template delen. Omdat het een best practice is om waar mogelijk kernfunctionaliteit te gebruiken, moeten we die in plaats daarvan gebruiken.

vervang get_template_part( 'header' ); door get_header(); en get_template_part( 'footer' ); door get_footer();

Stap #4: enkelvoud toevoegen.php, archief.php, zoek.php, en 404.php

het basiswerk dat we hebben voltooid met template-onderdelen zal Dividend opleveren als we nieuwe template-bestanden aan ons thema toevoegen. Hieronder hebben we de meest voorkomende vermeld. Om te voorkomen dat je overweldigd wordt met codevoorbeelden hebben we in plaats daarvan gelinkt aan de broncode op Github.

enkelvoud.php

Posts en pagina ‘s, wanneer weergegeven op hun eigen URL’ s, worden beschouwd als ‘enkelvoud’ omdat de lay-out meestal hetzelfde zal zijn voor beide paginatypes. Maar in het geval dat het niet u kunt de meer specifieke pagina te gebruiken.php en single.php (post) in plaats daarvan.

voorbeeldcode-enkelvoud.php

archief.php

Archiefsjablonen verschillen meestal op twee manieren van enkelvoudige sjablonen: ze tonen fragmenten in plaats van de volledige inhoud en bevatten een archiefkop die de inhoud uitlegt.

refereer terug naar de sjabloonhiërarchie en u zult zien dat het archiefsjabloon alle soorten archieven omvat (auteur, categorie, tag, taxonomie, datum) als dit niet werkt voor uw gebruik-case kunt u nog steeds de meer specifieke sjablonen gebruiken:

1. 1. • auteur.php
      • categorie.php
      • tag.php
      • taxonomie.php
      • datum.php

voorbeeld Code-archief.php

zoeken.php

WordPress websites kunnen worden doorzocht met behulp van de ?s= URL parameter, bijvoorbeeld yourwebsite.com?s=test. Zoek.php template voert de resultaten van deze zoekopdrachten.

voorbeeld Code-search.php

404.php

het else statement dat we in index hebben toegevoegd.php vangt” pagina niet gevonden ” fouten, maar je wilt misschien om die functionaliteit te ontkoppelen in zijn eigen template bestand om meer controle over de uitvoer te hebben. Dat is de use-case van de 404.php template bestand.

Voorbeeldcode – 404.php

Stap # 5: aanvullende bestanden

als u uw thema distribueert naar het publiek dan zijn de volgende bestanden noodzakelijk. Zonder deze, zal uw thema krijgen afgewezen van thema repositories en marktplaatsen.

schermafbeelding.png

de schermafbeelding wordt getoond in de lijst met wp-admin thema ‘ s wanneer de gebruiker een nieuw thema selecteert. Hier zijn een aantal best practices die u moet volgen:

1. 1. • schermafbeeldingen moeten 1200px x 900px
      • schermafbeeldingen moeten aanwezig zijn .png of .JPG-formaat
      • schermafbeeldingen moeten een nauwkeurige weergave zijn van het thema
      • schermafbeeldingen moeten worden geoptimaliseerd (gebruik tinypng.com of vergelijkbaar)

readme.txt

WordPress gebruikt geen informatie van readme.txt, het haalt alles wat het nodig heeft uit Stijl.css. Aan de andere kant, de WordPress theme directory trekt belangrijke informatie uit het readme-bestand en beschouwt het als een vereist bestand.

de meeste ontwikkelaars gebruiken readme.txt als de centrale locatie om alle informatie over hun thema op te slaan. Een simpele readme.txt ziet er zo uit:

=== 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. • vereist op zijn minst – Dit is de minimale versie van WordPress dat uw thema is compatibel met.
      • Getest tot – Dit veld geeft de meest recente versie van WordPress uw thema is getest met.
      • vereist PHP-dit veld geeft de minimale versie aan van PHP waarop uw thema zal functioneren.
      • Beschrijving-Dit veld Beschrijving Wordt momenteel nergens weergegeven.
      • Changelog-het changelog wordt nergens gebruikt, maar ontwikkelaars en sommige gebruikers zullen naar dit bestand verwijzen om te zien welke wijzigingen er zijn aangebracht.
      • bronnen-de meeste bronnen van derden vereisen een soort attributie. De resources sectie is een algemeen aanvaarde plek om die te zetten. Zelfs voor bronnen die niet expliciet naamsvermelding vereisen, is het nog steeds een goede gewoonte om ze hier te vermelden, zodat gebruikers zich bewust zijn van de licenties van bronnen die ze gebruiken.

Stap 6: Paginasjablonen maken

Paginasjablonen stellen ontwikkelaars in staat om aangepaste sjablonen te maken die kunnen worden gebruikt voor afzonderlijke berichten en pagina ‘ s. Bijvoorbeeld, de meeste thema ’s hebben een twee-kolom (inhoud – zijbalk) lay-out, maar op sommige pagina’ s, de gebruiker zou willen gewoon concentreren op de inhoud en niet een zijbalk tonen. Dat is waar een pagina sjabloon kan helpen.

Hoe worden” Paginasjablonen ” gemaakt?

maak in onze themamap een nieuwe map aan met de naam ‘page-templates’ en maak binnen die map een bestand aan met de naam single-column.php. Om dingen te versnellen kopieer alle code uit enkelvoud.php naar pagina-templates / single-column.php en verwijder de aanroep naar get_sidebar () omdat dit sjabloon dat niet nodig heeft.

nu moeten we een speciale header toevoegen die WordPress vertelt dat dit een pagina sjabloon is, het ziet er zo uit:

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

de code spreekt voor zich, we vertellen gewoon WordPress de naam van de template en welke post types het kan worden gebruikt met.

dat is alles wat er is, onze nieuwe pagina template is nu beschikbaar in de editor onder ‘page attributen’.

Stap # 7: Maak uw thema compatibel met RTL.css

niet alle talen worden van links naar rechts gelezen. Arabisch en Hebreeuws, bijvoorbeeld, worden gelezen van rechts naar links (RTL). Er is een eenvoudige manier om uw thema compatibel met RTL talen te maken.

Maak een nieuw bestand aan in uw themamap genaamd rtl.CSS, kopieer en plak de volgende code:

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

als een RTL-taal de actieve taal is op een WordPress website, Weet WordPress dit CSS-bestand automatisch te laden.

dit is een zeer eenvoudige implementatie van RTL-functionaliteit om u op weg te helpen. Als u geïnteresseerd bent in het leren van meer hier zijn twee fantastische middelen:

documentatie van rechts naar links taalondersteuning

Twenty Twenty RTL code

Stap # 8: Volg altijd Best Practices

Best practices zijn in de loop van de tijd geëvolueerd om het bouwen en onderhouden van WordPress-thema ‘ s gemakkelijker te maken. Niet alleen zal het volgen van deze principes u helpen, maar ze zullen het ook gemakkelijker maken voor andere ontwikkelaars wanneer ze nodig hebben om te werken met uw code.

1) Gebruik Startersthema ‘s

Startersthema’ s bieden een solide basis waarop u uw thema kunt voortbouwen. Meestal zijn ze lichtgewicht, bevatten weinig tot geen styling en geen configuratie-opties. Over tijd kan je bouwen van uw eigen starter thema die u kunt al uw projecten op, maar voor nu is hier zijn een aantal populaire opties:

1. 1. • Onderstreept
      • Steiger
      • HTML5 Leeg

2) Kennen WordPress Coding Standards

Coding standards zijn een manier van opmaken van uw code op een consistente manier over de gehele codebase. WordPress heeft coderingsstandaarden voor HTML, CSS, Javascript en PHP. Terwijl het gebruik van een codering standaard heeft geen effect op de eindgebruiker ervaring, het maakt uw code een stuk leesbaarder. Zelfs als u niet gebruik maken van de WordPress codering normen, raden we altijd het gebruik van een standaard.

1. 1. • WordPress.org coderingsstandaarden
      • WPCS
      • PHP coderingsstandaarden

3) Gebruik lokalisatie

dankzij het harde werk van vrijwilligers is WordPress beschikbaar in honderden talen. Als uw thema gaat openbaar worden vrijgegeven moet het worden gebouwd op een manier die het mogelijk maakt om te worden vertaald.

maak je geen zorgen, het is super makkelijk om te doen. Alles wat we hoeven te doen is ervoor te zorgen dat alle strings worden doorgegeven door een ‘lokalisatie functie’ in plaats van direct worden uitgevoerd.

in plaats van dit:

<?php echo 'Previous Post'; ?>

We doen dit in plaats:

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

__() is een lokalisatiefunctie die een string en een tekstdomein accepteert. De functie retourneert een vertaling van de geleverde tekenreeks, of de originele tekenreeks als een vertaling niet beschikbaar is.

4) vermijd plug-Infunctionaliteit

wanneer een gebruiker het thema wijzigt, moet alleen de presentatielaag veranderen. De inhoud en functionaliteit moeten grotendeels hetzelfde blijven. Wat dit betekent is dat elke functie die van invloed is op hoe WordPress rollen moeten worden opgenomen in een plugin, niet uw thema. Enkele voorbeelden van Plugin functionaliteit omvatten:

1. 1. • Custom Post Types
      • Pagina Bouwers
      • Social Media
      • Search Engine Optimization (SEO)

Hoewel het lijkt misschien handig (en eventueel een selling point) om SEO besturingselementen in een thema, het schaadt de gebruiker op de lange termijn. In de toekomst, zullen ze nodig hebben om hun thema te veranderen, maar kan niet omdat al hun SEO configuraties zijn strak gekoppeld aan het huidige thema. In tegenstelling, als de configuraties werden opgeslagen in een plugin konden ze thema te veranderen zonder zorgen.

5) voorvoegsel (conflicten voorkomen)

om conflicten te voorkomen moeten alle functies, klassen en globale variabelen die door uw thema worden aangemaakt, worden voorvoegsel. Dit is belangrijk omdat het onmogelijk is om te weten welke andere code wordt uitgevoerd op de website van uw gebruiker. Prefixing voorkomt naam botsingen en fatale fouten.

de naam van uw thema gescheiden door streepjes of underscores zal meestal als een voorvoegsel werken. Als de thema naam is zeer lang de initialen kunnen werken in plaats daarvan.

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) Gebruik Core functionaliteit

waar deze bestaat, moet u altijd core functionaliteit gebruiken in plaats van het wiel opnieuw uit te vinden. Dit omvat, maar is niet beperkt tot Sidebars, navigatie menu ‘ s, post miniaturen, aangepaste Headers en aangepaste achtergronden. Deze functies zijn gestreden-getest door miljoenen gebruikers en worden actief onderhouden en verbeterd.

als u de functionaliteit of uitvoer van een kernfunctie wilt wijzigen, dan is het mogelijk met behulp van een van de vele hooks en filters die WordPress biedt. Bijvoorbeeld wp_nav_menu() heeft een ‘walker’ parameter zodat u de uitvoer volledig kunt controleren.

7) gegevens ontsnappen en ontsmetten

als thema-ontwikkelaar moet u bekend zijn met gegevens ontsnappen en ontsmetten om uw gebruikers te beschermen tegen mogelijke exploits.

Escaping

Escaping is het proces van het controleren van gegevens is veilig voordat het wordt uitgevoerd en sanitizing is het controleren van gegevens voordat het wordt opgeslagen in de database.

WordPress heeft helperfuncties die u kunt gebruiken om gegevens te ontsnappen, zodat u deze niet zelf hoeft te bouwen. esc_html is een voorbeeld van een escaping functie. Dit is hoe een niet-afgeschermde output eruit ziet:

echo get_theme_mod( 'error_page_title' );

om te ontsnappen aan de output doen we dit:

echo esc_html( get_theme_mod( 'error_page_title' ) );

enkele andere escaping functies die je moet kennen zijn esc_attr(), absint (), esc_url ().

het is ook mogelijk om een tekenreeks te vertalen en te ontsnappen met behulp van een enkele functie:

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

wordt:

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

Tip: overal in uw thema waar u echo $ hebt, moet u controleren of het moet worden escaped, meestal doet het dat.

Sanitizing

als u instellingen aan uw thema toevoegt, moet u ervoor zorgen dat de gegevens die gebruikers invoeren veilig zijn voordat het in de database komt. WordPress heeft een aantal functies om te helpen met het ontsmetten van invoer.

bij het toevoegen van een instelling aan uw thema met behulp van de Customizer API heeft het een parameter voor genaamd ‘sanitize_callback’ die de naam van een sanitization functie accepteert. Elke invoer die de instelling neemt wordt gecontroleerd door de functie die u aan ‘sanitize_callback’ geeft voordat het de database binnenkomt.

het benadrukt het belang van sanitization dat als zelfs een van uw instellingen ontbreekt de sanitize_callback het niet zal worden geaccepteerd in de WordPress theme directory.

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

een officiële lijst van sanitization en escaping functies kunt u hier zien: Data Sanitization / Escaping

stap # 9: Distribute Your WordPress Theme

thema ‘ s kunnen worden gedistribueerd via verschillende kanalen, afhankelijk van het resultaat dat u wilt bereiken. Als uw resultaat is om gewoon bij te dragen aan de open-source gemeenschap dan is er geen betere manier om dat te doen dan om uw thema te uploaden naar de WordPress directory. Als u in plaats daarvan uw thema wilt verkopen en direct geld wilt verdienen, zijn er manieren om dat ook te doen.

hier zijn de belangrijkste websites voor themadistributie:

1) WordPress.org (beste plek om downloads en gebruikers te krijgen)

het primaire voordeel van het hosten van uw thema op WordPress is dat je een zichtbaarheid boost van uw thema wordt gezien niet alleen op de wordpress.org website maar ook in het wp-admin dashboard.

een ander voordeel van het hosten van uw thema met WordPress is het ingebouwde updatesysteem. Als u uw thema bij te werken alle gebruikers zullen worden aangemeld in hun wp-admin dashboards en een eenvoudig pad om te updaten naar de nieuwste versie.

WordPress.org accepteert alleen gratis thema ‘ s, maar dat betekent niet dat je geen geld kunt verdienen. Een gratis thema kan een geweldig kanaal voor het bevorderen van uw premium thema, plugin of service.

2) WordPress.com

WordPress.com hosts zowel gratis als premium thema ‘ s. Echter, ze zijn niet open geweest voor nieuwe auteur inzendingen voor een paar jaar nu.

3) ThemeForest

ThemeForest is de toonaangevende markt voor premiumthema ‘ s. De top-selling thema (Avada) heeft een omzet van meer dan $5.000.000.

over het algemeen verwachten de kopers van Themabos veelzijdige “multifunctionele” thema ‘ s. Alle top thema ‘ s hebben Pagina builder functionaliteit en worden ondersteund door teams van ontwikkelaars. Het is een zeer moeilijke markt om in te breken voor nieuwe auteurs.

4) Creative Market and Mojo Marketplace

Creative Market And Mojo Marketplace zijn kleine spelers in de markt voor premiumthema ‘ s, daarom hebben we ze gegroepeerd. Beide bieden effectief dezelfde service als ThemeForest, maar op kleinere schaal.

5) Github

Github is de makkelijkste manier om uw gratis thema openbaar te maken. Er is geen beoordelingsproces en geen richtlijnen om te volgen. U zult echter niet profiteren van de zichtbaarheid van wordpress.org en zal moeten uw eigen update-mechanisme voor gebruikers om de nieuwste versies te krijgen te bouwen.

stap # 10: Test en verbeter Code

1) Testing Your Theme

Theme Unit Test

de Theme Unit Test is een standaard WordPress content import bestand dat een breed scala van inhoudstypen en randgevallen bevat. Het is eenvoudig te uploaden naar uw ontwikkelomgeving en zal veel scenario ‘ s markeren die u misschien over het hoofd hebt gezien.

WP_DEBUG

als thema-ontwikkelaar is het testen van uw thema met WP_DEBUG ingeschakeld het absolute minimum dat u moet doen. Uw thema moet terugkeren geen fouten of waarschuwingen wanneer WP_DEBUG is ingesteld op true.

het is ook belangrijk om de test te herhalen met de verschillende PHP versies die uw thema ondersteunt. Bij elke grote PHP-release zijn er nieuwe wijzigingen, waarschuwingen en afschrijvingen. Het is niet ongewoon voor een thema te zijn foutloos op PHP5. 6, maar toon fouten op PHP7.

om WP_DEBUG in te schakelen, voegt u de volgende code toe aan wp-config.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget is een handige plugin waarmee u 13 core widgets toe te voegen aan uw zijbalk in een keer. De core widgets maken gebruik van een verscheidenheid aan HTML-elementen waardoor ze perfect voor het testen van uw thema.

Theme Sniffer

de Theme Sniffer is een plugin gemaakt door het Theme Review Team (TRT). Het vangt veel (maar niet alle) ontsnappings-en lokalisatiefouten. Het controleert ook uw thema tegen de WordPress codering normen.

2) Uw thema inzenden naar WordPress.org

aan het begin van deze gids zeiden we dat tegen de tijd dat u het einde bereikt u een thema zou hebben dat u kunt indienen bij wordpress.org laten we naar dat proces kijken.

uploadproces

het uploadproces is eenvoudig. Maak of login op uw WordPress-account en navigeer naar deze pagina– https://wordpress.org/themes/upload/

u kunt uw thema zip en upload het nu, maar hier zijn een aantal dingen die je zou willen weten eerst.

vereisten

het Theme Review Team (TRT) heeft een strikte reeks eisen. Uw thema zal niet worden geaccepteerd in de directory totdat het voldoet aan alle eisen.

Herhalingsproces

wanneer u een thema uploadt, moet een herhalingsproces in twee fasen plaatsvinden voordat het in de directory kan worden geaccepteerd.

eerst wordt een automatische controle uitgevoerd zodra u op Uploaden drukt. Achter de schermen werkt de geautomatiseerde checker op een zeer vergelijkbare manier als de thema Sniffer plugin. Als het fouten vindt, zal het het thema verwerpen en het uploadproces eindigt daar.

als uw thema de automatische controle passeert, wordt het toegevoegd aan een wachtrij van thema ‘ s die wachten op een menselijke beoordeling. De menselijke beoordeling wordt voltooid door vrijwilligers van de TRT. Het aantal thema ‘ s in de wachtrij is veel groter dan het aantal reviewers, wat betekent dat het vaak 2-3 maanden kan duren voordat uw thema de voorkant van de wachtrij bereikt.

het is noodzakelijk dat uw thema foutloos is en voldoet aan alle vereisten tegen de tijd dat het de menselijke review-fase bereikt alsof het meer dan 3 belangrijke fouten bevat die het kan worden afgewezen. Als een thema wordt afgewezen in de menselijke beoordeling fase moet het weer in de rij aan de achterkant, wat betekent dat het wachten 2-3 maanden weer voor een andere menselijke beoordeling.

Nuttige Hulpbron: De meest voorkomende WordPress Theme ontwikkeling fouten (en hoe ze op te lossen)

het is vermeldenswaard dat de TRT is altijd op zoek naar nieuwe recensenten, vrijwilligerswerk kan een geweldige leerervaring en een manier om bij te dragen aan de open-source gemeenschap.

3) uw themalijst

Gefeliciteerd, uw thema is goedgekeurd! Je hebt nu je eigen advertentie die er zo uitziet.

hier is een overzicht van wat u kunt verwachten op deze pagina:

1. 1. • Screenshot-de screenshot is het eerste wat potentiële gebruikers zien dus maak het zo aantrekkelijk mogelijk. Maar vergeet niet dat het moet nog steeds een nauwkeurige weergave van het thema en niet een photoshop render. Haal inspiratie uit de meest populaire thema ‘ s.
      • beschrijving-de beschrijving die uit stijl wordt getrokken.css is een ideale plek om uw thema te beschrijven en het is de belangrijkste functies. Het helpt ook om een lijst aanbevolen of vereiste plugins hier. De beschrijving Ondersteunt geen opmaak (vet, cursief, hyperlinks) of zelfs regeleinden.
      • Tags-Dit is een weergave van de tags die u in stijl hebt weergegeven.css. Alleen deze tags hier worden geaccepteerd.
      • knop Voorbeeld-het voorbeeld wordt gegenereerd door wordpress.org en als thema-ontwikkelaars hebben we geen controle over de output. Helaas, omdat de previewer basisinhoud en geen configuratie gebruikt, resulteert dit vaak in een minder dan perfecte preview.
      • thema Homepage Link – de URL voor de Preview knop wordt getrokken uit het’ thema URI ‘ veld in uw stijl.css. Er zijn strenge eisen dat deze URL alleen mag worden gebruikt om een pagina weer te geven met informatie over uw thema.
      • actieve installaties-Dit is het aantal websites dat actief gebruik maakt van het thema. Het getal wordt afgerond op de dichtstbijzijnde tien, honderd of duizend. Het is niet mogelijk om een exact nummer te vinden.
      • Downloads Per dag – zo vaak is uw thema gedownload. Een ‘Download’ kan een nieuwe download of een thema-update zijn.
      • Reviews-om een beoordeling achter te laten moeten ze ingelogd zijn bij een wordpress.org rekening. Over het algemeen zijn beoordelingen moeilijk te krijgen, tenzij u uw gebruikers expliciet vraagt om ze in te dienen.
      • ondersteuning-het ingebouwde ondersteuningsplatform is geweldig voor het beheren en oplossen van problemen met uw thema. De gebruiker moet ingelogd zijn om een support thread te maken.
      • vertalingen-het vertaalplatform is een fantastische bron. Als u zijn na het advies in deze gids voor het lokaliseren van uw thema dan uw gebruikers in staat om het te vertalen in andere talen zal zijn en uitbreiden van uw potentiële user base dan alleen Engels sprekende gebruikers.

4) bijwerken van uw thema

wanneer u wijzigingen aanbrengt in uw thema in de toekomst en moet de versie gehost op WordPress te updaten is het proces eenvoudig.

werk eerst het veld ‘Version:’ en changelog bij in readme.txt. Zip vervolgens het bestand en opnieuw uploaden met behulp van dezelfde uploadpagina als voorheen.

het systeem zal het herkennen als een update en zal het automatisch goedkeuren, zodat het geen andere menselijke beoordeling nodig heeft.