Praktische handleiding voor het ontwikkelen van WordPress-themes: van nul een modern, responsief thema bouwen

Forbereidende werkzaamheden en opzet van de omgeving

Om een WordPress-themaproject te starten, is het eerst nodig om een geschikte werkomgeving in te richten. Dit omvat niet alleen een lokale ontwikkelingsserver, maar ook het opzetten van een duidelijke projectstructuur en het gebruik van moderne ontwikkelingshulpmiddelen.

Er zijn verschillende mogelijkheden voor het opzetten van een lokale ontwikkelingsomgeving. Je kunt gebruikmaken van geïntegreerde pakketten als XAMPP, MAMP of Local by Flywheel; deze pakketten bieden een snelle manier om Apache, MySQL en PHP op je lokale computer te installeren. Voor een ervaring die meer lijkt op die van een production-omgeving, kun je ook Docker-containers overwegen. Bovendien begint het ontwikkelen van thema’s bijna altijd met een basiscode-editor, zoals VS Code, in combinatie met de nodige plugins voor een optimale coderingsefficiëntie.

Een standaard en duidelijke structuur van het themakatalog is de basis voor de onderhoudbaarheid van een project. Dit is vooral van toepassing op WordPress.wp-content/themesIn de map moet je een map maken met de naam van je onderwerp. Bijvoorbeeld:my-modern-themeIn deze map moet je twee belangrijke bestanden maken:style.css和index.phpDaarvan zijn erstyle.cssHet zijn niet alleen de style sheets, maar ook de metadata die de thema-informatie bevatten. De overige bestanden en mappen, zoals die worden gebruikt om JavaScript-scripts op te slaan…/jsDe map waar de templateonderdelen zijn opgeslagen/template-parts、存放页面模板的/page-templatesDit kan worden opgebouwd in fasen tijdens het ontwikkelingsproces.

Aanbevolen leesmateriaal The Ultimate Tailwind CSS Guide: From Beginner to Expert – Practical Tips。

Subject Style Table Header Information

Subject:style.cssDe bestandskop moet een commentaar bevatten in een standaardformat, waarmee je het WordPress-systeem vertelt welke theme je hebt gebruikt. Deze informatie is van cruciaal belang, aangezien hier de naam van het theme, de auteur, een beschrijving, de versie en andere belangrijke details worden opgegeven.

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

/*
Theme Name: My Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个从零开始构建的现代、响应式WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-modern-theme
*/

DezeText DomainDit wordt gebruikt voor internationalisering; het zal dienen als tekstgebied voor de latere vertaalfuncties. Nadat deze gegevens zijn gedefinieerd, zal je thema verschijnen in de lijst met thema's in het WordPress-beheerpaneel (“Uiterlijk” -> “Themata”).

Introduce the core function file

Hoewelindex.php和style.cssVoldoende om een thema herkenbaar te maken, maar een thema met alle benodigde functies moet ook…functions.phpDeze bestand wordt niet gebruikt om inhoud rechtstreeks af te drukken, maar fungeert als een “functie-engine” voor het thema. Het wordt gebruikt om themaondersteuning toe te voegen, menu’s en zijbalken te registreren, en om stijlen en scripts te invoeren.

Maak een map in de rootdirectory van het thema.functions.phpBestanden. In de beginfase kunnen we er enkele basisfuncties toevoegen. Je kunt dit doen door…add_theme_support()Deze functie wordt gebruikt om de door het thema ondersteunde functies aan te geven, zoals artikelafbeeldingen (Featured Image), aangepaste logos, HTML5-markeringen, etc.

Een kerntemplatefile bouwen

WordPress gebruikt een systeem met verschillende niveaus van templates om te bepalen hoe verschillende soorten content worden weergegeven. Het begrijpen en maken van deze kerntemplates is essentieel om je ontwerp om te toveren in een dynamische website.

Aanbevolen leesmateriaal Een uitgebreide analyse van het bouwen van moderne websites: een compleet praktisch handboek van planologie tot livegoed。

