Handboek voor het ontwikkelen van WordPress-themes: bouw je eerste thema van scratch op

Forbereidende werkzaamheden voordat je begint

Voordat je begint met schrijven van code, moet je ervoor zorgen dat je ontwikkelomgeving klaar is voor gebruik. Allereerst heb je een lokale serveromgeving nodig, bijvoorbeeld XAMPP, MAMP of Docker. Daarnaast is een code-editor onmisbaar; Visual Studio Code of PHPStorm zijn beide goede keuzes. Het belangrijkste is dat je de meest recente versie van WordPress hebt geïnstalleerd en dat deze goed werkt.

Volgens de opgegeven instructies vind je de benodigde bestanden in de map `wp-content` onder de installatiedirectory van je WordPress-site.wp-content/themesIn de map maak je een nieuwe map; deze zal je themamap worden. Je kunt deze bijvoorbeeld noemen…my-first-themeDe naam van deze map wordt direct je thema-identificator; het is daarom aan te raden om alleen kleine letters, cijfers en strepen te gebruiken.

In de themapagina zijn twee bestanden te vinden die essentieel zijn en minimaal nodig zijn om een WordPress-thema te starten:style.css和index.phpZonder deze elementen kan WordPress je thema niet herkennen in de lijst met thema's onder “Uiterlijk” -> “Thema's” in de backend.

Aanbevolen leesmateriaal WordPress-themaontwikkeling vanaf nul: een volledig handboek voor het maken van persoonlijke websites。

Het begrijpen van de kernstructuur van het bestand met het thema

Een volledig functionerend WordPress-thema bestaat uit een reeks template-bestanden die zich houden aan bepaalde namenconventies. Ieder bestand is verantwoordelijk voor het weergeven van een verschillend deel van de website.

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

Stijlboeken en verklaringen van thema-informatie

style.cssDe bestanden dienen niet alleen om CSS-stijlen op te slaan; de commentaarruimte aan het begin van het bestand wordt ook gebruikt door WordPress om de meta-data van het thema te lezen. Deze ruimte moet zich bevinden aan het begin van het bestand en moet een specifiek format volgen.

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

“Text Domain” wordt gebruikt voor internationalisering en is een belangrijke identificatiecode voor het latere laden van vertaalmappen. Nadat je deze gegevens hebt ingevuld, moet je de themapagina in het WordPress-administratiepaneel opnieuw laden. Dan moet je een thumbnail kunnen zien met de titel “Mijn eerste thema”.

De rol van het hoofdtemplatebestand

