Débuter avec le framework Redux le présenter et l’intégrer dans votre thème

Ce que vous allez créer

Lorsque les propriétaires de site installent un nouveau thème WordPress, la première chose qu’ils souhaitent faire est d’ajuster son apparence en fonction de leur marque ou de leurs préférences personnelles. Et la plupart du temps, les personnes qui achètent, téléchargent ou installent des thèmes WordPress n’ont que peu, voire aucune expérience de la programmation..

Alors, comment pouvez-vous, en tant que développeur de thème, permettre aux utilisateurs finaux de votre thème d’avoir le plus de contrôle possible sur l’apparence de leur site sans avoir à apprendre à coder??

En créant des pages d'options / des panneaux, bien sûr!

Cependant, les pages d'options de thème ne sont pas faciles à créer, en particulier pour les développeurs qui n'ont pas beaucoup d'expérience avec WordPress ou la programmation en général. Heureusement, il y a des cadres d'options.

Que sont les cadres d'options??

Les infrastructures d'options sont des bibliothèques de code, des plugins ou des classes qui fournissent une base solide sur laquelle les développeurs peuvent s'appuyer facilement et rapidement pour créer et ajouter des pages d'options à leurs thèmes. Cela permet aux non-développeurs d'utiliser ces panneaux pour personnaliser rapidement l'aspect de leur site, sans toucher au code..

Les panneaux d'options peuvent être utilisés pour:

télécharger un logo
changer la couleur d'arrière-plan ou toute propriété CSS d'un élément (comme l'en-tête ou le pied de page de votre thème)
sélectionner une peau ou une mise en page prédéfinie
ajouter des CSS ou JavaScript personnalisés
et plus

Fondamentalement, les panneaux d'options peuvent placer le pouvoir entre les mains des utilisateurs de vos thèmes en leur permettant de modifier presque tous les aspects de la conception de leur site..

Dans cette série, nous allons examiner un cadre d’options très populaire et largement utilisé: le cadre Redux..

Cette série sera divisée en les parties suivantes:

Partie 1: Présentation du framework Redux et son intégration dans votre thème
Partie 2: Ajout de sections et de champs et utilisation des paramètres de configuration
Partie 3: Utiliser les options de votre thème (et des widgets)
Partie 4: Alternatives à Redux
Partie 5: Conclusion

Qu'est-ce que le cadre d'options Redux??

Redux Framework est un framework d’options né de la combinaison de quatre frameworks, à savoir:

NPH, créée par Lee Mason dans le but de créer un cadre compatible avec les exigences de soumission de ThemeForest.
SMOF
SimpleOptions, qui est une fusion des frameworks ci-dessus, créée par Dovy Paukstys
Une version antérieure de Redux (Redux 2.0),créé par Daniel Griffiths et basé sur NPH

L'équipe principale de Redux est composée de ces trois développeurs. Le projet est en cours de développement et des mises à jour sont publiées assez régulièrement..

Redux Caractéristiques

Utilise l'API de paramètres WordPress
Types de champs multiples
Classes de validation intégrées
Extensible
Fonctionnalité d'importation / exportation vous permettant de transférer les paramètres sur plusieurs sites

Pourquoi Redux?

Libre: Redux est gratuit et 100% open source. Vous pouvez l'utiliser dans des projets personnels et commerciaux sans payer un centime.
Conforme à ThemeForest: Redux répond aux exigences de soumission d'Envato, ce qui en fait une bonne option pour les développeurs de thèmes souhaitant développer des thèmes ou des plug-ins destinés à être vendus sur les marchés d'Envato..
Populaire: Redux est utilisé par plus de 250 articles (connus) sur les marchés d’Envato qui se sont vendus à plus de 6 millions de dollars. Cette popularité fait allusion à la puissance de ce cadre.
Facile à utiliser: Si vous comprenez le fonctionnement des tableaux, vous pouvez utiliser Redux. Démarrer avec Redux est aussi simple que créer un objet de configuration constitué de tableaux imbriqués.
Flexible: Si cela ne répond pas à vos besoins, Redux peut être étendu pour créer des champs personnalisés et gérer la validation / les erreurs.
Bien documenté: Redux est bien documenté. Le site Web Redux possède une base de connaissances, un codex (documentation pour les développeurs) et des didacticiels vidéo..
Communauté forte: Une communauté forte s'est développée autour de Redux. Si vous rencontrez un problème et souhaitez obtenir de l'aide, vous trouverez probablement quelqu'un qui a déjà rencontré le même problème. Et si c'est une fonctionnalité dont vous avez besoin, plus de 50 contributeurs seront disposés à l'écouter (et peut-être l'ajouter dans la prochaine version).

