Homepage/Kennis/WordPress/De details van de inhoud

Hoe ontwikkel je en maak je je eerste responsieve WordPress-thema?

4 minuten leestijd
2026-03-21
2026-06-04
2,426
Ik verdien commissies wanneer je via de onderstaande links winkelt, zonder dat dit extra kosten voor jou met zich meebrengt.

Forbereidende werkzaamheden en opzet van de ontwikkelingsomgeving

Voordat je met het schrijven van code begint, is het van belang een efficiënte ontwikkelomgeving op te zetten. Dit zal niet alleen je werkefficiëntie verbeteren, maar ook zorgen voor een georganiseerde en onderhoudbare code.

Allereerst heb je een lokale ontwikkelomgeving nodig. Je kunt tools gebruiken als XAMPP, MAMP of Local by Flywheel; deze helpen je snel een serveromgeving met PHP en MySQL op tezetten op je lokale computer. Na het installeren en starten van de services, moet je ervoor zorgen dat Apache (of Nginx) en MySQL actief zijn.

Volgens de instructies moet je eerst de meest recente versie van de WordPress-corebestanden downloaden. Daarna moet je deze bestanden uitpakken in de wortelmap van je lokale server (bijvoorbeeld de map waar je je website onder XAMPP hebt geplaatst). htdocs De map is bereikbaar via de browser. http://localhost/your-wordpress-folder Voltooi het installatieproces van WordPress. Vergeet niet de naam van de database, je gebruikersnaam en wachtwoord die je hebt ingevoerd.

Aanbevolen leesmateriaal Tailwind CSS in praktijk: een handleiding voor het ontwikkelen van responsieve, moderne webpagina's。

Voor het bewerken van code worden Visual Studio Code, PhpStorm of Sublime Text aanbevolen. Deze editors bieden goede ondersteuning voor het visueel weergeven van syntaxis (syntax highlighting) en codehinten voor PHP, HTML, CSS en JavaScript. Daarnaast is het handig om enkele essentiële plugins te installeren, zoals plugins voor intelligente suggesties wanneer je met WordPress werkt, en Git voor het beheersen van versies van je code.

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.
Het logo van UltaHost. toegangspagina

Ten slotte, navigeer je in het lokale WordPress-installatieverwijfingspad naar... wp-content/themes Mappen. Hier kun je een nieuwe map maken voor het onderwerp dat je gaat maken, bijvoorbeeld met de naam: my-first-themeDeze map zal alle bestanden van je thema bevatten.

Creëer een kernbestand voor het thema.

Een WordPress-thema bestaat uit een reeks standaardbestanden, waarvan er twee vereist zijn:style.css 和 index.phpDeze bestanden bepalen de basisinformatie en structuur van het thema.

Eerst moet je het maken. style.css Het bestand bevat niet alleen je sjablonen, maar ook meta-informatie over het thema. Deze informatie wordt weergegeven op de pagina “Uiterlijk” -> “Themata” in het WordPress-administratiepaneel.

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

