Créez votre propre panneau d'options de thème WordPress avec Redux Framework

Le framework Redux est l’un des frameworks de panneaux d’options les plus populaires, avancés et libres d’utilisation pour les thèmes et les plugins WordPress. Sa flexibilité vous donne la liberté de créer tout type d’options et de paramètres pour votre projet WordPress..

Dans ce tutoriel, je vais vous montrer comment installer, personnaliser et utiliser le framework Redux dans votre propre thème..

Nous allons suivre les étapes suivantes:

Installation
Configuration générale
Création d'un panneau d'options
Utilisation des options dans un thème

Remarque: Je ferai simplement référence à Redux Framework comme Redux tout au long de ce tutoriel. Il ne faut pas confondre cela avec Redux, le «conteneur d'état prévisible pour les applications JavaScript».

1. Installation

Vous pouvez inclure Redux dans votre projet de trois manières:

Installez-le comme un plugin séparé
Incluez-le dans votre thème
Incluez-le dans un plugin dépendant du thème

Installez-le comme un plugin séparé

Par défaut, Redux peut être installé en tant que plugin. Si vous allez sur la page du plugin WordPress du cadre Redux, vous verrez que vous pouvez le télécharger en tant que plugin classique et l'installer dans votre site WordPress avec n'importe quel thème. Cela ne crée aucune option cependant; tout ce que vous pouvez faire est d'activer le mode démo avec des exemples d'options.

Pour obtenir un panneau d'options avec des options personnalisées pour votre thème ou plug-in, vous devez créer un fichier config.php distinct. En savoir plus sur comment cela fonctionne:

Par conséquent, les avantages et les inconvénients de cette approche sont les suivants:

Les inconvénients	Avantages
Installation séparée du plugin devant être stockée sous forme de fichier zip sur votre serveur ou dans le dossier du thème.	Vous réduisez la taille de votre thème lorsque le panneau d'options ne fait pas partie du thème de base..
Augmentation du sentiment que le thème / plugin dépend du développement et des outils tiers.	Vous évitez les nombreux avertissements et erreurs du plugin Theme Check.

Incluez-le dans votre thème

Rien ne vous empêche d'inclure Redux dans votre thème, sauf en cas de conflit avec le plugin Theme Check. La logique est la même qu'auparavant, vous avez toujours besoin d'un fichier config.php avec vos options personnalisées, mais maintenant vous évitez l'installation d'un plugin supplémentaire..

Les inconvénients	Avantages
Augmente la taille du paquet de thème.	Eviter l'installation de plugins supplémentaires.
Des conflits et problèmes potentiels peuvent survenir avec le plugin Theme Check.	Le panneau d'options de thème semble plus connecté à votre thème et plus intégré..
Chaque fois que le plugin est mis à jour, vous devez également mettre à jour votre thème..

Incluez-le dans un plugin dépendant du thème

À mon avis, cette approche est le meilleur moyen d’inclure le framework Redux. Le processus est aussi simple qu’une installation de plug-in normale, la seule différence étant qu’il fait maintenant partie du plug-in requis de votre propre thème..

Les thèmes Premium modernes comportent généralement des éléments personnalisés, des types de publication personnalisés, qui appartiennent tous à un plugin. Il est donc logique de créer un plug-in complémentaire lié à votre thème. Dans ce plug-in, vous pouvez inclure votre panneau d'options de thème. En savoir plus sur la création de plugins dépendants du thème dans ce tutoriel:

Les inconvénients	Avantages
N'a pas trouvé :)	Eviter l'installation de plugins supplémentaires.
	Le panneau d'options de thème se sent plus intégré à votre thème.

Le processus de configuration de Redux n’est pas affecté par la méthode d’installation. Il vous appartient donc de choisir comment vous souhaitez inclure Redux dans votre projet. Cela dit, je préfère toujours la dernière option, c'est donc l'approche que j'utiliserai pour décrire la configuration..

2. Configuration générale

Si vous examinez le dossier du plug-in Redux Framework par défaut, vous trouverez beaucoup de fichiers et de répertoires, mais tout ce dont vous avez besoin ici est le dossier ReduxCore..

Le dossier ReduxCore

Copiez tout le contenu de ce dossier dans votre dossier de plug-in complémentaire. Créez un dossier, appelez-le comme vous voulez, par exemple panneau d'options, et mettez le contenu ReduxCore dedans. Ensuite, créez un fichier vide dans ce dossier et appelez-le. config.php. Ensuite, nous aurons besoin d'exiger reduxframework, ce que nous ferons de manière non conflictuelle, donc si le plugin complémentaire est installé dans l'environnement WordPress, le site ne se plantera pas.

Dans le fichier principal de votre plug-in, ajoutez le code:

C'est tout! Votre structure Redux est maintenant intégrée, mais vous ne verrez pas encore de panneau d’options, car nous devons d’abord créer certaines options. Tout cela sera fait dans le fichier config.php que nous avons créé.

3. Créer un panneau d'options

Vous pouvez utiliser le fichier sample-config.php fourni avec le plug-in Redux comme référence et point de départ. Il contient tout le code nécessaire pour créer vos propres options personnalisées. Pour l'instant, soulignons le processus de configuration principal.

Ouvrez votre fichier config.php et ajoutez au début ce code (le code de début de fichier). tag ne sera pas nécessaire s'il est déjà présent):

 Cette vérification permet de s’assurer que le framework Redux est actif, sinon toutes les options que nous créons ne fonctionneront pas et risquent de générer des tonnes d’erreurs PHP..
 Avant de créer nos options, nous avons d’abord besoin d’une configuration supplémentaire. Créez une variable qui stockera toutes vos options et pourra être utilisée dans vos fichiers de thème:
$ opt_name = "votre_nom_variable";
 Rendez-le unique en utilisant des préfixes, par exemple: votrenom_votre_moi.
Après cela, ajoutez le code:
$ theme = wp_get_theme ();
Ceci est nécessaire pour configurer tous les arguments Redux qui utilisent des informations sur le thème installé.
Arguments
 A ce stade, nous devons ajouter les arguments suivants:
$ args = array ('opt_name' => $ opt_name, 'display_name' => $ theme-> get ('Nom'), 'display_version' => $ theme-> get ('Version'), 'menu_type' => 'submenu', 'allow_sub_menu' => vrai, 'menu_title' => esc_html __ ('Paramètres du thème', votre domaine texte '),' page_title '=> esc_html __ (' ThèmeSettings ', votre domaine textuel'), 'google_api_key' =>, ' google_update_weekly '=> false,' async_typography '=> true,' admin_bar '=> true,' admin_bar_icon '=> ",' admin_bar_priority '=> 50,' global_variable '=> $ opt_name,' dev_mode '=> false,' update_notice '=> false,' customizer '=> true,' page_priority '=> null,' page_parent '=>' themes.php ',' page_permissions '=>' manage_options ',' menu_icon '=> "," last_tab " => ", 'page_icon' => 'icon-themes', 'page_slug' => 'themeoptions', 'save_defaults' => true, 'default_show' => false, 'default_mark' =>", 'show_import_export' => vrai );
 Il y a beaucoup d'arguments ici, mais ne vous inquiétez pas, je vais souligner les plus importants..
 type de menu
 Si vous souhaitez que votre page d’option de thème apparaisse comme un élément de menu de niveau supérieur séparé, vous devez définir cette valeur sur menu, si vous souhaitez que vos options de thème apparaissent sous forme de sous-menu (je préfère les mettre sous Apparence) définissez la valeur sur sous-menu.
 dev_mode
 Vous pouvez l'activer pendant le développement, mais n'oubliez pas de le désactiver lorsque vous publiez le thème..
 update_notice
 Comme Redux fera partie de votre projet, vous ne souhaiterez pas que les utilisateurs reçoivent des notifications de mise à jour de Redux Framework. Réglez donc ceci à faux.
 personnaliseur
 Si vous souhaitez afficher vos paramètres personnalisés dans le cadre du personnaliseur WordPress, définissez cet argument sur vrai.
 Le tableau arguments contient beaucoup plus d'éléments, et si vous voulez des informations sur chacun, vous pouvez trouver des détails dans le fichier sample-config.php. Pour nos besoins, nous avons suffisamment personnalisé les arguments. Définissons maintenant les arguments.
Redux :: setArgs ($ opt_name, $ args);
 Ajout de sections
