Maak een WordPress-thema: stap voor stap voor aangepaste ontwikkeling

Sinds de oorspronkelijke lancering in 2003 is WordPress geëvolueerd van een eenvoudige blogtool naar een krachtige en populaire websitebouwer en een uitgebreid CMS (contentmanagementsysteem) dat door ongeveer 38% van de websites op internet wordt gebruikt! Gezien zijn populariteit, als uw site zich moet onderscheiden van de rest, moet u een WordPress-thema maken dat uniek is voor uw site.

In werkelijkheid is het geen wonder dat WordPress zo ver heeft kunnen komen en zo populair is geworden.

De hoeveelheid flexibiliteit die het heeft en de functies die het host, zorgen ervoor dat het breed kan worden gebruikt op verschillende soorten websites. Bovendien is WordPress vrij eenvoudig te gebruiken met weinig tot geen eerdere ervaring in codering of webontwikkeling.

Dit zijn de redenen achter het succesverhaal van WordPress en zijn precies de redenen bijna 40 procent van alle websites op het World Wide Web worden aangedreven door deze software. 

WordPress heeft een scala aan handige functies die webontwikkeling en programmeren maken less ingewikkelder en toegankelijker voor iedereen.

Inleiding tot de ontwikkeling van WordPress-thema's 

Een andere populaire functie die WordPress zo populair maakt, zijn de thema's. Het thema is gewoon een verzameling stylesheets en sjablonen die bepalen hoe een door WP aangedreven site eruitziet en wordt weergegeven.

De software biedt de gebruiker een breed scala aan verschillende bewerkingsopties als het gaat om thema's uit het WP-beheergebied.

Honderden WordPress-thema's zijn volledig gratis of met vele anderen tegen een redelijke prijs van enkele tientallen dollars.

In feite host WordPress.org een enorme database met thema's in hun Thema's Directory.

Andere websites zoals Themeforest bieden ook veel premium thema's van verschillende ontwikkelaars.

Elk van deze thema's heeft een andere lay-out, ontwerppatroon en functies.

Het is aan de gebruiker om er een te vinden die het beste aansluit bij de behoeften van zijn website. In de meeste gevallen worden thema's gemaakt met bepaalde bedrijfstakken of beroepen in gedachten, wat betekent dat bijvoorbeeld restauranteigenaren gemakkelijk thema's met boekingsfuncties kunnen vinden.

Hoewel er tal van geweldige thema's zijn die aan uw behoeften kunnen voldoen, is het veilig om te zeggen dat als u iets bijzonders wilt maken, u het vrijwel zelf zult moeten doen. Als je niet kunt programmeren, een goed alternatief optie zou zijn om voor een freelance softwareontwikkelaar te gaan (prijzen kunnen variëren afhankelijk van verschillende factoren).

In dit artikel gaan we echter ALLE stappen bespreken die nodig zijn om uw eigen aangepaste WordPress-thema voor uw door WP aangedreven website te maken. We zullen elk belangrijk aspect bekijken om ervoor te zorgen dat u het beste krijgt dat WordPress te bieden heeft. 

Aan de slag gaan met het maken van je eigen thema als beginner lijkt op het eerste gezicht misschien een gigantische taak.

Het helemaal opnieuw maken van een aangepast thema is echter niet al te ingewikkeld in WP. Je hoeft geen webontwikkelaar te zijn, als je de basis van coderen met PHP hebt, kun je gemakkelijk leren hoe je een WordPress-thema maakt.

Bovendien kan het maken van je eigen thema heel lonend zijn, zeker als je het eindresultaat live op je website ziet.

Uw eerste aangepaste WordPress-thema maken

Om aan de slag te gaan met het maken van een WordPress-thema, heb je een paar basisdingen nodig:

• Een WordPress-website
• Een goed hostingplan
• Een beetje eerdere ervaring met dingen zoals lokale staging-omgevingen
• Basiskennis van CSS- en PHP-coderingstalen
• Een startthema

De WordPress-sjabloonhiërarchie begrijpen 

In WordPress zijn sjabloonbestanden (de bouwstenen van je thema) modulair en herbruikbaar.

Sjabloonbestanden zijn verantwoordelijk voor het genereren van de pagina's op uw WP-site. Sommige van deze bestanden worden op bijna al uw pagina's gebruikt, terwijl andere alleen in specifieke omstandigheden worden gebruikt.

Bekijk het onderstaande diagram - het legt uit hoe de WordPress-sjabloonhiërarchie is georganiseerd.

Sjabloonbestanden bepalen het algehele uiterlijk van de inhoud op de website. Als u een koptekst wilt maken, gebruikt u a header.php bestand, of als u een commentaarsectie wilt toevoegen, gebruikt u de comments.php bestand. 

Om de sjabloonhiërarchie te begrijpen, moet u weten dat WordPress een zogenaamde "querystring" gebruikt om te beslissen welke sjabloon of sjabloonset moet worden gebruikt om een ​​bepaalde pagina te maken en weer te geven.

