Het ontwikkelen van WordPress-thema's is een essentiële vaardigheid voor iedereen die een gepersonaliseerde website wil maken.

Het ontwikkelen van WordPress-thema's is een vereiste voor elke ontwikkelaar die een persoonlijke website wil maken of die professioneel werk verricht op het gebied van webontwikkeling. Het gaat verder dan alleen het aanpassen van bestaande thema's. style.css Het maken van een WordPress-thema is anders dan het maken van een website. Echte themaontwikkeling vereist het van nul opbouwen van een volledig functionele, duidelijk gestructureerde website die voldoet aan de kernspecificaties van WordPress. Voor dit proces moet je niet alleen PHP, HTML, CSS en JavaScript beheersen, maar je moet ook een grondig begrip hebben van de architectuur van WordPress-thema's, de hiërarchie van sjablonen, themafuncties en het hooksysteem. In dit artikel wordt vanaf nul een gedetailleerde uitleg gegeven van de kernconcepten van WordPress-themaontwikkeling, de benodigde bestandsstructuur, het templatesysteem en het toevoegen van aangepaste functionaliteit. Het doel is om je een solide technische basis te geven.

De basisstructuur van WordPress-thema's en kernbestanden.

Voor het activeren van een standaard WordPress-thema hebt u slechts twee bestanden nodig:style.css 和 index.phpEchter, een volledig functioneel en goed gestructureerd thema heeft bestanden die volgens een duidelijke logica zijn georganiseerd. Het begrijpen van de functie van deze kernbestanden is de eerste stap in de ontwikkeling.

Het document met de verklaring van het onderwerp

Allereerst,style.css Het bestand is niet zomaar een stylesheet. Het belangrijkste doel is om als “identiteitsbewijs” voor het thema te dienen. Bovenaan het bestand worden de metagegevens van het thema weergegeven in specifieke opmerkingenblokken. WordPress gebruikt deze informatie om uw thema te herkennen, weer te geven en te activeren.

Bijvoorbeeld:

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个为学习目的而构建的简洁 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Hieronder valt ook:Text Domain Voor internationalisering is dit de enige identifier die wordt gebruikt in combinatie met de bijbehorende taalbestanden en tekstvertalingfuncties.

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

Het hoofdsjabloonbestand en het algemene sjabloon.

index.php Dit is het verplichte invoerbestand voor het thema. Wanneer WordPress geen specifiekere sjabloonbestanden voor de huidige aanvraag kan vinden, maakt het gebruik van dit bestand. index.phpDaarom bevat het meestal het basisskelet van de HTML-code van de website en worden andere templateonderdelen opgeroepen.

header.php 和 footer.php Het zijn templateonderdelen die worden gebruikt om het boven- en onderste deel van een pagina te scheiden. Door middel van get_header() 和 get_footer() Als functies in de hoofdsjabloon worden aangeroepen, kan dit de herbruikbaarheid van de code aanzienlijk verbeteren. Op dezelfde manier kunnensidebar.php Gebruikt in de zijbalk, via get_sidebar() Oproep.

functions.php Dit is het “functionele centrum” van het thema. Hoewel het niet verplicht is, wordt het door bijna alle thema's gebruikt. Hier kunt u aangepaste functies toevoegen, menu's en zijbalken registreren, stijl- en scriptbestanden importeren en de ondersteunde functies van het thema definiëren. Het wordt automatisch geladen wanneer het thema wordt geïnitialiseerd.

Het begrijpen van het systeem van templatehiërarchieën.

De templatehiërarchie van WordPress is een van de krachtigste en meest flexibele functies. Het is een set regels die bepaalt hoe WordPress automatisch het meest geschikte templatebestand selecteert om een pagina weer te geven, afhankelijk van het type pagina dat wordt opgevraagd (bijvoorbeeld de startpagina, een artikelpagina of een categoriepagina). Ontwikkelaars kunnen de weergavelogica voor verschillende pagina's eenvoudig beheren door templates met specifieke namen te maken.

Zoekregels van specifiek naar algemeen

