Een introductie tot het ontwikkelen van WordPress-thema's: van nul tot een succesvolle publicatie.

Forbereiding van het ontwikkelingsomgeving voor WordPress-themes

Voordat je met het schrijven van code begint, is het van belang om een stabiele en efficiënte lokale ontwikkelingsomgeving op te zetten. Dit zorgt niet alleen voor het mogelijkheid om offline te werken, maar beschermt je ook tegen de risico's die kunnen voorkomen bij het testen op online servers.

Opzetten van een lokale ontwikkelingsomgeving

De meest gebruikelijke manier is om geïntegreerde lokale serverpakketten te gebruiken, zoals XAMPP, MAMP of Laragon. Met deze tools worden Apache, MySQL en PHP in één stap geïnstalleerd, waardoor het moeilijke configuratieproces wordt vermeden. Voor het ontwikkelen met WordPress wordt het aan te raden om een omgeving te gebruiken die speciaal is aangepast aan WordPress, zoals Local by Flywheel of DesktopServer. Deze bieden handige functies voor het maken van websites, beheersen van databases en wisselen van PHP-versies.

Keuze van kerninstrumenten en editors

Je hebt een code-editor nodig. Ik raad je aan om Visual Studio Code, PhpStorm of Sublime Text te gebruiken. Ze beschikken allemaal over goede functies voor het opvallen van code, automatische suggesties voor invoer en het beheersen van projecten. Vooral Visual Studio Code is zeer handig in combinatie met plugins voor WordPress, zoals WordPress Snippet en PHP Intelephense, waardoor je de ontwikkelingsefficiëntie aanzienlijk kunt verbeteren.

Aanbevolen leesmateriaal De ontwikkeling van WordPress-plug-ins leren: bouw je eerste functionele uitbreiding vanaf nul.。

Daarnaast is het versiebeheerssysteem Git onmisbaar. Ook als je een zelfstandig ontwikkelaar bent, is het een goede gewoonte om Git te gebruiken om codeveranderingen bij te houden, branches aan te maken en projecten te back-uppen. Je kunt een lokale repository initialiseren en overwegen om deze later op een remote-hostingplatform zoals GitHub, GitLab of Bitbucket te publiceren.

UltaHost WordPress-hosting

30-daagse garantie voor het terugbetalen van het geld, onbeperkt bandbreedte- en databestand, gratis DDoS-beveiliging, en een prijsvoordeel van 50% bij een aankoop van 3 jaar.

toegangspagina

Het begrijpen van de basisstructuur van een WordPress-thema

Een standaard WordPress-thema bestaat uit een map met bepaalde bestanden, die zich bevindt in een specifieke locatie. /wp-content/themes/ In de map vind je twee essentiële bestanden. Zelfs voor het simpelste thema zijn deze bestanden vereist.

Het bestand met de stijlregels (stylesheet) voor het thema

style.css Het zijn de “identiteitsbewijzen” van het thema en de bestanden met de definitie van het uiterlijk. De blok met commentaren in het hoofddeel (header) bevat alle meta-informatie over het thema, en deze informatie wordt door WordPress gelezen en weergegeven op de achtergrondpagina “Uiterlijk” -> “Themata”. Een basisvoorbeeld van een header-commentaar is als volgt:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习 WordPress 主题开发的入门主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

In deze bestand ga je verder met het schrijven van alle CSS-stijlregels om het uiterlijk van de front-end van de website te bepalen, zoals fonten, kleuren, lay-out en dergelijke.

Het kernige indextemplatebestand

index.php Dit is het standaardtemplate voor het thema en ook vereist. Wanneer WordPress geen specifiekere templatefile kan vinden… single.php 或 page.phpWanneer dit wordt gebruikt, wordt het gebruikt om de pagina te renderen. Het bevat meestal de template-taggen van WordPress, waarmee de header, de inhoud van de artikelen (in een loop), de sidebar en de footer worden opgeroepen.

Aanbevolen leesmateriaal Een volledige handleiding voor het ontwikkelen van WordPress-thema's: van beginner tot professional, met essentiële vaardigheden voor het bouwen van een gepersonaliseerde website.。