De zoekreeks is informatie die is opgeslagen in de link van elk deel van de website dat u probeert te wijzigen. In eenvoudiger bewoordingen analyseert WordPress de informatie en voert zoekopdrachten uit door de sjabloonhiërarchie om een ​​sjabloonbestand te vinden dat overeenkomt met de verstrekte informatie in de queryreeks.

Dit is in feite een schema waarin WP zoekt naar overeenkomende sjabloonbestanden telkens wanneer pagina's worden geladen.

Als u bijvoorbeeld de volgende URL typt: http://example.com/post/this-post, zal WordPress de benodigde sjabloonbestanden in de volgende volgorde zoeken: 

1. Bestanden die overeenkomen met de slug, in dit geval, deze post.
2. Bestanden die overeenkomen met de post-ID.
3. Een generiek enkel postbestand, zoals single.php.
4. Een archiefbestand, in dit geval archive.php.
5. De index.php bestand.

Het laatste bestand (index.php) is vereist in elk thema, omdat het de standaard (of fallback) is als er geen ander bestand kan worden gevonden in het afstemmingsproces. underscores (een WP-startersthema) heeft de meest voorkomende bestanden. Deze bestanden in dit thema werken direct uit de doos.

Je kunt ze bewerken als je zin hebt om te experimenteren, of als je wat aangepaste functionaliteit op je site wilt maken.

Wat is een WordPress-startersthema? 

Een startersthema is de basis van een aangepast WordPress-thema.

Je kunt het gebruiken als basis om je eigen unieke thema in de lucht te krijgen. Met een startersthema kun je je eigen aangepaste WordPress-thema bouwen zonder dat je een heel thema helemaal opnieuw hoeft te ontwerpen of coderen.

WordPress-startthema's bevatten alle bestanden zoals gedefinieerd in de bovenstaande hiërarchie.

Door een startthema te gebruiken, krijgt u een beter begrip van hoe WordPress werkt, omdat het u de basis, de structuur van een thema en hoe de verschillende onderdelen samenwerken, laat zien.

Een op maat gemaakt WordPress-thema kan worden toegepast op een reeks verschillende websitetypen, van presentaties en mappen tot online winkels gebouwd met WooCommerce, sociale media of wat dan ook waarvoor u uw website nodig heeft.  

Kiezen voor startthema's (zoals UnderStrap, Underscores en Bones) helpt bij het creëren van een WordPress-thema dat de deur opent naar het gebruik van een verscheidenheid aan verschillende opties.

Het gebruik van onderstrepingstekens is misschien de beste keuze voor beginners, omdat het de belangrijkste functies biedt. Het komt ook van een oude en betrouwbare ontwikkelaar. Dit betekent dat het waarschijnlijker compatibel, veilig en betrouwbaar is en op de lange termijn betere ondersteuning zal hebben.

Waarom zou je een startthema gebruiken?

Zoals hierboven vermeld, is een startersthema een fundament, een blauwdruk die je helpt bij het bedenken van een unieke website. Het werkt al volledig, maar mist nog steeds de bepalende sleutelfuncties die een gebruiksvriendelijke website maken. 

In wezen moet het nog steeds worden gestyled en correct worden geconfigureerd. 

Dat gezegd hebbende, startersthema's zijn ideaal voor diegenen die weinig of geen ervaring hebben met WordPress of webontwikkeling in het algemeen. Het is een geweldige manier om kennis te maken met het onderwerp thema's bouwen en de basisprincipes van door WP aangedreven websites te leren. 

Een WordPress Starter-thema bespaart u tijd en vereist weinig tot geen achtergrondkennis in codering en de rest van de WordPress-complexiteit. 

U kunt gebruikmaken van jarenlang hard werk van de ontwikkelaars van het startersthema en deze richtlijnen gebruiken om een ​​beter begrip te krijgen van hoe WordPress en thema-ontwerp werken.   

Populaire voorbeelden van startersthema's

• underscores – Een betrouwbaar en gerenommeerd startersthema dat beginners een voorsprong geeft in thema ontwikkeling. Underscores is vrij eenvoudig en perfect om meteen aan de slag te gaan als je over alle benodigde tools beschikt. Het thema is geweldig om de concepten van thema-ontwikkeling te begrijpen. Underscores gaat helemaal over het starten van een nieuw project dat meer moet worden gezien als een voortdurend evoluerende toolkit en less als een raamwerk.
  
  
• Wortels – Dit startersthema geeft je een benadering die meer op ontwikkelaars is gericht, waarbij de opmaak gebaseerd is op de HTML5 Boilerplate. Het ondersteunt ook meer geavanceerde tools zoals: Bootstrap en knorren. Het Roots-startthema bevat ook een thema-wrapper waarmee u uw proces gestroomlijnd kunt houden en het herhaaldelijk oproepen van dezelfde sjabloononderdelen elimineert.

