Share
Ce que vous allez créerCet article vous aide, en tant que développeur, à commencer à utiliser Redux Framework de la manière la plus élémentaire: ajouter des champs. Auparavant, travailler avec Redux nécessitait une certaine compréhension des classes PHP et de leur fonctionnement. Avec Redux 3.5+, la courbe d’apprentissage a pratiquement disparu.
Je suis l’un des créateurs de Redux Framework et, dans ce didacticiel, je traiterai de la structure interne de Redux, du fonctionnement des champs et des sections, ainsi que des arguments de configuration globale..
Redux est livré avec un fichier sample-config.php contenant plusieurs exemples de configuration de Redux, ainsi que des exemples pour presque tous les domaines que nous proposons. Pour une compréhension plus approfondie, consultez l’échantillon de configuration ou consultez la documentation Redux..
Pour pouvoir utiliser Redux Framework, il doit être chargé. Il y a deux façons de rendre cela possible.
Premièrement, Redux peut facilement être installé en tant que plugin et activé. Le plugin est disponible gratuitement sur WordPress.org. L'installation se fait ensuite via l'interface du programme d'installation du plugin.
La deuxième façon d'installer Redux Framework consiste à l'intégrer à votre thème ou à votre plugin. L'intégration est assez facile à faire. Copiez simplement le dossier ReduxCore sur votre thème ou sur votre plug-in (en renommant le répertoire de votre choix) et incluez le fichier framework.php qui se trouve dans celui-ci, via les fonctions d'inclusion PHP standard..
Si ces instructions d'intégration sont trop difficiles, Redux propose également Redux Builder qui vous permet de générer un thème entièrement fonctionnel avec Redux déjà chargé. Le meilleur de tous, le service de constructeur est totalement gratuit.
Maintenant que Redux Framework est chargé, nous pouvons commencer à l'utiliser.
Afin de comprendre le fonctionnement de Redux Framework, il faut d’abord comprendre ce qu’est une instance Redux. Redux peut être exécuté à la fois par un thème et par un nombre illimité de plug-ins, le tout à partir d'une seule installation WordPress. Chaque instance a son propre ensemble unique de caractéristiques et d'arguments; chacun peut se comporter très différemment des autres instances Redux.
La raison pour laquelle Redux fonctionne de cette manière est simplement pour assurer le plus haut niveau de flexibilité. Beaucoup trop de cadres d'options ne permettaient l'exécution que d'une seule instance de leur cadre. Nous voulions que les développeurs de plugins et de thèmes travaillent avec Redux sans être gênés par le code des autres.
Comment fait-on pour que les instances soient séparées? Tout se fait à travers une clé unique appelée nom_opt. C’est là que vos données sont stockées dans WordPress et compte également comme clé unique dans le cadre Redux. Il est important de comprendre qu'avant de commencer à travailler avec Redux Framework, vous devez choisir un logiciel unique. nom_opt. Une fois que cette détermination est faite, il est temps de creuser dans les arguments globaux.
Le panneau d'options de la structure Redux est construit à l'aide de tableaux PHP. Les arguments globaux ci-dessous s'appliquent uniquement à notre exemple d'instance de Redux Framework. Une liste complète des arguments globaux est disponible sur le site web de Redux. Pour les besoins de ce tutoriel, nous allons travailler avec un tableau d’arguments très basique et vous montrer comment le configurer..
Accentsconagua
Redux :: setArgs ('tuts_plus_tutorial', // Ceci est votre opt_name, array (// Ceci est votre argument array 'display_name' => 'Tuts + Tutorial', 'display_version' => 'Partie 2', 'menu_title' => 'Tuts + Menu Item', 'admin_bar' => 'true', 'page_slug' => 'tuts_plus_page_slug', // Doit être un mot, pas de caractères spéciaux ni d'espaces 'menu_type' => 'menu', // Menu ou sous-menu 'allow_sub_menu' => true,));Une fois ce code exécuté, Redux Framework produira un panneau entièrement fonctionnel. L'image ci-dessous explique comment chaque argument affecte ce panneau.
Maintenant que notre panneau est actif, ajoutons quelques sections et champs. Redux utilise des tableaux imbriqués pour les champs et les arguments, même si avec Redux 3.5+, ces procédures sont facilement séparées. Commençons par créer une section à laquelle nous pouvons ajouter des champs. Pour plus de documentation sur les sections, consultez la documentation des sections.
Redux :: setSection ('tuts_plus_tutorial', // Ceci est votre opt_name, array (// Ceci est votre argument array 'id' => 'section_example_1', // Identifiant unique de votre panneau. Doit être défini et ne pas contenir d'espaces. ou des caractères spéciaux 'titre' => 'Exemple de section', 'desc' => 'Il s’agit d’un texte descriptif.', 'entête' => 'Ce paramètre remplace l’argument title', 'icon' => 'el el- heart ', // http://elusiveicons.com/icons/ //' subdivision '=> true, // Activer ceci en tant que sous-section d'une section précédente));
L’équipe derrière Redux Framework gère également Elusive Icons. En tant que tel, le jeu d’icônes Elusive est directement intégré au cœur de Redux. Ajouter des icônes est aussi simple que de spécifier une classe, comme dans l'exemple. Si vous souhaitez avoir un autre pack d'icônes, tel que FontAwesome, il existe également une documentation pour ces procédures..
Les sections peuvent également être converties en sous-sections pour une organisation plus facile de votre panneau. Ci-dessous, un exemple, avec l'exemple de source.
La définition des champs n’est pas différente de la définition des sections ou des arguments; tout commence par un tableau. Avant d'aller trop loin, nous devons souligner que Redux a plus de 30 types de champs différents, chacun avec son propre jeu d'arguments et une myriade d'options. Pour voir les différents types, il est de nouveau suggéré de lire notre documentation, dans la documentation de Redux sur les champs.
Les champs peuvent être ajoutés aux sections de deux manières. Tout d’abord, ajoutez les tableaux de champs à la setSections fonction décrite ci-dessus. Dans les exemples ci-dessus, vous pouvez facilement ajouter un argument «fields» et ajouter un nombre quelconque de champs à cette section..
La deuxième méthode nécessite un appel supplémentaire à la fonction API Redux, mais elle est tout aussi simple..
Redux :: setField ('tuts_plus_tutorial', // Ceci est votre opt_name, array (// Ceci est votre argument array 'id' => 'section_example_1', // Identifiant unique de votre panneau. Doit être défini et ne pas contenir d'espaces ou caractères spéciaux 'type' => 'Texte', 'section_id' => 'section_exemple_1', 'titre' => 'Exemple de champ', 'subtitle' => 'Champ sous-titre', 'desc' => 'Ceci est pour texte descriptif.', ) );Regardons ce que cela fait à notre exemple de panneau.
Prenez le temps d'examiner de manière approfondie les différents types de champs. Redux Framework contient des champs très puissants. Par exemple, le champ de typographie met automatiquement les polices Google sélectionnées dans votre page. Le champ d'arrière-plan - si l'argument de sortie doit être défini sur votre sélecteur CSS - générera automatiquement le CSS requis et l'ajoutera à votre site. En termes simples, Redux Framework fait vraiment beaucoup de travail pour vous!
Le moyen le plus simple de commencer consiste à consulter le site de démonstration Redux. Il montre tous les différents types de champs offerts par Redux avec un grand nombre de leurs configurations..
Ce qui est vraiment utile, c'est que la configuration du site de démonstration est livrée avec Redux. Dans ~ / sample / sample-config.php se trouve tout ce que vous voyez sur le site de démonstration.
Si vous êtes toujours perdu, une communauté dynamique derrière Redux vous aidera, même si vous trouverez la plupart de vos besoins sur le site de documentation de Redux..
L'exemple complet de configuration présenté dans ce tutoriel est joint au téléchargement depuis la barre latérale droite. Ceci n'est qu'un exemple. La configuration d'échantillons Redux intégrée contient de nombreux exemples plus complets..
Dans cette deuxième partie de la série, nous avons examiné de plus près le fonctionnement de Redux et la façon de commencer. Nous avons également examiné différentes manières d’ajouter des sections et des champs à une instance de Redux..
Nous avons également examiné les sections et la manière dont elles pourraient être affichées différemment, en fonction des arguments et de la manière dont les champs sont liés aux sections, et comment elles peuvent être facilement personnalisées pour répondre à vos besoins..
Dans le prochain tutoriel de la série, nous allons examiner les prochaines étapes d'utilisation de Redux dans vos thèmes et plugins. Nous expliquerons comment utiliser le CSS dynamique et la sortie de police de Redux. Nous parlerons également d'autres fonctionnalités avancées proposées par Redux..
