Een introductie tot het ontwikkelen van WordPress-thema's: hoe je je eerste thema vanaf nul maakt.

Forbereidende werkzaamheden en omgevingsconfiguratie

Voordat je begint met schrijven van code, heb je een geschikte ontwikkelomgeving nodig. Een lokale ontwikkelomgeving biedt je de mogelijkheid om te testen en te debuggen zonder dat je de online website beïnvloedt. Het wordt aanbevolen om gebruik te maken van geïntegreerde pakketten zoals XAMPP, MAMP of Local by Flywheel, die Apache, MySQL/MariaDB en PHP in één stap kunnen installeren.

Zorg ervoor dat je PHP-versie 7.4 of hoger hebt, aangezien dit de minste versie is die door WordPress wordt aanbevolen. Daarnaast heb je een code-editor nodig, zoals Visual Studio Code, Sublime Text of PHPStorm. Deze editors bieden ondersteuning voor syntactische highlightering en codevoorstellen, waardoor je ontwikkelingswerkzaamheden een stuk efficiënter worden.

Het opzetten van de basisstructuur voor een WordPress-thema

Een WordPress-thema is in feite een set van bestanden die bepalen hoe een website er uit zal zien en hoe deze functioneert. Deze bestanden bevinden zich meestal in een speciale map binnen het WordPress-installatiepad. wp-content/themes/ De map die zich in de map bevindt, is je thema-identificator. Het is aan te raden om alleen kleine letters, cijfers en strepen te gebruiken voor de naam van deze map, en er mogen geen ruimtes zitten. Als voorbeeld: je kunt een map maken met de naam ‘my-project’. my-first-theme De map...

In deze map zijn ten minste twee essentiële bestanden vereist:style.css 和 index.php。style.css Het is niet alleen een stylesheet; een belangrijkere rol is dat het meta-informatie over het thema biedt. Deze informatie wordt weergegeven op de WordPress-beheerpagina “Uiterlijk” -> “Themas”.

Schrijf de inhoudsopgave (metadata) voor het thema.

在 style.css Op de bovenste helft van het bestand moet je een specifiek commentaarblok toevoegen om de thema-informatie aan te geven. Hier is een voorbeeld:

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 First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个简洁、轻量级的入门级 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Hieronder valt ook:Text Domain Dit wordt gebruikt voor internationalisering (meertalig ondersteuning) en moet overeenkomen met de naam van je themapagina.index.php Het bestand is het standaardtemplate voor het thema en fungeert als back-up-template voor alle pagina's. In eerste instantie kun je er eenvoudige HTML-structuren invoeren om het te testen.

Core template files en de hiërarchie van templates

WordPress gebruikt een set regels genaamd “template hierarchy” (templatehiërarchie) om te bepalen welke templatebestand gebruikt moet worden voor een bepaalde paginaopvraag. Het begrijpen van deze structuur is essentieel voor het ontwikkelen van thema’s. De kernidee is dat WordPress eerst op zoek gaat naar het meest specifieke templatebestand. Als dat niet wordt gevonden, wordt het overgegaan naar een algemener template, en zo verder tot het basistemplate. index.php。

Aanbevolen leesmateriaal WordPress-themaontwikkeling voor beginners: bouw je eerste custom-thema vanaf nul。

Gebruikelijke templatebestanden en hun toepassingen

• header.phpDe header van een website bevat meestal de regio, het logo van de website en de hoofdnavigatie.
• footer.phpDe voetnoot van een website bevat meestal informatie over de auteursrechten, hulpbronnen en andere relevante links.
• sidebar.phpBijlagegebied.
• index.phpHet mastertemplate vormt de laatste back-up voor alle pagina's.
• single.phpWordt gebruikt om een enkele blogartikel te weergeven.
• page.phpWordt gebruikt om een enkele pagina te weergeven, zoals “Over ons” of “Contact”.
• archive.phpWordt gebruikt om een lijst met artikelarchieven te weergeven (bijvoorbeeld op basis van categorie, tag, auteur of datum).
• front-page.phpDit wordt gebruikt om de homepage van de website te definiëren (indien een statische pagina is ingesteld als homepage).
• home.phpDit template wordt gebruikt om de indexpagina van blogartikelen te weergeven (wanneer een statische homepage is ingesteld, wordt hier een lijst met de meest recente artikelen getoond).
• 404.phpWordt gebruikt om de foutpagina “404 Not Found” te weergeven.
• search.phpWordt gebruikt om zoekresultaten te weergeven.
• functions.phpDit is geen template-bestand, maar een functionaliteitbestand voor het thema. Het wordt gebruikt om functies toe te voegen, menu's en balken te registreren, en dergelijke.

