Fermer

novembre 2, 2018

Trois façons de créer votre propre thème WordPress –


Il est courant que les utilisateurs de WordPress choisissent un thème prêt à l’emploi. Mais vous pouvez également créer un thème de votre choix. Cet article couvre différentes manières de s'y prendre.

Les options vont de la modification d'un thème existant à la création de votre propre thème WordPress entièrement à partir de zéro. Entre ces deux extrêmes, diverses options incluent la duplication et la modification de thèmes, ainsi que l'utilisation d'un éventail d'outils pour vous aider à créer votre propre thème.

Les thèmes WordPress sont constitués d'une collection de fichiers, tous contenus dans un même dossier. vit dans le dossier / themes / : wp-content / themes / .

 Un exemple des fichiers contenus dans un thème WordPress

Option 1: Modifier un thème existant

La modification d'un thème existant est peut-être l'option la plus simple. Vous souhaiterez peut-être simplement apporter des modifications mineures, telles que des couleurs, des tailles de police ou des modifications simples à la présentation.

Dans ce cas, la meilleure solution consiste à créer un thème enfant . Un thème enfant fait référence à un thème existant, en modifiant simplement les bits que vous souhaitez modifier. L'utilisation d'un thème enfant présente l'avantage que, si le thème parent est mis à jour lors de la mise à jour de WordPress, vos modifications ne seront pas effacées.

Pour créer un thème enfant, créez un nouveau dossier dans votre / themes /. dossier. Une astuce utile consiste à utiliser le nom du thème parent auquel est ajouté -child car cela indique clairement quel est le thème de l'enfant. Ainsi, si vous créez un thème enfant du thème Twenty Seventeen, votre dossier de thèmes enfant peut s'appeler / twentyseventeen-child / .

 Fichiers par défaut minimaux pour un thème enfant

Dans ce dossier enfant, vous avez besoin au minimum d’un fichier style.css et d’un fichier functions.php . Dans ces fichiers, vous devez ajouter un certain code indiquant à WordPress quel est le thème parent, où se trouvent les feuilles de style et toute autre fonctionnalité souhaitée dans votre thème enfant.

La dernière étape pour obtenir votre thème enfant opérationnel est: pour accéder au panneau d'administration WordPress et accédez à Apparence> Thèmes pour activer le thème de votre enfant

Pour obtenir un guide complet sur ce processus, visitez le WordPress Codex . Pour obtenir de l'aide sur la configuration d'un thème enfant, vous pouvez également utiliser l'utilitaire WordPress Child Theme Configurator .

Option 2: Adapter un thème existant

Si vous souhaitez approfondir le code WordPress, a Un peu plus, vous pouvez dupliquer un thème existant et le plier à votre volonté.

Cela peut impliquer, par exemple, la suppression de tous les styles actuels et la création de votre propre. Vous pouvez également explorer les autres fichiers de thème, supprimer des éléments inutiles et en ajouter d'autres. Par exemple, vous pouvez modifier la structure HTML du thème. Pour ce faire, vous devez ouvrir divers fichiers tels que header.php index.php et footer.php et mettre à jour les parties HTML avec votre Eléments de modèle propres.

 Un nouveau dossier contenant les fichiers à éditer

En cours de route, vous pourrez peut-être décider que le thème copié comporte de nombreuses fonctionnalités inutiles, telles que la publication de commentaires et divers éléments de la barre latérale tels que les catégories et les signets. Vous trouverez des extraits PHP de ces éléments dans les différents fichiers de thème et vous pouvez simplement les supprimer ou les déplacer ailleurs.

Il faut un peu de recherche pour déterminer quels fichiers contiennent les éléments souhaités. supprimer ou déplacer, mais c’est un bon moyen de vous familiariser avec votre thème WordPress et de creuser dans les fichiers de ce type.

Une autre option, plutôt que de dupliquer un thème existant, est de commencer par un «thème de démarrage», voir ci-dessous.

Option 3: Construire un thème à partir de rien

Une option plus intimidante – mais plus amusante aussi! – est de créer votre propre thème complètement à partir de zéro. C'est en fait plus simple qu'il n'y paraît, car au minimum, vous n'avez besoin que de deux fichiers – style.css et index.php .

 Fichier minimal requis pour la construction. votre propre thème