Roots gebruikt ook CSS-preprocessors en ondersteunt LESS, een achterwaarts compatibele taalextensie voor CSS, die het proces van het ontwikkelen van uw thema aanzienlijk kan versnellen.

Dat gezegd hebbende, Roots geeft een meer pragmatische aanpak en vereist wat meer knowhow van de ontwikkelaar.  

6 basisstappen om uw WordPress-thema te ontwikkelen

Nadat je de basis hebt behandeld, ben je eindelijk klaar om aan de slag te gaan met het maken van een WordPress-thema.

Aangezien dit artikel meer op beginners is gericht, zullen we een startthema gebruiken, maar je bent ook vrij om alles helemaal opnieuw te maken zonder startthema's.

Als dat de route is die je wilt nemen, vergeet dan niet dat je veel meer tijd nodig hebt en dat je jezelf wat dieper moet onderdompelen in codering en webontwikkeling in het algemeen.

1. De ontwikkelomgeving instellen

Uw eerste stap in het proces zou het creëren van een ontwikkelomgeving moeten zijn.

Dit is in feite een server die u op uw computer moet installeren om lokale WP-sites te beheren en te ontwikkelen. Een ontwikkelomgeving stelt u in staat uw website veilig te ontwikkelen en biedt u bovendien meerdere mogelijkheden voor het creëren van een lokale omgeving.

gebruik DesktopServer is een van de ideale paden die u kunt nemen. Het is een gemakkelijke manier om een ​​lokale en snelle versie van WP te krijgen die compatibel is met zowel Windows als Mac. Selecteer de gratis versie, registreer en download deze en installeer vervolgens de software.

Nadat u het programma hebt geïnstalleerd, opent u het programma en configureert u uw lokale omgeving.

Het is een vrij eenvoudig proces en je bent binnen enkele minuten klaar. Na de installatie heb je een website en ontwikkelomgeving die zowel werken als eruitzien als elke live WP-website.

2. Download en installeer een startthema

De meest elementaire startthema's (zoals onderstrepingstekens) zijn gemakkelijk voor beginners om mee aan de slag te gaan.

In tegenstelling tot de meeste basisthema's, maakt Underscores het mogelijk om opties aan te passen via zijn geavanceerde opties (zoals auteur en beschrijving) nadat je je thema een naam hebt gegeven. 

Je kunt ook syntactisch geweldige StyleSheets of SASS wat een CSS-taal voor voorverwerking is waarmee u functies kunt introduceren zoals nesten, wiskundige bewerkingen, gebruik van variabelen, enz.

Nadat je je keuzes hebt gemaakt, hoef je alleen maar op Genereren te klikken om het .zip-bestand met je startthema te downloaden.

Installeer het bestand nu op uw lokale site. Als je alles goed hebt gedaan, kun je nu een kale, basisversie van je aangepaste WordPress-thema zien.

De kernprincipes van WordPress begrijpen 

Nu de basis is ingesteld, kunt u aan de slag. Voordat u echter in het aanpassingsproces duikt, moet u vertrouwd raken met de kernprincipes en componenten van het maken van een WordPress-thema met behulp van de kernprincipes van WP. 

Allereerst moet u leren over sjabloonbestanden, de belangrijkste bouwstenen van elk thema in WP.

Sjabloonbestanden bepalen in feite hoe uw lay-out en inhoud op uw site worden weergegeven. Als u een koptekst wilt maken, gebruikt u de header.php bestand, terwijl comments.php zou worden gebruikt om eventuele opmerkingen weer te geven.

Zoals hierboven besproken, gebruikt WP zijn sjabloonhiërarchie om te bepalen welk sjabloonbestand het zal kiezen om de inhoud uit te voeren die een gebruiker aanvraagt ​​/ nodig heeft. U kunt met deze bestanden werken zoals ze zijn, maar aangezien u hier bent om een ​​WordPress-thema te maken, zal het grootste deel van uw werk zijn om deze bestanden aan uw behoeften aan te passen.

Als we het hebben over de kernprincipes van WP, moet u ook het concept erachter begrijpen: The Loop.

Het is de code die WP voornamelijk gebruikt om uw inhoud weer te geven en deze is te vinden in alle inhoud die sjabloonbestanden weergeeft, zoals de index.php or zijbalk.php. Het is een vrij complex onderwerp, maar gelukkig wordt het gebundeld met het startthema (als je underscores gebruikt), wat betekent dat je proces eenvoudiger zou moeten zijn. 

Je moet het concept begrijpen en ermee werken. Bekijk enkele van de voorbeelden in de bovenstaande link om beter te begrijpen hoe de lus wordt gebruikt en hoe u de code aan uw behoeften kunt aanpassen.

3. Themadetails maken

Thema's zijn geen puur cosmetische componenten.

Er zijn tal van verschillende functies die u aan uw site kunt toevoegen die de functionaliteit kunnen verbeteren. We gaan bespreken hoe u een paar basisfuncties kunt implementeren om uw website op te fleuren.

