Comment construire un thème WordPress à partir de zéro: les bases

Dans ce tutoriel, nous explorerons en profondeur la structure du fichier de thème WordPress et apprendrons à créer un thème WordPress de base à partir de zéro.

Dans la première partie de cette série, nous avons introduit WordPress Théming et la terminologie fondamentale relative au développement du thème WordPress. Nous avons couvert Modèles , Partials , Hiérarchie des modèles , Types de publication WordPress , le style.css Stylesheet, wordpress Filtre et Action Hooks, WordPress Loop , Tags conditionnels , et nous avons brièvement examiné une structure de fichier de thème WordPress simple typique.

Les plats clés

• Commencez par configurer un thème minimum nu à l'aide d'un fichier index.php et style.css, garantissant que WordPress reconnaît votre nouveau thème.
• Intégrer le bootstrap pour la conception et l'esthétique réactives, modifiant les fichiers de modèle pour inclure les classes HTML et CSS de Bootstrap.
• Utilisez le fichier functions.php pour ajouter des fonctionnalités personnalisées, des styles et scripts d'établissement et gérer efficacement les crochets WordPress.
• Personnalisez la sortie dynamique des menus d'en-tête et de navigation à l'aide de crochets et de conditionnels WordPress pour s'adapter à différents types de pages.
• Assurez-vous que votre thème est réactif et convivial sur les appareils mobiles en ajustant CSS et en utilisant des requêtes multimédias.

Création du thème minimum nu

La première chose que nous ferons est d'installer un plugin qui nous permettra de créer des articles WordPress et d'autres contenus. De cette façon, nous serons en mesure de peupler rapidement notre site Web de développement sans perdre trop de temps. Un plugin qui sert cet objectif est FakerPress de Gustavo Bordoni, disponible dans le référentiel de plugin WordPress.

Nous installons et activons rapidement le plugin via WP-Cli.

Maintenant, lorsque nous nous connectons au tableau de bord d'administration, nous verrons que FakerPress est installé, et nous pouvons créer toutes sortes de contenu en lot, y compris tous les types de publication personnalisés que nous avons.

Maintenant, en utilisant ce plugin, nous allons créer du faux contenu. C'est le résultat, en utilisant la valeur par défaut vingt-sept WordPress Thème:

Maintenant, nous plongeons rapidement et créons un thème minimum nu qui se compose du fichier Catch-All Index.php, et de style.css, dont nous avons besoin pour le système de temntat WordPress pour reconnaître le thème:

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

C'est le style.css, qui ne se compose que de commentaires de méta-CSS pour l'instant. Ces commentaires sont nécessaires.

Il s'agit du fichier index.php. Il attrapera toutes les demandes pour l'instant:

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

Nous téléchargeons et activons maintenant le thème minimal que nous avons. Je l'active en utilisant WP-CLI:

Le thème est désormais visible par WordPress et est actif:

Nous n'avons pas fourni de capture d'écran, donc l'affichage dans le backend est basique.

Si nous visitons notre site Web maintenant dans le navigateur, c'est ce que nous verrons:

Évidemment, nous avons du travail à faire.

Si nous affichons le code source de la page d'accueil, nous verrons que la fonction wp_head () a publié de nombreuses balises WordPress par défaut dans le , comme CSS, JavaScript, Link et Meta Tags.

La fonction bloginfo () est utilisée pour produire des informations sur le site Web.

Notre page d'accueil est vide, car nous ne publions rien à l'intérieur de la boucle - un modèle que WordPress utilise dans tous ses modèles pour produire du contenu.

La page Codex autour de la boucle va profondément dans les détails à ce sujet. Une structure typique pour la boucle - qui est basée sur PHP tandis que Structure de contrôle - ressemble à ceci:

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span>    <span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
      <span><span><span><header</span>></span>
</span>         <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span>         <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span>      <span><span><span></header</span>></span>
</span>
        <span><span><?php
</span></span><span>        <span>if ( have_posts() ) :
</span></span><span>            <span>/* Start the Loop */
</span></span><span>            <span>while ( have_posts() ) :
</span></span><span>                <span>the_post();
</span></span><span>            <span>endwhile;
</span></span><span>        <span>endif;
</span></span><span>        <span>?></span>
</span>
<span><span><span></body</span>></span>
</span>

Nous devons remplir cela en boucle avec du contenu - ou avec des balises WordPress de sortie de contenu.

