WordPress-themaontwikkeling: Een gids voor beginners om van nul een custom thema te maken

Forbereidende werkzaamheden en opzet van de ontwikkelingsomgeving

Voordat je met het schrijven van code begint, is het van cruciaal belang om een efficiënte en professionele lokale ontwikkelingsomgeving op te zetten. Dit zorgt niet alleen voor de mogelijkheid om vrij te testen zonder de online website te beïnvloeden, maar biedt ook de mogelijkheid om ontwikkelingsprocessen te versnellen met moderne hulpmiddelen.

Allereerst moet je op je lokale computer een geïntegreerde serveromgeving installeren. Voor Windows-gebruikers:XAMPP或WampServerDit is een veel voorkomende keuze; macOS-gebruikers kunnen dit ook overwegen.MAMP或Local by FlywheelDeze toolkits combineren de Apache-server, de MySQL-databas en de PHP-omgeving met elkaar, zodat ze met één drukknop kunnen worden geïnstalleerd en gebruikt kunnen worden.

Volgens de instructies moet je eerst de meest recente versie van de WordPress-core-bestanden downloaden en deze vervolgens uitpakken in de wortelmap van je lokale server (bijvoorbeeld de map waarin je website is opgeslagen).htdocsVoltooi het standaardproces van “vijf minuten installeren” om een lokale WordPress-site voor ontwikkeling te creëren. Het wordt sterk aanbevolen om ook een code-editor te installeren, bijvoorbeeld...Visual Studio Code、PhpStorm或Sublime TextZe bieden uitstekende ondersteuning voor PHP, HTML, CSS en JavaScript, met onder andere syntaxhighlighting, codehinten en mogelijkheden voor het opsporen en oplossen van fouten (debugging).

Aanbevolen leesmateriaal De ultieme gids voor het ontwikkelen van WordPress-thema's: van beginnersniveau tot geavanceerde maatwerkoplossingen.。

Ten slotte moet je, om in real time te kunnen zien hoe codeveranderingen het uiterlijk van de website beïnvloeden, de ontwikkelaarstool van je browser gebruiken (die je opent met F12). Het zijn de “Element Inspector” en de “Console”-panelen waar je goed kennis van moet hebben; deze zijn onmisbaar voor verdere ontwikkeling.

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

Verstehen van de basisstructuur van het thema en de belangrijkste bestanden

Een zeer basist WordPress-thema werkt al met maar twee bestanden, maar een volledig functionerend, standaardvoldoend thema bestaat uit een georganiseerde verzameling van specifieke bestanden. Het begrijpen van de rol van deze bestanden is essentieel voor het ontwikkelen van WordPress-themen.

De vereiste documenten voor het onderwerp.

Elk onderwerp moet bevaten:style.css和index.phpDeze twee bestanden.style.cssHet is niet alleen een stylesheet, maar ook een soort “identiteitsbewijs” van het thema. De commentaarblok bovenin het bestand bevat de meta-informatie van het thema, en WordPress gebruikt deze informatie om het thema in de achtergrond te herkennen en te weergeven.

