De kerncomponenten van een WordPress-thema zijn:

Aanbevolen leesmateriaal In de huidige, zeer concurrerende online wereld is een goed ontworpen en presterende Word-document van groot belang.。

Headerinformatie van het thema-stylesheet

Subject:style.cssDe bestandskop moet een commentaar bevatten in een specifieke formatie. WordPress gebruikt deze informatie om het thema in de achtergrond te herkennen en weergeven.

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 Awesome Theme
Theme URI: https://example.com/my-awesome-theme/
Author: Your Name
Author URI: https://example.com/
Description: A modern, responsive WordPress theme built for speed and SEO.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
*/

Hierbij wordt de term “Text Domain” gebruikt voor internationalisering; dit is een identificator die wordt gebruikt bij de latere vertaling van teksten, en deze identificator is meestal gelijk aan de naam van de themapagina.

Voorkomende handelingen met themafunctiebestanden

functions.phpDe file is het “brein” van het onderwerp. Een veel voorkomende actie is het gebruik…add_theme_support()Deze functie wordt gebruikt om de door het thema ondersteunde mogelijkheden aan te geven. Denk hierbij aan het activeren van speciale afbeeldingen voor artikelen, het instellen van een eigen logo of een persoonlijke achtergrond.

<?php
function my_awesome_theme_setup() {
    // 添加对文章特色图片的支持
    add_theme_support( 'post-thumbnails' );
    // 添加对自定义Logo的支持
    add_theme_support( 'custom-logo' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    // 添加对标题标签的支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );
?>

Deze code gebruikt hooks.after_setup_themeDeze functie wordt uitgevoerd nadat het thema is geladen, waarna meerdere kernfuncties van WordPress veilig worden geactiveerd.

Template-levels en custom templates

WordPress gebruikt een intelligents systeem genaamd “Template Hierarchy” om te bepalen hoe verschillende soorten pagina’s worden weergegeven. Wanneer een gebruiker een pagina bezoekt, zoekt WordPress naar het corresponderende template-bestand volgens een bepaalde prioriteitsvolgorde. Voor een artikel dat is gemarkeerd als “News” zal WordPress op de volgende manier kijken naar de beschikbare templates:single-post-news.php -> single-post.php -> single.php -> singular.php -> index.phpOntwikkelaars kunnen deze regels gebruiken om door het maken van templatebestanden met specifieke namen een gedetailleerde controle over de pagina's te realiseren.

Aanbevolen leesmateriaal WordPress-themaontwikkeling voor beginners: bouw je eigen, aangepaste website vanaf nul。

Naast de door het systeem voorgeschreven templates, kunnen ontwikkelaars ook “pagina templates” maken. Dit zijn aangepaste templates die zijn ontworpen voor een specifieke pagina of een groep pagina's. Om een pagina template te maken, moet dit in de commentaren aan het begin van het template-bestand duidelijk worden aangegeven.

Een custom page template maken

Als je bijvoorbeeld een pagina-template met een volledige breedte wilt maken, kun je een nieuw bestand aanmaken met de naam…template-fullwidth.phpDe bestand, en voeg aan het begin van de bestand de volgende commentaar toe:

<?php
/**
 * Template Name: 全宽度页面布局
 * Description: 一个没有侧边栏的全宽度页面模板
 */
?>

Daarna kun je, wanneer je de WordPress-beheerpagina bewerkt, in het drop-down-menu “Template” onder “Pagina-eigenschappen” de optie “Volledig breedte-pagina-indeling” zien en kiezen. Dit biedt veel flexibiliteit bij het weergeven van content, zodat je geen core-bestanden van het thema hoeft aan te passen om specifieke lay-outwensen te realiseren.

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

Het gebruik van conditionele tags voor logische controle

In templatebestanden is het vaak nodig om afhankelijk van verschillende condities verschillende inhoud te weergeven. Hiervoor worden de conditionele tags van WordPress gebruikt. Bijvoorbeeld:index.phpEr kunnen conditionele tags worden gebruikt om te bepalen of het een pagina met een lijst van artikelen is of een pagina met één artikel. Hoewel dit meestal door specifiekere templatebestanden wordt geregeld.

<?php if ( is_home() && ! is_front_page() ) : ?>
    <h1>Lijst met blogartikelen</h1>
<?php elseif ( is_search() ) : ?>
    <h1>搜索结果：</h1>
<?php endif; ?>

Andere veelgebruikte conditionele tags zijn:is_single()、is_page()、is_category()、is_archive()Etcetera; dit zijn de fundamenten voor het bouwen van dynamische, intelligente thema's.

Script- en stijlbeheer voor thema's

Om de stabiliteit en prestaties van het thema te garanderen, moeten alle JavaScript- en CSS-bestanden worden geladen in een bepaalde volgorde, met behulp van de methoden die WordPress biedt, in plaats van ze rechtstreeks in de template-bestanden te gebruiken.或Tag. Dit is gerealiseerd door…functions.phpDe Chinese versie van dit bericht is niet beschikbaar.wp_enqueue_scriptsHet wordt gerealiseerd met behulp van een hook.

Aanbevolen leesmateriaal Focussen op de praktijk: van nul naar een: ontdek de essentiële technieken voor het ontwikkelen van moderne WordPress-themes。

De resources worden correct geregistreerd en in de juiste volgorde opgesteld voor gebruik.

Gebruikwp_register_script()和wp_enqueue_script()(Script) of het corresponderendewp_register_style()和wp_enqueue_style()Deze functies bieden WordPress de mogelijkheid om afhankelijkheden en versies centraal te beheren, waardoor het voorkomen van dubbele laden van bestanden wordt voorkomen.

<?php
function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

    // 注册一个自定义JavaScript文件
    wp_register_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true );
    // 排队这个脚本（仅在需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );
?>

In het bovenstaande voorbeeld:get_stylesheet_uri()Haal de huidige thema informatie op.style.cssPadget_template_directory_uri()Haal de URI van de themadirectory. Zet de laatste parameter van het script op…trueDit betekent dat de inhoud in de voetnoot wordt geladen, waardoor de snelheid van het laden van de pagina wordt verbeterd.

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

Inline-stijlen of scripts toevoegen

Soms is het nodig om op basis van PHP-logica dynamisch CSS of JavaScript te genereren. Hiervoor kan je gebruikmaken van…wp_add_inline_style()和wp_add_inline_script()Functies mogen alleen worden gebruikt als ze zijn gebonden aan een beschikbare, gereserveerde resource.

<?php
function my_dynamic_css() {
    $custom_css = "
        .site-header {
            background-color: #" . get_theme_mod('header_bg_color', 'ffffff') . ";
        }
    ";
    wp_add_inline_style( 'my-awesome-theme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_dynamic_css' );
?>

Theme Customizer en Customizable Features

De WordPress Theme Customizer biedt een realtime-previewscherm dat gebruikers (beheerders) in staat stelt om bepaalde instellingen van het thema aan te passen, zoals kleuren, het logo en de achtergrondafbeelding. Met de Theme Customizer API kunnen ontwikkelaars veilig nieuwe, configurabele opties toevoegen aan het thema.

Voeg een instelling toe in de customizer.

Allereerst is het nodig om…functions.phpGebruikt in het Chinees (vereenvoudigd)customize_registerHooken worden gebruikt om instellingen, controlelementen en gebieden te registreren.

<?php
function my_awesome_theme_customize_register( $wp_customize ) {
    // 添加一个“颜色”板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-awesome-theme' ),
        'priority' => 30,
    ) );

    // 添加一个“链接颜色”设置
    $wp_customize->add_setting( 'link_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'    => __( '链接颜色', 'my-awesome-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'link_color',
    ) ) );
}
add_action( 'customize_register', 'my_awesome_theme_customize_register' );
?>

U kunt uw eigen instellingen weergeven in het onderwerp.

Nadat de instellingen zijn toegevoegd, moet deze waarde worden weergegeven op de front-end van het thema. Meestal gebeurt dit op de pagina waar de gebruiker de instellingen kan bewerken of waar de inhoud wordt weergegeven.style.cssOf via...wp_add_inline_style()In de toegevoegde dynamische CSS wordt gebruik gemaakt van…get_theme_mod()De functie haalt de waarde op.

<?php
function output_customizer_css() {
    $link_color = get_theme_mod( 'link_color', '#0073aa' ); // 第二个参数为默认值
    if ( $link_color !== '#0073aa' ) {
        $css = "
            a { color: {$link_color}; }
            a:hover { color: " . adjust_color( $link_color, -50 ) . "; }
        ";
        wp_add_inline_style( 'my-awesome-theme-style', $css );
    }
}
add_action( 'wp_enqueue_scripts', 'output_customizer_css' );
?>

Op deze manier zijn de functionaliteiten en het uiterlijk van het thema zeer goed te configureren, terwijl de code toch netjes en veilig blijft.

Samenvatting

Het ontwikkelen van een WordPress-thema is een systeematische klus die een diepe verstanding vereist van de structuur van de templates, de kernfuncties van WordPress, het beheer van resources en de mogelijkheden van de aangepaste API's. Het begint met het bouwen van de basis van het thema...style.css和index.phpWe beginnen met het maken van specifieke templatebestanden om de weergave van verschillende pagina's te beheersen.functions.phpHet uitbreiden van de mogelijkheden van een thema, en het beheersen van scripts en stijlen in overeenstemming met de WordPress-standaarden, vormt de basis voor het creeren van een sterke en efficiënte thema. Daarnaast kan het integreren van de thema-customizer-API een gebruikervriendelijke, realtime mogelijkheid voor aanpassingen bieden. Het beheersen van deze kernconcepten en -vaardigheden is essentieel om een professionele WordPress-themaprogrammeur te worden.

Veelgestelde vragen (FAQ)

Een basisWordPress-thema vereist in ieder geval de volgende bestanden:

Een zeer basist thema dat door WordPress wordt herkend, vereist in ieder geval twee bestanden:style.css和index.php。style.cssDe kop moet de juiste metagegevens over het onderwerp bevatten.index.phpDit is het laatste terugkeringsbestand (‘rollback file’) in de template-hierarchie, en wordt gebruikt om de meest basistische inhoud af te drukken.

Wat is het verschil tussen een subthema en een hoofdthema? Hoe worden ze gecreëerd?

Subthema's erfen alle functies en stijlen van het overkoepelende thema, maar bieden ontwikkelaars de mogelijkheid om deze te overschrijven en aan te passen zonder de bestanden van het overkoepelende thema te hoeven te bewerken. Dit maakt het gemakkelijk om na een update van het overkoepelende thema de eigen aanpassingen te behouden. Om een subthema te creeren, hoef je alleen maar…/wp-content/themes/Maak een nieuwe map in de map en creeer daarin ook een bestand.style.cssHet bestand moet in zijn header-commentaar de volgende informatie bevatten:Template:Hier wordt de naam van de map met het overkoepelde thema (het 'parent theme') opgegeven.

Waarom wordt mijn eigen paginemodel niet weergegeven in de drop-down-lijst in de backend?

Controleer je pagina-templatebestand (bijvoorbeeld…)my-template.phpDe bestand moet zich bevinden in de rootmap van het thema, en de commentaarblock aan het begin van het bestand moet in het juiste format zijn opgesteld. In het commentaarblock moet informatie worden opgenomen.Template Name:Deze regel moet precies zo staan, gevolgd door de naam van je template. Een foutieve ruimte of het ontbreken van een komma kan ervoor zorgen dat WordPress de template niet herkent.

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

Dit wordt voornamelijk gerealiseerd door “internationalisering (i18n)” en “localisering (l10n)”. Allereerst…style.cssDe “Text Domain” enfunctions.php的load_theme_textdomain()Tijdens de oproep wordt een consistent thema-textveld gebruikt. Vervolgens worden op alle plaatsen waar tekst moet worden vertaald, de corresponderende vertalingen toegepast.__()、_e()Deze vertaalfuncties worden vervolgens verpakt in een speciale laag (wrapper). Ten slotte wordt met hulpmiddelen als Poedit een eindresultaat gecreëerd..potTemplatebestanden, en maak de corresponderende versies in de gewenste talen..po和.moDe bestanden zijn opgeslagen onder het thema./languages/In de catalogus.