Cela aboutirait toutefois à un thème assez limité! Au minimum, vous voudrez probablement un fichier functions.php pour des fonctions personnalisées et peut-être plusieurs autres fichiers modèles pour les différentes sections du site, tels qu'un fichier modèle 404.php permettant d'afficher 404 pages. .

Dans cet exemple, nous avons créé un dossier dans notre répertoire de thèmes appelé / scratch-theme / . (Vous voudrez bien sûr choisir un nom plus spiffier que celui-là.) Le fichier style.css servira de feuille de style principale de notre thème WordPress. Dans ce fichier CSS, nous devons d’abord ajouter un texte d’en-tête. Voici un exemple de base:

 / *
Nom du thème: Mon thème Scratch
Thème URI: https://sitepoint.com
Auteur: Sufyan bin Uzayr
URI de l'auteur: http://sufyanism.com
Description: Juste un thème de démarrage original pour SitePoint
Version 1
Licence: Licence publique générale GNU v2 ou ultérieure
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: nettoyer, entrée
* /

Vous pouvez maintenant vous diriger vers la section WordPress admin Thèmes où nous verrons notre thème maintenant répertorié.

 Notre nouveau thème répertorié en option

À ce stade, il n’offre pas de styles et de dispositions personnalisés, mais peut quand même être activé et utilisé. (Vous pouvez ajouter une vignette pour le thème en téléchargeant un fichier image nommé "capture d'écran" dans le dossier racine du thème, de préférence 880 x 660 pixels.)

Pour plus d'informations sur le développement du thème WordPress, consultez la page . ] Guide de développement du thème WordPress Codex .

Il est assez simple de créer un thème WordPress très basique à partir de rien, mais aller au-delà est plus difficile. Avant de décider si cela se trouve un peu en dehors de votre timonerie, voyons quelques-uns des outils disponibles pour vous aider.

Utilisation d'un thème de démarrage

Un thème de démarrage est un thème WordPress nu ou vide qui comprend uniquement les éléments de base. minimum de code structurel. Cela signifie qu'un thème WordPress de démarrage possède des fonctionnalités de base, mais n'offre aucune personnalisation ou modification. C’est un point de départ très pratique pour construire votre thème unique.

Il existe plusieurs choix pour choisir un thème de départ pour le développement, le plus populaire étant Underscores . Il est maintenu par Automattic, le créateur de WordPress, et constitue la base des thèmes par défaut récemment publiés par WordPress.

 Capture d'écran de la page d'accueil Underscores