Vervolgens maak je een index.php Dit is het hoofdtemplatebestand voor het thema. Wanneer WordPress geen meer specifiek templatebestand kan vinden (bijvoorbeeld... single.php 或 page.phpAls dit nodig is, wordt het gebruikt. Een van de simpelste varianten… index.php Het kan alleen de basiscode bevatten die de WordPress-head, de main-loop en de footer oproept.

Aanbevolen leesmateriaal Volledig in de kunst van Tailwind CSS: een praktische gids van het begin tot de praktijk。

<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
    <p><strong>Deze pagina is momenteel niet beschikbaar.</strong></p>
    <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>
    <main>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <article>
                <h2><p><strong>Hallo wereld!</strong></p></h2>
                <?php the_content(); ?>
            </article>
        <?php endwhile; endif; ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Op dit moment kun je je thema activeren. Ga naar het WordPress-beheerpaneel, naar “Uiterlijk” → “Themata”, en je moet “Mijn eerste responsief thema” zien. Activeer dit thema en bezoek de homepage van je website om de basisfuncties te kunnen zien.

Het toevoegen van ondersteuning voor het thema-functie

Om de themafunctie nog beter te maken, moeten we dit doorlopen… functions.php Deze bestanden worden gebruikt om ondersteuning voor de kernfuncties van WordPress te toevoegen.functions.php De bestanden zijn als het 'brein' van het thema; ze worden gebruikt om alle aangepaste functies, klassen, hangers (hooks) en filters op te slaan.

Creer een… functions.php De bestanden, en voeg de volgende code toe om artikelafbeeldingen, een aangepast menu en HTML5-markeringen te ondersteunen.

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%
hosting.com logo toegangspagina 
<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面上的“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置（主菜单）
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

// 对评论表单、搜索表单等输出 HTML5 标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加对<title>标签的WordPress原生支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 引入样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

Realiseren van een responsief ontwerp en styling

Responstief ontwerp betekent dat je website op verschillende apparaten van verschillende afmetingen, zoals desktops, tablets en mobiele telefoons, een goede gebruikerservaring biedt. We bereiken dit voornamelijk door CSS-mediaqueries en een flexibele lay-out te gebruiken.

Allereerst: style.css Onder de meta-informatie van de content worden de basisregels voor de globale stijlgeving opgesteld, waarmee de basis wordt gelegd voor een responsieve weergave. We gebruiken moderne CSS-technieken voor het opmaken van de lay-out, zoals Flexbox.

/* 基础样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
header, footer {
    background: #f4f4f4;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
}
main {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
article {
    flex: 1 1 300px; /* 基础宽度300px，可伸缩 */
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #ddd;
}

Vervolgens worden mediabestellingen (media queries) toegevoegd om aan te passen aan verschillende schermbreedten. Dit is het kernpunt van responsief ontwerp.

Aanbevolen leesmateriaal Een unieke website maken: een complete handleiding voor het ontwikkelen van WordPress-thema's, van beginners tot gevorderden.。

/* 平板设备（宽度小于 768px） */
@media (max-width: 768px) {
    body {
        padding: 0 15px;
    }
    main {
        flex-direction: column;
        gap: 1.5rem;
    }
    article {
        flex: 1 1 auto;
    }
}

/* 手机设备（宽度小于 480px） */
@media (max-width: 480px) {
    header, footer {
        padding: 1rem;
    }
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.2rem;
    }
}

Optimaliseren van de responsiviteit van het navigatiemenu

Op apparaten met kleine schermen, zoals mobiele telefoons, kan een traditioneel horizontaal navigatiemenu overvol lijken. Een veel voorkomende oplossing is om het om te toveren in een hamburgermenu. Hiervoor moeten we CSS en enkele JavaScript-code gebruiken.

Allereerst: header Een deel van de modificaties aan de HTML-structuur van het menu wordt meestal gemaakt met WordPress. wp_nav_menu Functie genereren. Om de stijl te kunnen beheersen, voegen we er een klassenaam toe en een hamburgerknop.

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.
InterServer logo toegangspagina

In jouw... header.php In het templatebestand (dat moet worden gehaald van...) index.php De menu-code zou er als volgt uit kunnen zien:

<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">菜单</button>
<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_id'        => 'primary-menu',
    'menu_class'     => 'nav-menu',
) );
?>

Vervolgens wordt in het CSS, standaard, het menu op kleine schermen verborgen. Wanneer de gebruiker op de hamburgerknop klikt, wordt met behulp van JavaScript een bepaalde klasse (bijvoorbeeld ‘active’) toegevoegd, waardoor het menu zichtbaar wordt. .toggledOm het menu te weergeven, wordt… gebruikt.

/* 小屏幕下隐藏菜单 */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .nav-menu.toggled {
        display: flex;
    }
    .menu-toggle {
        display: block;
    }
}
/* 大屏幕下显示菜单并隐藏按钮 */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
    .nav-menu {
        display: flex;
        list-style: none;
    }
}

Ten slotte: voeg een eenvoudig JavaScript-bestand toe (bijvoorbeeld)... js/navigation.js) en vervolgens door functions.php We introduceren een mechanisme om op klikken van de knop te reageren.

Maak aangepaste paginaontwerpen en componenten.

De flexibiliteit van WordPress komt gedeeltelijk van het systeem met templates en widgets. Het maken van aangepaste templates en widgets kan de mogelijkheden van je thema aanzienlijk uitbreiden.

