WordPress-themaontwikkeling voor beginners: bouw je eerste custom-thema vanaf nul

Voor elke ontwikkelaar die de uitstraling en functionaliteiten van een website op diepe wijze wilt aanpassen, is het zeer waardevol om te leren hoe je WordPress-themes ontwikkelt. In tegenstelling tot het gebruik van bestaande themes, biedt het maken van eigen themes de volledige controle, zodat je een unieke website kunt creëren die optimaal presteert en precies voldoet aan jouw behoeften. In dit artikel worden de belangrijkste stappen beschreven voor het maken van je eerste eigen WordPress-theme, van het opzetten van je omgeving tot het maken van de basis模板bestanden.

Forbereiding van de ontwikkelingsomgeving en -tools

Voordat je begint met schrijven van code, heb je een geschikte lokale ontwikkelomgeving nodig. Dit maakt het mogelijk om tests uit te voeren en fouten te corrigeren zonder dat de online website hierbij wordt beïnvloed.

Configuratie van de lokale serveromgeving

Het wordt aanbevolen om gebruik te maken van geïntegreerde lokale serverpakketten, zoals XAMPP, MAMP (geschikt voor Mac) of Local by Flywheel. Deze tools installeren in één stap de Apache-server, de MySQL-database en PHP, waardoor je geen moeite meer hebt met het configureren. Neem XAMPP als voorbeeld: na de installatie hoef je de Apache- en MySQL-diensten alleen maar te starten, en je beschikt al over een lokale serveromgeving.

Code-editor keuze

Een krachtig code-editor is een essentieel hulpmiddel voor efficiënt ontwikkelen. Visual Studio Code (VS Code) is momenteel een zeer populaire keuze: het is gratis, licht in gebruik en beschikt over een grote verscheidenheid aan extensies en plugins, zoals PHP Intelephense (voor intelligente suggesties voor PHP-code), WordPress Snippet (voor codefragmenten) en Live Server (voor realtime-weergave van het resultaat van je werk). Dit zorgt voor een aanzienlijke verbetering van de ontwikkelingsefficiëntie.

Instalen van de kernbestanden van WordPress

In de rootmap van je lokale server (bijvoorbeeld de `htdocs`-map van XAMPP) maak je een nieuwe map voor het project, bijvoorbeeld `my-first-theme`. Daarna ga je naar de officiële WordPress-website om het meest recente WordPress-pakket te downloaden. Na het uitpakken van het pakket plaats je alle bestanden in de `my-first-theme`-map. Vervolgens bezoek je in een browser `http://localhost/my-first-theme` en volg je de bekende “ Vijf-minuten-installatie-instructies ” om WordPress te installeren. Zorg ervoor dat je de door jou ingevoerde gegevens (naam van de database, gebruikersnaam en wachtwoord) onthoudt, want deze worden later gebruikt voor het verbinden met de database.

De basisstructuur en -bestanden voor het maken van een thema:

Een WordPress-thema is in feite een map die zich bevindt in de map `wp-content/themes/`. Deze map bevat een reeks PHP-sjablonen, stijlbestanden (style sheets) en scriptbestanden met specifieke functies.

Thema-mappen en stylesheeten

Allereerst ga je naar de map `wp-content/themes/` in de map waar je lokale WordPress-installatie is opgeslagen. Creer daarin een nieuwe map met de naam van je thema, bijvoorbeeld `mycustomtheme`. In deze map moet je als eerste en belangrijkste bestand `style.css` maken. De commentaren aan het begin van dit bestand dienen niet alleen om informatie over het thema aan te geven, maar zijn ook essentieel voor WordPress om het thema te herkennen.

Aanbevolen leesmateriaal Een introductie tot het ontwikkelen van WordPress-thema's: hoe je vanaf nul je eigen aangepaste thema kunt maken.。

