WordPress-themaontwikkeling: bouw je eerste custom-thema van scratch

Het begrijpen van de kernstructuur van een WordPress-thema

Voordat je begint met schrijven van code, is het belangrijk om de basisprincipes van een WordPress-thema te begrijpen: de templatebestanden en de styleheets. WordPress gebruikt een reeks specifieke bestanden om verschillende delen van de website te weergeven, en deze bestanden volgen standaardiseerde namenconventies. Een minimalistisch thema vereist maar twee bestanden:index.php(Primary template file) enstyle.cssDe kernstyle sheets en themainformatiebestanden zijn essentieel, maar om een functionele en uitgebreide website te bouwen, hebben we nog meer nodig.

style.cssDe bestand bevat niet alleen CSS-regels, maar ook een blok met commentaren in het bestandskop dat de metadata van het thema definieert, zoals de naam van het thema, de auteur, een beschrijving en de versie. Op deze manier herkent WordPress een thema. Hier is een voorbeeld van een basiscommentaar in het bestandskop:

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Naast de kernbestanden bevat een typisch thema-architectuur ook:header.php(Het hoofd knikt)footer.php(onderaan de pagina)sidebar.php(Sidebar) Enfunctions.php(Themafuncties en -bestanden). Begrijp hoe deze bestanden kunnen worden gebruikt met behulp van template-taggen (zoals...)get_header(), get_footer()Het modulair combineren van onderdelen is essentieel voor efficiënte ontwikkeling.

Aanbevolen leesmateriaal Begingangersgids voor het ontwikkelen van WordPress-themes: maak vanaf nul je eigen website-ontwerp。

Een thema-bestand en -map maken

Allereerst moeten we naar de installatie-map van WordPress gaan.wp-content/themes/Maak een nieuwe map op de gewenste locatie. De naam van deze map moet het identificatief zijn voor je onderwerp. Het is aan te raden om alleen kleine letters, cijfers en strepen te gebruiken, bijvoorbeeld:my-first-themeAlle thema-bestanden worden hier opgeslagen.

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

Een kernstyle sheet (CSS) maken

Als eerder benadrukt werd…style.cssDit is vereist. Maak deze bestand in de themapagina en vul de volledige inhoud van het thema in. Daarna kun je beginnen met het schrijven van basis-CSS om het uiterlijk van de website te bepalen. Om de invloed van de standaardinstellingen van de browser te voorkomen, wordt meestal eerst gestart met het herstellen van de stijlinstellingen (ofwel het ‘resetten’ van de stijl).

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

Een hoofdtemplatebestand maken

Vervolgens maak je eenindex.phpDit is het standaardtemplate en tevens het belangrijkste template. De basisstructuur moet een oproep bevatten naar de kop (header), de inhoud (content) en de voet (footer). De template-taggen zijn ingebouwde functies van WordPress en worden gebruikt om dynamische inhoud in te voegen.
Een minimalistisch exemplaarindex.phpDe initiële versie kan er als volgt uitzien:

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            // 文章内容将在这里输出
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

Template splits: header, footer en sidebar

Om de code te kunnen hergebruiken en het overzichtelijk te houden, worden de algemene delen van een WordPress-thema meestal opgeslagen in aparte bestanden.

Implementeren van een hoofdtemplate voor de website

Creerenheader.phpDeze bestand bevat de koppen (headers) van een HTML-document.到De openingste delen van de tags, evenals het navigatiegebied bovenaan op de website. De belangrijkste template-tags omvatten…bloginfo()Het wordt gebruikt om informatie over een website te verkrijgen, evenals...wp_head()De ‘hook’ biedt plugins en thema’s de mogelijkheid om code op bepaalde plaatsen in te voegen.
Een basisversieheader.phpVoorbeeld:

Aanbevolen leesmateriaal Volledig handboek voor het ontwikkelen van WordPress-themes: bouw je eigen website vanaf nul。

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

Implementeren van een template voor de onderste helft van de website

Creerenfooter.phpHet bevat al het materiaal dat zich bevindt na het einde van het hoofdinhoudsgebied, zoals de copyright-informatie in de voetnoot, evenals andere belangrijke elementen.wp_footer()Hook-callen zijn essentieel voor het normale functioneren van veel plugins (bijvoorbeeld voor het analyseren van code).

<footer class="site-footer">
    <p>©  . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Verbetering van themafuncties en mogelijkheden voor personalisatie

