WordPress devient rapidement un nom familier si ce n’est déjà fait. C’est partout, cette beauté bénigne, alimentant certains des meilleurs sites Web et applications Web que le monde ait jamais vus. C’est un CMS et une plateforme de blogs de premier ordre qui sont non seulement incroyablement polyvalents, mais aussi incroyablement faciles à apprendre et à utiliser. Sinon, pourquoi WordPress gagnerait-il en popularité chaque jour qui passe?

Mais ce que vous voyez en surface lorsque vous configurez et lancez WordPress n’est qu’une petite fraction de ce qui se passe dans les coulisses. En fait, la belle interface utilisateur que nous aimons tous n’est rien comparée au chaos d’activités en coulisses. Ce que je veux dire, c’est que WordPress fonctionne sur deux technologies Web quelque peu compliquées appelées PHP et MySQL.

Les autres technologies qui jouent un rôle incluent JavaScript, son cousin proche de jQuery, CSS et HTML. Les thèmes WordPress (et même les plugins) sont principalement écrits en PHP et reposent sur des bases de données MySQL pour fonctionner. Ils dépendent également des technologies Web susmentionnées. Toutes ces technologies doivent fonctionner ensemble.

Maintenant, en tant que débutant, vous ne comprenez peut-être pas que pour que la plate-forme WordPress, les thèmes et les plugins fonctionnent à l’unisson, les développeurs utilisent un ensemble de codes standardisés, autrement connus sous le nom de balises PHP. Ce sont ces codes que nous décrivons dans l’article d’aujourd’hui, vous montrant à quel point ils sont utiles. Nous allons vous donner quelques exemples quelque part ici pour faire bonne mesure, alors préparez-vous à vous éclater dans votre voyage de construction de thème!

Anatomie du thème

Un thème WordPress n’est tout simplement que plusieurs fichiers PHP liés entre eux. Il est livré avec un fichier de feuille de style CSS qui est responsable de l’apparence de votre thème (et site). Pour en revenir aux bases, un thème WordPress n’est que quelques fichiers PHP. Ci-dessus, un aperçu d’un grand tuts + cheatsheet pour l’anatomie d’un thème WordPress. Pour créer un thème WordPress, vous aurez besoin des fichiers suivants:

  • header.php– Ce fichier modèle contient les informations d’en-tête, qui apparaissent dans la section et avant la balise d’ouverture . Ici, vous ajoutez des métadonnées, le titre du site et un lien vers votre feuille de style CSS, entre autres.
  • index.php – Ceci est le modèle de corps principal de votre thème (ou site) WordPress. Son seul but est de rassembler les autres fichiers en les incluant à l’aide de balises de gabarit (plus d’informations sur les balises de gabarit dans un instant).
  • sidebar.php – Ceci est votre section de barre latérale. Vous pouvez placer des widgets, des catégories, des menus supplémentaires, un formulaire de recherche et tout ce que vous souhaitez
  • footer.php – Ceci est la section de pied de page. Ajoutez vos informations de copyright, liens RSS, widgets, liens, icônes sociales, etc.
  • page.php – Chaque fois que vous créez une page sur votre site basé sur WordPress, c’est le modèle responsable
  • single.php – Ce fichier de modèle contient un seul article de blog
  • comments.php – Le modèle responsable de ces commentaires
  • 404.php – Le modèle affiché lorsque votre lecteur rencontre la tristement célèbre erreur 404 non trouvée
  • search.php – Offre à vos lecteurs la possibilité de trouver du contenu sur votre site WordPress
  • searchform.php – Vous aurez besoin d’un formulaire de recherche pour offrir les fonctionnalités mentionnées ci-dessus, n’est-ce pas?
  • archive.php – Parce que trouver du contenu que vous avez publié en 2008 ne devrait pas être un problème
  • functions.php – Placez toutes les fonctions spéciales, et même les plugins personnalisés ici. Cependant, pour la compatibilité inter-thèmes, il est conseillé d’ajouter du code personnalisé en tant que plugins autonomes. Vous pouvez ajouter des menus supplémentaires, activer des widgets et bien plus encore. Ce fichier vous donne tellement de puissance pour transformer votre site / thème WordPress comme vous le souhaitez.
  • style.css – Ce n’est pas un fichier de modèle PHP en tant que tel. Mais c’est le fichier dans lequel vous ajoutez vos styles CSS pour contrôler l’esthétique. Il est également livré avec l’en-tête d’informations de votre thème WordPress.

