Share
Dans le dernier article, nous avons défini une méthodologie simple pour tout ce qui est nécessaire pour établir une nouvelle section, des paramètres et des contrôles dans le personnaliseur de thèmes..
Dans cet article, nous allons continuer à faire plus de la même chose; Cependant, nous allons ajouter de nouveaux paramètres et contrôles à la section existante, mais nous allons examiner diverses options telles que les boutons radio, les zones de sélection et les zones de saisie..
Donc, avec cela dit, continuons.
Rappelez-vous du dernier article, que notre méthodologie est la suivante:
Accentsconagua
get_theme_mod Nous allons procéder de la sorte pour chacune des nouvelles commandes des paramètres et commandes suivants. Au besoin, nous parlerons de la validation et de la désinfection des données..
Une fois que nous aurons atteint la fin de l'article, une version du code de cet article sera également disponible au téléchargement sur GitHub..
Ajoutons une nouvelle option au personnalisateur de thème qui permet à l'utilisateur de choisir entre des jeux de couleurs - l'un est le jeu de couleurs noir sur blanc par défaut, l'autre est l'inverse..
Pour ce faire, nous devons d’abord ajouter un paramètre et un contrôle à notre tcx_register_theme_customizer une fonction. Ajoutez les deux appels de fonction suivants ci-dessous:
$ wp_customize-> add_setting ('tcx_color_scheme', array ('default' => 'normal', 'transport' => 'postMessage')); $ wp_customize-> add_control ('tcx_color_scheme', array ('section' => 'tcx_display_options', 'label' => 'Schéma de couleurs', 'type' => 'radio', 'choices' => array ('normal' => 'Normal', 'inverse' => 'Inverse'))); Notez ci-dessus que nous ajoutons un nouveau paramètre identifié par le tcx_color_scheme ID et nous utilisons évidemment le postMessage type de transport.
Deuxièmement, notez que nous avons également fourni un défaut valeur qui est définie sur Ordinaire. Cette valeur est ce qui nous amène à la add_control appel.
Notez que nous le lions à la tcx_display_options que nous avons défini dans le dernier article. Nous lui avons donné l'étiquette Schéma de couleur puisque c’est évidemment ce que nous changeons et que nous fixons la type de contrôle en tant que radio bouton.
Pour ce faire, nous devons passer un tableau de choix où la première clé est la valeur de l'option et la deuxième valeur est l'étiquette du bouton radio..
Ce C’est pourquoi la valeur par défaut pour add_setting L'appel est réglé sur Ordinaire.
Maintenant, nous devrions pouvoir sauvegarder notre travail, actualiser le personnalisateur de thème, puis voir la nouvelle option..
Mais à ce stade, il ne fera toujours pas beaucoup.
Maintenant, nous devons sauter dans js / theme-customizer.js et ajoutez le bloc de code suivant:
wp.customize ('tcx_color_scheme', fonction (valeur) valeur.bind (fonction (to) if ('inverse' === to) $ ('body') .css (background: '# 000', color: '#fff'); else $ ('body') .css (background: '#fff', color: '# 000');)); Ceci charge le personnalisateur de thème de changer le corpsLa couleur de fond et la couleur de la police sont basées sur le réglage des boutons radio.
En implémentant ce code, vous devriez pouvoir actualiser le personnalisateur de thème, puis voir les changements se produire. Le fait est que les valeurs ne sont pas enregistrées dans la base de données.
get_theme_mod La dernière chose que nous devons implémenter afin de nous assurer que les données sont lues à partir de la base de données pour changer le jeu de couleurs est d’ajouter un style à la style bloquer dans le tcx_customizer_css une fonction:
arrière-plan: # 000; couleur: #fff; background: #fff; couleur: # 000;
Assez facile à comprendre, non? Il fonctionne exactement de la même manière que notre code JavaScript, à la différence qu’il s’applique réellement au thème lors du chargement de la page plutôt qu’à sa prévisualisation..
Nous allons maintenant poursuivre le processus en introduisant un autre paramètre et un autre contrôle en utilisant notre méthodologie, de sorte que nos utilisateurs pourront sélectionner une police globale pour leur thème..
Pour ce faire, nous allons utiliser un sélectionner élément avec un ensemble d'options à partir duquel l'utilisateur peut choisir l'avant souhaité.
À ce stade, la méthodologie devrait devenir très familière.
Tout d'abord, nous allons définir un paramètre pour le tcx_font que nous utiliserons pour faire référence au code un peu plus tard:
$ wp_customize-> add_setting ('tcx_font', array ('default' => 'times', 'transport' => 'postMessage')); Tout comme avec le réglage précédent, nous sommes fournis défaut valeur que nous allons définir momentanément lorsque nous mettons en œuvre un nouveau contrôle.
Comme mentionné précédemment, nous allons donner aux utilisateurs la possibilité de sélectionner une police à l'aide d'un sélectionner élément. Ceci est très similaire au fonctionnement des boutons radio dans la mesure où nous fournissons un tableau avec des clés et des valeurs qui définissent la police; cependant, le réel type de l'élément sera différent.
Donc, avec cela dit, ajoutez le code suivant à la tcx_register_theme_customizer une fonction:
$ wp_customize-> add_control ('tcx_font', array ('section' => 'tcx_display_options', 'label' => 'Police du thème', 'type' => 'select', 'choices' => array ('times' => 'Times New Roman', 'arial' => 'Arial', 'courier' => 'Courier New'))); Cela introduira un sélectionner élément dans le personnaliseur de thème avec les trois options suivantes pour les polices:
Et maintenant, nous devons écrire les options de police afin qu'elles changent dynamiquement la police du thème.
Pour ce faire, ouvrez js / theme-customizer.js puis ajoutez le bloc de code suivant. Notez que cela va être un peu plus compliqué que ce que nous avons l'habitude de faire dans JavaScript Theme Customizer.
Tout d'abord, assurez-vous que vous avez var sFont défini en haut du fichier JavaScript juste au-dessus du premier appel à wp.customize.
Ensuite, ajoutez le bloc de code suivant:
wp.customize ('tcx_font', fonction (valeur) valeur.bind (fonction (to) commutateur (to.toString (). toLowerCase ()) case 'fois': sFont = 'Times New Roman'; break; case 'arial': sFont = 'Arial'; break; cas 'courrier': sFont = 'Courrier New, Courier'; break; cas 'helvetica': sFont = 'Helvetica'; break; défaut: sFont = 'Times New Roman '; break; $ (' body ') .css (fontFamily: sFont););); Bien que la fonction soit un peu plus longue, c’est en fait assez simple: nous prenons la valeur entrante puis nous utilisons un commutateur / boîtier pour déterminer quelle police a été sélectionnée. En fonction de la valeur sélectionnée, nous l'attribuons à la police variable.
Et, à des fins de codage défensif, si l’un n’est pas défini ou si quelque chose ne va pas pendant le transport, nous allons passer par défaut à Times New Roman.
Enfin, appliquez ensuite la valeur de police au famille de polices attribut du corps élément utilisant jQuery css une fonction.
get_theme_mod Maintenant, conformément à notre méthodologie, nous devons mettre à jour notre tcx_customizer_css fonction pour que la police soit correctement appliquée au corps.
Ceci est en fait un simple appel:
famille de polices:
Terminé.
Enfin, permettons à l’utilisateur d’ajuster le message de copyright qui apparaît au bas du modèle de pied de page..
Réglons le modèle maintenant. Actuellement, cela devrait ressembler à ceci:
© Tous les droits sont réservés
Mais mettons-le à jour pour qu'il ressemble à ceci:
©
Bien que cela devienne un peu Avant notre méthodologie, il est nécessaire pour nous de définir afin que le thème Customizer puisse tirer parti de la nouvelle envergure élément, et afin que nous puissions afficher le message de copyright tel que défini par l'utilisateur.
Tout d'abord, nous allons présenter notre réglage final:
$ wp_customize-> add_setting ('tcx_footer_copyright_text', array ('default' => 'Tous droits réservés', 'sanitize_callback' => 'tcx_sanitize_copyright', 'transport' => 'postMessage')); Mais remarquez ici qu'il y a une chose qui est différente des entrées précédentes, c'est la clé et la valeur "sanitize_callback". Cela définit une fonction à déclencher lorsque les données sont sérialisées dans la base de données - après tout, nous n'entendons pas de contenu illégal entrant dans la base de données..
Alors, faisons pour cela, nous allons définir une fonction appelée tcx_sanitize_copyright cela supprimera toutes les balises, barres obliques et autres balises illégales qui devraient être sérialisées dans la base de données:
fonction tcx_sanitize_copyright ($ input) return strip_tags (stripslashes ($ input));
Nous renvoyons simplement la valeur de l'entrée assainie.
Ensuite, il est temps d'ajouter le contrôle réel pour le réglage.
$ wp_customize-> add_control ('tcx_footer_copyright_text', array ('section' => 'tcx_display_options', 'label' => 'Message de copyright', 'type' => 'text')); Ici encore, nous le lions au tcx_display_options section et nous lui attribuons le libellé "Message de copyright" pour que les utilisateurs puissent être consultés. Enfin, nous avons défini cela comme un texte contribution.
Bien sûr, pour le moment, vous savez que nous ne pouvons rien faire avec le contrôle tant que nous ne l'avons pas câblé avec JavaScript..
Le JavaScript pour cela est très facile, surtout si vous avez donné la envergure élément un identifiant unique comme nous l'avons fait ci-dessus.
wp.customize ('tcx_footer_copyright_text', fonction (valeur) valeur.bind (fonction (to) $ ('# copyright-message') .text (to);); Essentiellement, il prend la valeur de la à argument et le définit comme la valeur de la envergurele texte de.
get_theme_mod Et enfin, bien que nous l'ayons déjà fait dans le modèle, nous allons passer en revue le code ici:
©
Notez que nous lisons la valeur de tcx_footer_copyright_text et puis nous imprimons cette valeur à l'écran.
Et pour l'instant, c'est tout! Nous avons examiné certaines des commandes de base, afin de donner à l'utilisateur un contrôle important sur l'aspect et la convivialité de ce thème, bien que très élémentaire, et avons expliqué comment introduire la désinfection des données en même temps que le processus de sérialisation..
Il ne reste plus qu'à couvrir quelques-uns des contrôles intégrés les plus avancés proposés par WordPress. Ainsi, dans le prochain article, nous examinerons certaines de ces fonctionnalités et la manière de les implémenter, ainsi que.
!