functions.phpHet is de “brain” van je thema; het wordt gebruikt om functies te toevoegen, kenmerkens te registreren (zoals een navigatiemenu of een toolbar), en om stijlregels in scripts op te nemen, zonder dat de kernbestanden hoeven te worden gewijzigd.

De functies die worden ondersteund bij het registreren van een topic:

在functions.phpHier kun je gebruikmaken van…add_theme_support()Deze functies worden gebruikt om de ondersteunde mogelijkheden van een thema aan te geven. Bijvoorbeeld zijn het activeren van artikelafbeeldingen (feature images) en het instellen van een aangepast logo standaardmogelijkheden in moderne thema'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() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

Inclusie in de stijlboom en scripts

De juiste manier om stijlen en scripts te laden, is door ze te gebruiken…wp_enqueue_style()和wp_enqueue_script()Functies, en deze worden vervolgens geïntegreerd inwp_enqueue_scriptsOp de haak. Dit zorgt ervoor dat afhankelijkheden worden beheerd en dat dubbele laden wordt voorkomen.

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入主JavaScript文件
    wp_enqueue_script('my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Samenvatting

Vanaf het maken van een map met onderwerpen…style.cssVanaf het begin tot de bouw…index.phpHet uiteenbreken van...header.php和footer.phpWacht op de templatebestanden, en vervolgens...functions.phpDeze bestanden bevaten de essentiële functies en bronnen voor je WordPress-thema. Dit proces vormt de basis voor het ontwikkelen van WordPress-thema's. Elke stap legt de nadruk op het concept van de hiërarchie van WordPress-templates en de beste praktijken, zoals het correct gebruiken van template-taggen en hooks. Door deze basiskennten te beheersen, beschik je over een solide uitgangspunt om functies aan te passen en uit te breiden, zodat ze voldoen aan de behoeften van verschillende projecten.

Veelgestelde vragen (FAQ)

### Hoeveel bestanden heeft een WordPress-thema minimaal nodig?
Een werkend WordPress-thema vereist in ieder geval twee bestanden:index.php和style.cssDaarvan zijn erstyle.cssDe commentaarblock bovenin het bestand moet aanwezig zijn en de juiste themainformatie bevatten. Dit is een vereiste voor WordPress om het thema te herkennen.

Aanbevolen leesmateriaal Van nul naar één: Het ultimatieve handboek en praktische tutorial voor het ontwikkelen van WordPress-themes。

Hoe voeg ik een klein toolgebied toe aan mijn thema?

Je moet dit via…functions.phpDeze bestand wordt gebruikt om een widget (een klein onderdeel van een website) te registreren in het widgetgebied (de sidebar).register_sidebar()Je definieert een functie en specificeerert de parameters ervan, zoals de naam, ID en beschrijving. Daarna kun je deze functie gebruiken in de corresponderende templatebestanden (bijvoorbeeld)...sidebar.php) wordt gebruikt indynamic_sidebar()Een functie die deze functie kan oproepen.

Waarom wordt mijn eigen gemaakte navigatiemenu niet weergegeven?

Dit gebeurt meestal omdat er niets is gedaan om dit te voorkomen.functions.phpRegistreer de juiste locatie van je restaurant. Zorg ervoor dat je de juiste gegevens hebt gebruikt.register_nav_menus()Een functie om een positie voor een gerecht te registreren (bijvoorbeeld ‘primary’), en...header.phpCall in the middlewp_nav_menu()Op dat moment…‘theme_location’De waarden die zijn ingesteld voor de parameters zijn exact hetzelfde als tijdens het registreren. Ten slotte moet je in de WordPress-beheeromgeving, onder “Uiterlijk > Menü’s”, een menu toewijzen aan deze specifieke positie.

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

我应该在什么时候使用get_template_part()函数？

get_template_part()Functies worden gebruikt om herbruikbare codefragmenten te modulariseren, wat ze zeer handig maakt voor het weergeven van content in verschillende formaten in een artikel. Je kunt bijvoorbeeld een functie maken die…content.phpDeze bestanden worden gebruikt om de algemene HTML-structuur van elke artikel te definiëren, en vervolgens…index.phpIn een loop wordt dit gebruikt.get_template_part(‘content’)Roep het op. Dit verbetert de herbruikbaarheid en onderhoudbaarheid van de code, en maakt het ook mogelijk om professionelere templates te creeren (bijvoorbeeld)...content-page.phpDit wordt mogelijk.