Naast deze twee bestanden bevat een volledig functionerend thema meestal ook de volgende template-bestanden:
* header.phpDe header-regio van de website (<head> (En de bovenste navigatie.)
* footer.phpDe voetnootgebied van de website.
* functions.php:Dit wordt gebruikt om functies als thema's, registratie-menu's en sidebar's toe te voegen.
* page.phpWordt gebruikt om statische pagina's te renderen.
* single.php:Dient voor het weergeven van één artikel.
* archive.php:Dient voor het weergeven van categorieën, tags en andere archiveringspagina's.

Vanaf nul je eerste thema maken

Laten we nu samen een zeer simpel thema maken, om te begrijpen hoe de verschillende onderdelen met elkaar samenwerken.

Maak basisbestanden en mappen op.

Allereerst: op je lokale WordPress-site… /wp-content/themes/ In de map moet je een nieuwe map maken met de naam my-first-themeVervolgens maak je twee lege bestanden in die map:style.css 和 index.phpSchrijf de CSS-headcommentaren die in de vorige sectie worden genoemd over: style.css Het document.

hosting.com gedeelde hosting

Hoge prestaties met AMD EPYC CPU's, NVMe SSD opslag en LiteSpeed, 24/7 deskundige interne ondersteuning, geavanceerde beveiligingsmaatregelen waaronder SSL, bescherming tegen brute kracht, malware en DDoS, besparingen tot 73%

toegangspagina

Een basisindextemplate bouwen

Volgens de opgave moet je nu de inhoud van het document bewerken (editen). index.php Een file. De meest basale versie kan bestaan uit oproepen van de kernfuncties van WordPress. Eerst gebruiken we… get_header() Een functie wordt gebruikt om de header-inhoud te introduceren.

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 在这里输出文章内容
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

<?php get_footer(); ?>

Deze code implementeert de kernfunctie van WordPress, oftewel “The Loop”. De code controleert of er artikelen zijn, en vervolgens worden alle artikelen doorlopen en worden de titel en inhoud van elk artikel weergegeven. get_footer() Voeg een voetnoot toe.

Voeg functies en een registratie-menü toe

Om het onderwerp praktischer te maken, hebben we… functions.php Deze bestand bevat informatie die we kunnen gebruiken via WordPress. add_theme_support() Er zijn functies beschikbaar om themafuncties te activeren, zoals artikelafbeeldingen (promotieafbeeldingen) en een aangepast logo.

Aanbevolen leesmateriaal De ultieme gids voor het ontwikkelen van WordPress-thema's: van nul tot een professioneel webthema.。

<?php
function my_first_theme_setup() {
    // 让主题支持文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册一个侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( '在此添加小工具。', 'my-first-theme' ),
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

En vervolgens moet je… header.php Gebruikt in het bestand wp_nav_menu() Een functie om het menu dat je hebt geregistreerd te weergeven.

Verder ontwikkelen van het thema en voorbereiden op de publicatie

Nadat het basisthema is afgerond, kun je de functionaliteit en flexibiliteit ervan versterken met meer gedetailleerde templates en hooks.

InterServer gedeelde hosting

Shared hosting $2.50 USD per maand, eerste maand $0.1 USD promo code tryinterserver, 461 cloud apps scripts, een klik te installeren.

toegangspagina

De structuur wordt geoptimaliseerd door gebruik te maken van templateonderdelen.

Template Parts zijn een goede manier om herbruikbare onderdelen van een template (zoals artikelen samenvattingskaarten) te modulariseren. Je kunt dus gemakkelijk nieuwe onderdelen van het template maken. template-parts/content.php De code die de inhoud van elke artikel weergeeft, moet in de loop worden geplaatst. Daarna… index.php In de loop, wordt dit gebruikt. get_template_part() Je kunt de functie oproepen met de volgende code:

while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_type() );
endwhile;

Utiliseer actie- en filterhooks

Hooks vormen de basis van het plugin-systeem in WordPress en worden ook veel gebruikt bij het ontwikkelen van thema's. Action Hooks bieden de mogelijkheid om code op bepaalde momenten in te voegen, bijvoorbeeld om extra inhoud toe te voegen naast de artikelinhoud. Filter Hooks bieden de mogelijkheid om gegevens te bewerken, bijvoorbeeld de lengte van de artikel samenvatting te veranderen.

Als voorbeeld: wp_enqueue_scripts Action hooks worden gebruikt om JavaScript- en CSS-bestanden op de juiste manier in te lezen.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Voer de eindtesten uit en pak het product op.

Voor het publiceren moet alles grondig worden getest. Zorg ervoor dat het thema goed wordt weergegeven in verschillende browsers (Chrome, Firefox, Safari, Edge). Controleer ook of de responsieve lay-out goed werkt op mobiele apparaten en op computers. Schakel in de WordPress-beheeromgeving de debug-modus in. wp-config.php Maak een nieuwe map in de app Instellingen. define( 'WP_DEBUG', true );Herstel alle PHP-waarschuwingen en fouten. Controleer of alle kernfuncties van WordPress (zoals commentaren, zoekfunctie en paginering) nog steeds goed werken.

Ten slotte moet u alle onnodige bestanden verwijderen, zoals logbestanden en back-upbestanden die zijn gemaakt tijdens het ontwikkelingsproces. Comprimeer de hele themapolder in een ZIP-bestand; dit ZIP-bestand kunt u vervolgens gebruiken voor het installeren.

Samenvatting

Het ontwikkelen van WordPress-themes begint met het begrijpen van de basisstructuur…style.css, index.phpHet proces begint met een algemene inleiding, waarna men steeds verder gaat naar de details van de template-structuur, functionele hooks en modulaire onderdelen. Dit wordt gerealiseerd door een lokale omgeving op te bouwen, essentiële bestanden te creeren en deze onderdelen te gebruiken. functions.php Door extra functies te toevoegen en deze uiteindelijk grondig te testen, kun je een thema bouwen dat voldoet aan de vereisten en over een rijke functionaliteit beschikt. Nadat je deze kernconcepten onder de knie hebt, zul je in staat zijn om het uiterlijk en de functionaliteiten van elke website naar wens te customizen. Dit legt ook een solide basis voor het verder leren van meer geavanceerde frameworks, zoals Underscores en Sage.

Veelgestelde vragen (FAQ)

Is het nodig om PHP te beheersen om een WordPress-thema te ontwikkelen?

Ja, om WordPress-themes verder te ontwikkelen, is het essentieel om PHP te beheersen. WordPress is immers in PHP geschreven, en alle templatebestanden (.php) bevatten PHP-code die wordt gebruikt om inhoud dynamisch te genereren. Je kunt de styling van sub-themes wel zonder veel PHP-kennis veranderen, maar om eigen templates te maken, complexe functies te implementeren of de querylogica aan te passen, zijn kennis van PHP onmisbaar.

Wat doet het function.php-bestand van het thema?

functions.php De bestanden vormen het “functiecentrum” van een thema. Ze worden gebruikt om functies van het thema te toevoegen of te bewerken, zonder dat de kernbestanden hoeven te worden veranderd. De belangrijkste taken van deze bestanden zijn onder andere: het activeren van themafuncties (zoals speciale afbeeldingen of aangepaste achtergronden), het registreren van navigatie-menues en sidebar-tools, het stap voor stap invoeren van styleheets en scriptbestanden, het definiëren van aangepaste functies, en het gebruik van acties en filter-haken om het standaardgedrag van WordPress te bewerken.

Wat is een subthema en waarom zou je het gebruiken?

Een subthema is een thema dat afhankelijk is van een ander thema (het parentthema). Het erft alle functies, stijlen en templatebestanden van het parentthema, maar biedt je de mogelijkheid om bepaalde onderdelen veilig te overschrijven of nieuwe functies toe te voegen. Het belangrijkste doel van subthema's is om je eigen aanpassingen te behouden wanneer het parentthema wordt bijgewerkt. Als je rechtstreeks de bestanden van het parentthema wijzigt, worden deze nieuwe aanpassingen overschreven; de aanpassingen in het subthema blijven echter behouden. Dit is de beste praktijk voor het personaliseren en upgraden van thema's.

Hoe zorg ik ervoor dat mijn thema ondersteunt wordt bij meertalige vertalingen?

Om een thema te ondersteunen voor meerdere talen (internationaal en lokaal, oftewel i18n/l10n) zijn er twee belangrijke stappen te ondernemen. Allereerst moet alle tekststringen in het thema worden omgevat met de vertaalfuncties van WordPress. esc_html__( ‘文本’, ‘text-domain’ ) 或 _e( ‘文本’, ‘text-domain’ )Ten tweede: gebruik tools als Poedit om een .pot-templatefile te genereren. De vertaler kan vervolgens op basis van deze templatefile .po- en .mo-bestanden maken (bijvoorbeeld zh_CN.po). style.css De koppen zijn correct ingesteld. Text Domain Dat is cruciaal.