Comment créer manuellement des modèles personnalisés WordPress – Un guide

Si vous n'êtes pas satisfait de la conception de votre site Web et que le thème que vous avez choisi n'offre pas le niveau d'options de personnalisation requis, il est peut-être temps d'envisager de créer votre propre modèle personnalisé ! Selon vos besoins, ce modèle WordPress peut être un modèle de publication personnalisé, un modèle de page ou une vue de catégorie.

L'une des choses passionnantes à propos de WordPress est que, quelle que soit la manière dont votre site Web WordPress a été construit, vous êtes toujours libre de modifier la mise en page ou la conception à tout moment. Cela peut être fait en remplaçant un modèle prédéfini ou en créant le vôtre. WordPress offre une grande flexibilité et vous donne la possibilité de créer votre propre modèle pour n'importe quoi.

Malgré le fait que la création de votre propre modèle ouvre une multitude de possibilités de conception, la plupart des utilisateurs de WordPress hésiteraient probablement à relever le défi car ils craignent que la création de votre propre modèle personnalisé WordPress soit trop complexe. Dans cette série de deux articles, nous examinerons les deux options qui s'offrent à vous. Tout d'abord, dans cet article, nous verrons comment vous pouvez coder manuellement un modèle WordPress personnalisé (qui offre le nec plus ultra en matière de flexibilité), puis nous examinerons comment vous pouvez utiliser les constructeurs de pages populaires pour assumer une partie du travail lourd nécessaire. lors de la création d'un modèle personnalisé WordPress.

Dans cet article, nous examinerons les moyens de créer des modèles personnalisés pour les pages, les publications et même les catégories de publications. Commençons par examiner d'abord pourquoi vous pourriez vouloir un modèle personnalisé.

Remarque : Cet article suppose une connaissance pratique de HTML, CSS et PHP.

Quand avez-vous besoin d'un modèle WordPress personnalisé ?

Peut-être ne savez-vous pas encore pourquoi vous auriez réellement besoin d'utiliser un modèle personnalisé WordPress. La façon la plus simple d'expliquer cela est avec un exemple.

Imaginons que vous ayez un site Web pour votre entreprise. Le thème 'Twenty Twenty' est activé et toutes les pages et publications nécessaires sont déjà créées et remplies de contenu (texte et images), d'un extrait et d'une image en vedette.

Les paramètres généraux sont également configurés et vous avez apporté un certain nombre de modifications via le personnalisateur (telles que les couleurs des liens, la couleur de superposition du modèle de couverture, etc.)

Un menu a également été créé avec 5 éléments : Page d'accueil – Profil de l'entreprise – Services – À propos de nous – Contactez-nous

Dans la section Services, il y a un sous-menu : Service 1 – Service 2 – Service 3.

Ainsi, du point de vue d'un développeur WordPress, vous avez essentiellement :

• Quatre pages standard ( Page d'accueil - Profil de l'entreprise - À propos de nous - Contactez-nous )
• Une page d'archives ( Services )
• Trois pages de publication ( Service 1 - Service 2 - Service 3 )

Par défaut, les 3 pages Service Post auront la même mise en page. La seule option dont vous disposez actuellement pour différencier ces mises en page individuelles de publications en sélectionnant l'un des trois modèles fournis via le paramètre Attributs de publication.

Si nous sélectionnons chacun des différents modèles, nous verrons qu'ils ressemblent à ceci :

Modèle par défaut

Modèle pleine largeur

Modèle de couverture

Si vous avez de la chance, l'un de ces styles fonctionnera pour vous et vous pourrez choisir de les utiliser pour votre site Web. Si ce n'est pas le cas, et que vous vous sentez frustré que certains éléments ne ressemblent pas « exactement comme vous le souhaitez », alors ne vous inquiétez pas… c'est là que la création manuelle de votre propre modèle WordPress personnalisé entre en jeu.

Allons-y et voyons ce qui peut être réalisé avec un modèle personnalisé.

Comment créer manuellement un modèle de publication WordPress personnalisé