Maintenant que votre panneau de thème est prêt, vous pouvez ajouter des sections avec des options. Pensez aux sections en tant que groupes. Si vous souhaitez ajouter (par exemple) des options d'en-tête, créez une section d'en-tête et ajoutez-y des options. Pour créer une section, vous aurez besoin de la structure suivante:
Redux :: setSection ($ opt_name, array ('title' => esc_html __ ('Titre de la section', 'Votre domainedomain'), 'id' => Esc_html __ ('section-unique-id', 'Votre domaindomain'), 'icon' => 'nom-icône', 'champs' => tableau ()));
 Ici, je veux souligner le identifiant Attribut-assurez-vous qu'il est unique. Vous pouvez utiliser des icônes personnalisées, mais le pack d'icônes par défaut est elusiveicons.
 Votre section est créée, vous pouvez donc maintenant ajouter des options au tableau fields. Vous trouverez ici une liste des types d'options disponibles, ainsi que la structure du code avec explications et surlignages.. 
Si vous voulez faire de la section un sous-section de la section précédemment ajoutée, il suffit d'ajouter un nouvel argument 'subdivision' => true. 
L'option elle-même n'est rien d'autre qu'un tableau avec des arguments, par exemple:
array ('id' => 'opt-checkbox', 'type' => 'checkbox', 'title' => esc_html __ ('Checkbox', 'votre domaine de texte'), 'subtitle' => esc_html __ ('aucune validation ne peut être fait sur ce type de champ ',' votre_domaine_de_texte '),' desc '=> esc_html __ (' Ceci est le champ de description, toujours utile pour des informations supplémentaires. ',' votre_domaine_texte '),' default '=>' 1 '// 1 = on | 0 = off), 
 Avec ce code, nous avons ajouté une case à cocher à notre section. Les choses les plus importantes ici sont l'id (il devrait être unique), et le type (il devrait être correct, et suivre le nom exact du type de champ fourni par Redux). Encore une fois, vous trouverez plus de détails sur les champs dans le fichier sample-config.php.
 En règle générale, c’est tout ce que vous devez savoir pour créer un panneau d’options. Ensuite, nous verrons comment utiliser ces options..
 4. Utilisation des options dans un thème
 Redux stocke toutes les options dans une variable globale. Se souvenir du $ opt_name variable que nous avons créée dans le fichier config.php? C'est la variable qui stocke toutes vos options et vous pouvez y accéder de la manière suivante.
 Tout d'abord, vous devez déclarer la variable globale. Et cela présente le premier problème potentiel: il n'est pas recommandé de déclarer une variable globale en dehors d'une fonction ou d'une action. La solution consiste à ajouter à votre fichier functions.php cette petite fonction:
function yourprefix_theme_options_global_variable () global $ yourglobalvariable; 
Ensuite, dans chaque page où vous souhaitez utiliser vos options, exécutez d’abord la fonction comme ceci:
votreprefix_theme_options_global_variable ();
 Si vous avez besoin de la variable globale dans une autre fonction ou action, vous pouvez la déclarer sans cette fonction..
Utilisation des options
 Si vous utilisez des options sans vérifier au préalable que l'option existe, vous recevrez une notification PHP disant quelque chose à propos de variable / index non défini. Pourquoi est-ce important? Parce que si l'utilisateur active votre thème, mais n'active pas le plug-in du module complémentaire qui contient votre panneau d'options, il verra une collection d'avertissements PHP concernant des variables non définies. Pas idéal.
Il y a un bon modèle pour éviter cette situation-il ressemble à ceci:
$ your_option_name = (isset ($ GLOBALS ['yourglobalvariable'] [[youroption '])))? $ GLOBALS ['yourglobalvariable'] ['youroption']: “votre valeur par défaut pour thisoption”;
 Avec cette petite vérification, vous vous assurez que vous ne recevrez pas d’avis de variable / index non définis. Si vous ne souhaitez pas affecter de valeurs par défaut ou créer une variable, vous pouvez utiliser ce modèle à la place: 
If (isset ($ GLOBALS ['votrevariable_global']] ['votre_option']])) // faites ce que vous voulez…
Conclusion
Merci de votre lecture, j'espère que cela vous aidera à utiliser Redux pour vos options de thème! Si vous avez des questions ou des suggestions, veuillez laisser un commentaire ci-dessous.
Liens utiles
 reduxframework.com
  ReduxFramework sur Facebook
  @ReduxFramework sur Twitter
 



		
			
	   
	




Création de sites web