Van nul tot held: een stapsgewijze handleiding voor het ontwikkelen van een aangepast WordPress-thema.

Een eigen WordPress-thema ontwikkelen is de beste manier om je creativiteit te realiseren op het internet en om het uiterlijk en de functionaliteiten van je website volledig te beheersen. In tegenstelling tot gebruikmaken van bestaande thema's, biedt het ontwikkelen van een eigen thema de mogelijkheid om vanaf nul een unieke website te bouwen die precies voldoet aan jouw of je klanten' behoeften. Hoewel dit proces misschien spannend kan klinken, is het eenvoudig te voltooien als je de officiële WordPress-regels en stappen volgt. In dit artikel worden je stap voor stap geholpen bij het proces van het maken van basisbestanden tot het realiseren van de belangrijkste functionaliteiten van je website.

Forbereidende werkzaamheden en opzet van de omgeving

Voordat je de eerste regel code schrijft, heb je een geschikte ontwikkelingsomgeving en een duidelijke projectplanning nodig.

Het opzetten van een lokale ontwikkelingsomgeving

Allereerst moet je op je lokale computer een PHP-serveromgeving opzetten. Het wordt aanbevolen om gebruik te maken van geïntegreerde pakketten zoals XAMPP, MAMP of Local by Flywheel. Met deze tools kunnen Apache, MySQL en PHP in één stap worden geïnstalleerd, waardoor je niet veel met configuratie hoeft te doen. Neem XAMPP als voorbeeld: na de installatie vind je de bestanden van je website meestal in de map waar XAMPP is geïnstalleerd.htdocsBinnen de map. Hier kun je een nieuwe map maken, bijvoorbeeld...my-custom-themeDit wordt de rootmap voor je thema.

Aanbevolen leesmateriaal Het leren ontwikkelen van WordPress-thema's vanaf nul: een essentiële handleiding voor het maken van een gepersonaliseerde website.。

Thema- en projectstructuurplanning

Een standaard WordPress-thema bevat ten minste twee kernbestanden:style.css和index.phpMaar voordat het project begint, is het handig om een duidelijke en uitbreidbare directorystructuur te planen. Een typisch moderne themastructuur kan er als volgt uitsehen:

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

my-custom-theme/
├── style.css          // 主样式表，包含主题信息头
├── index.php          // 主模板文件
├── functions.php      // 主题功能与函数文件
├── header.php         // 头部模板
├── footer.php         // 底部模板
├── sidebar.php        // 侧边栏模板
├── page.php           // 页面模板
├── single.php         // 文章页模板
├── archive.php        // 文章归档页模板
├── 404.php            // 404错误页模板
├── search.php         // 搜索结果页模板
├── assets/            // 静态资源目录
│   ├── css/           // 样式文件
│   ├── js/            // 脚本文件
│   └── images/        // 图片资源
└── templates/         // 可选的模板部件目录

Een goede structuur helpt bij het organiseren en onderhouden van code.

Create a core theme file

Dit vormt de basis voor het bouwen van een thema; de informatie in de bestandshoofdtekst (header) vertelt WordPress dat het om een geldig thema gaat.

Definieren van een thema-stylesheet

style.cssHet is de “identiteitskaart” van je thema; de commentaarblok bovenaan (het thema-informatiekopje) is vereist. WordPress gebruikt deze informatie om je thema in de achtergrond te herkennen en te weergeven. Maak dit dus zo snel mogelijk.style.cssDeel de bestanden en voer de volgende inhoud in:

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个为了学习从零开始开发而创建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Hieronder valt ook:Text DomainDit wordt gebruikt voor internationalisering (i18n) en is de unieke identificator van je thema; het is meestal gelijk met de naam van de themapagina. Naast deze commentaarblock kun je met het schrijven van je CSS-stijlen beginnen.

Aanbevolen leesmateriaal Gids voor het ontwikkelen van WordPress-thema's: een complete praktische handleiding voor beginners tot gevorderden.。

Een basistemplatefile maken

index.phpDit is het standaardtermpatroon voor het terugkeren naar een vorige staat van alle pagina's. Het is zeer basisch, maar we kunnen van een eenvoudige HTML-structuur uitgaan. Eerst moeten we een…header.phpDeze bestand wordt gebruikt om de documentkop (het header) op te slaan.<!DOCTYPE html>Openen<body>Deel met de labels…)footer.phpHier worden sluitende tags en de inhoud van de voetnoot opgeslagen.

header.phpVoorbeeld:

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
    <header>
        <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>
    </header>

Let op het gebruik vanwp_head()Hookes zijn essentieel voor het toevoegen van scripts en stijlen in het kernprogramma van WordPress, maar ook in plugins en thema's.

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

footer.phpVoorbeeld:

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Hier is gebruik gemaakt van…wp_footer()Hook.

Nu is het jouw beurt.index.phpHet kan zeer kort worden:

Aanbevolen leesmateriaal Volledige gids voor het ontwikkelen van WordPress-themes: van nul tot een professioneel thema bouwen。

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <article>
                <h2><p><strong>Hallo wereld!</strong></p></h2>
                <div><?php the_content(); ?></div>
            </article>
        
        <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
    <?php endif; ?>
</main>

Deze template gebruikt de kernloop (The Loop) van WordPress om een lijst met artikelen te weergeven.

Introduceren van functies en dynamische inhoud

Een echte thema is meer dan alleen een statische pagina; het moet met het kernbestand van WordPress interageren, resources laden en dynamische functies realiseren.

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

Schrijf een bestand met de themafuncties.

functions.phpHet gaat om je thema “Brain”, waarmee je functies kunt toevoegen, een registratie-menu kunt instellen, een sidebar kunt maken, en stijlen en scripts kunt laden. Maak deze bestand en begin met het toevoegen van de basisfuncties.

<?php
// 主题设置
function my_custom_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

// 注册小工具区域（侧边栏）
function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );

add_theme_support()De functie wordt gebruikt om de themafunctie te activeren.register_nav_menus()和register_sidebar()Registreer dan apart het navigatiemenu en het gebied voor widgets.

Stijlen en scripts laden

De juiste manier om resources te laden, is door de styleheets en JavaScript-bestanden te gebruiken via…wp_enqueue_scriptsHook queue. Op jouw...functions.phpToevoegen aan de Chinese (vereenvoudigde) taal:

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果使用评论功能，加载评论回复脚本（仅当需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

get_stylesheet_uri()Ophalenstyle.cssDe URL…get_template_directory_uri()De URL van het themadirectory verkrijgen.

Een hiërarchische structuur voor templates maken

WordPress gebruikt een systeem van template-lagen om te bepalen welke template-fail het beste past bij een bepaalde pagina. Het maken van speciale template-failen zorgt ervoor dat je content nog nauwkeuriger en flexibeler kan worden weergegeven.

Maak templates voor verschillende soorten inhoud.

Je moet speciale templates maken voor verschillende soorten pagina's.
* single.phpWordt gebruikt om één artikel te weergeven.
* page.phpWordt gebruikt om een enkele pagina te weergeven.
* archive.phpWordt gebruikt om categorieën, tags, auteurs, data en andere informatie op archiveringspagina's te weergeven.
* search.phpWordt gebruikt om de zoekresultaten te weergeven.
* 404.phpWordt gebruikt om de “Niet gevonden”-pagina te weergeven.

Een fundamenteelsingle.phpHet kan er als volgt uitzien:

<?php get_header(); ?>