Ce que nous allons faire dans le tutoriel suivant est de créer une vue de publication unique entièrement personnalisée et qui sera spécifiée dans son propre fichier PHP. Nous ajouterons également une option appelée "Mon modèle de publication personnalisé" au menu déroulant des modèles dans les attributs de publication qui correspondra à la mise en page de publication personnalisée et présentera notre structure unique.

Première étape : Présentation de notre modèle sur WordPress

Pour commencer, nous devons créer un fichier PHP nommé quelque chose comme : « my-custom-post.php » dans le dossier racine de votre thème WordPress (dans notre exemple, il se trouve dans /themes/twentytwenty/).

Ouvrez le fichier avec votre éditeur de texte préféré (comme Sublime) et ajoutez le contenu ci-dessous :

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

Cette ligne * Template Name: My custom post template définit le nom qui sera affiché dans le menu déroulant du modèle. Jetez un œil à la capture d'écran ci-dessous et vous verrez à quoi cela ressemblerait.

Le * Template Post Type: post est facultatif et définit le type de publication pour lequel le modèle apparaîtra comme une option. Comme nous l'avons défini comme "publication", ce modèle n'apparaîtra pas dans le menu des options de modèle pour une page, comme on peut le voir dans l'exemple ci-dessous.

La dernière ligne : get_header(); ?> get_header(); ?> récupère le contenu de l'en-tête.

À ce stade, si vous choisissez "Mon modèle de message personnalisé" comme modèle actif pour, disons, notre message "Service 1", la sortie sera vide. C'est ce à quoi nous nous attendions car nous n'avons pas encore ajouté de structure à la page. Vous verriez quelque chose comme ceci :

Ajouter de la structure à notre modèle personnalisé WordPress

Bien qu'il soit tout à fait possible de créer la structure de notre page entièrement à partir de zéro, il peut parfois être plus facile de prendre la structure de publication existante qui est utilisée dans notre modèle de thème, puis de la modifier.

Si nous jetons un coup d'œil à la hiérarchie des modèles WordPress, nous pouvons voir que, selon le thème, le modèle de publication unique provient du fichier singular.php ou single.php situé dans le dossier du thème.

Pour clarifier davantage - lorsque les articles et les pages utilisent la même structure, le fichier singular.php est utilisé, sinon (comme dans le thème populaire Astra par exemple) vous verrez un seul.php, page.php, archive.php fichiers qui sont codé pour fournir différentes structures pour les articles, les pages et les mises en page de blog respectivement.

Dans ce cas, en utilisant le thème Twenty Twenty, nous pouvons voir que le fichier singular.php utilise la fonction get_template_part pour récupérer la mise en page demandée à partir du dossier template-parts.

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

Ce que le code ci-dessus fait intelligemment est de vérifier s'il y a du contenu dans la publication et si c'est le cas, imprime le contenu en utilisant la structure spécifiée par le modèle sélectionné. Ceci s'applique dans tous les cas, qu'une publication, une page ou une archive soit utilisée.

Maintenant que nous pouvons voir comment notre thème extrait les données de mise en page des modèles existants, nous sommes maintenant prêts à commencer à créer notre propre modèle. Afin de définir l'apparence de notre modèle, nous devons d'abord le concevoir. Vous voudrez peut-être que votre page de publication soit mise en page dans le format suivant :

Une fois que vous avez décidé d'une conception de mise en page, vous devrez la coder en utilisant HTML, CSS et PHP. Cet article suppose que vous avez une connaissance pratique de ces langues et que vous pouvez créer la mise en page requise. En prenant la conception ci-dessus, nous écrirons un code initial qui, ajouté à votre fichier my-custom-post.php ressemblera à ceci :

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

Il existe des fonctions de raccourci fournies par notre thème Twenty Twenty pour les méta-postes et autres données que nous pourrions vouloir publier. Au lieu de les utiliser, nous allons utiliser les fonctions WordPress par défaut afin que votre modèle fonctionne sur n'importe quel thème. Ceux avec lesquels nous allons travailler sont les suivants :

