Préparation et installation de l'environnement de développement
Avant de commencer à écrire du code, il est essentiel de mettre en place un environnement de développement efficace. Cela non seulement améliorera votre productivité, mais assure également la standardisation et la maintenabilité du code.
Tout d’abord, vous aurez besoin d’un environnement de développement local. Vous pouvez utiliser des outils tels que XAMPP, MAMP ou Local by Flywheel, qui vous permettront de mettre en place rapidement un environnement de serveur contenant PHP et MySQL sur votre ordinateur. Après l’installation et le lancement des services, assurez-vous que Apache (ou Nginx) et MySQL sont en cours d’exécution.
Ensuite, téléchargez les fichiers du noyau de WordPress les plus récents, puis dézippez-les dans le répertoire racine du site sur votre serveur local (par exemple, dans le répertoire de XAMPP). htdocs Accédez au dossier via votre navigateur web. http://localhost/your-wordpress-folder Pour terminer l’installation de WordPress, veuillez vous rappeler le nom de la base de données, le nom d’utilisateur et le mot de passe que vous avez définis.
Lectures recommandées Pratique de l’CSS Tailwind : Guide de conception pour la création de pages web modernes et réactives。
Pour les éditeurs de code, je recommande Visual Studio Code, PhpStorm ou Sublime Text. Ces outils offrent une excellente mise en évidence du syntaxe ainsi que des suggestions de code pour PHP, HTML, CSS et JavaScript. De plus, il est avantageux d’installer des plugins essentiels, tels que ceux qui fournissent des suggestions intelligentes pour le développement avec WordPress, ainsi que Git pour la gestion des versions du code.
Enfin, dans le répertoire d’installation de WordPress local, allez à… wp-content/themes Dossier. Ici, créez un nouveau dossier pour le thème que vous allez créer, par exemple en le nommant… my-first-themeCe dossier contiendra tous les fichiers liés à votre thème.
Créer le fichier central du thème
Un thème WordPress est composé d’une série de fichiers standard, parmi lesquels deux fichiers sont obligatoires :style.css et index.phpCes fichiers définissent les informations de base et la structure du thème.
Tout d'abord, créez un style.css Ce fichier n’est pas seulement votre fichier de style (stylesheet), mais il contient également des métadonnées relatives au thème. Ces informations s’affichent sur la page “ Apparence ” → “ Thèmes ” dans l’administration de WordPress.
/*
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
*/Ensuite, créez… index.php Ce fichier est le modèle principal du thème. Il est utilisé lorsque WordPress ne trouve pas de modèle plus spécifique. single.php Ou page.phpLorsqu’il est nécessaire de l’utiliser, on le fait. Le plus simple exemple… index.php Il est possible de ne contenir que le code de base qui appelle la tête (header), le boucle principale (main loop) et le pied de page (footer) de WordPress.
Lectures recommandées Maîtriser Tailwind CSS : un guide pratique de l'initiation à la pratique.。
<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1011>
<header>
<h1><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>
<main>
<article>
<h2></h2>
</article>
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>À ce stade, votre thème peut être activé. Rendez-vous dans l’administration de WordPress, sur la page “ Apparence ” → “ Thèmes ”, et vous devriez voir “ Mon premier thème responsive ”. Activez-le, puis visitez la page d’accueil du site pour observer les effets de base.
Ajout de la fonctionnalité de suivi des sujets (thèmes).
Afin d'améliorer davantage les fonctionnalités liées aux thèmes, nous devons procéder par… functions.php Ce fichier ajoute un soutien aux fonctionnalités de base de WordPress.functions.php Les fichiers sont comme le « cerveau » d’un projet : ils permettent de stocker toutes les fonctions personnalisées, les classes, les événements (« hooks ») et les filtres (« filters ») qui sont utilisés dans le projet.
Créer un… functions.php Faites des modifications au fichier et ajoutez le code suivant pour prendre en charge les miniatures d’articles, les menus personnalisés et les balises HTML5.
<?php
function my_first_theme_setup() {
// 让主题支持文章和页面上的“特色图像”
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单位置（主菜单）
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
// 对评论表单、搜索表单等输出 HTML5 标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 添加对<title>标签的WordPress原生支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 引入样式表
function my_first_theme_scripts() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>Réaliser un layout et des styles réactifs
Le design responsive signifie que votre site web offre une bonne expérience d'affichage sur des appareils de différentes tailles, tels que les ordinateurs de bureau, les tablettes et les smartphones. Nous y parvenons principalement en utilisant les requêtes de médias (Media Queries) en CSS et des layouts fluides.
Tout d’abord, style.css En dessous des métadonnées, nous écrivons les styles globaux de base pour poser les fondations d'une conception responsive. Nous utilisons des technologies de mise en page CSS modernes telles que Flexbox.
/* 基础样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header, footer {
background: #f4f4f4;
padding: 2rem;
text-align: center;
margin: 1rem 0;
}
main {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
article {
flex: 1 1 300px; /* 基础宽度300px，可伸缩 */
background: #fff;
padding: 1.5rem;
border: 1px solid #ddd;
}Ensuite, ajoutez des requêtes de médias pour ajuster l’affichage en fonction de la largeur de l’écran. C’est le cœur du design responsive.
Lectures recommandées Créer un site Web unique : un guide complet du développement de thèmes WordPress, du niveau débutant au niveau expert.。
/* 平板设备（宽度小于 768px） */
@media (max-width: 768px) {
body {
padding: 0 15px;
}
main {
flex-direction: column;
gap: 1.5rem;
}
article {
flex: 1 1 auto;
}
}
/* 手机设备（宽度小于 480px） */
@media (max-width: 480px) {
header, footer {
padding: 1rem;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.2rem;
}
}Optimiser la réactivité du menu de navigation
Sur les appareils à écran petit, tels que les téléphones portables, les menus de navigation horizontaux traditionnels peuvent sembler trop encombrants. Une solution courante consiste à les transformer en menus de type « hamburger ». Nous allons devoir utiliser le CSS ainsi que quelques lignes de JavaScript pour réaliser cela.
Tout d’abord, header Certaines modifications de la structure HTML du menu sont généralement effectuées à l’aide de WordPress. wp_nav_menu Génération de fonction. Afin de contrôler le style, nous y ajoutons un nom de classe, ainsi qu’un bouton en forme de hamburger.
Dans le vôtre header.php Dans le fichier de modèle (il faut prendre ce qui se trouve à partir de…) index.php Le code du menu pourrait ressembler à ceci (après avoir été séparé du reste du code) :
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">菜单</button>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
'menu_class' => 'nav-menu',
) );
?>Ensuite, dans le CSS, le menu est caché par défaut sur les petits écrans. Lorsque l'utilisateur clique sur le bouton en forme de hamburger, un classement est activé ou désactivé à l’aide de JavaScript. .toggled) pour afficher le menu.
/* 小屏幕下隐藏菜单 */
@media (max-width: 768px) {
.nav-menu {
display: none;
flex-direction: column;
width: 100%;
}
.nav-menu.toggled {
display: flex;
}
.menu-toggle {
display: block;
}
}
/* 大屏幕下显示菜单并隐藏按钮 */
@media (min-width: 769px) {
.menu-toggle {
display: none;
}
.nav-menu {
display: flex;
list-style: none;
}
}Enfin, ajoutez un fichier JavaScript simple (par exemple…). js/navigation.js) et par la suite… functions.php Introduisons une méthode pour gérer les événements de clic sur les boutons.
Créer des modèles de page et des composants personnalisés
La flexibilité de WordPress provient en grande partie de son système de templates et de widgets. La création de templates personnalisés ainsi que de zones pour les widgets permet de enrichir considérablement les fonctionnalités de votre thème.
Créer un modèle de page personnalisé.
Supposons que vous souhaitiez créer un modèle de page “ à largeur complète ” (full-width page) qui ne comporte pas de barre latérale et dont le contenu occupe toute la largeur de l’écran. Pour commencer, créez un nouveau fichier dans le répertoire racine du thème et nommez-le… page-fullwidth.phpEn haut de ce fichier, il faut absolument ajouter une annotation indiquant le nom du modèle utilisé.
<?php
/**
* Template Name: 全宽页面
*/
get_header(); // 引入 header.php
?>
<main id="main" class="site-main full-width">
<?php
while ( have_posts() ) :
the_post();
the_title( '<h1 class="entry-title">', '</h1>' );
the_content();
endwhile;
?>
</main>
<?php
get_footer(); // 引入 footer.php
?>Actuellement, lorsque vous créez ou modifiez une page dans l’administration de WordPress, vous pouvez sélectionner l’option “ Page à largeur complète ” dans le menu déroulant “ Modèle ” des “ Propriétés de la page ”. Une fois cette option choisie, la page sera rendue en utilisant le fichier de modèle que vous venez de créer.
Zone des composants de la barre latérale d’enregistrement
La zone des composants permet aux utilisateurs d’ajouter du contenu à des emplacements spécifiques d’un thème (comme la barre latérale ou le pied de page) en le faisant glisser. Nous devons… functions.php Vous pouvez enregistrer une zone de barre latérale dans le système.
utiliser register_sidebar Une fonction est utilisée pour effectuer l’enregistrement. Cette fonction reçoit un tableau de paramètres qui contiennent les noms, les ID, les descriptions et les balises d’enveloppement de la barre latérale.
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __('Main Sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __('Ajouter un widget ici.' , 'mon-premier-thème' ), 'description' => __( 'Ajouter un widget ici.
'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' );Après l’enregistrement, vous devez intégrer cette zone de composants à l’endroit approprié dans le modèle de thème. Généralement, la barre latérale se trouve… sidebar.php Dans le fichier, puis dans le fichier de modèle principal (par exemple…) index.php Ou single.phpPar le biais de… get_sidebar() Introduction des fonctions.
Dans sidebar.php Dans ce document, il est utilisé… dynamic_sidebar Une fonction est utilisée pour afficher la zone des composants.
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php endif; ?>résumés
Développer et personnaliser votre premier thème WordPress responsive est un processus à la fois stimulant et très gratifiant. Suivant les étapes décrites dans cet article, vous avez créé votre propre environnement de développement et les fichiers essentiels nécessaires à la réalisation de votre thème. style.css et index.phpEt par le biais de… functions.php Les fonctionnalités relatives aux thèmes ont été améliorées. Vous avez mis en pratique de manière approfondie les principes du design web responsive, en utilisant les requêtes de médias CSS et la mise en page avec Flexbox pour garantir la compatibilité du site sur divers appareils. Enfin, vous avez exploré le puissant système de templates et l’API des composants de WordPress, et avez appris à créer des templates de page personnalisés ainsi que des zones de composants pouvant être déplacées à volonté.
Une fois que vous maîtriserez ces bases, vous pourrez explorer des fonctionnalités plus avancées, telles que la personnalisation des types d’articles, l’API du thème (theme customizer), ainsi que le support de l’éditeur de blocs (block editor), afin de créer des thèmes WordPress plus puissants et mieux conçus.
FAQ Foire aux questions
Le développement de thèmes doit-il toujours commencer de zéro ?
Ce n’est pas nécessaire. Bien que commencer à partir de zéro vous permette de maîtriser complètement chaque détail, pour les débutants ou dans les cas où un développement rapide est requis, il est plus efficace de partir de thèmes préexistants (comme les thèmes basés sur les caractères « _ ») ou de frameworks intégrés (tels que Bootstrap). Cela vous offre une base de code solide et conforme aux meilleures pratiques, que vous pourrez ensuite personnaliser à votre guise.
Comment déboguer mon thème WordPress ?
Une méthode de débogage couramment utilisée dans le développement avec WordPress est d’activer… WP_DEBUGDans le vôtre wp-config.php Dans le document, il sera indiqué que... define( 'WP_DEBUG', false ); Modifiez-le en… define( 'WP_DEBUG', true );Cela obligera WordPress à afficher tous les erreurs, avertissements et notifications PHP sur l’écran. De plus, en utilisant les outils de développement du navigateur (onglets Console, Elements, Network), il sera possible de déboguer le JavaScript, le CSS ainsi que les demandes réseau.
Pourquoi ma modification de thème n’est-elle pas immédiatement effective ?
Cela est généralement dû au cache du navigateur ou à un plugin de cache pour WordPress. Essayez d’abord de rafraîchir la page de force dans votre navigateur (Ctrl+F5 ou Cmd+Shift+R). Si vous utilisez un plugin de cache, veuillez vider son cache. Assurez-vous également que vous modifiez le bon fichier dans le dossier du thème actif. functions.php Parfois, il suffit de rafraîchir la page en arrière-plan pour mettre à jour un fichier, car ce dernier est lu à chaque chargement de la page.
Comment faire en sorte que mon thème soit compatible avec plusieurs langues ?
Il est une bonne pratique de permettre à un thème de prendre en charge plusieurs langues (internationalisation et localisation). Cela implique principalement deux étapes : premièrement, il faut utiliser les fonctions de traduction de WordPress pour encadrer tous les textes qui doivent être traduits à l’intérieur du thème. __('Hello World', 'my-first-theme')Deuxièmement, en utilisant des outils tels que Poedit, il est possible de scanner les fichiers thèmes pour générer… .pot Fichiers de modèle, puis créer les versions correspondantes pour chaque langue. .po Et après compilation. .mo Ouvrez le fichier et placez-le dans le dossier du thème. /languages/ Dans le répertoire. Enfin, functions.php Utilisé dans load_theme_textdomain Une fonction est utilisée pour charger les traductions.
Quelles sont les choses à prendre en compte lors du développement de thèmes commerciaux ?
Les thèmes commerciaux conçus pour la distribution doivent répondre à des exigences bien plus élevées que ceux utilisés à des fins personnelles. Il est essentiel de respecter strictement les normes de validation du répertoire des thèmes WordPress afin de garantir la sécurité du code et l’absence d’erreurs. Tous les entrées et sorties provenant des utilisateurs doivent être strictement échappées et vérifiées, en utilisant des fonctions sécurisées. esc_html, esc_urlLe thème doit comporter des documents détaillés et des annotations complètes. Il est fortement conseillé d’ajouter un soutien complet aux fonctionnalités de base de WordPress (comme l’éditeur de blocs et les logos personnalisés), ainsi que de garantir la compatibilité avec les plugins populaires. Enfin, pensez à intégrer un outil de personnalisation du thème pour offrir aux utilisateurs une expérience de modification intuitive et en temps réel.
Quelle est la suite, quelle est la suite ?
Lecture approfondie et connaissances pratiques
Les articles suivants sont liés au sujet de cet article et peuvent faire l'objet d'une lecture plus approfondie. Il est souvent préférable de commencer par l'article qui se rapproche le plus de votre problème actuel, puis d'étendre progressivement la lecture aux sujets environnants.
- Construire un site web réussi : Guide complet pour la création d'un site web de A à Z
- Guide complet pour la création de sites web modernes : choix technologiques et meilleures pratiques pour passer de zéro à la mise en ligne
- Qu’est-ce qu’un thème WordPress ? Guide complet de l’initiation à la maîtrise
- Découvrez les thèmes WordPress : une guide complet de la sélection à la personnalisation avancée
- Comment choisir et personnaliser un thème WordPress adapté à votre site web : de l’initiation à l’expertise
Français