Van nul tot held: een complete gids voor het ontwikkelen van WordPress-thema's en de bijbehorende kerntechnologieën.

WordPress-themes vormen de kern van het uiterlijk en de functionaliteiten van een website. Als je de mogelijkheden om themes te ontwikkelen beheerst, kun je alles aan je website volledig personaliseren, zonder te worden beperkt door vooraf gemaakte themes. Je kunt zo unieke designideeën en functionele vereisten realiseren. Het eerste stap in deze richting is om de basisconcepten en de bestandsstructuur van WordPress-themes te begrijpen.

Elke WordPress-thema is een set bestanden die zich bevindt in een specifieke map op de server van de website./wp-content/themes/De mappen in de directory. Voor een zeer basistisch functioneel thema zijn maar twee bestanden nodig:style.css和index.phpDaarvan zijn erstyle.cssDeze bestanden worden niet alleen gebruikt om stijlen op te slaan, maar de commentaren in het begin van de bestanden bevatten ook meta-informatie over het thema. Dit is belangrijk voor WordPress om het thema te herkennen.

在style.cssBij de kop van de tekst moet je gebruikmaken van specifieke commentaren om het thema te definiëren. Een typisch voorbeeld is als volgt:

Aanbevolen leesmateriaal Een volledige handleiding voor het ontwikkelen van WordPress-thema's: een praktische tutorial van beginner tot expert.。

/*
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
*/

Deze informatie zal verschijnen in de WordPress-beheeromgeving, onder “Uiterlijk > Themen”.index.phpDit is de hoofdtemplate-fail voor het thema, die wordt gebruikt als standaardoplossing wanneer er geen andere, meer specifieke templates zijn. Naarmate het ontwikkelingsproces vordert, zal je deze hoofdtemplate steeds meer vervangen of aanvullen met meer specifieke template-failen.

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 begrijpen van de structuur van de templaten op verschillende niveaus

WordPress gebruikt een uitgebreid systeem van template-lagen om te bepalen welke template-bestand moet worden gebruikt voor elke specifieke paginaaanvraag. Het begrijpen van dit systeem is essentieel voor het efficiënt ontwikkelen van thema's, aangezien het je helpt bij het bepalen van de namen van de bestanden die worden gebruikt voor het maken van specifieke pagina's (bijvoorbeeld berichtsinformatie of categoriepagina's).

Namenregels voor de belangrijkste templatebestanden

De structuur van de templates volgt het principe “van specifiek naar algemeen”. Als je bijvoorbeeld een blogartikel met de ID 123 bezoekt, zal WordPress op de volgende manier kijken:single-post-123.php、single-post.php、single.phpEn ten slotte:singular.phpAls deze dingen allemaal niet bestaan, wordt dit alternatief gebruikt.index.php。

De meest gebruikelijke kerntemplatebestanden zijn:
- front-page.phpDit wordt gebruikt om de homepage van de website in te stellen.
- home.phpIndexpagina voor blogartikelen.
- single.phpEen enkele blogpost of een artikel van een aangepaste artikeltyp.
- page.phpEnkele pagina's.
- archive.phpAlgemene templates voor verschillende archiveringspagina's (indeling, tags, auteurs, etc.).
- category.phpPagina van een specifieke categorie in de catalogus.
- 404.php404-foutpagina.
- header.php、footer.php、sidebar.phpDeze zijn meestal fragmenten van lokale templates.

Gebruikelijke functies voor het oproepen van lokale templates

Om de modulariteit en onderhoudbaarheid van het codebestand te bewaren, biedt WordPress enkele belangrijke functies om lokale templatebestanden te laden. De belangrijkste daarvan is…get_header()、get_footer()和get_sidebar()Ze worden gebruikt om respectievelijk iets in te leiden.header.php、footer.php和sidebar.php。

Aanbevolen leesmateriaal De kernconcepten van het ontwikkelen van WordPress-themes zijn:。

Een andere zeer belangrijke functie is…get_template_part()Het biedt de mogelijkheid om elke templatefragment op een flexibele manier in te voegen. Denk bijvoorbeeld aan een blogartikelcykel: in dat geval zou je een speciale template voor de inhoud van het artikel willen gebruiken.

<?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'template-parts/content', get_post_type() ); ?>
<?php endwhile; ?>

Deze code zal op zoek gaan naar de eerste optie die wordt gevonden.template-parts/content-post.php(Aangenomen dat de artikeltype is...)postAls het niet te vinden is, wordt het geladen.template-parts/content.php。

Het gebruik van kernfuncties en hook-functies om functionaliteiten te bepalen.

De krachtige mogelijkheden van WordPress berusten op zijn uitgebreide bibliotheek met functies en het eventgebaseerde “hook”-systeem. Het behouden van een goede beheersing over de kernfuncties en hooks is essentieel bij het ontwikkelen van thema’s, om complexe functies te realiseren en de prestaties en veiligheid te optimaliseren.

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

Basische functies voor het ophalen en weergeven van inhoud

In templatebestanden gebruik je vaak een reeks functies om dynamische inhoud te halen en weergeven.the_title()Wordt gebruikt om de titel van het huidige artikel of pagina af te drukken.the_content()De geformatteerde hoofdinhoud wordt vervolgens weergegeven. Dit correspondeert met de functie die de inhoud rechtstreeks uitvoert.get_De functies die aan het begin staan, zoals...get_the_title()Ze retourneren gegevens die je vervolgens in je code kunt verwerken.

De cyclische afspeling van blogartikelen is een essentieel onderdeel van een WordPress-templeat. De standaardcodestructuur hiervoor is als volgt:

<!-- 在这里输出文章内容 -->
        <h2><p><strong>Hallo wereld!</strong></p></h2>
        <div><?php the_content(); ?></div>
    <?php endwhile; ?>
    <!-- 这里可以放置分页导航 -->
<?php else : ?>
    <!-- 如果没有找到文章，显示的内容 -->
    <p>Er is geen inhoud beschikbaar.</p>
<?php endif; ?>

Functional uitbreidingen door het gebruik van hooks

Hooken worden in twee categorieën onderverdeeld: “acties” en “filters”. Met actie-hooks kun je je eigen code invoegen wanneer een bepaald evenement plaatsvindt, bijvoorbeeld wanneer…wp_headIn de hook worden extra meta-taggen weergegeven. Je kunt deze gebruiken om extra informatie mee te geven over de inhoud of de bron van de inhoud.add_action()Een functie die zichzelf mountt (dat wil zeggen: die zichzelf als een module toevoegt aan een systeem of applicatie).

Aanbevolen leesmateriaal Een beginnershandleiding voor het ontwikkelen van WordPress-thema's: bouw je eerste aangepaste thema vanaf nul.。

Als bijvoorbeeld, in het onderwerp…functions.phpVoeg in het bestand ondersteuning voor Feed-links toe:

add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
    // 为文章和评论添加Feed链接到head中
    add_theme_support( 'automatic-feed-links' );
}

De filter-haken bieden je de mogelijkheid om gegevens te bewerken. Bijvoorbeeld, door ze te gebruiken...excerpt_lengthDe filter kan de lengte van de artikel samenvatting veranderen:

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

add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );
function mytheme_custom_excerpt_length( $length ) {
    return 30; // 将摘要长度设置为30个单词
}

functions.phpDe bestanden vormen het “functiecentrum” van het thema; alle aangepaste functies, oproepen van hooks en declaraties van themafuncties moeten hier worden opgeslagen.

De functie voor het aangeven van thema's wordt ondersteund.

Gebruikadd_theme_support()Het is een goede ontwikkelingspraktijk om in je functie te specificeren welke core-functionaliteiten van WordPress je thema ondersteunt. Dit niet alleen activeert de betreffende functies, maar zorgt ook voor compatibiliteit met toekomstige versies van WordPress.

Voorkomende functionaliteiten omvatten:

add_action( 'after_setup_theme', 'mytheme_theme_support' );
function mytheme_theme_support() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5语义化标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}

Integreren van aangepaste stijlen en scriptbestanden

Een modern thema moet de CSS-stijlbestanden en JavaScript-scripts op de juiste manier beheren, zodat deze op het juiste moment worden geladen, conflicten worden vermeden en de beste praktijken voor front-end-prestatieoptimalisatie worden gevolgd.

Veilig registreren en laden van resources

Zorg er absoluut voor dat je geen directe referenties gebruikt in de templatebestanden.<link>或<script>Je kunt resources niet hardcoderen met tags. De juiste manier om resources aan te wijzen, is door ze te specificeren met behulp van specifieke namen of identificatoren.wp_enqueue_scriptsAction hook, in combinatie met...wp_enqueue_style()和wp_enqueue_script()Functie.

在functions.phpIn dit geval moet je een functie definiëren om het verwerken van de wachtrij voor resources te regelen:

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
function mytheme_enqueue_assets() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载Google字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );

// 加载主JavaScript文件，并依赖jQuery，在页脚加载
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );

// 如果需要传递PHP变量到JS，可以使用wp_localize_script
    wp_localize_script( 'mytheme-script', 'myThemeData', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'home_url' => home_url(),
    ));
}

Deze methode zorgt ervoor dat de afhankelijkheden correct zijn, herladen wordt vermeden, en dat plugins en andere thema's kunnen worden beheerd via hun afhankelijkheidsverklaringen.

Stijlondersteuning toevoegen aan de Gutenberg-editor

Met de popularisatie van blockeditors is het van belang om front-end-stijlondersteuning te bieden voor de back-end-editoren, zodat de gebruiker een “what you see is what you get”-ervaring krijgt. Je kunt hiervoor gebruikmaken van...add_theme_support( ‘editor-styles’ )En voeg een editor-stijlbestand toe aan de lijst.

add_action( 'after_setup_theme', 'mytheme_editor_styles' );
function mytheme_editor_styles() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'assets/css/editor-style.css' );
}