Het toevoegen van haken kan u in staat stellen om verschillende PHP-acties uit te voeren, andere informatie weer te geven of indien nodig stijlgegevens in te voegen.

Hooks zijn codefragmenten die in sjabloonbestanden worden ingevoegd. De meeste zijn direct geïmplementeerd als onderdeel van de kern van WordPress, maar sommige hooks zijn ook erg handig bij het aanpassen van thema's.

Hier is een lijst met de meest voorkomende hooks en hun rollen:

• wp_head() - wordt toegevoegd aan de element in header.php. Het maakt scripts, stijlen en andere informatie mogelijk die wordt uitgevoerd wanneer de site begint te laden.
• wp_footer() - meestal toegevoegd aan footer.php vóór de tag, meestal gebruikt om code in te voegen voor Google Analytics of andere code die op elke pagina moet verschijnen, maar te zwaar is om in de koptekst te laden.  
• wp_meta() - Over het algemeen te vinden op sidebar.php, en het wordt meestal gebruikt om extra scripts op te nemen (bijvoorbeeld een tag cloud).
• commentaar_formulier() - Toegevoegd aan comments.php direct voor het sluiten van het bestand tag om opmerkingen te tonen. 

Als je Underscores gebruikt, zijn deze hooks al bij het thema inbegrepen, maar het is altijd een goed idee om er meer over te leren en alle beschikbare hooks te zien. Met Hooks kunt u de mogelijkheden van uw aangepaste thema uitbreiden.  

4. Stijlen toevoegen met CSS

Cascading Style Sheets of CSS definieert het uiterlijk van de inhoud op de site die u maakt.

Via de style.css bestand, dat al in uw thema is opgenomen, kunt u alle stijlen die u hier vindt bewerken en opslaan om te zien hoe het uw ontwerp verandert. Standaard bevat het alleen de basisstijl.

CSS wordt gebruikt om de presentatie en scheiding van de inhoud op uw website mogelijk te maken, alles van lay-out tot lettertypen en inhoud. CSS kan helpen om de inhoud op uw site toegankelijker en flexibeler te maken.

Diepgaand ingaan op het gebruik van styling met WordPress-thema's kan behoorlijk harig worden en valt buiten het bestek van dit artikel. Als je hier niet zo zeker van bent, wil je misschien meer lezen over CSS voordat je verder gaat.

5. Inclusief JavaScript

Indien nodig JavaScript-bestanden aan uw thema toevoegen, kan de interactieve functies en mogelijkheden een boost geven en een beter functionerende site opleveren. Het is vooral handig wanneer u plug-ins van derden in uw sites wilt opnemen, zoals specifieke video- of audiospelers, dingen zoals schuifregelaars, pop-upondersteuning en andere bibliotheken van derden om geavanceerde functionaliteit te creëren.

Als u Javascript wilt gebruiken met uw aangepaste site, kunt u een aanroep maken met behulp van de onderstaande syntaxis om het scriptbestand aan het thema toe te voegen.

U kunt het script ook rechtstreeks in uw header.php template-bestand tussen de metatags en de stylesheetlink, zoals u zou doen in het geval van een HTML-pagina. Bij gebruik in het headerbestand zou het er ongeveer zo uit moeten zien: 

Als u JS rechtstreeks wilt gebruiken, voegt u de aanroep voor de bestanden rechtstreeks toe zoals hieronder. Als je een functie "stuur dit naar een vriend" wilt instellen, kun je deze onder de titel van het bericht plaatsen. Dat zou er ongeveer zo uitzien: 

" rel="bookmark">

<!--

e-mailpagina();

//-->

U kunt ook scripts in de wachtrij plaatsen met de syntaxis die verderop in dit artikel wordt getoond.

6. Test je thema en exporteer het

Als je klaar bent met al het bovenstaande, is het eindelijk tijd om je gemaakte aangepaste WordPress-thema te testen om ervoor te zorgen dat het soepel werkt.

Hiervoor kunt u de Thema-eenheidstest Gegevens, een set dummy-gegevens die u naar uw site kunt uploaden. De gegevens bestaan ​​uit stijlvariaties en verschillende inhoud, zodat u kunt zien hoe effectief uw thema kan omgaan met zowel voorspelbare als onvoorspelbare gegevens.

Test alles grondig (volgens de bovenstaande Codex-link) zodat je er zeker van kunt zijn dat het thema dat je hebt gemaakt voldoet aan de vereiste normen en aan je verwachtingen voldoet voordat je het exporteert.

Zodra u zeker bent van de tests, kunt u het thema exporteren.

U kunt de export uitvoeren door de plaats te zoeken waar u de website-ontwikkelomgeving lokaal heeft geïnstalleerd.

Open de map en open  / Wp-content / themes /, waar u het thema kunt vinden waaraan u werkte.

Maak nu met een compressietool een Zip bestand op basis van de map door deze te comprimeren. Als u klaar bent, hoeft u het alleen nog maar te uploaden en op een WordPress-site te installeren. Je kunt het ook indienen bij de WordPress Thema's Directory. 