Het meest fundamentele templatebestand is…index.phpHet is het basistemplate voor alle pagina's, waarna de gebruiker terugkeert naar een vorige staat van de website. Voor meer gedetailleerde controle zouden we echter specifiekere templates moeten maken. Denk hierbij aan templates voor het weergeven van een lijst met blogartikelen.home.php或index.phpDit wordt gebruikt om een enkele artikel te weergeven.single.phpDit wordt gebruikt om statische webpagina's te weergeven.page.phpEn ook voor de weergave van artikelklassificaties, tags en andere archiveringspagina's.archive.phpDaarnaast…header.php和footer.phpDit wordt gebruikt om de code voor de boven- en onderste delen van een website te scheiden.get_header()和get_footer()De functie wordt in verschillende templates gebruikt, waardoor de code kan worden hergebruikt.

Een header-template maken

header.phpDe bestanden bevatten meestal HTML-documenten.<head>De structuur van bepaalde delen en de beginpagina's, zoals het identiteitsmerk van de website en het hoofdmenu, is belangrijk. Een cruciaal stap in het ontwerpproces is…<head>Call in the middlewp_head()De ‘hook’ is de plek in het kernprogramma van WordPress, maar ook in plugins en thema’s, waar de benodigde CSS, JavaScript en metadata worden uitgegeven.

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1005>
<p><strong>Deze pagina is momenteel niet beschikbaar.</strong></p>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php the_custom_logo(); ?>
        <div class="site-title"><a href="/nl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></div>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
            'menu_id'        =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

Realisatie van een artikelcyclus

De artikelcyclus is het kernmechanisme voor de dynamische inhoudsweergave in WordPress.index.php、single.phpIn templates als deze gebruiken we…if ( have_posts() ) : while ( have_posts() ) : the_post();Elke artikel wordt doorlopen en weergegeven.

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

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                // 为每篇文章加载对应的模板部件或内容模板
                get_template_part( 'template-parts/content', get_post_type() );
            endwhile;
            // 分页导航
            the_posts_navigation();
        else :
            // 没有找到内容时的模板
            get_template_part( 'template-parts/content', 'none' );
        endif;
        ?>
    </main>
</div>

get_template_part()Een function is een goede praktijk; het spoor je aan om de HTML-structuur die de inhoud van een artikel weergeeft te splitsen van de rest van het codebestand.template-parts/content.phpIn dergelijke onderdelenbestanden maakt het de hoofdtemplatebestand eenvoudiger en duidelijker te begrijpen.

Realisatie van responsief ontwerp en styling

Moderne thema's moeten responsief zijn, zodat ze een goede gebruikerservaring bieden op schermen van alle maten – van mobiele telefoons tot desktops. Dit wordt voornamelijk bereikt met CSS-mediaqueries, het flexibele boxmodel (Flexbox) en het CSS-grid-layout.

Allereerst:functions.phpHet wordt correct gebruikt in...wp_enqueue_style()De functie voegt je hoofdstyleblaad naar de queue. Zorg ervoor dat de stijlen die afhankelijk zijn van de meegeleverde WordPress-stijlen worden ingesteld wanneer de functie wordt opgeroepen.dashicons。

Aanbevolen leesmateriaal The Ultimate Guide to Tailwind CSS: From Getting Started to Mastering Modern Web Development。

function my_modern_theme_scripts() {
    // 引入主题主要样式表
    wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义脚本（如果有）
    wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );

Mobile-first CSS-strategie

CSS wordt opgesteld met een “mobile-first” strategie. Dat betekent dat eerst de basisstijlen worden gecreëerd voor apparaten met kleine schermen (zoals mobiele telefoons), en vervolgens met behulp van mediaqueries extra stijlen en aanpassingen in het lay-out worden toegevoegd voor grotere schermen (zoals tablets en desktops).

/* 基础样式 - 针对移动设备 */
.site-header {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .site-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-navigation ul {
        flex-direction: row;
        gap: 2rem;
    }
}