Een custom page template bouwen

Stel dat je een template voor een “volledig breed scherm” wilt maken, waarbij er geen zijbalken zijn en de inhoud het hele scherm bedekt. Maak eerst een nieuw bestand in de root-map van het thema en geef het de naam ‘full-width-page-template’. page-fullwidth.phpOp de allerhoogste plek van deze bestand moet een commentaar worden toegevoegd met de naam van het template.

<?php
/**
 * Template Name: 全宽页面
 */
get_header(); // 引入 header.php
?>
<main id="main" class="site-main full-width">
    &lt;?php
    while ( have_posts() ) :
        the_post();
        the_title( &#039;<h1 class="entry-title">', '</h1>' );
        the_content();
    endwhile;
    ?&gt;
</main>
<?php
get_footer(); // 引入 footer.php
?>

Nu, wanneer je een pagina maakt of bewerkt in de WordPress-backoffice, kun je in het drop-down-menu “Template” (Template) onder “Page Properties” (Pagagegevens) de optie “Full Width Page” (Volledig breedte pagina) kiezen. Nadat je deze optie hebt gekozen, wordt de pagina weergegeven met het door jou net gecreëerde template.

Registreer het gebied voor de sidebar-componenten.

De componentenruimte biedt gebruikers de mogelijkheid om content te plaatsen op specifieke plekken van een thema (bijvoorbeeld in de sidebar of voetnoot) door dit te slepen. We moeten hierop verder werken. functions.php Registreer een sidebar-gebied in...

Gebruik register_sidebar Er is een functie voor het registreren van een sidebar. Deze functie accepteert een array met parameters, waarmee de naam, ID, beschrijving en wrap-tag van de sidebar worden gedefinieerd.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hoofdzijbalk', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Voeg hier widgets toe.', 'my-first-theme' ),
        'before_widget' =&gt; '   function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hoofdzijbalk', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Voeg hier widgets toe.', 'my-first-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>'function my_first_theme_widgets_init() {  
    register_sidebars( array(  
        'name' =&gt; 'My First Theme Sidebar',  
        'id' =&gt; 'my-first-theme-sidebar',  
        'description' =&gt; 'De eerste sidebar van mijn thema',  
    ) );  
    add_action( 'widgets_init', 'my_first_theme_widgets_init' );  
};

Na het registreren moet je deze componenten op de juiste plekken in het thema-ontwerp invoegen. Meestal bevindt de sidebar zich aan de zijkant van de pagina. sidebar.php In de bestand… en vervolgens in het hoofdtemplate (bijvoorbeeld…) index.php 或 single.php) Door middel van get_sidebar() Function introducitie.

在 sidebar.php In, gebruiken dynamic_sidebar Een functie die de onderdelen van een gebied weergeeft.

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

Samenvatting

Het ontwikkelen en aanpassen van je eerste responsieve WordPress-thema is een proces dat zowel uitdagend als zeer bevredigend is. Met de stappen uit dit artikel heb je vanaf nul een ontwikkelingsomgeving opgebouwd en de essentiële bestanden voor het thema gecreëerd. style.css 和 index.phpEn door… functions.php De themafunctie is versterkt. Je hebt diepgravend kennisgemaakt met responsief webdesign en hebt CSS-mediaqueries en Flexbox-layout gebruikt om de compatibiliteit van de website met verschillende apparaten te garanderen. Ten slotte hebt je ook het krachtige template-systeem en de component-API van WordPress onderzocht, en hebt geleerd hoe je aangepaste pagina templates en draaibare componenten kunt maken.

Nadat je deze basiskennten hebt beheerd, kun je verder ontdekken hoe je meer geavanceerde functies van een thema kunt instellen, zoals het aanpassen van artikeltypen, het gebruik van de thema-customizer-API en het ondersteunen van blokeditoren. Hiermee kun je een WordPress-thema creëren met meer functionaliteiten en een professioneler design.

Veelgestelde vragen (FAQ)

Moet het ontwikkelen van een thema altijd vanaf nul beginnen?

