Forbereidende werkzaamheden en opzet van de omgeving
Voordat je begint met schrijven van code, heb je een geschikte ontwikkelomgeving nodig. Dit omvat een lokale serveromgeving (bijvoorbeeld XAMPP, MAMP of Local by Flywheel) en een code-editor (bijvoorbeeld VS Code,PhpStorm of Sublime Text). Zorg ervoor dat je lokale omgeving PHP (versie 7.4 of hoger) en MySQL/MariaDB ondersteunt.
Volgens de opgegeven instructies moet je nu naar de installatie-map van WordPress gaan.wp-content/themesMaak een nieuwe map in de bestaande map; deze wordt je themakatalog. Bijvoorbeeld, je kunt een map maken met de naam…my-first-themeDe map… Dit is het “thuis” voor al je themafailen.
Er zijn maar twee basisbestanden in een WordPress-thema:style.css和index.phpDaarvan zijn erstyle.cssHet is niet alleen een stylesheet, maar ook een soort “identiteitsbewijs” van het thema. Via de commentaren in het bestandskopie vertelt het WordPress welke naam het thema heeft, wie de ontwikkelaar is, wat de beschrijving is, en andere metagegevens.
Aanbevolen leesmateriaal Diepgravend onderzoek naar het ontwikkelen van WordPress-themes: een gids met de kerntechnieken van het begin tot de volmaaktheid。
Create a theme information file
In je themapagina (theme folder), maak een nieuw bestand.style.cssDeel de bestanden en voer de volgende basisgegevens in:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习WordPress主题开发的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Deze commentaar is nodig. WordPress leest namelijk de inhoud van deze tekst om het te kunnen verwerken.Theme NameDeze regel wordt gebruikt om in de achtergrondlijst met thema's jouw thema te herkennen en te weergeven. Andere informatie, zoals...Text DomainDit is om voorbereiding te treffen op internationaal gebruik (vertaling).
Create a core template file.
Volgens de opgegeven instructies zal de volgende stap zijn om de meest basale versie van het gewenste product of systeem te creeren.index.phpDe bestand. Zelfs als deze bestand tijdelijk leeg is, is dat nog steeds in orde.style.cssDe informatie is compleet, dus je thema zal verschijnen in de lijst met thema’s in het WordPress-beheerpaneel (“Uiterlijk” -> “Themata”) en kan worden activerd. Nu gaan we verder…index.phpVul hier een eenvoudig HTML-structuur in om de titel van de blog en de inhoud van het artikel weer te geven.
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
<header>
<h1><a href="/nl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><p><strong>Deze website is bedoeld om u te informeren over de activiteiten van het bedrijf.</strong></p></p>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<article>
<h2><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
<div><?php the_content(); ?></div>
</article>
<?php
endwhile;
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_foot(); ?>
</body>
</html>Deze code maakt gebruik van meerdere onderdelen van het WordPress-core-pakket.模板标签Als voorbeeld:bloginfo()、the_title()、the_content()functiewp_head()和wp_foot()Dit zijn belangrijke ‘hooks’ (verbindingspunten) die het mogelijk maken voor het WordPress-core-systeem, plugins en andere scripts om nodige code in de boven- en onderste delen van een pagina in te voegen.
Het begrijpen van de structuur van templates en het maken van kerntemplates
WordPress gebruikt een set tools genaamd…模板层级De regels bepalen welke templatebestand moet worden gebruikt om een specifieke paginaaanvraag te renderen. Dit is een van de fundamentele concepten in themaontwikkeling. In simpelere termen: WordPress begint met het zo specifiek mogelijke templatebestand en zoekt dit op. Als dit niet bestaat, wordt een algemener template gebruikt, en als ook dat niet beschikbaar is, wordt uiteindelijk een standaardtemplate gebruikt.index.php。
Aanbevolen leesmateriaal Een introductie tot het ontwikkelen van WordPress-thema's: hoe je je eerste aangepaste thema vanaf nul maakt.。
Een template maken voor de artikeldetailspagina
Als een gebruiker een bepaald artikel bezoekt, zal WordPress eerst proberen te vinden…single-post.phpAls het niet bestaat, wordt er gebruik gemaakt van…single.phpEn tot slotindex.phpLaten we er een maken.single.phpDit is bedoeld om het weergeven van een specifiek artikel te kunnen beheersen.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
<div class="entry-meta">
发布于： | 作者：
</div>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<footer class="entry-footer">
分类：
</footer>
</article>
<?php
// 上一篇/下一篇导航
the_post_navigation();
// 评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>Deze template bevat drie belangrijke template-elementen:get_header()、get_sidebar()和get_footer()Ze worden gebruikt om respectievelijk iets in te leiden.header.php、sidebar.php和footer.phpBestanden zijn cruciaal voor het hergebruiken van code en het toepassen van een modulaire ontwerp.
Een pagina-template maken
Op statische pagina's (zoals “Over ons”) zal WordPress op zoek gaan naar...page.phpCreërenpage.phpDe structuur is vergelijkbaar met…single.phpIn vergelijking met de andere varianten, worden hieroverige gegevens (zoals categorieën, tags en publicatie tijd) meestal niet weergegeven.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php
endwhile;
?>
</main>Implementeren van themafuncties en -stijlen
Een compleet thema vereist niet alleen een templatebestand, maar ook…functions.phpDeze bestanden worden gebruikt om functies te toevoegen, menu's te registreren en een toolgebied te creëren.style.cssStijlen toevoegen.
Thema-functionaliteit-functiebestand
Maak een map in de rootdirectory van je thema.functions.phpDeze file wordt automatisch geladen tijdens het initialiseren van het thema en wordt gebruikt om alle zelfgemaakte PHP-functies en hooks op te slaan.
<?php
/**
* 我的第一个主题的功能函数
*/
// 添加主题支持功能
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像（缩略图）功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单
register_nav_menus(
array(
'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
)
);
// 添加HTML5标记支持
add_theme_support(
'html5',
array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
'style',
'script',
)
);
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册小工具侧边栏
function my_first_theme_widgets_init() {
register_sidebar(
array(
'name' => esc_html__( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( '在此添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );
// 加载主题样式表和脚本
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载通用CSS
wp_enqueue_style( 'my-first-theme-main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );
// 加载通用JavaScript
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Basistijlen toevoegen
Nu gaan we…style.cssNaast de commentaren aan het begin van je tekst, kun je enkele basis-CSS-regels toevoegen om je thema te verfraaien.
Aanbevolen leesmateriaal Ultimate Guide to WordPress Theme Development: Create a Custom WordPress Website Theme from Scratch。
/* 基础重置与排版 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
header {
border-bottom: 2px solid #0073aa;
margin-bottom: 40px;
padding-bottom: 20px;
}
.entry-title {
color: #222;
}
.site-main {
float: left;
width: 70%;
}
/* 侧边栏样式 */
.widget-area {
float: right;
width: 25%;
padding-left: 5%;
}
/* 页脚样式 */
footer {
clear: both;
border-top: 1px solid #ddd;
margin-top: 60px;
padding-top: 20px;
text-align: center;
color: #666;
}Modulariteit en template-componenten
Om de onderhoudelijkheid en herbruikbaarheid van het codebestand te verbeteren, raden ze bij WordPress aan om herhaalde delen van een pagina (zoals de header, footer en sidebar) op te delen in aparte templatebestanden.
Creëer componenten voor de header en footer van de pagina.
Creerenheader.phpBevat vanaf...<!DOCTYPE html>Vanaf het begin tot het openen<main>Alles wat zich voor de tag bevindt.
<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1011>
<p><strong>Deze pagina is momenteel niet beschikbaar.</strong></p>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary">Ga direct naar het belangrijkste deel.</a>
<header id="masthead" class="site-header">
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) :
?>
<h1 class="site-title"><a href="/nl/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php
else :
?>
<p class="site-title"><a href="/nl/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php
endif;
$my_first_theme_description = get_bloginfo( 'description', 'display' );
if ( $my_first_theme_description || is_customize_preview() ) :
?>
<p class="site-description"><?php echo $my_first_theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
<?php endif; ?>
</div>
<nav id="site-navigation" class="main-navigation">
'primary',
'menu_id' => 'primary-menu',
)
);
?>
</nav>
</header>
<div id="content" class="site-content">In overeenstemming met dit, wordt er een creatie gemaakt.footer.phpBevat</div><!-- #content -->Alles wat daarna komt.
</div><!-- #content -->
<footer id="colophon" class="site-footer">
<div class="site-info">
<p><?php printf( esc_html__( '主题：%1$s', 'my-first-theme' ), '<a href="https://example.com/">我的第一个主题</a>' ); ?></p>
</div>
</footer>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>Creerensidebar.phpOm de widget-ruimte te weergeven.
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) :
?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php
endif;
?>Nadat je deze onderdelen hebt afgerond, kun je ze gebruiken.get_header()、get_footer()和get_sidebar()De functies worden in alle templatebestanden eenvoudig opgeroepen.
Samenvatting
Met deze handleiding heb je het hele proces afgerond om van scratch een basis-WooCommerce-thema te bouwen. Je hebt geleerd hoe je een ontwikkelingsomgeving instelt en de vereiste themafailen maakt.style.css和index.phpEn door het diepere begrijpen van het template-systeem van WordPress, zijn er speciale templates gemaakt voor verschillende soorten pagina's (zoals artikelen en pagina's).single.php， page.phpJe hebt de techniek onder de knie om…functions.phpDe bestand bevat kernfuncties voor het thema, zoals een registratiemenu, kleine hulpmiddelen en ondersteunende afbeeldingen. Ten slotte heb je het principe van modulaire ontwikkeling toegepast door de header, voetnoot en sidebar op te delen in herbruikbare templateonderdelen.header.php， footer.php， sidebar.phpDit heeft de onderhoudbaarheid van het codebestand aanzienlijk verbeterd. Dit is echter maar een beginpunt. Op deze basis kun je verder ontwikkelen met zelfgemaakte artikeltypes, geavanceerde thema-opties, responsief ontwerp en JavaScript-interacties, waardoor je steeds een krachtiger en professioneler WordPress-thema kunt bouwen.
Veelgestelde vragen (FAQ)
Waarom verschijnt mijn thema niet op de achtergrond?
Zorg ervoor dat je themapagina (of themenmap) op de juiste plek is geplaatst.wp-content/themes/In de map, en daarin zitten…style.cssDe bestandskop bevat een block met commentaren in het juiste format, vooral...Theme Name:Deze regel moet aanwezig zijn en correct zijn. De bestandsindeling moet UTF-8 zijn, zonder BOM (Byte Order Mark).
Hoe kan ik custom Logos toevoegen aan mijn thema?
In jouw...functions.phpDe documenten vanmy_first_theme_setupIn de functie, voeg een regel code toe:add_theme_support( 'custom-logo' );Nadat dit is toegevoegd, kunnen gebruikers hun logo uploaden en instellen in het WordPress-beheerpaneel onder “Uiterlijk” -> “Maak het persoonlijk” -> “Siteidentiteit”. Je moet dit eerst doen…header.phpGebruikt in het Chinees (vereenvoudigd)the_custom_logo()Een functie die het logo weergeeft.
Wat moet je doen als de website een leeg scherm toont nadat je de functions.php-fail hebt gewijzigd?
Dit betekent meestal dat...functions.phpEr zijn PHP-syntaxisfouten in het bestand. WordPress zal de uitvoering stoppen vanwege deze fatale fouten. Je moet via FTP of een bestandsbeheerder toegang krijgen tot de server en het foutige bestand vervangen.functions.phpOm te hernoemen (bijvoorbeeld in...)functions.php.bakDit moet de toegang tot de website herstellen. Daarna moet je je code controleren en corrigeren, en de juiste bestanden opnieuw uploaden. Het is een goede gewoonte om dit in een lokale ontwikkelingsomgeving te doen, om dergelijke problemen te voorkomen.
Hoe zorg ik ervoor dat mijn thema ondersteunt wordt bij meertalige vertalingen?
Je hebt het al gedaan.style.cssIt is set in...Text Domain(Veld voor tekst), enfunctions.phpIn de string is gebruik gemaakt van...esc_html__( ‘文本’， ‘my-first-theme’ )Een dergelijke vertaalfunctie. Vervolgens moet je gebruikmaken van tools als Poedit om de te vertalen tekststrings in de themafailen te scannen en deze te vertalen..potMaak eerst een sjabloonbestand en maak vervolgens voor elke taal een bijbehorende versie..po和.moDe bestanden worden vervolgens in het thema geplaatst./languagesDe vertalingen zijn opgeslagen in een map. WordPress laadt automatisch de juiste vertalingen op basis van de instellingen van de website-taal.
De volgende stap, wat moeten we als volgende doen?
Voor meer informatie en praktische kennis
De volgende content is relevant voor het onderwerp van dit artikel en is geschikt voor verder lezen. Het kan vaak effectief zijn om eerst het artikel te lezen dat het dichtst bij uw huidige vraagstuk staat en vervolgens geleidelijk aan artikelen over aanverwante onderwerpen te bekijken.
- Waarom wordt WordPress gekozen als de favoriete platform voor het bouwen van websites?
- WordPress Basisgids: Bouw je eerste professionele website vanuit het niets
- Alles-in-één oplossing voor websiteontwikkeling: een volledig handboek voor de implementatie, van het begin tot de livegang van de website
- Voordracht: Waarom kiezen voor WordPress voor ontwikkeling?
- Ultimatum voor websitebouw: Het volledige proces om vanaf nul een professionele website te bouwen
Nederlands