Depuis son lancement initial en 2003, WordPress est passé d’un simple outil de blogging à un constructeur de sites Web puissant et populaire et à un CMS (système de gestion de contenu) complet utilisé par environ 38% des sites Web sur le Web! Compte tenu de sa popularité, si votre site doit se démarquer de la foule, vous devrez créer un thème WordPress unique à votre site.
En réalité, il n’est pas étonnant que WordPress ait pu arriver si loin et devenir si populaire.
La quantité de flexibilité dont il dispose et les fonctionnalités qu’il héberge permettent une large utilisation sur différents types de sites Web. En outre, WordPress est assez facile à utiliser avec peu ou pas d’expérience préalable en codage ou en développement Web.
Ce sont les raisons de la réussite de WordPress et sont précisément les raisons pour lesquelles presque 40 pour cent de tous les sites Web du World Wide Web sont alimentés par ce logiciel.
WordPress dispose d’un éventail de fonctionnalités pratiques qui facilitent le développement et la programmation Web. less compliqué et plus accessible à tous.
Introduction au développement de thèmes WordPress
Une autre fonctionnalité populaire qui rend WordPress si populaire est ses thèmes. Le thème est simplement une collection de feuilles de style et de modèles qui définissent l’apparence et l’affichage d’un site optimisé par WP.
Le logiciel offre à l’utilisateur une grande variété d’options d’édition différentes en ce qui concerne les thèmes de la zone d’administration WP.
Des centaines de thèmes WordPress sont totalement gratuits ou avec beaucoup d’autres à un prix raisonnable de quelques dizaines de dollars.
En fait, WordPress.org héberge une énorme base de données de thèmes dans leur répertoire de thèmes.
D’autres sites Web tels que Themeforest proposent également de nombreux thèmes premium de différents développeurs.
Chacun de ces thèmes présente une disposition, un modèle de conception et des fonctionnalités différents.
C’est à l’utilisateur de trouver celui qui répondra le mieux aux besoins de son site Web. Dans la plupart des cas, les thèmes sont créés en pensant à des industries ou à des professions particulières, ce qui signifie que, par exemple, les restaurateurs peuvent facilement trouver des thèmes avec des fonctionnalités de réservation.
Bien qu’il existe de nombreux thèmes géniaux qui pourraient répondre à vos besoins, il est prudent de dire que si vous voulez créer quelque chose d’exceptionnel, vous devrez le faire vous-même. Si vous ne parvenez pas à programmer, une bonne alternative l’option serait d’opter pour un développeur de logiciel indépendant (les prix peuvent varier en fonction de divers facteurs).
Dans cet article, cependant, nous allons passer en revue TOUTES les étapes nécessaires pour créer votre propre thème WordPress personnalisé pour votre site Web propulsé par WP. Nous examinerons tous les aspects importants pour nous assurer que vous obtenez le meilleur de WordPress.
Commencer à créer votre propre thème en tant que débutant peut, à première vue, sembler une tâche gigantesque.
Cependant, créer un thème personnalisé à partir de zéro n’est pas trop compliqué dans WP. Vous n’avez pas besoin d’être un expert du développement Web, si vous avez les bases du codage avec PHP, vous pouvez facilement apprendre à créer un thème WordPress.
De plus, créer votre propre thème peut être très enrichissant, surtout lorsque vous voyez le résultat final en direct sur votre site Web.
Créer votre premier thème WordPress personnalisé
Pour commencer à créer un thème WordPress, vous aurez besoin de quelques éléments de base:
- Un site WordPress
- Un bon plan d’hébergement
- Une petite expérience préalable avec des choses telles que les environnements de mise en scène locaux
- Compréhension de base des langages de codage CSS et PHP
- Un thème de départ
Comprendre la hiérarchie des modèles WordPress
Dans WordPress, les fichiers de modèle (les éléments constitutifs de votre thème) sont modulaires et réutilisables.
Les fichiers de modèle sont responsables de la génération des pages sur votre site WP. Certains de ces fichiers sont utilisés sur presque toutes vos pages tandis que d’autres ne sont utilisés que dans des circonstances spécifiques.
Jetez un œil au diagramme ci-dessous – il explique comment la hiérarchie des modèles WordPress est organisée.
Les fichiers modèles détermineront l’aspect général du contenu du site Web. Si vous souhaitez créer un en-tête, vous utiliserez un header.php fichier, ou si vous souhaitez ajouter une section de commentaire, vous utiliserez le comments.php fichier.
Pour comprendre la hiérarchie des modèles, vous devez savoir que WordPress utilise ce qu’on appelle une “chaîne de requête” pour décider quel modèle ou ensemble de modèles doit être utilisé pour créer et afficher une certaine page.
La chaîne de requête est une information stockée dans le lien de chaque partie du site Web que vous essayez de modifier. En termes plus simples, WordPress analyse les informations et effectue des recherches dans la hiérarchie des modèles pour trouver un fichier de modèle qui correspond aux informations fournies dans la chaîne de requête.
Il s’agit essentiellement d’un schéma dans lequel WP recherche les fichiers modèles correspondants à chaque fois que les pages sont chargées.
Par exemple, si vous saisissez l’URL suivante http://example.com/post/this-post, WordPress localisera les fichiers de modèle nécessaires dans l’ordre suivant:
- Fichiers qui correspondent au slug, dans ce cas, ce post.
- Fichiers correspondant à l’ID de publication.
- Un fichier de publication unique générique, comme single.php.
- Un fichier d’archive, dans ce cas, archive.php.
- L’équipe de index.php fichier.
Le dernier fichier (index.php) est requis dans chaque thème, car il s’agit de la valeur par défaut (ou de secours) si aucun autre fichier ne peut être trouvé dans le processus de correspondance. soulignement (un thème de démarrage WP) contient les fichiers les plus courants. Ces fichiers inclus dans ce thème fonctionneront dès la sortie de la boîte.
Vous pouvez les modifier si vous avez envie d’expérimenter ou si vous avez besoin de créer des fonctionnalités personnalisées sur votre site.
Qu’est-ce qu’un thème WordPress Starter?
Un thème de démarrage est une base simple d’un thème WordPress personnalisé.
Vous pouvez l’utiliser comme base pour créer et exécuter votre propre thème unique. Avec un thème de démarrage, vous pouvez créer votre propre thème WordPress personnalisé sans avoir à concevoir ou à coder un thème entier à partir de zéro.
Les thèmes de démarrage WordPress contiennent tous les fichiers tels que définis par la hiérarchie ci-dessus.
L’utilisation d’un thème de démarrage vous permet de mieux comprendre le fonctionnement de WordPress car il vous montre les bases, la structure d’un thème et la manière dont les différentes parties fonctionnent ensemble.
Un thème WordPress personnalisé peut être appliqué à une gamme de types de sites Web différents, des présentations et des répertoires aux boutiques en ligne. construit avec WooCommerce, les réseaux sociaux, ou tout ce pour quoi vous pourriez avoir besoin de votre site Web.
Opter pour des thèmes de démarrage (tels que UnderStrap, Underscores et Bones) aidera à créer un thème WordPress qui ouvre la porte à l’utilisation d’une variété d’options différentes.
L’utilisation de traits de soulignement peut être le meilleur choix pour les débutants car elle offre les fonctionnalités les plus importantes. Il vient également d’un développeur fiable et de longue date. Cela signifie qu’il est plus susceptible d’être compatible, sécurisé et fiable, et bénéficiera d’un meilleur support à long terme.
Pourquoi devriez-vous utiliser un thème de démarrage
Comme indiqué ci-dessus, un thème de démarrage est une fondation, un plan qui vous aide à créer un site Web unique. Il fonctionne déjà pleinement, mais il manque toujours les fonctionnalités clés qui rendent un site Web convivial.
Essentiellement, il doit encore être stylé et correctement configuré.
Cela étant dit, les thèmes de démarrage sont idéaux pour ceux qui ont peu ou pas d’expérience avec WordPress ou le développement Web en général. C’est un excellent moyen de s’initier au sujet de la création de thèmes et d’apprendre les bases des sites Web alimentés par WP.
Un thème WordPress Starter vous fait gagner du temps et nécessite peu ou pas de connaissances de base en codage et le reste des complexités de WordPress.
Vous pouvez tirer parti des années de travail acharné des développeurs du thème de démarrage et utiliser ces directives pour mieux comprendre le fonctionnement de WordPress et de la conception de thèmes.
Exemples de thèmes de démarrage populaires
- soulignement – Un thème de démarrage fiable et renommé qui donne aux débutants une longueur d’avance développement de thèmes. Les traits de soulignement sont assez basiques et parfaits pour commencer tout de suite si vous disposez de tous les outils nécessaires. Le thème est idéal pour comprendre les concepts de développement de thème. Underscores consiste à démarrer un nouveau projet qui devrait être davantage considéré comme une boîte à outils en constante évolution et less comme un cadre.
- Racines – Ce thème de démarrage vous offre une approche davantage orientée vers les développeurs, son balisage étant basé sur le HTML5 Boilerplate. Il prend également en charge des outils plus avancés tels que Bootstrap à ces émotions et de Grognement. Le thème de démarrage Roots comprend également un wrapper de thème qui vous aide à rationaliser votre processus et vous évite d’appeler à plusieurs reprises les mêmes éléments de modèle.
Roots utilise également des préprocesseurs CSS et prend en charge LESS, une extension de langage rétrocompatible pour CSS, qui peut considérablement accélérer le processus de développement de votre thème.
Cela étant dit, Roots donne une approche plus pragmatique et nécessite un peu plus de savoir-faire de la part du développeur.
6 étapes de base pour développer votre thème WordPress
Après avoir couvert les bases, vous êtes enfin prêt à commencer à créer un thème WordPress.
Étant donné que cet article est davantage destiné aux débutants, nous utiliserons un thème de démarrage, cependant, vous êtes également libre de tout créer à partir de zéro sans aucun thème de démarrage.
Si c’est la voie que vous souhaitez emprunter, n’oubliez pas que vous aurez besoin de beaucoup plus de temps et que vous devrez vous immerger un peu plus dans le codage et le développement Web en général.
1. Configuration de l’environnement de développement
Votre première étape du processus devrait être la création d’un environnement de développement.
Il s’agit essentiellement d’un serveur que vous devez installer sur votre ordinateur pour gérer et développer des sites WP locaux. Un environnement de développement vous permet de développer votre site Web en toute sécurité, en plus de vous offrir plusieurs options pour créer un environnement local.
En utilisant DesktopServer est l’un des chemins idéaux que vous pouvez emprunter. C’est un moyen facile d’obtenir une version locale et rapide de WP compatible avec Windows et Mac. Sélectionnez la version gratuite, enregistrez-vous et téléchargez-la, puis installez le logiciel.
Une fois que vous avez installé, ouvrez le programme et configurez votre environnement local.
C’est un processus assez simple et vous serez prêt en quelques minutes. Après la configuration, vous disposerez d’un site Web et d’un environnement de développement qui fonctionneront et ressembleront à n’importe quel site Web WP en direct.
2. Téléchargez et installez un thème de démarrage
Les thèmes de démarrage les plus basiques (comme les traits de soulignement) sont faciles à utiliser pour les débutants.
Contrairement à la plupart des thèmes basiques, Underscores permet de personnaliser les options via son options avancées (comme l’auteur et la description) après avoir nommé votre thème.
Vous pouvez également ajouter des feuilles de style syntaxiquement géniales ou SASS qui est un langage CSS de prétraitement vous permettant d’introduire des fonctionnalités telles que l’imbrication, les opérations mathématiques, l’utilisation de variables, etc.
Après avoir fait vos choix, il ne vous reste plus qu’à cliquer sur Générer pour télécharger le fichier .zip avec votre thème de démarrage.
Maintenant, installez le fichier sur votre site local. Si vous avez tout fait correctement, vous pouvez maintenant voir une version de base simple de votre thème WordPress personnalisé.
Comprendre les principes fondamentaux de WordPress
Maintenant que les bases sont configurées, vous pouvez vous mettre au travail. Cependant, avant de plonger dans le processus de personnalisation, vous devrez vous familiariser avec les principes de base et les composants de la création d’un thème WordPress en utilisant les principes de base de WP.
Tout d’abord, vous devez en savoir plus sur fichiers modèles, les principaux blocs de construction de n’importe quel thème dans WP.
Les fichiers modèles déterminent essentiellement la manière dont votre mise en page et votre contenu seront affichés sur votre site. Si vous souhaitez créer un en-tête, vous souhaiterez utiliser le header.php fichier, tandis que comments.php serait utilisé pour afficher les commentaires.
Comme indiqué ci-dessus, WP utilise sa hiérarchie de modèles pour déterminer quel fichier modèle il choisira pour exécuter le contenu qu’un utilisateur demande / a besoin. Vous pouvez travailler avec ces fichiers tels quels, mais étant donné que vous êtes ici pour créer un thème WordPress, votre travail consistera principalement à adapter ces fichiers à vos besoins.
Lorsque nous parlons des principes fondamentaux de WP, vous devez également comprendre le concept sous-jacent The Loop.
C’est le code que WP utilise principalement pour afficher votre contenu et il peut être trouvé dans tous les fichiers de modèle d’affichage de contenu, comme le index.php or barre latérale.php. C’est un sujet assez complexe mais heureusement, il est livré avec le thème de démarrage (si vous utilisez Underscores), ce qui signifie que votre processus devrait être plus simple.
Vous devrez comprendre le concept et travailler avec lui. Consultez certains des exemples dans le lien ci-dessus, pour mieux comprendre comment la boucle est utilisée et comment vous pouvez personnaliser le code en fonction de vos besoins.
3. Créer les détails du thème
Thèmes ne sont pas des composants purement cosmétiques.
Il existe de nombreuses fonctionnalités que vous pouvez ajouter à votre site et qui peuvent améliorer les fonctionnalités. Nous allons discuter de la façon de mettre en œuvre quelques fonctionnalités de base pour pimenter votre site Web.
Ajout d’ Crochets peut vous permettre d’exécuter différentes actions PHP, d’afficher d’autres informations ou d’insérer des données de style si nécessaire.
Les hooks sont des extraits de code qui sont insérés dans des fichiers de modèle. La plupart d’entre eux sont directement implémentés dans le cadre du cœur de WordPress, mais certains hooks sont également très utiles lors de la personnalisation des thèmes.
Voici une liste des hooks les plus courants et de leurs rôles:
- wp_head () – est ajouté au élément dans header.php. Il active des scripts, des styles et d’autres informations qui s’exécutent lorsque le site commence à se charger.
- wp_footer () – généralement ajouté à footer.php avant le tag, le plus souvent utilisé pour insérer du code pour Google Analytics ou tout autre code qui doit apparaître sur chaque page mais qui est trop lourd à charger dans l’en-tête
- wp_meta () – Généralement trouvé sur sidebar.php, et il est le plus souvent utilisé pour inclure des scripts supplémentaires (par exemple, un nuage de balises).
- comment_form () – Ajouté à comments.php juste avant la fermeture du fichier balise pour afficher les commentaires.
Lorsque vous utilisez des traits de soulignement, ces crochets seront déjà inclus dans le thème, mais c’est toujours une bonne idée d’en savoir plus sur eux et de voir tous les crochets disponibles. Les crochets vous permettent d’étendre les capacités de votre thème personnalisé.
4. Ajout de styles à l’aide de CSS
Cascading Style Sheets ou CSS définit l’apparence du contenu sur le site que vous créez.
En utilisant le style.css , qui est déjà inclus dans votre thème, vous pouvez modifier l’un des styles trouvés ici et les enregistrer pour voir comment cela modifie votre conception. Par défaut, il ne contient que le style de base.
CSS est utilisé pour permettre la présentation et la séparation du contenu de votre site Web, de la mise en page aux polices et au contenu. CSS peut aider à rendre le contenu de votre site plus accessible et plus flexible.
Approfondir la façon d’utiliser le style avec les thèmes WordPress peut devenir assez poilu et dépasse le cadre de cet article. Si vous n’êtes pas trop sûr de cela, vous voudrez peut-être en savoir plus sur CSS avant de continuer.
5. Y compris JavaScript
L’ajout de fichiers JavaScript à votre thème si nécessaire peut améliorer les fonctionnalités et capacités interactives et améliorer le fonctionnement du site. Cela s’avère particulièrement utile lorsque vous souhaitez intégrer des plugins tiers dans vos sites, tels que des lecteurs vidéo ou audio spécifiques, des éléments tels que des curseurs, la prise en charge des fenêtres contextuelles et d’autres bibliothèques tierces pour créer des fonctionnalités avancées.
Pour utiliser Javascript avec votre site personnalisé, vous pouvez créer un appel en utilisant la syntaxe ci-dessous pour ajouter le fichier de script au thème.
Vous pouvez également utiliser le script directement dans votre header.php modèle entre les balises meta et le lien de la feuille de style, comme vous le feriez dans le cas d’une page HTML. Lorsque vous l’utilisez dans le fichier d’en-tête, cela devrait ressembler à ceci:
Si vous souhaitez utiliser JS directement, ajoutez directement l’appel des fichiers comme indiqué ci-dessous. Si vous souhaitez définir une fonction «envoyer ceci à un ami», vous pouvez la placer sous le titre de l’article. Cela ressemblerait à ceci:
” rel=”bookmark”>