WordPress-themaontwikkeling beheersen: een volledig handboek van nul tot één met praktische tips

Aanbevolen leesmateriaal Een perfecte website maken: vanaf nul een professioneel WordPress-thema ontwikkelen.。

Core template files en template-hiërarchie

WordPress gebruikt een intelligente systeem genaamd “template hierarchy” (templatestructuur) om te bepalen hoe verschillende soorten content worden weergegeven. Wanneer een gebruiker een pagina bezoekt, zoekt WordPress naar het corresponderende templatebestand volgens een bepaalde prioriteitsvolgorde. Het begrijpen van deze structuur is essentieel voor het ontwikkelen van thema’s (themes).

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

Werking principe van template-hierarchieën

Als je bijvoorbeeld een blogartikel bezoekt, zal WordPress op de volgende manier kijken waar de inhoud te vinden is:single-post-{post-type}-{slug}.php -> single-post-{post-type}.php -> single.php -> singular.php -> Eindelijk wordt het teruggezet naarindex.phpOntwikkelaars kunnen de weergave van verschillende inhouden aanpassen door meer specifieke templatebestanden te maken. Archiveringspagina's, zoekpagina's, 404-pagina's en dergelijke hebben allemaal hun eigen regels met betrekking tot de structuur en lay-out.

Een basistemplatebestand maken

Vanaf het meest fundamentele…header.php、footer.php和index.phpWe beginnen met het bouwen.header.phpIn dit geval moet u zeker gebruikmaken van…wp_head()Een functie is een tool dat het mogelijk maakt voor het WordPress-core, plugins en thema's om hier nodige code in te plaatsen (bijvoorbeeld links naar style sheets). Op vergelijkbare manier…footer.phpHet moet in het Chinees worden gebruikt.wp_footer()Function. In het hoofdtemplate.index.phpIn dit proces wordt gebruik gemaakt van…get_header()、get_footer()、get_sidebar()Wacht met het invoegen van deze onderdelen tot de template-taggen zijn geïmporteerd.

Een minimalistisch exemplaarindex.phpEen voorbeeld van de structuur is als volgt:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 显示文章内容
        endwhile;
    else :
        // 显示未找到内容
    endif;
    ?>
</main>

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

De themafuncties zijn geïntegreerd met de WordPress API.

functions.phpDe bestanden vormen het “brein” van een thema en worden gebruikt om de functionaliteiten van het thema uit te breiden, zonder de kernbestanden te veranderen. Hier kun je actie-haken (action hooks) en filter-haken (filter hooks) gebruiken om de werking van WordPress te beïnvloeden.

Aanbevolen leesmateriaal Hoe maak je een professioneel WordPress-thema: een volledig handboek vanaf nul tot livegoed。

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

passeren (een wetsvoorstel of inspectie enz.)add_theme_support()Je kunt in een functie de verschillende mogelijkheden aangeven die het ondersteunende systeem biedt. Denk hierbij aan het activeren van artikelafbeeldingen (promotieafbeeldingen), het instellen van een eigen logo, en het bepalen van de indeling van artikelen.

function mytheme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'mytheme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

De bovenstaande code werkt door…after_setup_themeDe hook wordt uitgevoerd tijdens de initialisatie van het thema en registreert de functionaliteiten van het thema.

Scripten en stijlen op veilige manier invoeren

Verbind nooit rechtstreeks CSS- en JS-bestanden in templatebestanden. Er moet gebruik worden gemaakt van andere methoden om deze bestanden in te laden.wp_enqueue_scriptsAction-hooks en de corresponderende functies worden gebruikt om het laden in een bepaalde volgorde te regelen.

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

function mytheme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JS文件，并依赖jQuery
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Deze methode zorgt voor een goede beheer van afhankelijkheden, voorkomt dubbele laden en voldoet aan de beste praktijken van WordPress.

Themaanpassing en geavanceerde functies

De ontwikkeling van moderne WordPress-themes is onmogelijk zonder aangepaste functies. Dit omvat onder andere de mogelijkheid om in real time een voorbeeld van het thema te zien via de themacustomizer, evenals het creëren van aangepaste artikeltypen en categorieën om speciale inhoud te beheren.

Het gebruik van de Theme Customizer API

De WordPress Customizer API biedt de mogelijkheid om instellingsopties te toevoegen die in real time kunnen worden geprevisualiseerd. Je kunt panelen, secties en instellingen toevoegen, en voor deze instellingen controllers maken (bijvoorbeeld kleurkeuzers of bestandsupload-elementen).

Aanbevolen leesmateriaal De ultieme gids: hoe je vanuit het niets een professioneel WordPress-thema ontwikkelt。