• the_title() – fait écho au titre du message
• the_excerpt () - fait écho à l'extrait de message
• the_post_thumbnail () - affiche la taille de vignette de publication par défaut. Vous pouvez utiliser les options the_post_thumbnail() pour générer une taille d'image sélectionnée spécifique
• the_content() – Affiche le contenu de la publication

Si nous enregistrons nos mises à jour et examinons maintenant le message "Service 1", nous verrons la mise en page du modèle personnalisé appliquée.

Comment créer un modèle de catégorie de publication personnalisé WordPress

Maintenant que nous avons vu à quel point il est relativement facile de créer notre propre mise en page de modèle de publication, nous pouvons passer à autre chose et appliquer des principes similaires pour créer notre propre mise en page de vue de catégorie.

Un moyen simple de le faire est de modifier directement le fichier index.php (situé dans notre dossier racine /themes/twentytwenty/). Bien que la modification directe de ce fichier convienne à des fins de didacticiel, si le site Web est en ligne, vous souhaiterez peut-être utiliser un thème enfant pour vous assurer que les mises à jour ne seront pas écrasées la prochaine fois que vous mettrez à jour votre thème.

Si nous regardons le code index.php, nous remarquerons qu'il est principalement rempli de conditions PHP "if" qui spécifient les sorties disponibles en fonction du type de contenu. Par exemple, le code suivant vérifie si le contenu comprend des articles (il s'agit d'un article, d'une page ou d'une archive) ou s'il s'agit d'une page de résultats de recherche et affiche le bon contenu en conséquence.

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

Si vous suivez ce didacticiel en utilisant le thème Twenty Twenty, recherchez le code suivant dans votre fichier index.php :

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

Dans le template-parts/content.php nous pouvons voir que le contenu est récupéré à l'aide de la fonction 'get_template_part'.

Au lieu d'utiliser ces fonctions spécifiques au thème pour spécifier la mise en page de notre page de catégorie de publication, nous allons utiliser les fonctions WordPress par défaut pour chaque élément à la place. Cela signifie que nous allons remplacer le code ci-dessus par le suivant :

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

Si vous avez les yeux d'aigle, vous verrez que nous faisons référence à un fichier appelé my-custom-category-view.php que nous devons maintenant créer et ajouter au dossier de notre thème (une autre approche serait d'ajouter cette information directement à notre fichier index.php mais l'avoir enregistré dans un fichier séparé est beaucoup plus propre.

Créez un fichier my-custom-category-view.php et ajoutez le code suivant :

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

Vous verrez que nous avons pu utiliser le format plus avancé de la fonction the_title() pour spécifier le titre du message. Le lien vers la page de publication unique a été généré à l'aide de la fonction get_permalink().

Pour finir, vous devrez maintenant ajouter un style supplémentaire à votre fichier style.css :

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

Voyons ce que nous avons accompli jusqu'à présent :

Agréable!

Comme vous pouvez le voir, il y a encore quelques problèmes concernant l'ajustement des images car ils sont de proportions différentes. Nous pouvons facilement résoudre ce problème en ajoutant quelques lignes supplémentaires à notre CSS afin de centrer les images et de donner des dimensions fixes :

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

De cette façon, bien sûr, nous utilisons toujours les images originales, ce qui n'est pas nécessairement optimal du point de vue des performances. La meilleure pratique ici consiste à utiliser les tailles d'image WordPress. Si vous souhaitez rendre votre nouvelle mise en page réactive, consultez également ce guide complet pour plus d'informations.

Et voilà, bravo ! Vous avez maintenant réussi à créer votre propre mise en page et conception personnalisées pour la vue de la catégorie de publication.

Comment créer un modèle de page personnalisé WordPress

Jusqu'à présent, nous avons créé une mise en page personnalisée pour notre page de publications ainsi qu'une mise en page personnalisée pour les résultats de catégorie. Vous serez en mesure d'appliquer les méthodes utilisées lors de la création d'un modèle personnalisé pour les pages ainsi que exactement les mêmes principes s'appliquent.