/* 针对大桌面设备 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

Werken met responsieve afbeeldingen

WordPress biedt uitstekende ondersteuning voor responsieve afbeeldingen.the_post_thumbnail()Als je de functie gebruikt en de juiste afmetingsparameters overdraagt, zal WordPress automatisch een resultaat weergeven dat is voorzien van de gewenste details.srcset和sizesDe eigenschappen van…

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

Met deze tag kan de browser het meest geschikte afbeeldingsbestand kiezen afhankelijk van het scherm van het apparaat, waardoor de laadprestaties worden verbeterd.

<?php if ( has_post_thumbnail() ) : ?>
    <figure class="post-thumbnail">
        <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
    </figure>
<?php endif; ?>

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

Nadat een basis-thema is gevormd, kunnen er verschillende functies worden toegevoegd via de WordPress-API om de bruikbaarheid en professionaliteit ervan te verbeteren. Dit omvat het aanpassen van menu's, het toevoegen van widgets (aan de zijkant van de pagina) en het personaliseren van het thema met behulp van een customizer of optiepagina's.

Registreren in het navigatiemenu

在functions.phpGebruikt in het Chinees (vereenvoudigd)register_nav_menus()Een functie wordt gebruikt om te bepalen welke menuposities je thema ondersteunt. Hierdoor kunnen gebruikers in de backend, onder “Uiterlijk” -> “Menü”, menu-items toewijzen aan deze posities.

function my_modern_theme_setup() {
    // 注册一个主菜单
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
    ) );
    // 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );

Maak een gebied voor widgets.

Het sidebar-gebied (het gebied aan de zijkant van de pagina) biedt gebruikers de mogelijkheid om pagina-elementen aan te passen door widgets te slepen.register_sidebar()De functie wordt geregistreerd. Meestal creëer je meerdere toolbars voor de bovenste sidebar, de voetnoten- en andere gebieden.

function my_modern_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'my-modern-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'my-modern-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_modern_theme_widgets_init' );

Na registratie vind je de templatebestanden (bijvoorbeeld...) in de aangegeven map.sidebar.php) wordt gebruikt indynamic_sidebar( 'sidebar-1' )De functie kan worden opgeroepen om deze regio te weergeven.

Integrated Customizer API

De WordPress Customizer biedt gebruikers de mogelijkheid om thema-opties onder real-time vooruitzicht aan te passen. Je kunt eenvoudige instellingen toevoegen via de Customizer API, zoals het kiezen van kleuren of het uploaden van een logo. Hierbij wordt gebruik gemaakt van…$wp_customize->add_setting()和$wp_customize->add_control()Methoden.

function my_modern_theme_customize_register( $wp_customize ) {
    // 添加一个站点标题颜色的设置
    $wp_customize->add_setting( 'header_textcolor', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'    => __( 'Header Text Color', 'my-modern-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );

En daarna...header.phpIn dit geval kan men dit bereiken door…get_theme_mod( 'header_textcolor' )Haal deze waarde op en toepass hem op een inlinede manier, bijvoorbeeld met CSS-stijlen.

Samenvatting

Het ontwikkelen van een modern, responsief WordPress-thema vanaf nul is een systeematische klus die vereist dat de ontwikkelaar niet alleen vertrouwd is met PHP en de WordPress-core-API, maar ook met HTML5, CSS3 (met name Flexbox/Grid en mediaqueries) en JavaScript. Het gehele proces wordt uitgevoerd volgens principes van modulariteit en onderhoudsvriendelijkheid: van het opzetten van de omgeving en het definiëren van het thema tot het stap voor stap bouwen van PHP-bestanden die volgens een bepaald template-structuur zijn opgebouwd, waardoor de kernfuncties van het thema (zoals het weergeven van artikelen) worden gerealiseerd. Vervolgens wordt er gebruik gemaakt van een “mobile-first” CSS-strategie en responsieve afbeeldingstechnieken om te zorgen dat de website op alle apparaten optimaal werkt. Ten slotte worden met de krachtige functionaliteiten van de WordPress-API navigatie-menues, widgets en mogelijkheden voor personalisatie toegevoegd, waardoor gebruikers meer flexibiliteit krijgen om het thema aan te passen. Door deze stappen te volgen, kun je een professioneel, efficiënt en gemakkelijk te onderhouden WordPress-thema bouwen.

Veelgestelde vragen (FAQ)

Welke kerntechnieken moet je beheersen om een WordPress-thema te ontwikkelen?

Om een compleet WordPress-thema te ontwikkelen, moet je een aantal belangrijke technieken beheersen. Allereerst PHP: WordPress is immers geschreven in PHP, en alle templatebestanden en functionaliteiten zijn afhankelijk van deze programmeertaal. Vervolgens HTML5 en CSS3, die worden gebruikt om de structuur en het uiterlijk van de pagina's te bepalen. Vooral voor een responsief ontwerp zijn CSS-mediaqueries en moderne layoutmodellen (zoals Flexbox en Grid) essentieel. Een basiskennis van JavaScript is ook belangrijk, aangezien dit wordt gebruikt voor interactieve functies. Ten slotte moet je de kernconcepten van WordPress goed begrijpen, zoals de hiërarchie van templates, het verwerken van artikelen, en de werking van hooks en filters.

Wat doet 'Text Domain' in het bestand 'style.css'?

Text DomainDit is een belangrijke identificator voor de internationalisering en lokalisering van je thema. De rol ervan is om een unieke namensruimte te creëren voor alle te vertalen tekststrings in je thema. In je code kun je dit gebruiken wanneer je...__('Hello World', 'my-modern-theme')或_e('Read More', 'my-modern-theme')Bij een dergelijke vertaalfunctie is de tweede parameter het tekstgebied. Dit zorgt ervoor dat de vertaalmachine (bijvoorbeeld Poedit) de juiste strings kan herkennen en extraheren die behoren tot je thema, waarna de vertaling kan worden gemaakt..po和.moVertaal de documenten zodat je onderwerpen gemakkelijk in elke taal kunnen worden vertaald.

Hoe maak je een thema compatibel met de functie voor artikelafbeeldingen (artikelthumbnails)?

Om het thema te ondersteunen voor artikelafbeeldingen (ook bekend als featured images), moet je in het thema…functions.phpVoeg in het bestand de corresponderende mededelingen over themaondersteuning toe.add_theme_support()Function, en overdraag de parameter.'post-thumbnails'Parameters. Je kunt ze activeren voor alle soorten artikelen, of je kunt specificeren dat ze alleen voor bepaalde artikelensoorten worden gebruikt (bijvoorbeeld…)post和pageDeze functie moet worden geactiveerd op...

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    // 或者指定文章类型：add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
    // 你还可以在这里定义默认的缩略图尺寸：set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Nadat de ondersteuning is toegevoegd, zal er op de artikelbewerkingssite een meta-box voor “speciale afbeeldingen” verschijnen, waarmee gebruikers een afbeelding kunnen uploaden of een bestaande afbeelding kunnen kiezen. In het template wordt deze functie gebruikt.has_post_thumbnail()Controleer of er een thumbnail bestaat, en gebruik deze indien beschikbaar.the_post_thumbnail()Een functie die dit weergeeft.

Waarom wordt het gebruik van de `get_template_part`-functie aanbevolen?

get_template_part()Functies zijn een van de beste praktijken voor het hergebruiken van code en modularisatie bij het ontwikkelen van WordPress-themes. Ze worden voornamelijk gebruikt om veelgebruikte templatecodes (bijvoorbeeld de HTML-structuur voor het weergeven van artikelinhoud) op te splitsen in aparte componenten. Er zijn enkele belangrijke voordelen aan deze aanpak: in de eerste plaats wordt de leesbaarheid en onderhoudbaarheid van de code verbeterd.index.phpHet wordt veel simpeler; daarnaast is de flexibiliteit verbeterd, zodat je afhankelijk van verschillende omstandigheden (bijvoorbeeld het type artikel) verschillende componenten kunt laden.get_template_part( 'template-parts/content', 'page' )De inhoud wordt met voorrang geladen.content-page.phpTen slotte maakt dit het gemakkelijk om onderthema's aan te passen: voor het wijzigen van de weergave van het overkoepelende thema is het voldoende om een componentbestand met dezelfde naam aan te leveren.