Installer Redux

Il y a plusieurs façons d'installer Redux. Mais pour les besoins de ce tutoriel, nous allons l’installer à partir de WordPress.org.

Installez le plugin comme n'importe quel plugin:

Aller à Plugins> Ajouter un nouveau.
Dans la zone de recherche, entrez Redux Framework puis cliquez sur Plugins de recherche.
Dans la page de résultats, cliquez sur Installer maintenant sur la première entrée.
Après l'avoir installé, continuez pour l'activer comme n'importe quel autre plugin.

Activer le mode démo

Pour activer le mode démo, allez à Plugins> Plugins installés et faites défiler jusqu'à Redux Framework. Vous verrez quelque chose comme ça:

Cliquez sur Activer le mode démo.

Cela activera le mode démo et créera un exemple de panneau d'options appelé Options d'échantillon dans le tableau de bord WordPress.

Le mode démo et la page Sample Options vous permettront de jouer avec Redux et d’explorer les différents types de champs qu’il vous permet de créer..

L'intégrer dans votre thème

Jusqu'ici, nous avons installé Redux et activé le mode Démo pour nous permettre d'explorer les différents champs que Redux nous permet de créer..

Pour intégrer Redux dans notre thème, nous devons l’initialiser avec un nouveau fichier de configuration. Suivez ces étapes pour initialiser une nouvelle instance de Redux:

Accédez au redux-framework répertoire dans votre répertoire WordPress Plugins (wp-content / plugins /) et copier le échantillonrépertoire de votre thème.

Ouvrez votre functions.php file et ajoutez la ligne de code suivante:

Lorsque vous actualisez votre tableau de bord WordPress et survolez Options d'échantillon, vous remarquerez que rien n'a changé - vous avez toujours les mêmes sous-menus qu'auparavant. En effet, notre configuration est exactement la même que précédemment. Nous avons simplement déplacé le fichier de configuration du répertoire du plugin Redux vers le répertoire de notre thème.

De plus, le message d'erreur suivant peut s'afficher:

Cela est dû au fait que nous chargeons deux fichiers de configuration identiques. Vous pouvez résoudre ce problème en allant dans le panneau Plugins et en désactivant le mode Démo..

Ce que nous voulons faire est de commencer avec un fichier de configuration vide. Redux est livré avec un pour votre commodité. Alors relions-le à la place.

Pour ce faire, modifiez la ligne que vous venez d'ajouter à votre functions.php de:

À:

Si vous revenez à votre tableau de bord, vous vous rendrez compte que notre Options d'échantillon le panneau contient une section-Paramètres d'accueil-et un champ, un champ de téléchargement de média bien nommé Web Fonts.

Nous avons maintenant une classe de configuration barebone à laquelle nous pouvons ajouter des sections et des champs..

Conclusion

Dans cette première partie de la série, nous avons examiné le cadre Redux, en quoi consiste et pourquoi il vaut la peine de l’utiliser dans vos projets. Nous avons ensuite installé une nouvelle installation de Redux et examiné les différentes fonctionnalités qu’elle nous offre en tant que développeurs de thèmes..

Nous avons également créé nos propres fichiers de configuration barebone pour montrer comment nous pouvons commencer à adapter Redux à nos besoins spécifiques..

Dans le prochain tutoriel de la série, nous allons apprendre à ajouter d'autres sections et à ajouter des champs à ces sections..

Code