Niet altijd. Hoewel het vanaf nul beginnen je de mogelijkheid geeft om alles volledig te beheersen en elke detail te begrijpen, is het voor beginners of situaties waarin snel ontwikkeling nodig is efficiënter om te starten met bestaande thema's (zoals Underscores of _s) of frameworks (bijvoorbeeld thema's die zijn geïntegreerd met Bootstrap). Dit zorgt voor een solide basis in code die is gebaseerd op beste praktijken, waarna je deze kunt aanpassen naar je eigen behoeften.

Hoe debug ik mijn WordPress-thema?

Een veelgebruikte debugging-methode in WordPress-ontwikkeling is het inschakelen van WP_DEBUGIn jouw... wp-config.php In het bestand wordt… define( 'WP_DEBUG', false ); Veranderen in: define( 'WP_DEBUG', true );Dit zorgt ervoor dat WordPress alle PHP-fouten, waarschuwingen en berichtgeving op het scherm weergeeft. Daarnaast kun je met de ontwikkelaarstools van de browser (Console, Elements, Network-tabbladen) JavaScript, CSS en netwerkverzoeken onderzoeken en oplossen.

Waarom werkt de nieuwe thema niet meteen nadat ik deze heb gewijzigd?

Dit probleem wordt meestal veroorzaakt door de browsercache of een WordPress-cacheplugin. Probeer eerst de pagina te vernieuwen met Ctrl+F5 of Cmd+Shift+R in je browser. Als je een cacheplugin gebruikt, moet je de cache van deze plugin leegmaken. Verder moet je ervoor zorgen dat je de juiste bestanden in het actieve themapakket hebt gewijzigd. functions.php Soms is het voldoende om de achtergrondpagina opnieuw te laden; de betreffende bestand wordt immers bij iedere pagina-laadning opnieuw gelezen.

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

Het is een goede gewoonte om je thema te ondersteunen met meerdere talen (internationalisering en lokalisatie). Dit omvat voornamelijk twee stappen: in de eerste plaats, moet je op alle plaatsen in het thema waar tekst moet worden vertaald, de vertaalfuncties van WordPress gebruiken. __('Hello World', 'my-first-theme')Ten tweede: gebruik tools als Poedit om themafailen te scannen en te genereren... .pot Maak eerst een sjabloonbestand en maak vervolgens voor elke taal een bijbehorende versie. .po En de gecompileerde versie .mo De bestanden worden vervolgens in de map met het thema geplaatst. /languages/ In de map… Ten slotte, functions.php Gebruikt in het Chinees (vereenvoudigd) load_theme_textdomain Een functie om de vertalingen te laden.

Wat moet je bij het ontwikkelen van een commerciële thema goed onthouden?

Je moet commerciële thema's ontwikkelen die geschikt zijn voor distributie, en deze moeten een stuk hogere eisen stellen dan thema's voor persoonlijke gebruik. Je moet de reviewregels van het WordPress-themadirectory strikt naleven om de veiligheid van het code te garanderen en fouten te voorkomen. Alle invoer en uitvoer van gebruikers moeten strikt worden geëscapeseerd en gevalideerd, en je moet veilige functies gebruiken. esc_html, esc_urlHet thema moet uitgebreide documentatie en commentaren bevatten. Het is ook sterk aan te raden om volledige ondersteuning voor de kernfuncties van WordPress (zoals de blokeditor en het mogelijkheid om een eigen logo te gebruiken) te bieden, en om compatibiliteit met populaire plugins te garanderen. Verder is het handig om ondersteuning voor thema-customizaties te bieden, zodat gebruikers een intuïtieve en realtime mogelijkheid hebben om het thema aan te passen.

De volgende stap, wat moeten we als volgende doen?

Als je een WordPress-website aan het opzetten of optimaliseren bent, raden we je aan om verder te lezen over prestatie-optimalisatie, plug-inconfiguratie en thema-aanpassingen.

Voor meer informatie en praktische kennis

De volgende content is relevant voor het onderwerp van dit artikel en is geschikt voor verder lezen. Het kan vaak effectief zijn om eerst het artikel te lezen dat het dichtst bij uw huidige vraagstuk staat en vervolgens geleidelijk aan artikelen over aanverwante onderwerpen te bekijken.

Labels: