Tutoriel de thème personnalisé WordPress

Tutoriel de thème personnalisé WordPress

Apprendre à créer des thèmes WordPress personnalisés vous ouvre un tout nouveau monde à explorer. Il vous permet de créer des designs personnalisés pour vous-même, vos clients et même de contribuer à la communauté open source.

Dans ce guide, nous allons vous emmener de zéro à avoir un thème entièrement fonctionnel qui peut être soumis au WordPress.org répertoire de thèmes.

Pour suivre, vous aurez besoin d’une compréhension de base du HTML, CSS, PHP et du fonctionnement de WordPress.

Tout le code utilisé dans ce guide sera disponible pour référence dans ce référentiel Github.

Étape #1: Création de fichiers essentiels pour votre Thème personnalisé

Un thème WordPress fonctionnel peut se composer de seulement deux fichiers: style.css et index.php. Cela est possible grâce à la hiérarchie des modèles de WordPress.

Lorsque WordPress sort une page Web, il recherche le modèle le plus spécifique disponible, si un modèle n’existe pas, il descend dans la hiérarchie jusqu’à ce qu’il en trouve un qui existe. Voici un exemple pratique:

L’utilisateur est sur https://example.com/practical-example, qui est une page. WordPress va essayer de localiser un modèle dans cet ordre:

1. 1. • page – {slug}.php- Le slug de page est un exemple /pratique, WordPress cherchera à utiliser votre exemple-thème/page-pratique.php
      • page – {id}.php – L’ID de la page est 42, WordPress cherchera à utiliser votre thème /page-42.php.
      • page.php-WordPress va essayer le thème / page à usage général your-theme/.modèle php.
      • singulier.php – Le modèle singulier peut rendre les publications et les pages, il est donc essayé après la page plus spécifique.index php
      • .php – Enfin votre thème / index.php est utilisé si aucun autre modèle n’est trouvé.

Commençons par créer un thème avec uniquement les fichiers essentiels, puis nous pourrons ajouter plus de fonctionnalités à mesure que nous explorerons leur fonctionnement.

Dans /wp-content/themes/, créez un dossier nommé my-custom-theme et créez les deux fichiers suivants : style

.css

Pour que WordPress reconnaisse notre thème et le publie correctement dans la liste Apparence → Thèmes, nous devons placer du code spécifique à WordPress en haut du style.css, ça ressemble à ceci:

/*Theme Name: My Custom ThemeTheme URI: https://yourwebsite.com/themeAuthor: Your NameAuthor URI: https://yourwebsite.comDescription: This is my first custom theme!Version: 1.0.0License: GNU General Public License v2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Text Domain: my-custom-themeTags: custom-background*/

Techniquement, aucun des champs n’est requis, mais si vous voulez que votre thème soit beau dans wp-admin, ils sont fortement encouragés. Ils sont également requis si vous distribuez votre thème sur WordPress.

1. 1. • Nom du thème – Vous devez toujours fournir un nom de thème. Si vous ne le faites pas, le nom du dossier sera utilisé, my-custom-theme dans notre exemple.
      • URI de thème – S’il est utilisé, l’URI de thème doit fournir un lien vers une page où les visiteurs peuvent en apprendre davantage sur le thème.
      • Auteur – Votre nom va ici.
      • URI de l’auteur – Un lien vers votre site Web personnel ou professionnel peut être placé ici.
      • Description – La description est affichée sur le modal du thème wp-admin et également sur la liste des thèmes WordPress.
      • Version – Les numéros de version aident les développeurs à suivre les modifications et permettent aux utilisateurs de savoir s’ils utilisent la dernière version. Nous suivons le système de numérotation SemVer pour indiquer la gravité des changements dans une mise à jour.
      • Licence – La façon dont vous accordez une licence à votre thème dépend de vous, mais si vous choisissez une licence non compatible avec la GPL, vous ne pourrez pas distribuer votre thème sur WordPress.
      • URI de licence – Il s’agit simplement d’un lien vers la licence listée ci-dessus.
      • Domaine de texte – Le domaine de texte est utilisé lors de la traduction de votre thème dans d’autres langues. Ne vous inquiétez pas, nous explorerons cela en profondeur plus tard. Pour l’instant, il suffit de savoir que c’est une bonne pratique que le dossier de thème et le domaine de texte soient le nom du thème séparé par des tirets au lieu d’espaces.Balises
      • – Les balises ne sont utilisées que si vous téléchargez votre thème sur le WordPress.org répertoire de thèmes. Ils sont à la base du mécanisme de « Filtre d’entités ».

Copiez et collez ce qui précède dans style.css et vous aurez quelque chose comme ceci:

Remarque: Cela semble un peu vide pour le moment car nous n’avons pas encore de capture d’écran. Nous ajouterons cela plus tard.index

.index php

.php est le seul autre fichier strictement requis. Son travail consiste à rendre toutes les sorties frontales de notre thème.

Depuis l’index.php va rendre toutes nos pages (accueil, publications, catégories, archives) ça va faire beaucoup de travail. Pour commencer, nous avons besoin d’une section de tête qui couvrira les bases du HTML.

<!DOCTYPE html><html <?php language_attributes(); ?>> <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>

Ceci est du code HTML standard à une exception près, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head est une fonction de base qui permet à WordPress et aux plugins tiers d’insérer du code dans l’en-tête sans modifier vos fichiers de modèle. C’est ce qu’on appelle un crochet d’action.

Si vous êtes familier avec HTML, vous remarquerez peut-être qu’il n’y a pas de balise < title > pour afficher le titre de la page. En effet, WordPress peut utiliser le crochet wp_head pour insérer dynamiquement le titre.

Une autre utilisation de wp_head consiste à mettre en file d’attente les styles (.css) et scripts (.js). Il y a de très bonnes raisons de le faire au lieu de les coder en dur, que nous examinerons plus tard.

Ensuite, nous avons le corps de la page:

<body <?php body_class(); ?>>

body_class() est une fonction d’assistance fournie par WordPress qui affichera une liste de classes CSS utiles décrivant la page affichée, telles que:

class="page page-id-2 page-parent page-template-default logged-in"

body_class(); accepte également un paramètre afin que vous puissiez ajouter vos propres classes, par exemple:

<body <?php body_class( 'wide-template blue-bg' ); ?>>

Ensuite, nous avons l’en-tête du modèle.

<header class="site-header"><p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p><p class="site-description"><?php bloginfo( 'description' ); ?></p></header><! – .site-header – >

Ici, nous utilisons les fonctions de modèle intégrées de WordPress pour afficher le titre et la description du site. Nous avons également utilisé une fonction d’assistance, home_url(), pour lier le titre du site à la page d’accueil.

Ensuite, le corps de la page:

<div class="site-content"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();?><article <?php post_class(); ?>><header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header><! – .entry-header – ><div class="entry-content"><?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?></div><! – .entry-content – ></article><! – #post-## – ><?php// If comments are open or we have at least one comment, load up the comment template.if ( comments_open() || get_comments_number() ) :comments_template();endif;endwhile;else :?><article class="no-results"><header class="entry-header"><h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1></header><! – .entry-header – ><div class="entry-content"><p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p></div><! – .entry-content – ></article><! – .no-results – ><?phpendif;?></div><! – .site-content – >

C’est là que ça devient intéressant (et un peu plus complexe). Nous utilisons ici la fonctionnalité la plus importante de WordPress, la boucle. La boucle fait le travail acharné de déterminer sur quelle page se trouve l’utilisateur et ce qui doit être affiché. Il renvoie ensuite une liste d’un ou plusieurs « messages » que nous pouvons parcourir et générer des données à l’aide des fonctions de modèle.

Si la boucle ne renvoie aucun résultat, par exemple sur une page 404 ou un message supprimé, nous utilisons un opérateur else pour afficher un message prédéfini.

Sans aucun code environnant, une boucle simplifiée ressemble à ceci:

if ( have_posts() ) : // check if the loop has returned any posts.while ( have_posts() ) : // loop through each returned post.the_post(); // set up the content so we can use template tags like the_title().the_title(); // output the post title.the_content(); // output the post content.endwhile;else : echo 'No Page Found'; // output an error message if there are no posts.endif;?>

Remarque: Parce que WordPress a ses origines dans les blogs, de nombreuses fonctions utilisent la terminologie « post », même si elles peuvent renvoyer et sortir tout type de contenu (publications, pages, types de publications personnalisés).

Enfin, nous avons le pied de page, tout ce que nous devons faire ici est de fermer les balises HTML que nous avons ouvertes plus tôt. Il existe un autre crochet d’action, wp_footer(), qui est activement utilisé par WordPress et les plugins pour inclure des scripts dans le pied de page nécessaires au rendu de la page.

<?php wp_footer(); ?></body></html>

Si vous avez suivi jusqu’à présent, vous aurez un thème WordPress entièrement fonctionnel qui ressemble à ceci:

Notre thème ne remportera aucun prix de design (il n’a pas de CSS) et il manque beaucoup de fonctionnalités que les utilisateurs jugent essentielles (barres latérales, navigation, métadonnées, vignettes, pagination, etc.) mais c’est un bon début!

Continuons et voyons comment nous pouvons l’améliorer.

Étape #2: Créer des fonctions.fonctions php

.php n’est pas strictement un fichier requis, mais il offre tellement d’avantages que 99,99% des thèmes l’ont. Dans les fonctions.php vous pouvez utiliser la fonctionnalité de thème intégrée de WordPress et également ajouter votre propre code PHP personnalisé.

Créer une fonction.php dans votre dossier de thème maintenant car nous y ajouterons du code dans les sections suivantes.

Ajout d’un menu de navigation

La plupart des sites Web, sinon tous, utilisent un menu de navigation, mais jusqu’à présent, notre thème n’en prend pas en charge. Pour dire à WordPress que notre thème comporte un menu de navigation, il faut l’enregistrer dans fonctions.php comme ça:

register_nav_menus( array( 'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),);

Remarque: register_nav_menus() accepte un tableau afin que vous puissiez enregistrer plus d’un menu si nécessaire.

WordPress connaît maintenant notre menu, mais nous devons encore le sortir dans notre thème. Nous le faisons en ajoutant le code suivant sous la description du site dans l’index.php:

wp_nav_menu( array( 'theme_location' => 'menu-1',) );

Maintenant, nous avons un menu de navigation (non stylisé):

Ajout d’une barre latérale

Notre thème n’a pas non plus de barre latérale (zone de widget), corrigeons cela maintenant.

Tout d’abord, nous devons enregistrer la barre latérale dans les fonctions.php:

function my_custom_theme_sidebar() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'my-custom-theme' ), 'id' => 'sidebar-1', ) );}add_action( 'widgets_init', 'my_custom_theme_sidebar' );

Maintenant, créez une barre latérale.php dans votre dossier de thème et ajoutez le code suivant:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?> <ul class="sidebar"> <?php dynamic_sidebar('sidebar-1' ); ?> </ul><?php } ?>

Ici, nous utilisons une instruction if pour vérifier si la barre latérale est ‘active’ avant de sortir le code. Une barre latérale active est celle à laquelle l’utilisateur a ajouté au moins un widget.

La dernière étape consiste à inclure la barre latérale dans l’index.php, au-dessus de wp_footer() ajoute un appel get_sidebar().

Ajout d’images en vedette

Comme les barres latérales et les menus de navigation, nous ne pouvons pas simplement afficher des images en vedette dans notre thème et nous attendre à ce qu’elles fonctionnent, nous devons dire à WordPress que nous prenons en charge cette fonctionnalité en premier. Dans les fonctions.php ajouter:

add_theme_support( 'post-thumbnails' );

Maintenant, nous pouvons ajouter the_post_thumbnail(); dans notre boucle et les vignettes fonctionneront. Le seul problème est qu’ils sortiront à la taille maximale de WordPress de 1920px x 2560px, ce qui est trop grand pour la plupart des utilisations. Heureusement, WordPress a une autre fonction d’aide: add_image_size();

Lorsqu’un utilisateur télécharge une image, et si la taille de l’image est définie, WordPress générera une version de l’image téléchargée à cette taille (tout en conservant l’original). Si l’image de l’utilisateur est plus petite que les dimensions que vous avez définies, WordPress ne fera rien car il ne peut pas rendre une image plus grande que l’originale.

Pour utiliser une image d’entité optimisée plutôt que l’original, placez le code suivant dans fonctions.php:

add_image_size( 'my-custom-image-size', 640, 999 );

Le premier paramètre est la poignée, le second est la largeur de l’image et le troisième est la hauteur. La hauteur et la largeur sont facultatives au cas où vous ne souhaiteriez limiter qu’une seule dimension.

Dans l’index.php:

the_post_thumbnail( 'my-custom-image-size' );

Mise en file d’attente des styles et des scripts

Plus tôt, nous avons déclaré qu’il était préférable de mettre en file d’attente des styles et des scripts plutôt que de les coder directement dans les fichiers de modèle. En effet, la mise en file d’attente permet beaucoup plus de flexibilité.

Lorsqu’elle est effectuée correctement, la mise en file d’attente indique également à WordPress quelles ressources sont chargées. Lorsque WordPress sait quelles ressources sont nécessaires, il peut s’assurer que la même ressource n’est pas chargée plus d’une fois. Ceci est particulièrement important lorsque vous avez une bibliothèque extrêmement populaire comme jQuery ou FontAwesome que plusieurs thèmes et plugins utiliseront.

Un autre avantage de la mise en file d’attente est qu’une ressource mise en file d’attente peut être retirée de la file d’attente par un plugin, évitant la nécessité de modifier les fichiers de modèle.

Bien que notre thème ait un style.fichier css il ne l’utilise pas encore, mettons cela en file d’attente maintenant:

function my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() est une fonction d’assistance qui récupère l’URI de la feuille de style du thème en cours. Si nous mettions en file d’attente un autre fichier, nous devrions le faire à la place:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

Notre thème n’a pas de scripts, si c’était le cas, nous les metrions en file d’attente comme ceci:

function my_custom_theme_enqueue() {wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

Une exception à ce qui précède est les scripts qui ont été préenregistrés par WordPress, dans ces cas, il vous suffit de fournir le premier paramètre (handlehandle):

wp_enqueue_script( 'jquery' );

Ajout de style Avec CSS

Notre thème a des bases solides mais manque de design, ajoutant du CSS de base au style.css fera une énorme différence. Nous avons ajouté environ 100 lignes de CSS à notre exemple de thème en guise de démonstration et le résultat ressemble à ceci:

Balise de titre

Tous les thèmes doivent utiliser la fonctionnalité intégrée de WordPress pour générer la balise de titre, qui est activée en ajoutant ce code à vos fonctions.fichier php: add_theme_support( 'title-tag' ); C’est tout ce qu’il y a à faire, WordPress gérera la sortie de la page < title > et si nécessaire, les plugins peuvent modifier la sortie à l’aide de filtres. Les plugins SEO le font souvent dans le but d’optimiser davantage les titres.

Étape #3: Ajoutez des pièces de modèle

En ce moment, 80% de notre code de modèle est dans l’index.php.

Bien que cela fonctionne, il en résultera beaucoup de répétition de code lorsque nous aurons d’autres fichiers de modèle tels que singular.php, recherche.php, et archive.php. Les pièces de modèle facilitent le développement de thèmes en nous permettant de réutiliser le code entre les modèles. Comme notre en-tête et notre pied de page seront les mêmes sur chaque page, ils sont un candidat idéal pour utiliser des pièces de modèle. Tout d’abord, créez un en-tête.php et déplacez le code suivant de l’index.php:

<!DOCTYPE html><html <?php language_attributes(); ?>><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> <header class="site-header"> <p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> </p> <p class="site-description"><?php bloginfo( 'description' ); ?></p><?phpwp_nav_menu( array( 'theme_location' => 'menu-1',) );?> </header><! – .site-header – >

Dans l’index.php remplace le code ci-dessus par:

<?php get_template_part( 'header' ); ?>

Remarque: Lorsque vous obtenez une partie modèle, vous devez omettre le .php à partir de la poignée de la partie modèle.

Ensuite, créez une partie modèle de pied de page en déplaçant ce code vers le pied de page.php et répéter le processus ci-dessus:

<?php wp_footer(); ?></body></html>

Enfin, nous allons également déplacer le code « sans résultats » vers une partie modèle, car il est susceptible d’être utilisé dans plusieurs modèles. Créer du contenu – aucun.php et déplacez ce code vers le nouveau fichier.

<article class="no-results"> <header class="entry-header"> <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1> </header><! – .entry-header – > <div class="entry-content"> <p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> </div><! – .entry-content – ></article><! – .no-results – >

Votre index devrait maintenant ressembler à ceci:

<?php get_template_part( 'header' ); ?> <div class="site-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <?php the_post_thumbnail(); ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><! – .entry-header – > <div class="entry-content"> <?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?> </div><! – .entry-content – > </article><! – #post-## – > <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; else : get_template_part( 'content-none' ); endif;?></div><! – .site-content – ><?phpget_sidebar();get_template_part( 'footer' );

Bien que ce qui précède fonctionne parfaitement, nous pouvons apporter une légère amélioration. WordPress a des fonctions d’assistance pour inclure les parties de modèle d’en-tête, de pied de page et de barre latérale. Comme c’est une bonne pratique d’utiliser les fonctionnalités de base dans la mesure du possible, nous devrions les utiliser à la place.

Remplacez get_template_part( 'header' ); par get_header(); et get_template_part( 'footer' ); par get_footer();

Étape #4: Ajoutez singular.php, archive.php, recherche.php, et 404.php

Le travail de base que nous avons accompli avec des pièces de modèle sera payant car nous ajouterons de nouveaux fichiers de modèle à notre thème. Ci-dessous, nous avons répertorié les plus courants. Pour éviter de vous accabler d’exemples de code, nous avons plutôt lié le code source sur Github.

singulier.php

Les publications et les pages, lorsqu’elles sont affichées sur leurs propres URL, sont considérées comme « singulières » car la plupart du temps, la mise en page sera la même pour ces deux types de pages. Mais dans le cas où ce n’est pas le cas, vous pouvez utiliser la page plus spécifique.php et simple.php (post) à la place.

Exemple de code – singulier.archives php

.php

Les modèles d’archives diffèrent généralement des modèles singuliers de deux manières: ils affichent des extraits plutôt que le contenu complet et comportent un en-tête d’archive expliquant le contenu.

Reportez-vous à la hiérarchie des modèles et vous verrez que le modèle d’archive couvre tous les types d’archives (auteur, catégorie, balise, taxonomie, date) si cela ne fonctionne pas pour votre cas d’utilisation, vous pouvez toujours utiliser les modèles plus spécifiques:

1. 1. • auteur.catégorie php
      • .balise php
      • .php
      • taxonomie.php
      • date.php

Exemple d’archive de code.recherche php

.php

Les sites Web WordPress peuvent être recherchés en utilisant le?s= paramètre URL, par exemple, yourwebsite.com?s=test. Recherché.le modèle php affiche les résultats de ces recherches.

Recherche de code d’exemple.php

404.php

L’instruction else que nous avons ajoutée dans l’index.php détecte les erreurs « page introuvable », mais vous voudrez peut-être découpler cette fonctionnalité dans son propre fichier de modèle pour avoir plus de contrôle sur la sortie. C’est le cas d’utilisation du 404.fichier modèle php.

Code d’exemple – 404.php

Étape #5: Fichiers auxiliaires

Si vous distribuez votre thème au public, les fichiers suivants sont impératifs. Sans cela, votre thème sera rejeté des référentiels de thèmes et des places de marché.

capture d’écran.png

La capture d’écran s’affiche dans la liste des thèmes wp-admin lorsque l’utilisateur sélectionne un nouveau thème. Voici quelques bonnes pratiques à suivre:

1. 1. • Les captures d’écran doivent être 1200px x 900px
      • Les captures d’écran doivent être dedans.png ou.format jpg
      • Les captures d’écran doivent être une représentation précise du thème
      • Les captures d’écran doivent être optimisées (utilisez tinypng.com ou similaire)

lisez-moi.txt

WordPress n’utilise aucune information de readme.txt, il tire tout ce dont il a besoin du style.CSS. D’autre part, le répertoire de thème WordPress extrait des informations importantes du fichier readme et le considère comme un fichier requis.

La plupart des développeurs utilisent readme.txt comme emplacement central pour stocker toutes les informations sur leur thème. Un simple readme.txt ressemble à ceci:

=== Theme Name ===Requires at least: 5.0Tested up to: 5.2Requires PHP: 5.6License: GPLv2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Short description. No more than 150 chars.== Description ==Theme desc.== Changelog === 1.0 =* Added new option== Resources ==* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, (<https://opensource.org/licenses/MIT>)

1. 1. • Nécessite au moins – C’est la version minimale de WordPress avec laquelle votre thème est compatible.
      • Testé jusqu’à – Ce champ indique la version la plus récente de WordPress avec laquelle votre thème a été testé.
      • Nécessite PHP – Ce champ indique la version minimale de PHP sur laquelle votre thème fonctionnera.
      • Description – Ce champ de description n’est actuellement affiché nulle part.
      • Changelog – Le changelog n’est utilisé nulle part, mais les développeurs et certains utilisateurs référenceront ce fichier pour voir quelles modifications ont été apportées.
      • Ressources – La plupart des ressources tierces nécessitent une attribution quelconque. La section des ressources est un endroit largement accepté pour les mettre. Même pour les ressources qui ne nécessitent pas explicitement d’attribution, il est toujours une bonne pratique de les répertorier ici afin que les utilisateurs connaissent les licences des ressources qu’ils utilisent.

Étape #6: Créer des modèles de page

Les modèles de page permettent aux développeurs de créer des modèles personnalisés pouvant être utilisés pour des publications et des pages individuelles. Par exemple, la plupart des thèmes ont une disposition à deux colonnes (barre latérale de contenu), mais sur certaines pages, l’utilisateur peut vouloir se concentrer uniquement sur le contenu et ne pas afficher de barre latérale. C’est là qu’un modèle de page peut vous aider.

Comment les « Modèles de page » sont-ils créés?

Dans notre dossier thème, créez un nouveau dossier nommé ‘modèles de page’ et dans ce dossier, créez un fichier appelé colonne unique.php. Pour accélérer les choses, copiez tout le code du singulier.php aux modèles de page / colonne unique.php et supprimez l’appel à get_sidebar() car ce modèle n’en aura pas besoin.

Maintenant, nous devons ajouter un en-tête spécial qui indique à WordPress qu’il s’agit d’un modèle de page, cela ressemble à ceci:

/*Template Name: Single Column TemplateTemplate Post Type: post, page*/

Le code est explicite, nous indiquons simplement à WordPress le nom du modèle et les types de publication avec lesquels il peut être utilisé.

C’est tout ce qu’il y a à faire, notre nouveau modèle de page est maintenant disponible dans l’éditeur sous ‘Attributs de page’.

Étape #7: Rendez votre Thème compatible avec RTL.css

Toutes les langues ne sont pas lues de gauche à droite. L’arabe et l’hébreu, par exemple, sont lus de droite à gauche (RTL). Il existe un moyen simple de rendre votre thème compatible avec les langues RTL.

Créez un nouveau fichier dans votre dossier de thème appelé rtl.css, puis copiez et collez le code suivant:

body {direction: rtl;unicode-bidi: embed;}

Si une langue RTL est la langue active sur un site Web WordPress, WordPress sait charger ce fichier CSS automatiquement.

Il s’agit d’une implémentation très basique de la fonctionnalité RTL pour vous aider à démarrer. Si vous souhaitez en savoir plus, voici deux ressources fantastiques:

Documentation de support de la langue de droite à gauche

Twenty Twenty RTL code

Étape #8: Suivez toujours les meilleures pratiques

Les meilleures pratiques ont évolué au fil du temps pour faciliter la création et la maintenance de thèmes WordPress. Non seulement suivre ces principes vous aidera, mais ils faciliteront également la tâche des autres développeurs lorsqu’ils auront besoin de travailler avec votre code.

1) Utilisez des thèmes de démarrage

Les thèmes de démarrage fournissent une base solide sur laquelle vous pouvez construire votre thème. En règle générale, ils sont légers, contiennent peu ou pas de style et aucune option de configuration. Au fil du temps, vous pouvez créer votre propre thème de démarrage sur lequel vous pouvez baser tous vos projets, mais pour l’instant, voici quelques options populaires:

1. 1. • Underscores
      • Échafaudage
      • Vide HTML5

2) Apprenez à connaître les normes de codage WordPress

Les normes de codage sont un moyen de formater votre code de manière cohérente sur l’ensemble de la base de code. WordPress a des normes de codage pour HTML, CSS, Javascript et PHP. Bien que l’utilisation d’une norme de codage n’ait aucun effet sur l’expérience de l’utilisateur final, elle rend votre code beaucoup plus lisible. Même si vous n’utilisez pas les normes de codage WordPress, nous vous recommandons toujours d’utiliser une norme.

1. 1. • WordPress.org Normes de codage
      • WPCS
      • Normes de codage PHP

3) Utiliser la localisation

Grâce au travail acharné des bénévoles, WordPress est disponible dans des centaines de langues. Si votre thème doit être publié publiquement, il doit être construit de manière à ce qu’il puisse également être traduit.

Ne vous inquiétez pas, c’est super facile à faire. Tout ce que nous devons faire est de nous assurer que toutes les chaînes sont passées par une « fonction de localisation » plutôt que d’être sorties directement.

Au lieu de cela:

<?php echo 'Previous Post'; ?>

Nous faisons cela à la place:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() est une fonction de localisation qui accepte une chaîne et un domaine de texte. La fonction renvoie une traduction de la chaîne fournie, ou de la chaîne d’origine si une traduction n’est pas disponible.

4) Évitez la fonctionnalité du plugin

Lorsqu’un utilisateur change de thème, seule la couche de présentation doit changer. Le contenu et les fonctionnalités doivent rester globalement les mêmes. Cela signifie que toute fonction qui affecte la façon dont les rôles WordPress doivent être contenus dans un plugin, pas votre thème. Quelques exemples de fonctionnalités de plugin incluent:

1. 1. • Types de messages personnalisés
      • Constructeurs de pages
      • Partage de médias sociaux
      • Optimisation des moteurs de recherche (SEO)

Bien qu’il puisse sembler pratique (et peut-être un argument de vente) d’inclure des contrôles SEO dans un thème, cela nuit réellement à l’utilisateur à long terme. À l’avenir, ils devront changer de thème mais ne le pourront pas car toutes leurs configurations de référencement sont étroitement couplées au thème actuel. En revanche, si les configurations étaient stockées dans un plugin, elles pouvaient changer de thème sans se soucier.

5) Préfixage (Prévenir les conflits)

Pour éviter les conflits, toutes les fonctions, classes et variables globales créées par votre thème doivent être préfixées. Ceci est important car il est impossible de savoir quel autre code s’exécute sur le site Web de votre utilisateur. Le préfixe empêche les conflits de noms et les erreurs fatales.

Le nom de votre thème séparé par des tirets ou des traits de soulignement servira de préfixe la plupart du temps. Si le nom du thème est très long, les initiales peuvent fonctionner à la place.

Theme Name: Scaffoldclass Scaffold_Class {}function scaffold_function() {}global $scaffold_globalTheme Name: My Long Theme Nameclass MLTN_Class {}function mltn_function() {}global $mltn_global

6) Utilisez la fonctionnalité de base

Là où elle existe, vous devez toujours utiliser la fonctionnalité de base plutôt que de réinventer la roue. Cela inclut, mais sans s’y limiter, les Barres latérales, les Menus de Navigation, les Vignettes de Publication, les En-têtes personnalisés et les Arrière-plans personnalisés. Ces fonctionnalités ont été testées par des millions d’utilisateurs et sont activement maintenues et améliorées.

Si vous devez modifier la fonctionnalité ou la sortie d’une fonction de base, il est possible d’utiliser l’un des nombreux hooks et filtres proposés par WordPress. Par exemple, wp_nav_menu() a un paramètre ‘walker’ afin que vous puissiez avoir un contrôle complet de la sortie.

7) Échappement et désinfection des données

En tant que développeur de thème, vous devez être familier avec l’échappement et la désinfection des données pour protéger vos utilisateurs contre les exploits potentiels.

Échappement

L’échappement est le processus de vérification de la sécurité des données avant leur sortie et la désinfection vérifie les données avant qu’elles ne soient enregistrées dans la base de données.

WordPress a des fonctions d’assistance que vous pouvez utiliser pour échapper aux données, vous n’avez donc pas besoin de les créer vous-même. esc_html est un exemple de fonction d’échappement. Voici à quoi ressemble une sortie non échappée:

echo get_theme_mod( 'error_page_title' );

Pour échapper à la sortie, nous faisons ceci:

echo esc_html( get_theme_mod( 'error_page_title' ) );

D’autres fonctions d’échappement que vous devez connaître sont esc_attr(), absint(), esc_url().

Il est également possible de traduire et d’échapper une chaîne à l’aide d’une seule fonction:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

Devient:

echo esc_html__( '404 Not Found', 'my-custom-theme' );// oresc_html_e( '404 Not Found', 'my-custom-theme' );

Astuce: N’importe où dans votre thème où vous avez echo $, vous devriez vérifier s’il doit être échappé, c’est généralement le cas.

Désinfection

Si vous ajoutez des paramètres à votre thème, vous devez vous assurer que les données saisies par les utilisateurs dans ces paramètres sont en sécurité avant qu’elles n’entrent dans la base de données. WordPress a un certain nombre de fonctions pour aider à assainir les entrées.