Sjabloonlabels en lussen

In de templatebestanden gebruik je vaak “template tags”. Dit zijn PHP-functies die worden aangeboden door WordPress en worden gebruikt om dynamische inhoud weer te geven, zoals bloginfo('name') Wees gerust, ik kan de website-titel voor je vertalen. Geef me alleen de tekst van de website-titel op.the_title() Output: De titel van het artikel.

Het belangrijkste concept is de “WordPress-loop”. Dit is een PHP-codestructuur die gebruikt wordt om te controleren of er artikelen (of een lijst met artikelen) op de huidige pagina zijn die moeten worden weergegeven, en om deze vervolgens te verwerken in een cyclische manier. Een eenvoudige voorbeeld van zo’n loop is als volgt:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><p><strong>Hallo wereld!</strong></p></h2>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
<?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

Integratie van themafuncties en styling

functions.php Dit is de “brain” van je thema; alle functies die niet tot de kernfuncties van het template-renderen behoren, moeten hier worden toegevoegd. Deze bestand wordt automatisch geladen wanneer het thema wordt initialiseerd.

Registratiefunctie voor onderwerpen

在 functions.php In WordPress kun je de mogelijkheden uitbreiden met verschillende “hooks” die worden aangeboden, zoals action hooks en filter hooks. Eerst moet je meestal aangeven of je thema bepaalde functies ondersteunt. Bijvoorbeeld het toevoegen van artikelafbeeldingen (featured images) en het ondersteunen van menu’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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup Gemonteerd op WordPress after_setup_theme Zorg ervoor dat deze actie op het juiste moment wordt uitgevoerd.

Stijlen en scripts invoeren

Modernere thema's moeten de stijlbestanden (CSS) en JavaScript-bestanden op de juiste manier incorporeren. wp_enqueue_style() 和 wp_enqueue_script() De functie wordt toegevoegd aan een queue, in plaats van rechtstreeks in het templatebestand `` of ``-taggen te gebruiken. De voordelen hiervan zijn dat afhankelijkheden beter kunnen worden beheerd, dubbele laden worden voorkomen en de beste praktijken van WordPress worden gevolgd.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

`get_stylesheet_uri()` verwijst naar je… style.css De functie `get_template_directory_uri()` retourneert de URL van het huidige themadirectory.

Aanbevolen leesmateriaal Een introductie tot het ontwikkelen van WordPress-thema's: hoe je vanaf nul je eigen aangepaste thema kunt maken.。

Constructie van pagina-layouts en template-componenten

Een standaard webpagina bestaat meestal uit een kopregel, inhoud en een voetregel. WordPress spoor je aan om herbruikbare delen op te delen in aparte bestanden en deze vervolgens in het hoofdtemplate te invoeren met behulp van specifieke functies.

Split the template components

Creeren header.php、footer.php 和 sidebar.phpIn header.php Je moet de complete ``-delen opnemen en dit afsluiten met een duidelijke hoofdcontainer, bijvoorbeeld met een ``-tag. footer.php In dit geval eindigen ze meestal met de tags `` ` en `` `.

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

Het complete pagina-element wordt samengesteld.

In de pagina-template (bijvoorbeeld...) index.php、single.phpIn ) kun je de volgende functies gebruiken om deze onderdelen te introduceren:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php De bestand wordt geladen als het niet bestaat. template-parts/content.phpDit verbetert de herbruikbaarheid en onderhoudbaarheid van het codebedrijf aanzienlijk.