"""`css
/*
Thema-naam: Mijn eigen thema
Theme-URI: https://example.com/mycustomtheme
Auteur: Je Naam
Auteur-URI: https://example.com
Beschrijving: Dit is mijn eerste zelfgemaakte WordPress-thema, bedoeld om te leren hoe je websites ontwikkelt.
Versie: 1.0.0
Licentie: GPL v2 of een latere versie
Textdomein: mycustomtheme
*/
```

Core template files: index.php en functions.php

Maak een `index.php`-bestand. Dit is het standaard- en back-up-templaatbestand van het thema; als er geen andere, specifiekere templaten zijn, gebruikt WordPress dit bestand om de pagina te weergeven. In het begin kan dit bestand erg simpel zijn.

PHP
<!DOCTYPE html>
<html no numeric noise key 1000>
<head>
<meta charset="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1000>

<h1><a href="/nl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><p><strong>Deze website is bedoeld om u te informeren over de activiteiten van het bedrijf.</strong></p></p>

<?php
if ( have_posts() ) :
while ( have_posts() ) :
`the_post();`;
// Tijdelijk alleen de titel van het artikel weergeven
`the_title('`'<h2>', '</h2>' );
Het content-gedeelte();
`endwhile;`;
else :
echo '<p>Er is geen artikel beschikbaar.</p>';
endif;
?>

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

Volgens de instructies moet je nu de `functions.php`-bestand maken. Dit bestand vormt de “motor” van je thema en wordt gebruikt om functies toe te voegen, functies in te schakelen (bijvoorbeeld artikelafbeeldingen), en om stijlen en scripts te laden in een gestructureerde manier.

PHP
<?php
// Activeren van de functie voor speciale afbeeldingen in artikelen
`add_theme_support('post-thumbnails');`;

// Menueondersteuning toevoegen
`add_theme_support('menus');`;

// Registreer een positie voor een navigatieoptie
`register_navMenus(array(...));`
'primary' => __( '主导航菜单', 'mycustomtheme' ),
) );

// De hoofdstaalboom is correct geïmporteerd.
function mycustomtheme_enqueue_styles() {
wp_enqueue_style( 'mycustomtheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mycustomtheme_enqueue_styles' );
```

Aanbevolen leesmateriaal Een beginnetje met het ontwikkelen van WordPress-thema's: hoe je je eerste aangepaste thema vanaf nul maakt.。

Na het voltooien van de bovenstaande stappen, log in je in bij het WordPress-administratiepaneel. Ga naar “Uiterlijk” -> “Thema’s” en je moet “My Custom Theme” zien staan. Klik erop om het te activeren.

Templatestructuur en gebruikelijke templatebestanden

Het begrijpen van de template-hiërarchie in WordPress is essentieel voor het ontwikkelen van thema's. Het bepaalt welke template-bestand WordPress eerst zal gebruiken in afhankelijkheid van het type pagina-verzoek.

Het concept van template-hierarchie

WordPress zal, afhankelijk van het type pagina dat wordt weergegeven, op een bepaalde volgorde naar templatebestanden zoeken. Als je bijvoorbeeld een individuele blogpost bezoekt, zal WordPress eerst naar de volgende bestanden kijken: `single-post.php` -> `single.php` -> `singular.php` -> `index.php`. Zodra een bestand wordt gevonden, wordt dat gebruikt.

Maak een bestand met veelgebruikte sjablonen.

Op basis van deze structuur kun je beginnen met het maken van meer specifieke templatebestanden om je thema verder te verrijken.

• `header.php` en `footer.php`: Verplaats de code voor de kop en voet van `index.php` naar deze twee aparte bestanden, en gebruik vervolgens de functies `get_header()` en `get_footer()` in `index.php` om deze onderdelen te laden. Hierdoor wordt de code hergebruikt.
• `page.php`: gebruikt voor het weergeven van statische pagina's. Je kunt eerst de inhoud van `index.php` kopiëren om een nieuwe `page.php`-pagina te maken, en deze vervolgens aanpassen naar je eigen wensen.
• `single.php`: Dit bestand wordt gebruikt om een enkele artikkel te weergeven. Hier vindt u meestal informatie over de titel van de artikkel, de inhoud, de datum van publicatie, de auteur, de categorieën en de tags.
• `archive.php`: gebruikt om een lijst met archieveerde artikelen te weergeven, bijvoorbeeld op basis van categorie, tag, auteur of datum.
• `front-page.php`: Als deze bestand bestaat, wordt deze gebruikt als de startpagina van de website. De voorrang hiervan is hoger dan die van `home.php` en `index.php`. Hier kun je een unieke lay-out voor de startpagina ontwerpen.

Nadat je deze bestanden hebt gemaakt, zal je themastructuur duidelijker en professioneler zijn.

Aanbevolen leesmateriaal De ultieme gids voor het ontwikkelen van WordPress-thema's: van beginner tot expert.。

Stijlen en basisfuncties toevoegen

Een thema zonder enige styling is in feite ‘primitief’. Enkele basisfuncties kunnen de bruikbaarheid en gebruikerservaring van het thema aanzienlijk verbeteren.

Schrijven van basis-CSS-stijlen

Onder de commentaren aan het begin van `style.css` kun je je stijlregels gaan opstellen. Begin eerst met het herstellen van de browsergebaseerde standaardinstellingen, het instellen van de algemene fonten en kleuren, en vervolgens ga je stuk voor stuk stijlen ontwerpen voor de koppen, navigatie, het hoofdinhoudsgebied, de zijbalk (indien deze later worden toegevoegd) en de voetnoot. Gebruik responsieve mediaqueries om te zorgen dat de website goed wordt weergegeven op mobiele apparaten, tablets en computers.

"""`css
/* Basisreset en globale stijlen */
* {
`margin: 0;`;
`padding: 0;`;
`box-sizing: border-box;`;
}
body {
`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;`;
`line-height: 1.6;`;
Kleur: #333;
`background-color: #f4f4f4;`;
}
.container {
Breedte: 90%;
`max-width: 1200px;`;
`margin: 0 auto;`;
`padding: 20px;`;
}
/* Hoofdstijl */
header {
Achtergrond: #333;
Kleur: #fff;
`padding: 1rem 0;`;
`text-align: center;`;
}
/* Stijl van de navigatiemenu */
.primary-menu {
/* Stijl van je navigatiemenu */
}
```

Implementeer een navigatiemenu en een sidebar.

In het bestand `header.php` hebt u ruimte gereserveerd voor de menu-elementen. Gebruik de `wp_nav_menu()`-functie om het menu op te roepen dat is geregistreerd in het bestand `functions.php`.

PHP

```

Om een sidebar te toevoegen, moet je eerst een gebied voor sidebar-tools registreren in `functions.php`.

PHP
function mycustomtheme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'mycustomtheme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'mycustomtheme' ),
'before_widget' => '

',
'after_widget' => '

',
'before_title' =&gt; '<h3 class="widget-title">',
'after_title' =&gt; '</h3>',
) );
}
add_action( 'widgets_init', 'mycustomtheme_widgets_init' );
```

Vervolgens gebruikt u de `dynamic_sidebar( 'sidebar-1' )`-functie op de plek waar u de sidebar wilt hebben staan (bijvoorbeeld naast de inhoud van `index.php` of `single.php`).

Samenvatting

Door de stappen in dit artikel hebt u de eerste stap gezet in het bouwen van een basis-WooCommerce-thema vanuit nul. We hebben uitgelegd hoe u een lokale ontwikkelomgeving kunt opzetten, de kernbestanden van het thema (waaronder `style.css`, `index.php` en `functions.php`) kunt maken, de structuur van templates hebt begrepen en gebruikelijke templates hebt uitgebreid. Daarnaast hebt u basisstijlen, een navigatiemenu en een sidebar toegevoegd aan het thema. Dit is echter maar een beginpunt: u kunt verdergaan met het ontwikkelen van meer geavanceerde templates (zoals de zoekpagina `search.php` en de 404-pagina `404.php`), meer leren over de mogelijkheden van de WordPress-loop (`The Loop`), JavaScript-frames werken met uw thema of uw thema indienen in de officiële WordPress-themakatalog. Door continu te oefenen en het officiële ontwikkelingshandboek te gebruiken, kunt u uw skills verder verbeteren.

Veelgestelde vragen (FAQ)

Welke voorafgaande kennis is nodig om een WordPress-thema te ontwikkelen?

Je moet basiskennis hebben van HTML en CSS om de structuur en het uiterlijk van webpagina's te kunnen bepalen. Een begrip van PHP is ook belangrijk, omdat WordPress-themes voornamelijk bestaan uit PHP-sjablonen. Het kan handig zijn om enkele basiskennen van JavaScript te hebben om interactieve functies toe te voegen, maar dit is niet vereist voor het beginnen.

Waarom wordt mijn nieuwe thema niet weergegeven in de lijst met thema's in het WordPress-beheerpaneel?

Controleer eerst of je themapagina correct is opgeslagen in de map `wp-content/themes/`. Daarna moet je controleren of het bestand `style.css` zich bevindt in de root-map van deze map, en of de inhoud van de head-commentaren (zoals `Theme Name`) in het juiste format is opgesteld. Een van deze fouten kan ervoor zorgen dat WordPress je thema niet herkent.

Wat is de functie van het bestand functions.php?

Het bestand `functions.php` vormt het centrum van de functionaliteiten van je thema. Het wordt gebruikt om kernfuncties van WordPress te activeren of te wijzigen (bijvoorbeeld om opties voor themaondersteuning te toevoegen), navigatie-menues en sidebar-toolbars te registreren, CSS- en JavaScript-bestanden veilig te laden, en om aangepaste functies en filters te definiëren. Het is een cruciaal bestand voor het uitbreiden van de mogelijkheden van je thema.

Hoe maak ik mijn thema multilingual (meerdere talen ondersteunend)?

让主题支持多语言（国际化与本地化）是一项重要实践。你需要在`style.css`的头部和`functions.php`中设置正确的`Text Domain`（文本域），然后在代码中所有需要翻译的字符串处使用`__()`或`_e()`等翻译函数进行包裹。之后，可以使用像Poedit这样的工具生成`.po`和`.mo`语言文件，供翻译者使用。

Nadat de ontwikkeling is afgerond, hoe worden de thema's geïnstalleerd op een online website?

Er zijn twee principiele manieren om een thema te distribueren. De ene manier is om het themafolder rechtstreeks vanaf je lokale computer te uploaden naar de `wp-content/themes/`-map op de online website met behulp van een FTP/SFTP-client (bijvoorbeeld FileZilla). De andere, meer professionele manier is om het thema in een ZIP-bestand te pakken en dit vervolgens te installeren via het WordPress-beheerpaneel onder “Uiterlijk” -> “Themata” -> “Nieuw thema toevoegen” -> “Themaa uploaden”. Ongeacht welke methode je gebruikt, is het aan te raden om het thema eerst uitgebreid te testen in de testomgeving van de online website.