<main>
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <header>
                <h1><p><strong>Hallo wereld!</strong></p></h1>
                <div>
                    |
                </div>
            </header>
            <?php if ( has_post_thumbnail() ) : ?>
                <div>
                    <?php the_post_thumbnail(); ?>
                </div>
            <?php endif; ?>
            <div>
                <?php the_content(); ?>
            </div>
            <footer>
                &lt;?php the_tags( &#039;标签: &#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
            </footer>
        </article>
    <?php endwhile; ?>
</main>

Deze template is gebruikt.the_post_thumbnail()Om de speciale afbeeldingen te tonen, en ook…comments_template()Om de commentarenzone te laden…

Modulariteit bereiken met templateonderdelen

Om de herbruikbaarheid van het code nog verder te verbeteren, kunnen repetitieve delen van de pagina, zoals artikelmeta-informatie en artikellijsten, worden opgeslagen als templateonderdelen (Template Parts). Bijvoorbeeld, door een template te creeren...template-parts/content.phpDe bestanden, en vervolgens…index.php或archive.phpIn een loop wordt dit gebruikt.get_template_part( 'template-parts/content' );Roep het op. Dit houdt je hoofdtemplatebestand simpel.

Samenvatting

Door de stappen hierboven te volgen, hebt u een basisontwerp voor een WordPress-thema gemaakt dat weliswaar simpel is, maar wel alle essentiële functies bevat. Het proces omvatte het opzetten van een omgeving, het creeren van belangrijke bestanden, het toevoegen van WordPress-functies en het bouwen van een structuur voor de templates. Vergeet niet dat het ontwikkelen van een thema een iteratief proces is: u kunt met de meest fundamentele functies beginnen en deze steeds verder uitbreiden met complexere elementen, zoals aangepaste artikeltypes, opties in het thema-editor en een responsief ontwerp. Het is belangrijk om de codingstandaarden en -best practices van WordPress te volgen, zodat uw thema veilig, efficiënt en gemakkelijk te onderhouden is. Nu kunt u de map met uw thema kopieren naar de map waar de WordPress-installatie is opgeslagen.wp-content/themes/In het backend, onder “Uiterlijk” -> “Thema’s”, kun je het zien en activeren.

Veelgestelde vragen (FAQ)

Welke programmeeringskennis is vereist om een WordPress-thema te ontwikkelen?

Om een WordPress-thema te ontwikkelen, moet je vooral HTML, CSS en PHP beheersen. HTML wordt gebruikt om de structuur van de pagina's op te bouwen, CSS wordt gebruikt voor het ontwerp van de styling, en PHP is de serverzijde-programmeringstaal van WordPress. Met PHP worden logische processen uitgevoerd, database-opvragen gedaan en dynamische inhoud gecreëerd. Daarnaast is het handig om enkele basiskennten van JavaScript te hebben, zodat je interactieve functies kunt toevoegen.

Waarom moet men de functies `get_header()` en `get_footer()` gebruiken?

get_header()和get_footer()Dit zijn template-taggen van WordPress, die worden gebruikt om inhoud te bevaten.header.php和footer.phpGebruik deze functies in plaats van ze rechtstreeks aan te roepen.includeDe concepten van ‘statements’ vormen de kern van het systeem voor themelaagering en subthema’s in WordPress. Ze bieden subthema’s de mogelijkheid om de bovenste en onderste delen (header en footer) van het moedertema te overschrijven door bestanden met dezelfde namen te creeren, waardoor er een grote flexibiliteit wordt gecreëerd.

Hoe kan ik ervoor zorgen dat mijn thema meerdere talen ondersteunt (internationalisering)?

Je moet de internationaleisering (i18n)-functies van WordPress gebruiken om alle tekststringen die in het thema worden weergegeven te omringen. Hier worden vooral de functies `wpgettext()` en `wpgettext_ex()` gebruikt.__()、_e()En andere functies...style.cssZet het op de juiste manier in.Text DomainVervolgens wordt met een tool als Poedit een vertaling gemaakt..potVertaal de templatebestanden; de vertaler kan hiermee de corresponderende versies in andere talen maken (bijvoorbeeld…)zh_CN.po和.moTen slotte:functions.phpDoor middel vanload_theme_textdomain()Function loading.

Nadat het thema is ontwikkeld, hoe kun je de compatibiliteit ervan testen?

Voor het publiceren of implementeren van een thema in de productieomgeving is het van belang om het grondig te testen. Allereerst moet je controleren of het thema goed reageert op verschillende browsers (Chrome, Firefox, Safari, Edge) en apparaten (desktop, tablet, telefoon). Daarna moet je het thema testen in verschillende configuraties van WordPress, bijvoorbeeld met en zonder verschillende plugins, en met verschillende soorten artikelen en widgets. Bovendien kun je het officiële WordPress-plugin Theme Check gebruiken om je thema te controleren en te zien of het voldoet aan de meest recente codingstandaarden en -best practices van WordPress.