Lors de l’ajout d’un paramètre à votre thème à l’aide de l’API Customizer, il a un paramètre appelé ‘sanitize_callback’ qui accepte le nom d’une fonction de désinfection. Toute entrée prise par le paramètre est vérifiée par la fonction que vous fournissez à ‘sanitize_callback’ avant qu’elle n’entre dans la base de données.

Il souligne l’importance de la désinfection que si même l’un de vos paramètres manque le sanitize_callback, il ne sera pas accepté dans le répertoire des thèmes WordPress.

$wp_customize->add_setting( 'my_custom_theme_setting', array( 'sanitize_callback' => 'sanitize_text_field' // A core sanitization function. ));

Une liste officielle des fonctions de désinfection et d’échappement peut être consultée ici: Assainissement des données / Échappement

Étape #9: Distribuez votre thème WordPress

Les thèmes peuvent être distribués via différents canaux en fonction du résultat que vous souhaitez atteindre. Si votre résultat est simplement de contribuer à la communauté open-source, il n’y a pas de meilleure façon de le faire que de télécharger votre thème dans le répertoire WordPress. Si au contraire, vous cherchez à vendre votre thème et à gagner de l’argent directement, il existe également des moyens de le faire.

Voici les principaux sites Web pour la distribution de thèmes:

1) WordPress.org (Meilleur endroit pour obtenir des téléchargements et des utilisateurs)

Le principal avantage de l’hébergement de votre thème sur WordPress est que vous obtenez un coup de pouce de visibilité de votre thème vu non seulement sur wordpress.site de l’organisation mais aussi dans le tableau de bord wp-admin.

Un autre avantage de l’hébergement de votre thème avec WordPress est le système de mise à jour intégré. Si vous mettez à jour votre thème, tous les utilisateurs seront avertis dans leurs tableaux de bord wp-admin et disposeront d’un chemin facile pour mettre à jour la dernière version.

WordPress.org accepte uniquement les thèmes gratuits, mais cela ne signifie pas que vous ne pouvez pas gagner d’argent. Un thème gratuit peut être un excellent canal pour promouvoir votre thème, plugin ou service premium.

2) WordPress.com

WordPress.com accueille des thèmes gratuits et premium. Cependant, ils n’ont pas été ouverts aux nouvelles soumissions d’auteurs depuis quelques années maintenant.

3) ThemeForest

ThemeForest est le premier marché pour les thèmes premium. Le thème le plus vendu (Avada) a des ventes supérieures à 5 000 000 $.

D’une manière générale, les acheteurs de la forêt thématique s’attendent à des thèmes « polyvalents » complets. Tous les thèmes principaux ont une fonctionnalité de création de page et sont pris en charge par des équipes de développeurs. C’est un marché très difficile à percer pour les nouveaux auteurs.

4) Marché Créatif et Marché Mojo

Marché Créatif et Marché Mojo sont de petits acteurs sur le marché des thèmes premium, c’est pourquoi nous les avons regroupés. Ils offrent tous deux effectivement le même service que ThemeForest mais à plus petite échelle.

5) Github

Github est le moyen le plus simple de rendre votre thème gratuit public. Il n’y a pas de processus d’examen et aucune ligne directrice à suivre. Cependant, vous ne bénéficierez pas de la visibilité de wordpress.org et devra créer votre propre mécanisme de mise à jour pour que les utilisateurs obtiennent les dernières versions.

Étape #10: Testez et améliorez le Code

1) Testez votre Thème

Test d’unité de thème

Le Test d’unité de thème est un fichier d’importation de contenu WordPress standard qui contient un large éventail de types de contenu et de cas périphériques. Il est facile à télécharger dans votre environnement de développement et mettra en évidence de nombreux scénarios que vous avez peut-être négligés.

WP_DEBUG

En tant que développeur de thème, tester votre thème avec WP_DEBUG activé est le strict minimum que vous devriez faire. Votre thème ne doit renvoyer aucune erreur ou avertissement lorsque WP_DEBUG est défini sur true.

Il est également important de répéter le test avec les différentes versions de PHP prises en charge par votre thème. Avec chaque version majeure de PHP, il y a de nouveaux changements, avertissements et dépréciations. Il n’est pas rare qu’un thème soit sans erreur sur PHP5.6 mais affiche des erreurs sur PHP7.

Pour activer WP_DEBUG, ajoutez le code suivant à wp-config.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget est un plugin utile qui vous permet d’ajouter 13 widgets de base à votre barre latérale à la fois. Les widgets de base utilisent une variété d’éléments HTML, ce qui les rend parfaits pour tester votre thème.

Renifleur de thème

Le renifleur de thème est un plugin créé par l’équipe de révision de thème (TRT). Il détecte de nombreuses erreurs d’échappement et de localisation (mais pas toutes). Il vérifie également votre thème par rapport aux normes de codage WordPress.

2) Soumettre votre Thème à WordPress.org

Au début de ce guide, nous avons dit qu’au moment où vous arriveriez à la fin, vous auriez un thème auquel vous pourriez vous soumettre wordpress.org . Regardons ce processus.

Processus de téléchargement

Le processus de téléchargement est simple. Créez ou connectez-vous à votre compte WordPress, puis accédez à cette page – https://wordpress.org/themes/upload/