/*
Theme Name: 我的第一个自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

index.phpDit is het standaardtemplatebestand voor het thema en tevens het back-uptemplate voor alle pagina's. Als WordPress geen specifiekere templatebestand kan vinden (bijvoorbeeld...single.phpAls dit het geval is, wordt de oude versie van het product of de dienst weer gebruikt.index.php。

Lagen van templatebestanden en de functies die ze bevatten

WordPress gebruikt een systeem met verschillende niveaus van templates om te bepalen welk templatebestand wordt gebruikt voor verschillende soorten verzoeken. Bijvoorbeeld wanneer je een blogartikel bezoekt, zal WordPress op volgorde kijken welk template beschikbaar is.single-post.php -> single.php -> index.phpHet begrijpen van deze structuur is van cruciaal belang voor het creeren van een nauwkeurige lay-out van de pagina.

Aanbevolen leesmateriaal Een uitgebreide gids voor websiteontwikkeling: het volledige proces en de kerntechnologieën voor het opbouwen van een professionele website vanaf nul.。

Om de code opgeruimd en onderhoudbaar te houden, moet je de gemeenschappelijke delen van de pagina (zoals de header, footer en sidebar) in aparte bestanden opslaan en deze gebruiken met de door WordPress beschikbare include-functies. De drie meest gebruikelijke include-functies zijn:
* get_header()Introducerenheader.phpHet document.
* get_footer()Introducerenfooter.phpHet document.
* get_sidebar()Introducerensidebar.phpHet document.

In jouw...index.phpDe typische structuur is als volgt:

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 输出文章内容
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Het maken van themaplagen en cycli

De “dynamische” eigenschappen van het thema komen vooral tot uiting in de mogelijkheid om inhoud uit de database te halen en te weergeven. De kern van dit proces is de “WordPress-loop” (WordPress loop).

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

Het werkingss principe van de hoofdloop (main loop)

“Cycloon” is een stuk PHP-code dat controleert of er op de huidige pagina “artikelen” (in alle mogelijke betekenissen: alle artikelen, pagina’s of zelfgemaakte artikeltypes) zijn die moeten worden weergegeven. Als dat het geval is, wordt elke artikel doorlopen en worden de gegevens van deze artikelen gebruikt voor de template-taggen. Een standaardstructuur voor een dergelijke cyclus is als volgt:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>

endwhile; ?
    <p>Het spijt ons, maar er is geen inhoud gevonden.</p>
<?php endif; ?>

In deze cyclus,the_title()、the_content()、the_permalink()De template-taggen worden gebruikt om de specifieke informatie van het huidige artikel af te drukken.

Maak een bestand met veelgebruikte sjablonen.

Op basis van de laagstructuur van de templates moet je voor verschillende soorten inhoud aparte templatebestanden maken, zodat je een nog preciezer controle over het uiterlijk en de functionaliteit van de content kunt hebben.
* header.phpBevat een verklaring over de type van het document.Regio (via)wp_head()De functie bevat de invoer van de essentiële CSS- en JS-bestanden, evenals de gemeenschappelijke elementen aan de bovenkant van de website (zoals het logo en de hoofdnavigatie).
* footer.phpHet bevat de gemeenschappelijke delen aan de onderkant van de website (zoals de auteursrechtnotitie), evenals...wp_footer()Function call (gebruikt om de benodigde scripts voor de voetnoot te invoeren).
* single.phpWordt gebruikt om een enkele blogartikel te weergeven.
* page.phpWordt gebruikt om afzonderlijke pagina's te weergeven.
* front-page.phpAls deze bestaat, wordt deze gebruikt als de statische homepage van de website.
* functions.phpDit is geen template-bestand, maar een “functiesbibliotheek” voor het thema. Het wordt gebruikt om ondersteuning voor thema's toe te voegen, menu's en sidebar's te registreren, en meer.

Aanbevolen leesmateriaal Van nul beginnen: een volledig handboek voor het ontwikkelen van WordPress-plug-ins en tips en beste praktijken。

Voeg de mogelijkheid toe om thema's en stijlen aan te passen.

Nadat een basis-themaframewerk is opgebouwd, is de volgende stap om functionaliteiten en personalisatie toe te voegen. Dit gebeurt voornamelijk door...functions.php和style.cssOm dit te realiseren…

Functies uitbreiden via functions.php

functions.phpDe bestanden worden automatisch geladen wanneer het thema wordt geïnstalleerd, waardoor het een veilige omgeving is om functies te toevoegen of het standaardgedrag te wijzigen. Het eerste stap is meestal om de kernfuncties van WordPress te activeren.add_theme_support()De functie is voltooid.

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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面的“特色图像”
    add_theme_support( 'post-thumbnails' );
    // 让WordPress管理文档<title>标签
    add_theme_support( 'title-tag' );
    // 为主题添加HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 启用自定义logo功能
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Een andere belangrijke taak is het registreren van het navigatiemenu en de sidebar (het gebied met extra functies).register_nav_menus()Een functie wordt gebruikt om de positie van de menu-items te bepalen, die vervolgens in het template worden gebruikt.wp_nav_menu()Roep het op.

function my_first_theme_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_menus' );

Stijlen en scripts schrijven

在style.cssBehalve de commentaren aan de top, kun je net zoals je gewone CSS schrijft, stijlen toevoegen aan je HTML-structuur. Voor een responsief ontwerp is het heel belangrijk om mediaqueries te gebruiken.

Om custom JavaScript-bestanden of extra CSS-bestanden op de juiste manier in te voegen, is het beste om dit te doen via…wp_enqueue_scriptsDeze ‘haak’ wordt gebruikt om de vereisten te vervullen. Dit zorgt ervoor dat de afhankelijkheden correct zijn en dat dubbele laden wordt voorkomen.

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

Samenvatting

Het ontwikkelen van WordPress-themes is een geleidelijk proces dat van de structuur tot de details loopt. Allereerst moet je een stabiele lokale ontwikkelomgeving opzetten en een goed begrip krijgen van de bestandsstructuur van het thema en het systeem van template-lagen. Vervolgens kun je door de kernmechanismen van “WordPress-cycles” te beheersen, de inhoud van de website dynamisch weergeven.functions.phpDe bestanden bieden ondersteuning voor verschillende functies voor je thema en geven het een unieke visuele uitstraling en interactief gebruiksgemak dankzij professionele CSS- en JavaScript-programmering. Door deze stappen te volgen, kun je van een simpel ontwerp een geavanceerd product maken.index.php和style.cssWe beginnen met het stap voor stap bouwen van een volledig functionerende, standaardvoldoende WordPress-thema op maat.

Veelgestelde vragen (FAQ)

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

Ja, het is essentieel om de basis van PHP te beheersen. WordPress is namelijk gemaakt in PHP, en de thema- en sjablonen bestaan voornamelijk uit PHP-code die de logica beheert en data ophaalt en weergeeft. Je moet ten minste de basisconcepten begrijpen, zoals variabelen, functies, conditionele statements en cycli. HTML en CSS vormen de basis voor het bouwen van de front-end-omgeving.

In welk opzicht verschillen de functions.php-bestanden van het thema en de plugins?

functions.phpDe functies in het bestand zijn gebonden aan het huidige thema. Als je het thema wijzelt, worden deze functies ook niet meer beschikbaar. Het is handig om functies op te slaan die nauw verbonden zijn met het visuele uiterlijk en de lay-out van het thema (bijvoorbeeld het registratiemenu, het definiëren van een sidebar of het toevoegen van themaondersteuningsopties). Plugins daarentegen bieden functies die onafhankelijk van het thema zijn en zijn bedoeld om bepaalde mogelijkheden voor de website te toevoegen (bijvoorbeeld contactformulieren of SEO-optimalisatie); deze functies blijven beschikbaar als je het thema wijzelt. Een goede regel is: als een functie alleen bedoeld is voor het uiterlijk van de website, plaats je deze in het thema; als de functie een algemene mogelijkheid voor de website is, kun je er een plugin van maken.

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

Het ondersteunen van internationalisatie (i18n) voor je thema is een belangrijke stap in professionele ontwikkeling. Je moet in je code alle tekststringen die worden gebruikt door de gebruiker voorzien van vertaalfuncties, zodat ze kunnen worden vertaald in andere talen.__('文本', 'text-domain')或_e('文本', 'text-domain')Instyle.cssComment blocks andfunctions.phpIn de tekstveldfuncties moet je de instellingen correct aanpassen.Text Domain(Dit tekstveld) moet overeenkomen met de naam van je themapagina. Nadat je de code hebt voorbereid, kun je tools als Poedit gebruiken om de tekst te genereren..potTemplatebestanden, die worden gecreëerd door de vertalers..po和.moTaalbestand.

Hoe kun je tijdens het ontwikkelingsproces PHP-fouten die kunnen optreden opsporen en verhelpen?

Tijdens de ontwikkelingsfase is het aan te raden om de debug-modus van WordPress in te schakelen. Dit helpt je om fouten snel te lokaliseren. Open de bestand in het root-verkeer van je WordPress-installatie…wp-config.phpVind de relevante instellingen in het bestand en wijzig deze zoals hieronder wordt beschreven:

define( 'WP_DEBUG', true ); // 开启调试模式
define( 'WP_DEBUG_LOG', true ); // 将错误日志记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误（避免用户看到）

Nadat deze instellingen zijn gemaakt, worden PHP-fouten, waarschuwingen en berichten opgeslagen.wp-content/debug.logDeze functie is beschikbaar in het bestand. Zorg ervoor dat de debug-modus wordt uitgeschakeld voordat het onderwerp wordt gepubliceerd.