function mytheme_customize_register( $wp_customize ) {
    // 添加一个节
    $wp_customize->add_section( 'mytheme_colors', array(
        'title' => __( '主题颜色', 'mytheme' ),
    ) );
    // 添加一个设置
    $wp_customize->add_setting( 'primary_color', array(
        'default' => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );
    // 为该设置添加一个颜色控制器
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label' => __( '主色', 'mytheme' ),
        'section' => 'mytheme_colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

In het thema-bestand kun je gebruikmaken van…get_theme_mod( 'primary_color' )Om de door de gebruiker ingestelde waarden te verkrijgen.

Maak een aangepast artikeltype.

Als je content wilt tonen over portfolio's, producten, teams of andere niet-standaard onderwerpen, is het registreren van een aangepaste artikeltype (Custom Post Type of CPT) de beste optie. Dit gebeurt meestal door...register_post_type()De implementatie van de functie kan het beste in een plugin worden gedaan, om te voorkomen dat gegevens verloren gaan wanneer de thema wordt gewijzigd. Voor demonstratiedoeelen kan de functie echter ook rechtstreeks in het thema worden opgenomen.functions.phpDeze acties vinden plaats in...

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

function mytheme_register_portfolio() {
    $args = array(
        'public' => true,
        'label'  => __( '作品集', 'mytheme' ),
        'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'has_archive' => true,
        'menu_icon' => 'dashicons-portfolio',
    );
    register_post_type( 'portfolio', $args );
}
add_action( 'init', 'mytheme_register_portfolio' );

Na het registreren verschijnt in het backend een menu genaamd “Portfolio”. Hier kunt u het portfolio net zoals artikelen beheren en kunt u ook speciale templatebestanden voor het portfolio maken.single-portfolio.php。

Samenvatting

Het ontwikkelen van WordPress-themes is een systeematische procedure die begint met het begrijpen van de basisstructuur van de bestanden en de hiërarchie van templates, en eindigt bij het behendig gebruiken van alle beschikbare mogelijkheden.functions.phpHet uitbreiden van de functionaliteiten van een WordPress-thema kan worden gerealiseerd door samenwerking met verschillende WordPress-API's (zoals de Customizer-API en de Post Type-API). Het volgen van beste praktijken is belangrijk, zoals het veilig laden van bronnen met behulp van hooks, het gebruik van subthemes voor aanpassingen, en het schrijven van vertaalbaar code. Dit zijn essentiele elementen voor het ontwikkelen van een professioneel, efficiënt en onderhoudsbaar thema. Door de stappen in deze gids te volgen, hebt u de basisbegrijpingen van het bouwen van een custom thema vanaf nul verkregen. De volgende stap is om uw skills verder te ontwikkelen door regelmatig te oefenen en meer diepe kennis te vergaren over de verschillende API's.

Veelgestelde vragen (FAQ)

Welke bestanden zijn minimaal nodig voor een WordPress-thema met de naam ‘###’?
Een WordPress-thema vereist ten minste twee bestanden:style.css 和 index.php。style.cssDe commentaarblock bovenin het bestand moet de meta-informatie over het thema bevatten (zoals de naam van het thema), dit is nodig voor WordPress om het thema te herkennen.index.phpDit is de standaard hoofdtemplatefile.

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

Je moet voorbereiden op de internationalisering van het tekstbestand. In het thema moeten alle tekststrings die zijn gericht naar de gebruiker worden omhuld met een vertaalfunctie.__('Hello World', 'mytheme-textdomain')或_e('Hello World', 'mytheme-textdomain')Vervolgens wordt dit met hulpmiddelen als Poedit omgezet..potTemplatebestanden, en maak de corresponderende versies in de gewenste talen..po和.moTen slotte:functions.phpGebruikt in het Chinees (vereenvoudigd)load_theme_textdomain()Function loading.

Wanneer je een thema ontwikkelt, hoe voorkom je dat je aangepaste veranderingen verloren gaan nadat het thema is bijgewerkt?

Verander nooit direct de bestanden van het parent-thema (een thema dat van een derde partij is gedownload). De juiste manier om dit te doen, is door de techniek van “sub-themes” te gebruiken. Maak een nieuwe themadirectory en plaats de gewenste veranderingen in deze directory.style.cssDoor middel vanTemplate:De naam van de map waarin de parent-topic (moedertopic) zich bevindt, moet worden opgegeven. In het sub-topic hoef je alleen de bestanden te bewerken of toe te voegen die je wilt veranderen of toevoegen.style.css、functions.phpOf de templatebestanden die worden overschreven. Op deze manier kan het parent-thema veilig worden bijgewerkt, terwijl je eigen aanpassingen worden behouden.

Hoe voeg ik een aangepaste pagina-template toe aan mijn thema?

Allereerst: maak in de rootdirectory van je thema een nieuwe PHP-bestand, bijvoorbeeld `new_file.php`.page-fullwidth.phpOp de allerhoogste plek van deze bestand moet een speciale commentaar worden toegevoegd om aan te geven dat dit een pagina-template is. Voorbeeld:<?php /* Template Name: 全宽页面 */ ?>Daarna kun je je templatecode in deze bestand schrijven. Na het opslaan, kun je de “Volledig breedte pagina”-template zien en gebruiken in het drop-down menu “Template” onder “Pagagegevens” wanneer je een nieuwe pagina maakt of een bestaande pagina bewerkt in het WordPress-administratiepaneel.