Vous pouvez compresser votre thème et le télécharger dès maintenant, mais voici certaines choses que vous voudrez peut-être savoir en premier.

Exigences

L’équipe de révision des thèmes (TRT) a un ensemble strict d’exigences. Votre thème ne sera pas accepté dans le répertoire tant qu’il ne répondra pas à toutes les exigences.

Processus de révision

Lorsque vous téléchargez un thème, il y a un processus de révision en deux étapes qu’il doit passer avant qu’il puisse être accepté dans le répertoire.

Tout d’abord, une vérification automatisée est effectuée dès que vous appuyez sur Télécharger. Dans les coulisses, le vérificateur automatisé fonctionne de manière très similaire au plugin Theme Sniffer. S’il trouve des erreurs, il rejettera le thème et le processus de téléchargement s’arrêtera là.

Si votre thème réussit la vérification automatisée, il rejoint une file d’attente de thèmes en attente d’un examen humain. L’examen humain est effectué par des bénévoles de la TRT. Le nombre de thèmes dans la file d’attente dépasse de loin le nombre d’examinateurs, ce qui signifie que votre thème peut souvent prendre 2 à 3 mois pour arriver en tête de la file d’attente.

Il est impératif que votre thème soit exempt d’erreurs et respecte toutes les exigences au moment où il atteint le stade de la révision humaine, car s’il comporte plus de 3 erreurs significatives, il peut être rejeté. Si un thème est rejeté au stade de la revue humaine, il doit rejoindre la file d’attente à l’arrière, ce qui signifie attendre à nouveau 2-3 mois pour une autre revue humaine.

Ressource utile: Les erreurs de développement de thèmes WordPress les plus courantes (et Comment les corriger)

Il convient de noter que le TRT est toujours à la recherche de nouveaux évaluateurs, le bénévolat peut être une excellente expérience d’apprentissage et un moyen de contribuer à la communauté open-source.

3) Votre liste de thèmes

Félicitations, votre thème a été approuvé! Vous avez maintenant votre propre liste qui ressemble à ceci.

Voici un aperçu de ce que vous pouvez vous attendre à voir sur cette page:

1. 1. • Capture d’écran – La capture d’écran est la première chose que les utilisateurs potentiels voient, alors rendez-la aussi attrayante que possible. Mais rappelez-vous qu’il doit toujours s’agir d’une représentation précise du thème et non d’un rendu photoshop. Inspirez-vous des thèmes les plus populaires.
      • Description – La description qui est extraite du style.css est un endroit idéal pour décrire votre thème et ses fonctionnalités clés. Il est également utile de lister les plugins recommandés ou requis ici. La description ne prend en charge aucun formatage (gras, italique, hyperliens) ou même des sauts de ligne.Balises
      • – Il s’agit d’une représentation des balises que vous avez répertoriées dans style.CSS. Seules ces balises sont acceptées ici.
      • Bouton Aperçu – L’aperçu est généré par wordpress.org et en tant que développeurs de thèmes, nous n’avons aucun contrôle sur la sortie. Malheureusement, comme l’aperçu utilise du contenu de base et aucune configuration, il en résulte souvent un aperçu moins que parfait.
      • Lien de la page d’accueil du thème – L’URL du bouton Aperçu est extraite du champ ‘URI du thème’ de votre style.CSS. Il existe des exigences strictes selon lesquelles cette URL ne doit être utilisée que pour afficher une page affichant des informations sur votre thème.
      • Installations actives – C’est le nombre de sites Web utilisant activement le thème. Le nombre est arrondi aux dix, cent ou mille les plus proches. Il n’est pas possible de récupérer un nombre exact.
      • Téléchargements par jour – C’est le nombre de fois que votre thème a été téléchargé. Un « téléchargement » peut être un nouveau téléchargement ou une mise à jour de thème.
      • Avis – Pour qu’un utilisateur laisse un avis, il doit être connecté à un wordpress.org compte. De manière générale, les avis sont difficiles à obtenir à moins que vous ne demandiez explicitement à vos utilisateurs de les soumettre.
      • Support – La plate-forme de support intégrée est idéale pour gérer et résoudre les problèmes liés à votre thème. L’utilisateur doit être connecté pour créer un thread de support.
      • Traductions – La plateforme de traduction est une ressource fantastique. Si vous avez suivi les conseils tout au long de ce guide pour localiser votre thème, vos utilisateurs pourront le traduire dans d’autres langues et élargir votre base d’utilisateurs potentiels au-delà des seuls utilisateurs anglophones.

4) Mise à jour de votre thème

Lorsque vous apportez des modifications à votre thème à l’avenir et que vous devez mettre à jour la version hébergée sur WordPress, le processus est simple.

Mettez d’abord à jour le champ ‘Version:’ et le journal des modifications dans readme.txt. Ensuite, compressez le fichier et téléchargez-le à nouveau en utilisant la même page de téléchargement qu’auparavant.

Le système la reconnaîtra comme une mise à jour et l’approuvera automatiquement afin qu’elle ne nécessite pas un autre examen humain.