si nous changeons notre boucle, en ajoutant the_title (), the_excerpt (), et nous ajoutons du balisage html et the_id (), pour ressembler à ceci:

<span><span><?php
</span></span><span><span>if ( have_posts() ) {
</span></span><span>    <span>while ( have_posts() ) {
</span></span><span>        <span>the_post();
</span></span><span>        <span>//
</span></span><span>        <span>// Post Content here
</span></span><span>        <span>//
</span></span><span>    <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span>

Nous allons maintenant obtenir une liste de messages sur notre page d'accueil, sans style appliqué:

WordPress montre une page de blog - une page d'archive pour tous les articles de blog - par défaut.

Si nous visitons maintenant URL de message unique - quelque chose comme http://my-website.com/2018/11/14/sapiente-adfacilis-quo-repellat-quos/ - nous verrons quelque chose comme ceci:

notre boucle , bien que très brut, fonctionne réellement.

Structurer notre thème dans des fichiers et appliquer le banc de bootstrap

Nous allons maintenant implémenter des partiels, comme Header.php et Footer.php et divers modèles spécialisés, tous en utilisant le balisage de Bootstrap Twitter, afin que nous puissions le coiffer plus facilement.

En commençant par index.php, nous remplaçons tout le contenu avant et après la boucle par get_header () et get_footer () Fonctions:

    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
    <span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>        <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span>        <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>
    <span><span><?php endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>

Cela signifie que nous devons fournir tout ce contenu dans les partiels que nous avons mentionnés.

Conformément à ce que nous avons dit - que nous utiliserons le thème Bootstrap Twitter - notre fichier en tête.php ressemblera à ceci:

/**
 *
 * @package Botega_Scratch_Theme
 */

get_header(); ?>

    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
    <span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>        <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span>        <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>
    <span><span><?php endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>

Notre fichier Footer.php ressemblera à ceci:

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

Nous utilisons des classes bootstrap dans nos balises HTML, et wp_head () et wp_footer () Fire WP_head et WP_Footer Action Hooks.

La prochaine chose que nous ferons consiste à inclure le CSS et JavaScript du modèle Bootstrap Clean de Startbootstrap.com, qui est livré avec une licence MIT, afin que nous puissions l'utiliser librement. De cette façon, notre thème sera livré avec des styles prédéfinis, une réactivité, et nous pourrons toujours le styliser davantage.

fonctions.php

fonctions.php est un fichier qui est livré avec n'importe quel thème WordPress sérieux. Il s'agit d'un fichier qui agit comme des archives de plugin d'un homme pauvre. Il nous permet d'inclure toute fonctionnalité personnalisée dans notre thème.

Nous allons d'abord utiliser ce fichier pour inclure le bootstrap et les styles et scripts de notre thème bootstrap:

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span>    <span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
      <span><span><span><header</span>></span>
</span>         <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span>         <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span>      <span><span><span></header</span>></span>
</span>
        <span><span><?php
</span></span><span>        <span>if ( have_posts() ) :
</span></span><span>            <span>/* Start the Loop */
</span></span><span>            <span>while ( have_posts() ) :
</span></span><span>                <span>the_post();
</span></span><span>            <span>endwhile;
</span></span><span>        <span>endif;
</span></span><span>        <span>?></span>
</span>
<span><span><span></body</span>></span>
</span>

Il s'agit d'une manière WordPress-idiomatique d'inclure des scripts et des styles dans un thème. Il nous permet de spécifier que la position des scripts sera en cours (en-tête vs pieds de page) et la priorité de la mise en file d'attente. Nous pouvons même spécifier la dépendance de chaque ressource particulière sur l'autre. Cela garantira que les ressources seront chargées dans le bon ordre.

Nous utilisons ici le crochet d'action WP_ENQUEUE_Scripts. Nous pouvons en savoir plus dans le codex. (Nous avons couvert des crochets d'action dans l'article précédent.)

À l'intérieur de notre fonction Bsimple_Scripts () personnalisée - que nous accrochons à wp_enqueue_scripts Action Hook - nous utilisons deux fonctions WordPress pour charger nos scripts et nos styles - wp_enqueue_script () et wp_enqueue_style (). Les arguments pour ces fonctions - comme spécifié dans ses pages de référence liées - nous permettent de tirer pleinement parti de la flexibilité que nous avons mentionnée.

Nous pouvons voir que nous chargeons des styles à partir d'Internet (polices Google) et de notre dossier de thème. Par conséquent, nous créons des répertoires CSS, JS et WebFonts dans notre dossier de thème et copierons les fichiers CSS, les fichiers JavaScript de notre thème bootstrap, les fichiers icônes de Fontawesome.

Nous copie également notre fichier index.php sur les fichiers archive.php, page.php et single.php, que nous modifierons.

Maintenant, notre structure de fichiers de thème ressemblera à ceci:

ajustant le balisage

Si nous visitons maintenant notre page d'accueil, nous verrons le menu en haut - bien qu'il et la page soient toujours un gâchis - car la ligne suivante dans notre en-tête sort toujours le menu enveloppé dans Div et son propre UL Tags, il n'est donc pas affecté par nos styles bootstrap:

<span><span><?php
</span></span><span><span>if ( have_posts() ) {
</span></span><span>    <span>while ( have_posts() ) {
</span></span><span>        <span>the_post();
</span></span><span>        <span>//
</span></span><span>        <span>// Post Content here
</span></span><span>        <span>//
</span></span><span>    <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span>

Pour résoudre ce problème, nous devons d'abord aller à notre tableau de bord WP-Admin et créer - dans le personnalisateur - un nouveau menu. Nous allons le nommer Menu supérieur .

Après avoir fait cela, nous irons dans notre fichier en tête.php supprimez ces lignes:

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

À leur place, nous mettons ces lignes:

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span>    <span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
      <span><span><span><header</span>></span>
</span>         <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span>         <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span>      <span><span><span></header</span>></span>
</span>
        <span><span><?php
</span></span><span>        <span>if ( have_posts() ) :
</span></span><span>            <span>/* Start the Loop */
</span></span><span>            <span>while ( have_posts() ) :
</span></span><span>                <span>the_post();
</span></span><span>            <span>endwhile;
</span></span><span>        <span>endif;
</span></span><span>        <span>?></span>
</span>
<span><span><span></body</span>></span>
</span>

Cela supprimera la balise DIV et la duplication de la balise UL pour nous, mais nous devons toujours appliquer le Nav-Item et le Nav-Link à nos éléments de menu (à Li et à une balise respectivement). Comment allons-nous y aller? WP_NAV_MENU ne fournit pas d'arguments pour cela. Nous utiliserons les hameçons NAV_MENU_LINK_ATBUTES et NAV_MENU_CSS_CLASS. Nous mettons cela dans notre fichier functions.php:

<span><span><?php
</span></span><span><span>if ( have_posts() ) {
</span></span><span>    <span>while ( have_posts() ) {
</span></span><span>        <span>the_post();
</span></span><span>        <span>//
</span></span><span>        <span>// Post Content here
</span></span><span>        <span>//
</span></span><span>    <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span>

Maintenant, nous pouvons spécifier de nouveaux attributs dans notre WP_NAV_MENU dans notre tête.php:

    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
    <span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>        <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span>        <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>
    <span><span><?php endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>

Maintenant, nos liens de menu supérieurs peuvent tirer parti des styles déjà définis dans CSS de notre thème bootstrap.

En-tête dynamique

pour pouvoir utiliser un en-tête dynamique - c'est-à-dire un en-tête différent pour la première page, pour d'autres pages sélectionnées, ou pour les archives - nous définirons une fonction dynamic_header () dans notre fichier functions.php, où nous 'LL Sortir notre balisage d'en-tête en fonction de la page que le visiteur charge.

Alors maintenant, notre fichier en tête.php se terminera comme ceci:

/**
 *
 * @package Botega_Scratch_Theme
 */

get_header(); ?>

    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
    <span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>        <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span>        <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>
    <span><span><?php endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>

Nous définirons également cette fonction comme ceci:

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * The header for our theme.
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> *
</span></span><span><span> */
</span></span><span><span>?></span>
</span><span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span><span><span><span><meta</span> charset<span>="<span><?php bloginfo( 'charset' ); ?></span>"</span>></span>
</span><span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1"</span>></span>
</span>
<span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span>
<span><span><span><body</span> <span><span><?php body_class(); ?></span></span>></span>
</span>
  <span><span><span><nav</span> class<span>="navbar navbar-default navbar-custom navbar-fixed-top"</span>></span>
</span>    <span><span><span><div</span> class<span>="container-fluid"</span>></span>
</span>      <span><span><span><div</span> class<span>="navbar-header page-scroll"</span>></span>
</span>              <span><span><span><a</span> href<span>="<span><?php echo esc_url( home_url( '/' ) ); ?></span>"</span> rel<span>="home"</span> class<span>="navbar-brand"</span>></span><span><?php bloginfo( 'name' ); ?></span><span><span></a</span>></span>
</span>      <span><span><span></div</span>></span>
</span>
      <span><span><span><div</span> class<span>="collapse navbar-collapse"</span> id<span>="bs-example-navbar-collapse-1"</span>></span>
</span>          <span><span><span><ul</span> class<span>="nav navbar-nav navbar-right"</span>></span>
</span>          <span><span><?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?></span>
</span>          <span><span><span></ul</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="row"</span>></span>
</span>

Pour pouvoir utiliser toutes les données URL ou Post actuelles - comme dans la boucle - nous déclarons une variable Global $ POST. Ensuite, nous remplissons simplement des boîtiers de page ou de demande avec en-tête de remplissage HTML, que nous terminerons plus tard. Cela définit les bases d'un en-tête vraiment dynamique.

Nous devons nous assurer que notre première page - avec un menu dynamique supérieur - sera bien même lorsque l'utilisateur est connecté. WordPress montre une barre d'administration lorsque les visiteurs sont connectés, même lorsqu'ils visitent la première page. Parce qu'il a une position: fixe, il superpose la zone supérieure de notre site Web, couvrant tout ce qui est là, nous devons donc spécifier un décalage pour notre menu supérieur.

Nous allons l'ajouter à notre style.css:

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * Footer template partial
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> *
</span></span><span><span> */
</span></span><span><span>?></span>
</span>     <span><span><span></div</span>></span>
</span>     <span><!-- /.row -->
</span>  <span><span><span></div</span>></span>
</span>  <span><!-- /.container -->
</span>
  <span><!-- Footer -->
</span>  <span><span><span><footer</span>></span>
</span>    <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="row"</span>></span>
</span>          <span><span><span><div</span> class<span>="col-lg-8 col-md-10 mx-auto"</span>></span>
</span>          <span><span><span></div</span>></span>
</span>      <span><span><span></div</span>></span><!-- /.row -->
</span>    <span><span><span></div</span>></span><!-- /.container -->
</span>  <span><span><span></footer</span>></span><!-- /footer -->
</span>
<span><span><?php wp_footer(); ?></span>
</span>
<span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Cela garantit que le #Mainnav - notre conteneur de menu - a suffisamment de décalage du haut, donc il n'est pas couvert lorsque l'utilisateur est connecté. Nous pouvons facilement le cibler.

Nous pouvons voir que nous abordons deux cas dans notre CSS - un défaut et un autre pour les écrans plus petits. En effet

Sur mobile, nous devrions maintenant avoir un menu déroulant réactif à alimentation JavaScript:

Conclusion

Dans cette deuxième partie sur la création d'un thème WordPress à partir de zéro, nous avons créé un thème WordPress très basique, et nous y avons inclus des styles et scripts bootstrap. Nous avons ajusté la sortie du menu pour s'adapter à nos styles prédéfinis. Nous avons également séparé la sortie de l'en-tête et du pied de page dans leurs partiels respectifs.

Le fichier functions.php - un fichier crucial dans le développement du thème - est un autre sujet que nous avons introduit et exploité. La sortie de l'en-tête a été séparée en sa propre fonction, qui utilisera des détails de la visite de la page et des variables définies par propriétaire de site pour déterminer la sortie finale.

Dans la troisième partie du guide, nous finirons de construire des modèles particuliers, de donner une meilleure structure à nos fonctions et partiels de thème, et terminer le style de notre site Web.

---

Il y a trois articles dans cette série sur la construction d'un thème WordPress à partir de zéro:

• sous-tension de la structure d'un thème
• Bases sur le thème
• affiner le thème

Questions fréquemment posées (FAQ) sur la construction d'un thème WordPress à partir de zéro

Quelles sont les conditions préalables pour construire un thème WordPress à partir de zéro?

Avant de commencer à construire un thème WordPress à partir de zéro, vous devez avoir une compréhension de base de HTML, CSS, PHP et JavaScript. Ce sont les technologies de base utilisées dans le développement du thème WordPress. De plus, vous devez être familier avec la plate-forme WordPress elle-même, y compris sa structure de fichiers et sa hiérarchie de modèle. Il est également utile d'avoir un environnement de développement local configuré sur votre ordinateur, comme MAMP ou XAMPP, où vous pouvez tester votre thème lorsque vous le construisez.

Comment commencer à créer un thème WordPress à partir de zéro?

La première étape de la création d'un thème WordPress à partir de zéro consiste à créer un nouveau répertoire dans votre dossier WordPress Thèmes. Ce sera la maison de tous vos fichiers de thème. Ensuite, vous devrez créer un fichier style.css et un fichier index.php. Le fichier style.css est l'endroit où vous rédigerez tout votre code CSS, et c'est également là que vous définissez les détails de votre thème. Le fichier index.php est le fichier de modèle principal de votre thème. C'est là que vous rédigerez le code PHP et HTML qui génère la mise en page de votre site Web.

Comment puis-je ajouter des fonctionnalités personnalisées au thème WordPress?

Vous pouvez ajouter des fonctionnalités personnalisées à votre thème WordPress par Création d'un fichier functions.php dans votre répertoire de thème. Ce fichier agit comme un plugin, vous permettant d'ajouter des fonctionnalités et des fonctionnalités personnalisées à votre thème. Vous pouvez l'utiliser pour enregistrer les menus de navigation, ajouter des barres latérales, des styles et scripts d'observation, et bien plus encore.

Comment créer un thème WordPress réactif?

Pour créer un thème WordPress réactif, vous «Je dois utiliser les requêtes multimédias dans votre code CSS. Les requêtes multimédias vous permettent d'appliquer différents styles en fonction de la taille de l'écran de l'utilisateur. Cela signifie que vous pouvez créer une disposition différente pour les appareils de bureau, de tablette et mobiles. Vous devrez également vous assurer que vos images sont réactives, ce que vous pouvez faire en définissant leur largeur à 100%.

Comment personnaliser l'en-tête et le pied de page de mon thème WordPress?

Vous pouvez personnaliser l'en-tête et le pied de page de votre thème WordPress en créant un fichier en-tête.php et un fichier footer.php dans votre répertoire de thème . Le fichier en tête.php est l'endroit où vous rédigerez le code HTML et PHP pour votre en-tête, et le fichier de pied.php est où vous rédigerez le code pour votre pied de page. Vous pouvez ensuite inclure ces fichiers dans vos autres fichiers de modèle à l'aide des fonctions get_header () et get_footer ().

Comment ajouter un type de message personnalisé au thème WordPress?

Vous pouvez ajouter Un type de publication personnalisé sur votre thème WordPress à l'aide de la fonction register_post_type () dans votre fichier functions.php. Cette fonction vous permet de définir un nouveau type de message avec ses propres étiquettes, capacités et fonctionnalités. Vous pouvez ensuite créer un fichier .php unique {PostType} et un fichier archive- {PostType} .php pour contrôler l'affichage de votre type de publication personnalisé.

Comment ajouter une barre latérale à mon thème WordPress?

Vous pouvez ajouter une barre latérale à votre thème WordPress en créant un fichier Sidebar.php dans votre répertoire de thème et en utilisant la fonction register_sidebar () dans votre fichier function.php. Vous pouvez ensuite afficher votre barre latérale dans vos autres fichiers de modèle à l'aide de la fonction get_sidebar ().

Comment ajouter un menu de navigation à mon thème WordPress?

Vous pouvez ajouter un menu de navigation à votre Thème wordpress en utilisant la fonction registre_nav_menus () dans votre fichier fonctions.php. Cette fonction vous permet d'enregistrer un ou plusieurs menus de navigation dans votre thème. Vous pouvez ensuite afficher votre menu dans votre autre fichier de modèle à l'aide de la fonction wp_nav_menu ().

Comment personnaliser la boucle dans mon thème WordPress?

Vous pouvez personnaliser la boucle dans votre thème WordPress En modifiant le code de boucle dans votre fichier index.php ou d'autres fichiers de modèle. La boucle est le code PHP que WordPress utilise pour afficher les publications. Vous pouvez le personnaliser pour modifier la façon dont les articles sont affichés, le nombre de messages affichés, et plus encore.

Comment mettre à jour mon thème WordPress?

Vous pouvez mettre à jour votre thème WordPress en apportant des modifications à vos fichiers de thème, puis les télécharger sur votre site WordPress. Si vous utilisez un thème enfant, vous pouvez mettre à jour le thème parent sans perdre vos modifications. Si vous n'utilisez pas un thème enfant, vous devriez faire une sauvegarde de votre thème avant de le mettre à jour, car les mises à jour écraseront vos modifications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!