Avant de terminer cet article, jetons un coup d'œil à un modèle de page légèrement plus complexe. Dans cet exemple, nous allons insérer nos pages de publications dans notre modèle afin de pouvoir les afficher de la même manière qu'elles apparaîtraient dans une page de catégorie, mais avec l'avantage supplémentaire de la possibilité de modification offerte par une page (plutôt qu'une page de catégorie) .

Notre objectif sera de créer une page d'aperçu "Services" qui répertorie nos trois services commerciaux (dans cet exemple, Service 1, Service 2 et Service 3). Plutôt que d'avoir à les ajouter manuellement à notre page, ils seront ajoutés dynamiquement à la page. Bien qu'en pratique, vous n'ayez peut-être pas à vous en soucier, les principes de codage sont utiles pour comprendre et démontrer davantage la flexibilité offerte par WordPress.

Pour commencer, créez un nouveau fichier dans le dossier de votre thème et nommez-le quelque chose comme my-services-template.php . Cela fait, nous allons maintenant ajouter quelques commentaires de déclaration nécessaires, comme nous l'avons fait auparavant avec le modèle de publication unique. Nous allons également utiliser la fonction get_template_part().

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

La fonction get_template_part() est essentiellement un mécanisme qui nous permet de charger des morceaux de code réutilisables. Dans ce cas, il récupérera le contenu de template-parts/content-cat_services.php . C'est dans ce fichier que nous allons insérer du code qui affichera les messages de la catégorie 'Services'.

En résumé, ce que le code de ce fichier va faire est :

• Donnez un titre à la page de catégorie.
• Interrogez les publications de la catégorie spécifiée dans la base de données.
• Parcourez les messages et affichez une mise en page pour chacun.

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

Nous examinerons les requêtes plus en détail dans un prochain article. Ce que vous devez savoir pour les besoins de cet article est que $args = array( 'cat'=>4, 'orderby' => 'title' ); récupère la catégorie de message avec le numéro d'identification de 4 (ID = 4). Ce numéro de catégorie qui se rapporte à notre catégorie « Services ».

Alors, comment pouvez-vous voir l'ID de chaque catégorie ? C'est assez simple en fait. Accédez à Menu Posts > Catégories et ouvrez n'importe quelle catégorie à modifier. L'ID se trouve dans l'URL de la page de modification de catégorie, comme indiqué ci-dessous :

Pour afficher notre nouveau modèle, nous devons accéder à Pages et créer une nouvelle page. Dans la zone d'édition de la page, vous n'avez pas besoin de saisir de contenu. Au lieu de cela, sélectionnez simplement l'option "Mon modèle de catégorie de publication" dans le menu déroulant des modèles de page Attributs.

Enfin, allez dans le menu et ajoutez un élément "Services" pour notre nouvelle page afin de remplacer l'élément de catégorie Services actuel. Le menu devrait maintenant ressembler à ceci

Voyons ce que nous avons fait :

La méthode ci-dessus montre comment créer un modèle de page personnalisé WordPress qui tire dans une catégorie spécifique (dans cet exemple, nos "Services"). Si vous sélectionnez le même modèle pour une autre page de catégorie, vous verrez à nouveau les messages de la catégorie Services, comme nous l'avons spécifiquement demandé avec l'ID de catégorie (ID=4). Donc, si vous vouliez un nouveau modèle de page tiré dans une catégorie différente, vous deviez créer un fichier de modèle séparé pour le faire (et mettre à jour l'ID de catégorie en conséquence).

Conclusion

La possibilité de créer votre propre modèle personnalisé pour votre site Web WordPress vous donne le contrôle ultime sur l'apparence de votre site Web. La création de modèles personnalisés pour la vue individuelle ou par catégorie de vos types de publication en vaut la peine. Non seulement cela permet bien sûr un contrôle total sur les éléments de conception de votre site, mais cela vous permet également de reproduire rapidement une certaine mise en page pour les pages futures.

Voir également

• Comment créer des modèles personnalisés WordPress à l'aide de constructeurs de pages - Un guide