index.phpDit is de hoofdtemplate voor je thema en tevens de standaard-“terugkeren”-template van de website. Wanneer WordPress geen specifiekere templatefile kan vinden (bijvoorbeeld...single.php或page.phpAls dit het geval is, wordt dit gebruikt.index.phpDe basisstructuur bestaat uit het oproepen van de koppenafdeling (header) van WordPress, de inhoud van de hoofdloop (main loop) en de afsluitende afdeling (footer).

<?php get_header(); ?>

<main id="main">
    <p> &lt;?php
    als er berichten zijn(:
        terwijl er berichten zijn(:
            the_post();
            // Toon de inhoud van het artikel
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    anders(:
        echo '<p>Er zijn geen berichten gevonden.</p>';
    endif;
    ?&gt;
</main>

<?php get_footer(); ?>

Uitbreiden van de basismallen en toevoegen van nieuwe functies

Enkelindex.php、style.cssDat is niet genoeg; we moeten de koppen, voeten en zijbalken van elkaar scheiden om de structuur duidelijker te maken, en de belangrijkste functies van het thema toevoegen.

Aanbevolen leesmateriaal Van nul af: Een stappenplan om een eigen WordPress-thema te ontwikkelen。

Separate the header and footer templates.

Creerenheader.phpHet bestand bevat een verklaring van de documenttyp en de specificaties voor HTML.Deel van de inhoud, evenals de titels en navigatiegebieden van de website.wp_head()Hooken om te zorgen dat de plugin en het core van WordPress de nodige scripts en stijlen op de juiste manier kunnen injecteren.

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<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>
</header>

Creerenfooter.phpDe bestand bevat informatie voor de voetnoot van de website en bevat aan het eind een oproep (of: de bestand bevat een referentie) naar een andere file.wp_footer()Hook.

<footer>
    <p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Op deze manier, dus…index.phpHier kunnen we het gebruiken.get_header()和get_footer()Functies worden gebruikt om ze te introduceren.

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

Create a function file

functions.phpDit is de “hoofdunit” van het thema; het wordt gebruikt om functies toe te voegen, menu’s te registreren, speciale afbeeldingen in te schakelen en de sidebar te definiëren. Het is geen template-bestand, maar een PHP-bestand dat automatisch wordt geladen wanneer het thema wordt initialiseerd.

Hieronder staat…functions.phpEen basistekstvoorbeeld:

<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
function my_first_theme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_register_menus' );

// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_enqueue_scripts' );
?>

Maak meer templatebestanden aan.

Om verschillende soorten pagina's een meer geschikte lay-out te geven, moeten we meer speciale templatebestanden maken.

Aanbevolen leesmateriaal Van installatie tot beheersing: een volledige handleiding voor het opzetten van een WordPress-website en een uitgebreide uitleg van praktische tips.。

Artikelpagina en paginemodel

single.phpVerwend om een enkele blogartikel te renderen. De structuur is…index.phpIn vergelijking met de vorige variant, bevat deze variant meestal een commentaartemplate.comments.phpDe oproep van...

page.phpWordt gebruikt voor het weergeven van statische pagina's. Meestal worden geen metagegevens zoals categorieën of tags getoond, maar de focus ligt meer op de inhoud van de pagina zelf.

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

Artikelarchiveringslijsttemplate

archive.phpGebruikt om categorieën, tags, auteurs, data en andere informatie op archiveringspagina's te weergeven. Je kunt hierbij conditionele tags gebruiken, zoals…is_category()、is_tag()Om verschillende archiveringstypen te onderscheiden en de corresponderende titels te weergeven…

Een 404-foutpagina maken

404.phpDeze pagina wordt weergegeven wanneer een gebruiker een niet-bestaande URL opzoekt. Een goede 404-pagina moet een vriendelijke boodschap bevatten, een zoekvak en links naar de belangrijkste pagina's, zodat de gebruiker kan vinden wat hij of zij nodig heeft.

Samenvatting

Met deze handleiding heb je het volledige proces afgerond: van het maken van mappen en basisbestanden, tot het begrijpen van de hiërarchie van templates, en het uitbreiden van de mogelijkheden van je thema. Je hebt nu een thema gecreëerd dat over een basistructuur beschikt, herkend wordt door WordPress en beschikt over uitbreidbare functies. Hoewel het proces eenvoudig lijkt, bevat het alle essentiële concepten. Verder kun je meer leren over template-taggen, het gebruik van custom queries en WordPress-cycles, evenals hoe je custom artikeltypes en thema-customizer-opties kunt maken, zodat je thema nog sterker en persoonlijker kan worden.

Veelgestelde vragen (FAQ)

###: Waarom wordt mijn thema niet weergegeven in het WordPress-beheerpaneel?
Controleer eerst of je themapolder op de juiste plek is geplaatst.wp-content/themes/In de map. Daarna moet je controleren of de map de vereiste bestanden bevat.style.css和index.phpFile. Ten slotte, open het.style.cssZorg ervoor dat de opmerkingen over het thema aan de bovenkant van het bestand in het juiste format zijn opgesteld, vooral...Theme Name:Deze regel.

Hoe kan ik custom Logos toevoegen aan mijn thema?

Je hebt behoeve van informatie over het onderwerp…functions.phpVoeg een regel code toe aan het bestand om deze functie te activeren.add_theme_support( ‘custom-logo’ )Functie: Nadat deze is geactiveerd, kunnen gebruikers hun logo uploaden en instellen in “Uiterlijk” -> “Maatwerk” -> “Siteidentiteit”. Je moet dit ook nog instellen in…header.phpZorg ervoor dat je het op de juiste plek gebruikt.the_custom_logo()Een functie die dit weergeeft.

Wat is het verschil tussen de functions.php-fail van een thema en een plugin?

functions.phpDe functies die in het systeem zijn opgenomen, zijn sterk verbonden met het actieve thema. Als je het thema verandert, zijn deze functies niet meer beschikbaar. De functies van een plugin daarentegen zijn onafhankelijk van het thema; ze werken altijd, zolang de plugin is geactiveerd. Als je functies sterk afhankelijk zijn van de visuele presentatie van het thema (bijvoorbeeld de plaatsing van registratieopties of het definiëren van het lay-out), is het beter om deze functies in het thema zelf op te nemen.functions.phpAls het om een algemene functie gaat (zoals een contactformulier of SEO-optimalisatie), is het beter om deze als plugin te realiseren.

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

Je moet twee dingen doen. Ten eerste: tijdens het ontwikkelen moet je alle tekststrings die worden gebruikt door de gebruiker omringen met een vertaalfunctie.__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )En zorg ervoor dat…‘my-first-theme’与style.cssEerst: De “Text Domain” die is opgegeven, moet overeenkomen met de tekst die in het document wordt gebruikt. Ten tweede: Met hulpmiddelen als Poedit kun je alle te vertalen tekststrings uit je themacode halen en deze vervolgens verwerken..potDe documenten worden vervolgens door de vertalers in het corresponderende taalversie opgesteld..poEn de gecompileerde versie.moDe bestanden worden vervolgens in het thema geplaatst./languages/Catalogus.