Les autres options incluent FoundationPress [maintenu par ZURB.

 Capture d'écran de la page d'accueil de FoundationPress

Bones est un autre thème WordPress simple et facile à comprendre, qui peut fonctionner comme un très bon point de départ pour le développement de thèmes.
HTML5 Blank est une autre option fournissant une base de code fiable et bien documentée pour le développement de thèmes.

Utilisation de Underscores dans le développement de thèmes

Pour commencer à utiliser Underscores, entrez les détails de votre thème sur la page d'accueil de Underscores.

 Configuration d'un thème de début de Underscores

Vous pouvez également inclure le passe-partout WooCommerce – utile si le thème cible a probablement WooCommerce des portages, tels que des présentations personnalisées pour les pages de panier et de paiement, etc. Cliquez sur Générer et c’est tout! Notre thème sera généré et disponible pour le téléchargement. Dans le fichier ZIP résultant, nous pouvons localiser notre répertoire de thèmes.

Le thème WordPress généré par Underscores contient de nombreux modèles ainsi que des sections distinctes pour les dispositions personnalisées et les éléments JavaScript. Cela signifie que notre structure de thème est prête pour nous, de même que les fichiers de modèle, qui contiennent un minimum de code sous forme de balises PHP et de commentaires. Nous pouvons simplement commencer immédiatement en modifiant tout ce dont nous avons besoin et en éliminant tout ce dont nous n’avons pas besoin.

C’est évidemment un gain de temps considérable, nous n’avons pas besoin de créer manuellement chaque fichier modèle.

Utiliser un WordPress Thème Framework

Semblable aux frameworks pour CSS, JavaScript et PHP, un framework de thème fournit un ensemble normalisé d'outils que vous, en tant que développeur, pouvez utiliser pour créer vos propres thèmes. Les cadres de thème sont accompagnés de conventions prédéfinies qui peuvent aider au développement de thème en permettant de gagner du temps et des efforts qui seraient autrement consacrés à la codification et à la construction de ces conventions mêmes.

De nombreux cadres de thème WordPress sont actuellement dotés de fonctionnalités telles que:

  • filtres
  • fonctions personnalisées à utiliser dans le thème
  • rappels personnalisés
  • intégration ou compatibilité de bibliothèques personnalisées, telles que jQuery, etc.

Ces cadres de thème WordPress offrent plusieurs avantages supplémentaires qui leur sont propres, tels que bien. Ils facilitent évidemment la création d'un thème WordPress plus rapidement et plus facilement. Certains offrent également des fonctionnalités personnalisées et des normes de codage qui permettent aux nouveaux développeurs de coder rapidement et d’apprendre les ficelles du métier plus efficacement. Bien entendu, cela signifie également que vous avez moins de contrôle que lorsque vous créez un thème à partir de rien, mais en fonction de vos exigences et de votre niveau d'expertise, un cadre de thème adapté aux débutants peut s'avérer utile.

Choisir un cadre de thème WordPress

Il existe de nombreux frameworks de thème WordPress parmi lesquels choisir. Un choix populaire est Le cadre Genesis de StudioPress. Au prix de 59,95 $, Genesis est livré avec des fonctionnalités telles que des modèles de page personnalisés, de multiples options de disposition personnalisables ainsi qu'un support complet pour Gutenberg, le prochain éditeur WordPress.

 Un exemple de framework Genesis

Une autre prime valable L'option est le Divi theme de Elegant Themes. Divi est fourni avec des éléments de conception en temps réel, des modèles et des modèles de page personnalisables, des ressources déplaçables et modifiables visuellement, etc. En d'autres termes, Divi est un constructeur de pages déguisé en cadre de thème qui vous permet d'exporter vos paramètres de développement et de créer rapidement des sites Web. 19659003] Si vous cherchez quelque chose de gratuit, Gantry vaut le détour. Ce cadre de thèmes robuste et convivial pour les développeurs n’est pas uniquement destiné à WordPress. Construit par RocketTheme, Gantry est plutôt un conglomérat d'extensions personnalisées et de méthodologies de modèles adoptées à partir de types tels que Joomla, WordPress et GravCMS.

    

Gantry permet aux codeurs de créer de puissants thèmes et modèles frontaux. Il propose également de nombreux modèles et skins personnalisés, ainsi qu'une interface modifiable visuellement, afin de faciliter la vie des non-développeurs.

Il existe de nombreux autres candidats de valeur dans ce domaine, comme vous le verrez avec tous les logiciels en ligne. recherchez «constructeurs de thèmes WordPress» ou similaires.

Conclusion

Cet article est un bref aperçu des options permettant de modifier ou de créer votre propre thème WordPress. Nous avons commencé par la plus simple des options consistant à créer un thème enfant, qui ne contient que quelques fichiers modifiant les aspects d'un thème existant.

Nous avons ensuite approfondi la question en dupliquant et en modifiant un thème existant. C’est une façon amusante de creuser dans un thème WordPress, d’apprendre comment il fonctionne et de l’adapter exactement à vos besoins, sans avoir à réinventer la roue et à partir de zéro.

Une option plus ambitieuse consiste à coder un thème entier à partir de zéro. Nous en avons seulement parlé ici, mais nous écrirons bientôt une série d'articles pour montrer comment le faire en profondeur.

Pour accélérer la création d'un thème à partir de zéro, nous avons examiné des thèmes tels que: Les soulignements et les cadres de thèmes comme Genesis. Dans un sens, cela nous amène à la boucle, car certains d'entre eux offrent des outils de glisser-déposer / WYSIWYG qui ne nécessitent pas beaucoup de connaissances techniques et qui pourraient constituer l'option la plus conviviale si vous préférez ne pas vous plonger dans code.

Espérons que cette brève introduction vous donne une meilleure idée de la création d’un thème WordPress adapté à vos besoins.




Source link