Gedetailleerde handleiding voor het ontwikkelen van WordPress-thema's

Nu je de basis hebt gedaan, zullen de volgende stappen enkele aanvullende details bevatten over het maken van een WordPress-thema.

Aangepaste themabestanden/mappen maken

Zoals u al weet, worden WP-thema's gemaakt op basis van verschillende sjabloonbestanden die op zijn minst een sidebar.php, koptekst.php. en footer.php. U kunt deze oproepen met behulp van de sjabloontags (get_header(), bij het aanroepen van de kop, krijg_zijbalk(), bij het bellen naar de zijbalk, enz.).

U kunt ook aangepaste versies van deze bestanden maken met kleine wijzigingen zoals deze: zijbalk-{uw_custom_template}.php, kop-{your_custom_template}.php en voettekst-{uw_custom_template}.php. 

U kunt de sjabloontags ook aanroepen met dezelfde analogie met de sjabloonnaam als een parameter zoals deze:

get_header( 'uw_custom_template' ); 

Pagina's worden gemaakt door verschillende bestanden, wat betekent dat u ook andere aangepaste sjabloonbestanden kunt maken en ze op een bepaalde locatie binnen de pagina kunt oproepen door simpelweg te gebruiken get_template_part(). Geef het bestand gewoon een toepasselijke naam en gebruik dezelfde aangepaste methode als bij de kop-, voettekst- en zijbalkbestanden. 

Stel dat u een sjabloon wilt maken die uw inhoud verwerkt - u hoeft alleen maar een bestand te maken met de naam content.php en breid vervolgens de bestandsnaam uit om een ​​specifieke lay-out toe te voegen. Laat dat in dit geval zijn inhoud-product.php.

Uiteindelijk, wanneer u het sjabloonbestand in het thema laadt, ziet het er ongeveer zo uit:

get_template_part( 'content', 'product');.

Directory's gebruiken

Gebruik gewoon de functie om naar themamappen te linken: get_theme_file_uri();

Deze functie retourneert de volledige URI naar de hoofdmap van uw thema en u kunt deze gebruiken om naar bestanden en submappen te verwijzen door het volgende voorbeeld te gebruiken:

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

Scripts en StyleSheets in de wachtrij plaatsen

Wanneer u uw eigen thema bedenkt, kunt u ook aangepaste stylesheets en uw eigen JavaScript-bestanden maken.

Wanneer u dit doet, zorg er dan voor dat u ze laadt met behulp van de standaard WordPress-methode, anders bestaat de kans dat uw thema en plug-ins niet onder alle omstandigheden correct werken.

Het enige dat u hoeft te doen, is een functie maken die alle stijlen en scripts in een wachtrij plaatst. Hiervoor maakt WP zowel een handvat als een pad om het bestand en de afhankelijkheden (indien aanwezig) te vinden. Zodra dit gebeurt, moet je een haak gebruiken om de stylesheets en de scripts in te voegen. 

De basisfunctie voor enqueing-stijl:

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

Voor enque-scripts:

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

Google Fonts in de wachtrij plaatsen

Google-lettertypen zijn een uitstekende gratis bron van lettertypen voor webontwerpers en ze kunnen eenvoudig aan uw aangepaste thema worden toegevoegd.

Eerst moet je een lettertype vinden dat je leuk vindt in de Google-lettertypenbibliotheek. Zodra u een lettertype heeft gevonden waarmee u wilt werken, klikt u op de knop "Deze stijl selecteren", waarmee u naar een nieuwe pagina gaat.

Als u hier naar beneden scrolt, vindt u de instructies voor het gebruik ervan in een doos met de benodigde code die u aan uw site kunt toevoegen.   

U kunt de lettertypen toevoegen via de standaard en aanbevolen methode, of u kunt kiezen voor de @import CSS-methode of de Javascript-methode.

Je kunt het ook toevoegen aan WP door het lettertype in de wachtrij van je thema's te plaatsen functies.php.bestand of door een specifieke plug-in te gebruiken.

functie wpb_add_google_fonts() {

wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false );

}

add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts');

Als je wilt kun je er meer over lezen hoe lettertypen in een WordPress-thema te veranderen hier.

Uw pagina opdelen in secties (Header.php / Footer.php)

Op de meeste sites zijn de koptekst, voettekst en zijbalk op alle pagina's hetzelfde. Het is waar dat je in sommige gevallen een paar dingen wilt aanpassen, maar over het algemeen zijn ze consistent.

Dus om de pagina in een kop- en voettekst te verdelen, moet je knippen en plakken uit de index.php pagina, de relevante delen die in de koptekst/voettekst en zijbalk moeten staan. Dit hangt een beetje af van uw huidige index.php.

Als u bijvoorbeeld onderstrepingstekens gebruikt, zijn de kop- en voettekst al correct gedefinieerd in de header.php en footer.php.

Laten we doorgaan met dit voorbeeld alsof we de inhoud voor de koptekst maken.

Op de meeste websites bevatten de headers de essentiële kopstijlen en navigatie naar de website.   

Start van toevoegen voor de sluiting . Zoiets zou je moeten hebben. Dit is gebaseerd op het startthema voor onderstrepingstekens, maar misschien wilt u de koptekst zo nodig aanpassen om uw eigen aanpassingen te maken.

header.php

/ **
* De kop voor ons thema
*
* Dit is de sjabloon die alle weergeeft sectie en alles tot aan
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @pakket Daves_Theme
*/

?>

>

">

>

het_aangepaste_logo();
if ( is_front_page() && is_home() ):
?>
" rel="home">

anders:
?>
" rel="home">

endif;
$daves_theme_description = get_bloginfo( 'description', 'display');
if ( $daves_theme_description || is_customize_preview() ):
?>

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

Hetzelfde proces zou ook moeten gelden voor de voettekst.

Functions.php gebruiken

Het thema functions.php bestand is een sjabloonbestand in het WP-thema dat fungeert als een "master" die automatisch wordt geladen voor zowel beheerders als front-endpagina's van een site.

Gewoonlijk definieert het functies, acties, filters en klassen die andere sjabloonbestanden in het thema gebruiken. Het kan ook worden gebruikt om de functionaliteit van het thema uit te breiden door middel van extra hooks, acties en filters.

U kunt het bestand Functions.php gemakkelijk vinden in de themamap. Je kunt zowel ingebouwde WP- als reguliere PHP-functies toevoegen aan filters en hooks die al zijn gedefinieerd in de WP-kern.

U kunt eenvoudig een functions.php-bestand maken door een tekstbestand met platte tekst te maken dat u functies.php noemt en het in de directory van het thema te plaatsen. Met dit bestand kunt u postformaten, navigatiemenu's en postminiaturen inschakelen, samen met WP-acties en filters. 

Bekijk het bestand Functions.php van een startersthema om een ​​paar voorbeelden te zien van wat u kunt doen. U kunt ook zoeken naar artikelen die de functions.php gebruiken die de functies van een WordPress-site uitbreiden met behulp van het functiebestand.

Hoofdinstellingen gebruiken in het thema

Met de hoofdinstellingen kunt u bepaalde thema-instellingen wijzigen zonder themabestanden te wijzigen of code te wijzigen. Een gedetailleerde beschrijving hiervan valt buiten het bestek van dit artikel, dus we verwijzen u naar een aantal artikelen waarin dit concept in detail wordt uitgelegd.

1. Instellingen API beschrijving op WordPress Codex.
2. Volledige gids voor API voor WordPress-instellingen

De WordPress-loop

Zoals we eerder hebben besproken, is de Loop een standaardmechanisme dat door WP wordt gebruikt om berichten weer te geven via sjabloonbestanden.

Met behulp van het lusmechanisme haalt WP de berichten op huidige pagina's op en formatteert ze volgens de "instructies" in de lus.

Kortom, het doorloopt de berichten voor de huidige pagina's één voor één door de actie uit te voeren die in het thema is gespecificeerd. 

Je kunt de lus gebruiken voor:

• Inhoud en opmerkingen weergeven
• Titels en fragmenten van berichten weergeven op de startpagina van de blog
• Gegevens weergeven uit aangepaste velden en aangepaste berichttypen
• Geef de inhoud op afzonderlijke pagina's weer met behulp van sjabloontags.
• Pas de Loop aan om inhoud in sjabloonbestanden weer te geven en te manipuleren

Als je het Underscores-startthema gebruikt, zul je zien dat de WordPress-lus wordt gebruikt in de bestanden single.php en page.php. Misschien wilt u deze bestanden bekijken om te begrijpen hoe het werkt en/of gebruikt kan worden.

get_header ();
?>

while ( have_posts() ):
de post();

get_template_part( 'template-parts/content', get_post_type() );

de_post_navigatie(
array (
'prev_text' => ' ' . esc_html__( 'Vorige:', 'daves-thema' ). ' %titel ',
'next_text' => ' ' . esc_html__( 'Volgende:', 'daves-thema' ). ' %titel ',
)
);

// Als opmerkingen open zijn of we hebben ten minste één opmerking, laad dan het opmerkingensjabloon.
if ( comments_open() || get_comments_number() ):
opmerkingen_sjabloon();
endif;

eindtijd; // Einde van de lus.
?>

krijg_zijbalk();
get_footer ();

Menu en pagina's

Eerste menu

U kunt uw primaire menu selecteren in de WP Menu Editor (te vinden bij Uiterlijk - Menu). Uw thema ondersteunt mogelijk meer dan één navigatiemenu op verschillende plaatsen binnen uw thema. 

Er zijn ook manieren om extra menu's te registreren, u kunt bijvoorbeeld een "voettekst"-menu maken.

Bekijk de WordPress-codex om te begrijpen hoe u dit kunt doen: https://codex.wordpress.org/Navigation_Menus

Aangepaste pagina

Met WP kun je standaard pagina's en berichten maken. Het regelt het uiterlijk van de pagina via de page.php sjabloon bestand.

Hoewel dit bestand van invloed is op alle afzonderlijke pagina's in uw thema, kunt u hun lay-out en uiterlijk wijzigen. Het bewerken van deze aangepaste paginasjablonen in WP vereist een beetje HTML, PHP en CSS, maar nogmaals, het zou redelijk eenvoudig moeten zijn.

index.php

Deze sjabloon is de standaard fallback-sjabloon in WordPress voor het weergeven van elke pagina wanneer de sjabloonhiërarchie geen andere pagina kan vinden die overeenkomt met uw opgegeven parameters.

U moet dit gebruiken om te voorzien in alles wat niet wordt afgehandeld door de rest van de sjabloonbestanden.

Archief.php

De archive.php sjabloon wordt gebruikt om tag-, auteur-, categorie- en andere aangepaste archiefpagina's weer te geven.

Het maken van een archiefpagina kan een goede manier zijn om al uw inhoud op één pagina te verzamelen.

Categorie

Bij WP-webontwikkeling is het niet ongebruikelijk om verschillende sjablonen te gebruiken voor categorieën, aangepaste berichttypen, taxonomieën en tags. Door verschillende sjablonencategorieën te maken, kunt u verschillende functies op elke categoriepagina opnemen.   

Een typisch category.php-sjabloon ziet er ongeveer zo uit:

/ **

* Een eenvoudige categoriesjabloon

*/

get_header(); ?>

// Controleer of er berichten zijn om weer te geven

if ( have_posts() ) : ?>

Categorie:

// Geef optionele categoriebeschrijving weer

 if ( category_description() ) : ?>

// De lus

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

door

 <?php

  comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', 'Reacties gesloten');

?>

<?php endwhile;

anders:?>

Sorry, er kwamen geen berichten overeen met je criteria.

Zijbalk.php

De zijbalk is het gebied waar u uw widgets in een WP-thema kunt plaatsen. Meestal staat het aan de rechterkant of onder uw inhoud op alle pagina's.

Zijbalken worden gebruikt om dingen weer te geven die niet rechtstreeks verband houden met de inhoud van het bericht of de pagina, maar dingen zoals links naar verschillende delen van uw site, aanmeldingsformulieren, advertenties, links naar sociale media enzovoort.

Meestal wordt de zijbalk gebruikt in combinatie met WP-widgets.   

Hier leest u hoe u een voor widgets geschikte zijbalk aan uw thema kunt toevoegen:

functie wpb_widgets_init() {

    register_sidebar( matrix(

        'name' => __( 'Hoofdzijbalk', 'wpb' ),

        'id' => 'zijbalk-1',

        'description' => __( 'De hoofdzijbalk verschijnt rechts op elke pagina behalve de voorpaginasjabloon', 'wpb' ),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'na_titel' => ' ',

    ));

    register_sidebar( matrix(

        'name' =>__( 'Voorpagina zijbalk', 'wpb'),

        'id' => 'zijbalk-2',

        'description' => __( 'Verschijnt op de statische voorpaginasjabloon', 'wpb' ),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'na_titel' => ' ',

    ));

    }

add_action( 'widgets_init', 'wpb_widgets_init');

Individuele berichtpagina's (single.php)

Stel dat u een andere sjabloon of lay-out wilt gebruiken voor een specifiek artikel op uw website.

Hiervoor moet je een aangepast sjabloon voor één bericht maken. Dit is vergelijkbaar met het maken van aangepaste pagina's. Door de daar toegepaste basisrichtlijnen te volgen, kunt u ook gemakkelijk individuele berichten maken. 

Een uitgelichte afbeelding maken

Om ondersteuning voor aanbevolen afbeeldingen toe te voegen, voegt u eenvoudig de volgende code toe aan het thema: functions.php file:

add_theme_support ('post thumbnails'); 

Nu kunt u naar uw pagina's of berichten gaan en controleren of de optie voor aanbevolen afbeeldingen beschikbaar is. De kans is groot dat WP het niet automatisch weergeeft, dus om de afbeelding weer te geven, moet u mogelijk kleine wijzigingen aanbrengen in uw sjablonen waar pagina's en berichten worden weergegeven door deze code toe te voegen:

Opdelen 

Met deze functie kunt u heen en weer bladeren door uw inhoudspagina's. U kunt deze functie gebruiken bij het bekijken van berichtenlijsten met meer items dan op één pagina passen of wanneer u langere berichten wilt opsplitsen met behulp van de label.

De eenvoudigste vorm van paginering is het plaatsen van de posts_nav_link().functie in de sjabloon na de lus. Dit genereert links naar zowel de volgende pagina met berichten (wanneer je berichtenlijsten opsplitst) als naar de vorige berichten, indien van toepassing.  

posts_nav_link();

Je kunt ook next_posts_link & prev_posts_link gebruiken om te bepalen waar de link naar de vorige en volgende berichtenpagina wordt weergegeven.

volgende_posts_link();

vorige_posts_link();

Heb je vragen? Stel ze hier. 

Opmerkingen zijn een essentieel onderdeel van elke blog of pagina. Het geeft websitebezoekers de mogelijkheid om contact met u op te nemen, feedback te geven, vragen te stellen en in het algemeen een diepere band met uw website en uw inhoud te creëren.

Alle opmerkingen worden weergegeven in het beheerdersgedeelte en er zijn verschillende functies die u kunt toevoegen, van het inschakelen van alleen opmerkingen voor specifieke gebruikers tot het modereren van opmerkingen.

U kunt het bestand comments.php gebruiken om het uiterlijk van opmerkingen in uw thema aan te passen.

Andere pagina's en bestanden 

Afhankelijk van uw behoeften, kunt u verschillende pagina's en bestanden vinden of maken en deze aanpassen aan uw voorkeuren door dezelfde of vergelijkbare richtlijnen te gebruiken die hierboven zijn vermeld. 

Ouder/kind-thema gebruiken

Hoofdthema

Bovenliggende thema's in WP zijn thema's die door andere thema's als 'ouders' worden aangemerkt, namelijk onderliggende thema's.

Een kindthema wordt gebruikt om ontwerpers en ontwikkelaars in staat te stellen om thema's aan te passen zonder de mogelijkheid om het bovenliggende thema bij te werken te verbreken. Dit komt omdat als een ontwikkelaar de originele themabestanden wijzigt, de wijzigingen verloren gaan bij het uitvoeren van een thema-update.

Bovenliggende thema's geven hun kenmerken en functionaliteit echter door aan hun onderliggende thema's. Het staat ontwikkelaars vrij om wijzigingen aan te brengen in de functionaliteit en functies van het onderliggende thema zonder de upgradebaarheid van het bovenliggende thema te beïnvloeden.

Kind thema

Onderliggende thema's erven de functionaliteit van de bovenliggende thema's. Ze worden voornamelijk gebruikt om een ​​bestaand thema aan te passen zonder de eerder toegevoegde aangepaste styling te verliezen tijdens thema-updates.  

Child-thema's versnellen het ontwikkelingsproces omdat het gemakkelijk is om er wijzigingen mee aan te brengen.

De meeste thema's maken een child-thema en maken dit beschikbaar bij het thema, zodat iedereen die het thema gebruikt het kan aanpassen via het child-thema. We definiëren hoe we een child-thema maken, in ons artikel hier.

Ontwikkelingskaders gebruiken

Deze term verwijst naar de codebibliotheken die worden gebruikt bij de ontwikkeling van thema's. 

Ontwikkelingskaders zijn gemaakt om te dienen als sjablonen voor bovenliggende thema's met alle functionaliteit. In principe blijven frameworks, net als bij bovenliggende thema's, onaangeroerd, terwijl ontwikkelaars wijzigingen in onderliggende thema's kunnen uitvoeren.

Dit maakt de ontwikkeling sneller en vereenvoudigt het verwijderen van bugs in specifieke themaframeworks. Opmerkelijke ontwikkelingskaders omvatten de Genesis themakader, Themify en Divi by Elegant Themes.

Afronden hoe u een WordPress-thema maakt

Het bovenstaande is een gedetailleerde stapsgewijze handleiding om aan de slag te gaan met het ontwikkelen van uw eigen aangepaste WordPress-thema.

Al met al, hoewel je een goed begrip van WordPress en PHP moet hebben, is het niet zo'n veeleisend proces. Het is belangrijk om de basisprincipes van webontwikkeling te kennen en u kunt de WordPress-kern in meer detail begrijpen terwijl u zich ontwikkelt. Als je nog geen zin hebt om de taak aan te pakken, is het goed, neem de tijd en experimenteer een beetje.

Als je eenmaal een paar fouten hebt gemaakt, begin je steeds meer te leren. Het is ook goed om de codebasis van andere populaire thema's te bekijken om te begrijpen wat ze aan het doen zijn en om een ​​goed idee te krijgen van logische praktijken.

Laat het ons weten als je vragen hebt in de reacties hieronder.

Over de auteur

Auteur: David AttardWebsite: https://www.linkedin.com/in/dattard/E-mail: David@collectiveray.com

David heeft de afgelopen 21 jaar in of rond de online en digitale industrie gewerkt. Hij heeft ruime ervaring in de software- en webontwerpindustrie met behulp van WordPress, Joomla en de niches eromheen. Hij heeft gewerkt met softwareontwikkelingsbureaus, internationale softwarebedrijven, lokale marketingbureaus en is nu hoofd Marketing Operations bij Aphex Media - een SEO-bureau. Als digitale consultant ligt zijn focus op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door gebruik te maken van een combinatie van hun website en digitale platforms die vandaag de dag beschikbaar zijn. Zijn mix van technologische expertise gecombineerd met een sterk zakelijk inzicht geeft zijn geschriften een concurrentievoordeel.