Samenvatting

Het ontwikkelen van WordPress-themes begint met het begrijpen van de basisstructuur van de bestanden, en vordert daarna verder naar het niveau van templates, kernfuncties, hook-systemen en het beheer van resources. Het belangrijkste is om dit in de praktijk te brengen: met een zo simpel mogelijk project als startpunt.style.css和index.phpStarten, en vervolgens maken.header.php和footer.phpEerst wordt de code modulair opgesplitst. Vervolgens worden, met behulp van de verschillende niveaus van templates, speciale templates gemaakt voor verschillende soorten pagina's.single.php或page.phpInfunctions.phpIn China worden hiervoor ‘haken’ (hookes) gebruikt…add_theme_supportFuncties moeten veilig worden toegevoegd, en dit moet altijd op een gestructureerde en controleerde manier worden gedaan.wp_enqueue_scriptsOm stijlen en scripts te beheren, moet je deze kernprincipes en stappen volgen. Hierdoor kun je een professioneel, efficiënt en onderhoudsbaar WordPress-thema bouwen.

Veelgestelde vragen (FAQ)

Welke minimaal aantal bestanden zijn nodig om een WordPress-thema te creeren?

Technisch gezien vereist een thema dat door WordPress wordt herkend en aktiveerd in ieder geval twee bestanden:style.css和index.php。style.cssDe commentaren in het bestandskop moeten de juiste themameta-informatie bevatten, bijvoorbeeld:Theme NameEnindex.phpAls basistemplate wordt dit bestand gebruikt om alle pagina's te renderen.

Hoe maak ik een aangepaste pagina-template voor mijn thema?

Het is heel eenvoudig om een aangepaste pagina-template te maken. Je hoeft alleen maar in een template-bestand (meestal…)page.php）的顶部添加一段特定的PHP注释块。例如，创建一个“全宽页面”模板，可以新建一个名为template-full-width.phpDe bestand en schrijf in het begin van de bestand:/* Template Name: 全宽页面 */Nadat je het hebt gesaved, kun je in het WordPress-beheerpaneel, wanneer je de pagina bewerkt, in het drop-down-menu “Pagina-eigenschappen” onder “Template” de optie “Volledig breedte” zien en kiezen.

Waarom moet je in functions.php gebruikmaken van `add_action` om functies toe te voegen?

Direct in...functions.phpHet schrijven van functioneel code in een bepaalde omgeving (bijv. een programmeeromgeving) kan leiden tot dat de code op een ongepaste of verkeerde tijd wordt uitgevoerd, waardoor fouten optreden of de gewenste functionaliteit niet wordt bereikt.add_action()或add_filter()Je kunt je functie mounten op een specifiek WordPress-hook, zodat de code op het juiste en veilige moment wordt uitgevoerd.after_setup_themeDe hook wordt gebruikt voor het initialiseren van het thema.wp_enqueue_scriptsHaken worden gebruikt om resources te laden. Dit is een goede praktijk in de plugin-architectuur van WordPress en zorgt voor meer modulariteit en compatibiliteit van het code.

Hoe zorg ik ervoor dat mijn thema ondersteunt wordt bij meertalige vertalingen?

Om een thema te ondersteunen in meerdere talen, moet je enkele stappen uitvoeren. Allereerst…style.cssGebruikt in de koppen en alle templatebestanden.__()、_e()Voor de vertaling van alle tekststrings die moeten worden vertaald, kun je gebruikmaken van een vertaalfunctie. Daarnaast is het belangrijk om…functions.phpGebruikt in het Chinees (vereenvoudigd)load_theme_textdomain()Er bestaan functies om vertaalmappen te laden. Ten slotte worden met tools als Poedit strings uit de broncode gehaald en verwerkt om de vertalingen te genereren..potFile, en vraag de vertaler om hierop gebaseerd de corresponderende vertaling in het gewenste taal te maken (bijvoorbeeld:zh_CN.po和.moDe vertaalmappen moeten worden opgeslagen in de themakatalog./languages/Mogelijk zit het al in de map.

Welke licenties en regels moet je in acht nemen bij het ontwikkelen van commerciële toepassingen met een bepaald thema?

Om commerciële thema's te ontwikkelen die worden gebruikt voor distributie of verkoop, moet men de licentievereisten van WordPress strikt naleven. Het belangrijkste is dat je thema gebruikmaakt van dezelfde licentie als het WordPress-core: de GPL v2 of een hogere versie. Dit betekent dat anderen het recht hebben om je themacode te gebruiken, te bewerken en verder te distribueren. Daarnaast moet je de officiële codingstandaarden en thema-beoordelingsregels van WordPress volgen om de kwaliteit, veiligheid en compatibiliteit van je thema te garanderen. Het is ook van belang om de licenties van alle gebruikte derde-partijenbronnen (zoals fonts en iconenbibliotheken) correct aan te geven, en te controleren of deze compatibel zijn met de GPL-licentie of een commerciële licentie hebben.