Sans aucun doute, vous pouvez créer un thème avec moins de modèles, mais nous ne vous recommandons pas d’en faire une habitude. Après tout, vous avez juste besoin des quelque 10 fichiers ci-dessus pour créer un thème WP standard. Treize n’est pas un gros chiffre, n’est-ce pas? En un mot, votre index.php pourrait ressembler à quelque chose comme:

<?php
// Every page will need the contents of the header.php
get_header(); ?>

// Insert main content here, include the loop

<?php
// Include your sidebar
get_sidebar(); ?>

<?php
// The footer hook is used by themes and plugins to load scripts and tracking codes
get_footer(); ?>

En continuant, parlons d’un extrait de code astucieux appelé la boucle.

La boucle

Dans certaines de nos séries d’articles précédentes, telles que le populaire Tutoriel WordPress: Comment créer un thème WordPress à partir de HTML, nous avons mentionné la boucle, bien qu’en passant. Alors, qu’est-ce qui fait de la boucle l’extrait de code populaire? Eh bien, sans ce morceau de code spécial, vous devrez coder à la main chaque article, ainsi que les extraits, dans votre thème WordPress. Vous feriez cela chaque fois que vous publiez un nouvel article.

L’effort et le temps que vous perdriez vous rendraient bleu et raide. L’empreinte carbone que vous laisseriez derrière – après avoir travaillé votre triste soi à mort – déchirerait un trou de la taille de douze stades Yankee à travers la couche d’ozone. Eh bien, j’exagère les faits (ou leur absence), mais vous seriez dingue si vous codiez manuellement chaque article sur votre site WordPress.

La boucle est une bouée de sauvetage. Jetez simplement l’extrait de code suivant n’importe où dans vos fichiers de modèle WordPress, et il listera tous les articles que vous avez déjà créés:

<?php
if ( have_posts() ) :

    while ( have_posts() ) :

        the_post();

        // Post Content here

    endwhile;

endif; ?>

Nous utilisons généralement la boucle dans index.php pour afficher une liste de messages, mais n’hésitez pas à expérimenter; ajoutez-le partout où vous souhaitez répertorier vos messages. De plus, ajoutez des balises HTML et PHP personnalisées dans la boucle pour personnaliser vos publications comme bon vous semble. En parlant de balises, qu’est-ce qui est disponible dans WordPress?

Inclure les balises

tags wordpress

Les balises d’inclusion de modèle sont simplement des codes PHP que vous utilisez dans n’importe quel fichier de modèle pour inclure (ou plutôt appeler) d’autres fichiers de modèle à partir de votre dossier de thème WordPress. Voici de quoi nous parlons:

  • – Utilisez ceci dans index.php pour appeler (ou inclure) le fichier header.php. Il récupérera header.php et affichera son contenu dans index.php – c’est de cela qu’il s’agit d’inclure un fichier.
  • Inclut sidebar.php
  • Inclut le fichier de modèle footer.php
  • Quiz rapide: À votre avis, que fait cette balise d’inclusion?

Modèles de balises Bloginfo

Il existe une autre catégorie de balises de modèles que nous appellerons simplement les balises bloginfo. Ils jouent un rôle, qui est de récupérer des informations sur votre site WordPress à partir de la base de données. Il s’agit principalement des informations que vous fournissez à votre site WordPress dans votre zone d’administration via le Profil de l’utilisateur et Paramètres -> Général. Une fois les informations extraites de vos bases de données, ces balises s’afficheront alors sur votre site lorsque vous les placerez.

Vous pouvez légèrement modifier la structure de bloginfo, de sorte qu’au lieu d’afficher simplement les informations récupérées, vous pouvez les utiliser (les informations) ailleurs dans votre code PHP. Comme c’est pratique? Plus à ce sujet dans un instant. Voici les balises bloginfo les plus courantes:

  • – Cela affiche le titre de votre blog / site WordPress
  • Cette balise de modèle affiche l’URL de votre blog
  • – Cela affiche la description, ou plutôt le slogan, de votre blog.
  • – Affiche le jeu de caractères utilisé pour encoder votre site. La valeur par défaut est UTF-8
  • – Cela montre l’URL de la feuille de style CSS de votre thème actif
  • – Affiche la version de WordPress que vous utilisez
  • – Affiche la langue de WordPress
  • – Affiche l’URL du flux RSS 0.92
  • Affiche l’URL du flux RSS 2.0

Il existe plusieurs autres balises bloginfo vous pouvez utiliser pour améliorer votre thème WordPress. Maintenant, à propos de cette petite modification de bloginfo dont nous avons parlé il y a quelques secondes. Jusqu’à présent, nous avons utilisé . Modifions ceci en: . Permettez-moi de décomposer les paramètres:

  • $ montrer Il s’agit du mot-clé que vous utilisez pour nommer les informations que vous souhaitez récupérer de la base de données. Les exemples incluent ‘nom’, ‘url’, ‘description’, ‘admin_email’, etc.
  • $ filtre – Cela vous permet simplement de filtrer les informations récupérées. Par défaut, il est défini sur «raw», ce qui signifie simplement que la valeur de $ show est renvoyée telle quelle. En définissant ceci sur ‘display’, la valeur de $ show sera d’abord passée par la fonction wptexturize (). Ne vous inquiétez pas pour le moment.

Voici un exemple: supposons que nous souhaitons récupérer et afficher votre slogan (description du site) qui ressemble à «Meilleurs thèmes WordPress Premium», nous allons d’abord récupérer ces informations à l’aide de cette balise…

<?php $site_description = get_bloginfo( 'description' ); ?>

… Qui charge la description du site dans $ site_description. Pour afficher la description de votre site sur votre site, utilisez ceci:

<?php echo 'Your tagline is: '. esc_html( $site_description ); ?>

Cela vous donne: Votre slogan est: Meilleurs thèmes WordPress Premium

Remarque: Il existe de nombreux autres types de balises de modèle qui vous permettent de réaliser bien plus avec votre site WordPress. Ils sont classés en différents ensembles, à savoir balises générales, tags d’auteur, publier des étiquettes de vignettes, balises de catégorie, et lien Mots clés entre autres. Vous pouvez même les utiliser dans la boucle, alors oui, vous devriez vous amuser.

Feuille de style du thème

Nous avons mentionné style.css plus tôt. Encore une fois, pourquoi le fichier style.css est-il important? Premièrement, il fournit des détails sur votre thème. Ces informations vont dans l’en-tête de la feuille de style, ce qui aide à identifier le thème lors de la sélection dans la zone d’administration. En tant que tel, deux thèmes ne doivent pas avoir les mêmes détails dans les en-têtes de leur feuille de style. Voici un exemple d’en-tête de feuille de style:

/*
Theme Name: Your Theme Name
Theme URI: https://www.yoursite.com/yourtheme
Author: Your Name
Author URI: https://www.yoursite.com/
Description: This WordPress theme is 100% responsive blah blah...
Version: 1.0
License: GNU General Public License V2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: gold, one-column, left-sidebar, responsive-grid, etc
Text Domain: yourthemename
*/

Cette information vient en premier (ou tout en haut) dans style.css. Autre que cela, assurez-vous que vous:

  • Suivre Normes de codage CSS
  • Utilisez un CSS valide
  • Réduire le CSS
  • Ajouter des styles faciles à imprimer
  • Styliser tous les éléments HTML

Dernières pensées

Cette aide-mémoire n’est qu’une ressource de référence rapide qui vous aidera à démarrer tout en apprenant le développement de thèmes WordPress. En utilisant les balises et les extraits que nous avons partagés ici, vous pouvez rapidement développer un thème standard et l’améliorer sans vous ruiner. Bien sûr, vous devez continuer à apprendre le développement de thèmes WordPress, et pour cela, nous vous recommandons le Codex WordPress, tuts +, Threehouse, et ThèmeShaper entre autres ressources réputées.

En dehors de cela, n’hésitez pas à partager vos conseils, astuces, extraits de code ou tout ce que vous avez à l’esprit dans les commentaires ci-dessous. Nous aimerions savoir où et comment vous en apprendrez davantage sur WordPress. À un de ces quatre!

Share: