Een introductie tot het ontwikkelen van WordPress-thema's: hoe je je eerste aangepaste thema vanaf nul maakt.

Als je begint met het ontwikkelen van WordPress-themes, betekent dit dat je niet meer beperkt bent tot bestaande thema's, maar dat je een unieke look en functies voor je website kunt creëren op maat van je behoeften. In deze gids worden de belangrijkste stappen beschreven voor het bouwen van een basis-thema met alle nodige functies, van het voorbereiden van je omgeving tot het organiseren van je template-bestanden.

De basisstructuur en bestanden van een WordPress-thema

Een van de simpelste WordPress-themes bevat maar twee bestanden, die in de backend worden herkend. Het begrijpen van de functie van deze kernbestanden is de eerste stap in het ontwikkelen.

Style en informatiedefinieringsbestand voor het onderwerp

Het eerste vereiste bestand is…style.cssHet is niet alleen een stylesheet voor het thema, maar ook een “infoheader-bestand”. De commentaarblokken aan de bovenkant van dit bestand bepalen de metadata van het thema. zonder deze informatie kan WordPress je thema niet herkennen.

Aanbevolen leesmateriaal Van het begin tot de volmaaktheid: een compleet ontwikkelingsgids voor professionele WordPress-themes。

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

Onder de commentaarblok kun je stijlregels toevoegen, net zoals je dat doet met gewone CSS.

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

Core index template for the topic

Het tweede vereiste bestand isindex.phpDit is het standaardtemplatebestand voor het thema. Wanneer WordPress geen meer specifiek template kan vinden (bijvoorbeeld...single.php或page.phpWanneer dit nodig is, wordt het gebruikt om de pagina te renderen. Een van de simpelste voorbeelden…index.phpHet is mogelijk om alleen een cyclus te gebruiken die de blogartikelen oproept.

Naast deze twee bestanden bevat een volledig functionerend thema meestal ook:header.php(Header)footer.php(FOOTER)functions.php(Functies en methoden)single.php(Artikelpagina) enpage.php(Pagina) etc.

Het opzetten van een lokale ontwikkelomgeving.

Voor het beginnen met coderen is het van belang om een lokale ontwikkelomgeving op te zetten. Dit biedt je de mogelijkheid om te testen en te debuggen zonder dat de online website hierdoor wordt beïnvloed.

Gebruik lokale serversoftware.

Het wordt aanbevolen om gebruik te maken van geïntegreerde lokale serverpakketten, zoals Local by Flywheel, XAMPP of MAMP. Deze tools installeren Apache/Nginx, PHP en MySQL in één stap en bieden een intuïtieve beheeromgeving. Local by Flywheel is bijvoorbeeld speciaal ontworpen voor WordPress en maakt het mogelijk om snel een website op te zetten en een SSL-certificaat in te stellen.

Aanbevolen leesmateriaal Volledig handboek voor het ontwikkelen van WordPress-plug-ins: van nul op bouwen van professionele uitbreidingen。

WordPress installeren en een code-editor gebruiken

In de lokale serveromgeving download je het meest recente WordPress-installatiepakket en volg je de instructies om het te installeren. Je hebt ook een efficiënte code-editor nodig. Visual Studio Code is een uitstekende keuze; het beschikt over tal van extensies zoals PHP Intelephense (intelligente code提示), WordPress Snippet (codefragmenten) en Live Server (real-time preview), waardoor je ontwikkelingswerkzaamheden aanzienlijk kunt versnellen.

Plaats je themapagina-map (bijvoorbeeld genaamd “my-first-theme”) in het verkeerde deel van de WordPress-installatie. De juiste plek is onder de map ‘wp-content/themes’./wp-content/themes/In het midden, en plaats het daarna erin.style.css和index.phpJe kunt het zien en activeren in het WordPress-beheerpaneel, onder “Uiterlijk” -> “Thema’s”.

Het maken van een kerntemplatefile voor een thema

Het thema organiseert de weergave van verschillende pagina's met behulp van een reeks templatebestanden. Het begrijpen van de hiërarchie van deze templates is essentieel voor het bouwen van een thema.

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

Maak templates voor de header en footer van de pagina.

Meestal splitsen we de inhoud van de boven- en onderste delen van een website in aparte bestanden, zodat deze gemakkelijk kunnen worden hergebruikt.header.phpDe bestand moet de HTML-headinformatie (header) bevatten.District (call)wp_head()Functionen), evenals de gemeenschappelijke delen aan de top van de website (zoals het logo en het navigatiemenu).

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1002>
    <header id="masthead">
        <h1><a href="/nl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    </header>

In dezelfde mate, creëer ook...footer.phpBevat de inhoud van de voetnoot en roept deze op.wp_footer()Function. En dan...index.phpIn, gebruikenget_header()和get_footer()Functies worden gebruikt om ze te introduceren.

Realisatie van een artikelcyclus en weergave van inhoud

De kern van WordPress is de “The Loop”. Dit is een mechanisme die gebruikt wordt om te controleren of er artikelen zijn, en wanneer er artikelen zijn, worden deze een voor een verwerkt.index.phpEen basiscykelsstructuur is als volgt:

Aanbevolen leesmateriaal Hoe je een maatgemaakte WordPress-thema ontwikkelt: een handleiding van het begin tot de voltooiing。

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>">
            <h2><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
            <div class="entry-content">
                <p><strong>Het volledige artikel is hier te lezen.</strong></p>
            </div>
        </article>
    &lt;?php endwhile;
else :
    echo &#039;<p>暂无文章。</p>';
endif;
?&gt;

Hier is gebruik gemaakt van…the_title()、the_permalink()和the_excerpt()Je kunt template-taggen gebruiken om artikeleninformatie uit te geven.

Thema's worden versterkt met behulp van functionaliteitsbestanden.

functions.phpDe bestanden vormen het “bestuurscentrum” voor je thema; ze worden gebruikt om functies toe te voegen, menu’s en zijbalken te registreren, evenals om stijlbestanden (style sheets) en scripts te bepalen.

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

Registreren van de navigatiemenu en de sidebar

Om het thema te ondersteunen bij het beheer van visuele menu's in de backend, moet je…functions.phpRegistreer de locatie van je eetgelegenheid. Gebruik dit om...register_nav_menus()Deze taak wordt uitgevoerd door een function.

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

Daarna kunt u de inhoud van de templatebestanden (bijvoorbeeld...) gebruiken.header.php) wordt gebruikt inwp_nav_menu( array( 'theme_location' => 'primary' ) )Om dit menu te weergeven...

Je moet de stijlen en scripts op de juiste manier invoeren.

Vergeet nooit om niet rechtstreeks te handelen.<link>或<script>Tags zijn hardgecodeerde bronnen. Hier zou gebruik van moeten worden gemaakt…wp_enqueue_style()和wp_enqueue_script()Function, en mounten hetwp_enqueue_scriptsOp deze haak… Dit zorgt ervoor dat de afhankelijkheden correct zijn en dat dubbele laden wordt voorkomen.

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

Samenvatting

Vanaf het moment dat de header met de basisinformatie is gecreëerd…style.cssEn de basiscycliindex.phpGoed, je hebt al de eerste stap gezet in het ontwikkelen van een WordPress-thema. Door het analyseren van de header en footer, het bouwen van basistemplatebestanden, en…functions.phpDoor functies en resources systematisch toe te voegen, kun je steeds meer een georganiseerd en gemakkelijk te onderhouden custom-thema opbouwen. Vergeet niet dat het ontwikkelen van een thema een iteratief proces is: begin met het realiseren van de basisfuncties en voer deze vervolgens op basis van behoeften verder uit en verfijn.

Veelgestelde vragen (FAQ)

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

Ja, PHP is de kernprogrammeringstaal van WordPress. Om verder te komen met het ontwikkelen van thema's is het essentieel om de basis van PHP, de kernfuncties van WordPress (template tags), evenals de mechanismen voor hooks en loops te begrijpen. Hoewel je kunt starten met het aanpassen van het CSS en eenvoudige templates van bestaande thema's, zijn customisaties niet mogelijk zonder PHP.

Kan ik het thema testen zonder de code te veranderen?

Het wordt sterk aanbevolen om thema's te ontwikkelen en te testen in een lokale ontwikkelingsomgeving of in een tijdelijk/testomgeving van de online website. Verwacht nooit dat je nieuwe thema's of grote veranderingen rechtstreeks op een officieel geopereerde website kunt aanbrengen, aangezien dit tot tijdelijke fouten in de functionaliteit of een onregelmatig uiterlijk van de website kan leidden.

Waarom zie ik geen effect van het activeren van mijn thema in de backend?

Controleer eerst of de themapagina (theme folder) op de juiste plek is geplaatst./wp-content/themes/In de map. En daarna, bevestig het.style.cssIs het formaat van de commentaarblok met de themainformatie aan de bovenkant van het bestand correct? Spelfouten of het ontbreken van een komma kunnen leiden tot fouten bij het herkennen van de inhoud. Vergeet niet dit te controleren voordat je verder gaat.index.phpDe bestand bestaat.

Hoe maak je verschillende lay-outs voor verschillende soorten pagina's?

WordPress hanteert een set regels voor de hiërarchie van templates. Als je bijvoorbeeld een unieke lay-out wilt creëren voor een enkele blogartikelpagina, kun je hierbij gebruikmaken van…single.phpBestand: Als je een layout wilt maken voor statische pagina's, moet je eerst een bestand aanmaken.page.phpAls de betreffende pagina wordt bezocht, gebruikt WordPress automatisch deze specifiekere templatebestanden in plaats van de standaardtemplate.index.php。