Voor een blogartikel zoekt WordPress in de volgende volgorde naar sjabloonbestanden:
1. single-post-{slug}.php (Sjabloon voor artikelaliassen)
2. single-post-{id}.php (Artikel-ID-sjabloon)
3. single-post.php (Een algemeen sjabloon voor alle artikelen)
4. single.php (Een algemene sjabloon voor alle individuele artikelen van aangepaste artikeltypen)
5. singular.php (Alle algemene templates voor één pagina)
6. index.php (Het uiteindelijke terugtrekkingsmodel)

Dit betekent dat als u een speciale pagina wilt ontwerpen voor een bepaald artikel (bijvoorbeeld een artikel met de naam “hello-world”), u gewoon een pagina met dezelfde naam hoeft te maken. single-post-hello-world.php Dat is alles wat je hoeft te doen voor de documenten. Voor de categoriepagina's zijn vergelijkbare regels van toepassing; hier wordt gezocht naar bijvoorbeeld category-{slug}.php、archive.php En andere documenten.

Gebruik voorwaardelijke tags voor een nauwkeurige controle.

In sjabloonbestanden moet je vaak bepalen welke content wordt weergegeven op basis van het type pagina. Hiervoor gebruik je de conditie-tags van WordPress. Deze functies retourneren een waarde van 'waar' of 'onwaar', zodat je hiermee een beslissing kunt nemen.

Zo kun je bijvoorbeeld in index.php In dit geval kun je het als volgt gebruiken:

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

<?php
if ( is_home() && ! is_front_page() ) {
    // 当静态首页被设置，且当前页面是博客文章索引页时
    echo &#039;<h1>博客文章归档</h1>';
} elseif ( is_search() ) {
    // 当当前页面是搜索结果页时
    echo '<h1>搜索结果</h1>';
}
?&gt;

Andere veelgebruikte voorwaardelijke tags zijn onder andere: is_single()、is_page()、is_category()、is_archive() Enzovoort. Dit zijn logische besturingstools die hand in hand gaan met het sjabloonniveau.

Integratie van kernontwikkelingstechnologieën en -functionaliteiten.

Het ontwikkelen van een modern WordPress-thema omvat veel meer dan alleen het genereren van HTML. Je moet ook de kernfuncties van WordPress integreren en best practices volgen om aangepaste functies toe te voegen.

Registreren en het navigatiemenu oproepen

Het navigatiemenu vormt de basis van een website. functions.php In dit geval moet je gebruikmaken van register_nav_menus() Gebruik de functie om een of meerdere menu-items te registreren.

function my_theme_setup() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-custom-theme' ),
            'footer'  => __( '底部菜单', 'my-custom-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Na de registratie kunnen gebruikers deze menu's configureren in de WordPress-backend onder “Uiterlijk” -> “Menu's. In de sjabloonbestanden (bijv. ) kunnen ze dit ook doen. header.php(Niet vertaald)， gebruik wp_nav_menu() De functie wordt gebruikt om het opgegeven menu op te roepen en weer te geven.

wp_nav_menu(
    array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
        'container'      => false,
    )
);

Voeg de ondersteuningsfunctie voor onderwerpen en de zijbalk toe.

passeren (een wetsvoorstel of inspectie enz.) add_theme_support() Met functies kun je verschillende functionaliteiten van het thema declareren, zoals afbeeldingen voor artikelen, aangepaste logo's en artikelindelingen. Deze worden meestal geplaatst in functions.php In de initialisatiefunctie.

function my_theme_features() {
    add_theme_support( 'post-thumbnails' ); // 支持特色图片
    add_theme_support( 'custom-logo' ); // 支持自定义Logo
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) ); // 支持HTML5标记
}
add_action( 'after_setup_theme', 'my_theme_features' );

Registratie en gebruik van de widgetzone (zijbalk) register_sidebar() Functies. Nadat ze zich hebben geregistreerd, kunnen gebruikers inhoud toevoegen aan deze gebieden in het achterpaneel onder “Uiterlijk” -> “Widgets”.

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

register_sidebar(
    array(
        'name'          => __( '文章侧边栏', 'my-custom-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在文章页面显示的侧边栏。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    )
);

In de template wordt gebruik gemaakt van dynamic_sidebar( 'sidebar-1' ) Output het.

Stijlen en scripts veilig introduceren

De juiste manier om resources te laden is via wp_enqueue_style() 和 wp_enqueue_script() Functies, en deze worden vervolgens geïntegreerd in wp_enqueue_scripts Op de haak. Dit zorgt ervoor dat de afhankelijkheden correct zijn en dat er geen dubbele bestanden worden geladen.

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

Gebruik get_stylesheet_uri() 和 get_template_directory_uri() Gebruik een functie om de URL van de themacatalogus op te halen. Op deze manier is de juistheid van het pad gegarandeerd.

Geavanceerde ontwikkeling: lussen, hooks en subthema's

Als je de basisprincipes onder de knie hebt, kun je je ontwikkelingsvaardigheden naar een hoger niveau tillen door de “loops”, het hooksysteem en de ontwikkelingsmodus voor subthema's van WordPress te begrijpen.

Het begrijpen en gebruiken van de WordPress-hoofdlus.

“The Loop” is de PHP-code structuur van WordPress waarmee artikelen uit de database worden opgehaald en weergegeven. Het vormt de kern van alle sjablonen voor contentweergave.

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <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><?php _e( '抱歉，没有找到任何内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>

Binnen de lus kun je een reeks sjabloontagfuncties gebruiken, zoals the_title()、the_content()、the_permalink() Wacht op de uitvoer van de informatie van het huidige artikel. Het begrijpen en vakkundig gebruiken van lussen vormt de basis voor het aanpassen van de lijst met artikelen en het weergeven van content op één pagina.

Het uitbreiden van de functionaliteit met behulp van hooks.

De plug-inarchitectuur van WordPress en veel van de functies van thema's zijn gebaseerd op het systeem van hooks. Hiermee kun je op specifieke uitvoeringspunten (actiehooks) je eigen code invoegen of de gegevens van andere functies wijzigen (filterhooks).

Zo kun je bijvoorbeeld een filter-hook gebruiken om automatisch een tekst toe te voegen aan het einde van alle artikelen. the_content：

function my_content_filter( $content ) {
    if ( is_single() ) {
        $content .= '<p class="disclaimer">Deze tekst is gepubliceerd op mijn website.</p>';
    }
    return $content;
}
add_filter( 'the_content', 'my_content_filter' );

Het gebruik van actiehaken is ook vrij gebruikelijk, bijvoorbeeld in wp_footer Voeg statistische code toe aan de hook:

function my_footer_code() {
    echo '<!-- 自定义页脚代码 -->';
}
add_action( 'wp_footer', 'my_footer_code' );

Het begrijpen en gebruiken van hooks betekent dat je op een niet-invasieve manier de kernfunctionaliteit van WordPress of een thema kunt aanpassen, wat essentieel is voor geavanceerde ontwikkeling.

Maak subthema's om veilige aanpassingen te doen.

Het is gevaarlijk om bestaande thema-bestanden rechtstreeks te bewerken, omdat updates voor het thema alle wijzigingen zullen overschrijven. Het is beter om een subthema te maken. Een subthema erft alle functies van het hoofdthema en je hoeft alleen de bestanden of functies in het subthema te herschrijven die je wilt aanpassen.

Een subthema heeft minimaal één item nodig. style.css Maak een nieuw document en vermeld hierin het ouderonderwerp:

/*
Theme Name: 我的子主题
Template: parent-theme-folder-name // 这里必须填写父主题的目录名
Text Domain: my-child-theme
*/

Daarna kun je een sjabloonbestand maken met dezelfde naam als het hoofdonderwerp (bijvoorbeeld header.phpDeze kunnen worden gebruikt om het te verbergen of om het in een subthema op te nemen. functions.php Het toevoegen van nieuwe functionaliteit of het wijzigen van bestaande functionaliteit in een WordPress-thema. Subthema's zijn een standaardprocedure in de professionele WordPress-ontwikkelingsworkflow.

Samenvatting

Het ontwikkelen van een WordPress-thema is een systematisch proces, van structuur tot details, van basis tot geavanceerd. Ontwikkelaars moeten dit proces eerst begrijpen. style.css 和 index.php Zodra de kernbestanden zijn geïmplementeerd, moet u het sjablonenhiërarchiesysteem beheersen om een nauwkeurige paginacontrole te realiseren en dit systeem vakkundig in te zetten. functions.php Om de kernfuncties te integreren, zoals menu's, widgets en aangepaste afbeeldingen. In de vervolgfase moet u het “cyclische” mechanisme goed begrijpen om de uitvoer van de inhoud te beheren, gebruik te maken van het hooksysteem voor flexibele functionaliteitsuitbreidingen en uiteindelijk veilige en onderhoudbare aanpassingen te doen door subthema's te maken. Als u deze aanpak volgt, kunt u niet alleen krachtige aangepaste thema's maken, maar kunt u ook het besturingsprincipe van het krachtige contentbeheersysteem van WordPress beter begrijpen.

Veelgestelde vragen (FAQ)

Moet je PHP leren om een WordPress-thema te ontwikkelen?

Ja, PHP is de belangrijkste programmeertaal voor WordPress en het is essentieel om deze te beheersen. De sjabloonbestanden van een thema bestaan uit PHP-code en worden gebruikt om dynamische HTML-inhoud te genereren, WordPress-functies aan te roepen en logica te verwerken. Hoewel je met een paginabuilder een mooie lay-out kunt maken, is kennis van PHP onmisbaar voor geavanceerde aanpassingen en het bouwen van hoogwaardige en gestandaardiseerde thema's.

Waarom wordt mijn aangepaste thema niet weergegeven op de achtergrond?

Controleer eerst of je thema-map op de juiste plek is opgeslagen. /wp-content/themes/ Allereerst, open de map. Vervolgens open je het thema. style.css Het document. Zorg ervoor dat het blok met de onderwerpgegevens boven aan het document volledig correct is opgemaakt, met name wat betreft de volgende punten: Theme Name: Deze regel moet aanwezig zijn en correct zijn. Controleer tot slot of je onderwerp minimaal het volgende bevat: style.css 和 index.php Deze twee documenten zijn geldig.

Hoe voeg ik meertalige ondersteuning toe aan de tekstinhoud van mijn thema?

Je moet alle gebruikersgerichte tekstreeksen in je thema internationaliseren. Dit doe je door bij de uitvoer van de tekst gebruik te maken van bijvoorbeeld __()、_e() Zo'n vertaalfunctie, en je geeft hierbij door wat je wilt vertalen. style.css Hetgeen in het Chinees is gedefinieerd. Text DomainVervolgens gebruik je een tool als Poedit om je thema-bestanden te scannen en deze te genereren. .pot Een sjabloonbestand en het maken van bestanden in verschillende talen op basis hiervan (bijvoorbeeld Engels, Frans, Duits, etc.) zh_CN.poHet vertaalde bestand van (). Tenslotte wordt het gecompileerde bestand .mo De documenten worden in het betreffende onderwerp geplaatst. /languages/ Inhoudsopgave.

Overnemen de functies van het subthema de functies van het hoofdthema?

Het wordt niet overschreven, maar wordt samengevoegd met de bestaande inhoud. WordPress laadt eerst het ouderlijke thema. functions.php De documenten en vervolgens het laden van de subthema's functions.php Dit betekent dat je in de subthema's documenten kunt toevoegen. functions.php Je kunt nieuwe functies toevoegen of nieuwe hooks aanroepen in je kindthema. Als je echter het gedrag van een functie in het ouderthema wilt wijzigen, kun je deze meestal niet rechtstreeks overschrijven. In plaats daarvan moet je de hooks verwijderen die aan de functie van het ouderthema zijn gekoppeld en vervolgens je eigen functies opnieuw koppelen.