Samenvatting

Een WordPress-thema van scratch opbouwen is een systeematische leerproces. Allereerst moet je een juiste lokale ontwikkelomgeving opzetten en de basisstructuur van de themafailen begrijpen. Het belangrijkste is om de template-hiërarchie van WordPress onder de knie te krijgen, want deze bepaalt hoe verschillende onderdelen van het website-content worden weergegeven. functions.php Je kunt sterke functies en eigenschappen toevoegen aan je thema, en de stijl en scripts volgens de beste praktijken beheren. Door de pagina op te delen in onderdelen als een header, voetnoot en sidebar, en deze vervolgens te combineren met de functies die WordPress biedt, kun je een thema creeren met een duidelijke structuur en gemakkelijk te onderhouden code. Door deze stappen te volgen, kun je niet alleen je eerste thema maken, maar ook een solide basis leggen voor het ontwikkelen van complexere en professionelere projecten in de toekomst.

Aanbevolen leesmateriaal Een beginnetje met het ontwikkelen van WordPress-thema's: hoe je je eerste aangepaste thema vanaf nul maakt.。

Veelgestelde vragen (FAQ)

Is het nodig om PHP te beheersen om een WordPress-thema te ontwikkelen?

Ja, PHP is de kernprogrammeringtaal van WordPress. De templatebestanden van thema's (zoals...) index.php、page.phpFunction filesfunctions.phpAlle bestanden zijn PHP-bestanden. Om dynamisch gegevens in WordPress uit te geven en te bewerken, moet je de basisgrammatica van PHP, conditionele bewerkingen, cycli en het gebruik van functies beheersen.

Tijdens het ontwikkelen van een thema, wat is het verschil tussen `page.php` en `front-page.php`?

page.php Wordt gebruikt om de individuele “pagina’s” die in WordPress zijn gecreëerd te weergeven, zoals “Over ons” of “Contactgegevens”. front-page.php Dit is een template dat speciaal is ontworpen voor het weergeven van de “startpagina” van een website. In het WordPress-administratiepaneel, onder “Instellingen” -> “Lezen”, kun je kiezen voor “Een statische pagina” en de gewenste pagina als “Startpagina” instellen. Hierdoor zal WordPress deze pagina voorrang geven bij het weergeven van de startpagina. front-page.php Om deze pagina te weergeven… front-page.php Als het niet bestaat, wordt er gebruik gemaakt van… page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

Gebruik wp_enqueue_style() Dit is een door WordPress officieel aanbevolen methodiek. Het zorgt ervoor dat de stijlbestanden maar één keer worden geladen, zelfs als meerdere plugins of themes naar dezelfde bestanden verwijzen. Het maakt het gemakkelijk om afhankelijkheden tussen stijlbestanden te beheersen (bijvoorbeeld als je stijlafstemmingen afhankelijk zijn van een bepaald basisframework). Bovendien is deze methode beter compatibel met cachemogelijkheden en plugins, en biedt het subthemes de mogelijkheid om de stijlafstemmingen van het parent-thema eenvoudig te overschrijven.

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

Om een thema te ondersteunen in meerdere talen zijn er in principe twee stappen nodig. Allereerst moet in alle tekststringen van het thema gebruik worden gemaakt van de vertaalfuncties van WordPress, zoals… ()、_e() 或 esc_html()En bepaal waar ze moeten worden geplaatst. style.css Hetgeen in het Chinees is gedefinieerd. Text DomainAls voorbeeld:_e( 'Hello World', 'my-first-theme' )Ten tweede: gebruik tools als Poedit om je themacode te scannen en een rapport te genereren. .pot Templatebestanden: vertalers kunnen er mee verschillende talenversies van een tekst van maken. .po En de gecompileerde versie .mo De taalbestanden moeten worden opgeslagen in het thema (theme). /languages/ In de map worden de vertalingen automatisch geladen door WordPress, afhankelijk van de taainstellingen van de website.