Share
En tant que développeurs, nous avons l'habitude de regarder des lignes et des lignes de code dans une police à espace unique et, en même temps, de "voir" à quoi ressemblerait la page dans un navigateur. Cela dit, il est facile pour nous d’oublier le fait qu’il ya beaucoup de non-développeurs..
Le style de l'éditeur est une fonctionnalité astucieuse qui vous permet d'adapter l'apparence du contenu des publications dans l'éditeur de TinyMCE à ce qui est montré aux visiteurs du site. Il est extrêmement facile à utiliser, mais si votre thème comporte des options de police, et en particulier s'il utilise Google Fonts, le style de l'éditeur nécessite un peu plus de travail pour styler un texte en fonction des valeurs des options de police..
En plus du chargement editor-style.css en utilisant le add_editor_style () fonction, nous devons faire les choses suivantes:
Avant de faire quoi que ce soit, vous devez déjà disposer d'un moyen permettant à l'administrateur du site de sélectionner les polices qu'ils souhaitent utiliser. Vous pouvez utiliser l'API des paramètres ou, si vous êtes l'un des enfants les plus cools du monde, le thème Customizer, mais expliquer comment travailler avec l'un ou l'autre n'est pas le propos de ce tutoriel..
Afin de relancer ce projet, je vais utiliser le thème Underscores et le thème Theme Customizer Boilerplate. Cela me donnera un thème de départ et un moyen d’ajouter rapidement des options au thème Customizer, mais la façon dont vous gérez cette partie dépend de vous..
J'ai donc téléchargé une nouvelle copie du thème Underscores et y ai ajouté le thème Boilerplate de personnalisation du thème. Je suis maintenant prêt à ajouter des options au thème Customizer, à l'aide du plateau de personnalisation Customizer. Cela va directement dans le thème functions.php fichier:
Accentsconagua
/ ** * Tableau d'options pour Theme Customizer Boilerplate * * @link https://github.com/slobodan/WordPress-Theme-Customizer-Boilerplate * @return array Options de thème * / add_filter ('thsp_cbp_options_array', 'thsp_them_options_array', 1 ) function thsp_theme_options_array () // Utilisation de la fonction d'assistance Customizer Boilerplate pour obtenir la capacité requise par défaut $ thsp_cbp_capability = thsp_cbp_capability (); $ options = array (// Section ID 'thsp_typography_section' => array ('existing_section' => false, 'args' => array ('title' => __ ('Typographie', 'cazuela'), 'description' = > __ ('Select fonts', 'cazuela'), 'priority' => 20), 'fields' => array ('body_font' => array ('setting_args' => array ('default' => 'open- sans ',' type '=>' option ',' capacite '=> $ thsp_cbp_capability,' transport '=>' rafraîchir ',), // Fin de la définition des arguments' control_args '=> array (' label '=> __ ( 'Corps du corps', 'cazuela'), 'type' => 'select', // Select control 'choices' => array ('arial' => array ('label' => 'Arial'), 'open- sans '=> array (' label '=>' Open Sans ',' google_font '=>' Open + Sans: 400italic, 700italic, 400,700 '),' pt-sans '=> array (' label '=>' PT Sans ',' google_font '=>' PT + Sans: 400,700,400italic, 700italic ')),' priority '=> 1) // Arguments de contrôle de fin),' heading_font '=> array (' setting_args '=> array (' default '=>' open-sans ',' type '=>' option ',' possibilité '=> $ thsp_cbp_capability,' transport '=>' refresh ',), // End setting args 'control_args' => array ('label' => __ ('Police de titre', 'cazuela'), 'type' => 'select', // Select control 'choices' => array (' georgia '=> array (' label '=>' Georgia '),' open-sans '=> array (' label '=>' Open Sans ',' google_font '=>' Open + Sans: 400italic, 700italic, 400,700 '),' droid-serif '=> array (' label '=>' Droid Serif ',' google_font '=>' Droid + Serif: 700 ')),' priority '=> 2) // Fin des arguments de contrôle) ,) // Fin des champs)); retourne $ options; Comme vous pouvez le constater en regardant ce tableau, j'ajoute une option de police de corps et une option de police de titre au thème Customizer, avec trois choix possibles pour chacun d'entre eux - Arial, Open Sans et PT Sans pour la police de corps, Georgia, Open. Sans et Droid Serif pour la police de titre.
Pour Google Fonts, il y a le google_font valeur que j'utiliserai plus tard pour charger les feuilles de style de Google Fonts.
Si nous voulons pouvoir modifier les polices dans l'éditeur TinyMCE de manière dynamique, en fonction de ce que les utilisateurs sélectionnent dans le personnalisateur de thème, nous devons transmettre certaines informations à l'objet TinyMCE..
Par exemple, si Open Sans est sélectionné comme police de corps, ajoutez un 'corps-ouvert-sans'classe à l'éditeur fera l'affaire. Cela peut être fait en utilisant le tiny_mce_before_init crochet de filtre et changer le body_class valeur dans le tableau de paramètres TinyMCE.
Vérifier les commentaires en ligne:
/ ** * Transmet des classes de typographie personnalisées à Tiny MCE editor * * @param $ thsp_mceInit array * @uses thsp_cbp_get_options_values (), fonction d'assistance définie dans /customizer-boilerplate/helpers.php * @return $ thsp_mceInit array * / function thsp_tender ) // Utilisez la fonction d’assistance Boilerplate du thème Customizer pour récupérer les options du thème $ thsp_theme_options = thsp_cbp_get_options_values (); / ** * Le tableau $ thsp_mceInit stocke ses classes de corps sous la forme d'une chaîne * * Le caractère d'espacement est utilisé comme séparateur entre les classes, * lors de l'ajout de classes, un espace doit être précédé * / $ thsp_mceInit ['body_class']. = 'body - ' $ thsp_theme_options ['body_font']; // Classe de corps de corps $ thsp_mceInit ['body_class']. = = Heading- '. $ thsp_theme_options ['heading_font']; // En-tête de la classe de polices return $ thsp_mceInit; add_filter ('tiny_mce_before_init', 'thsp_tiny_mce_classes'); Cela ajoutera des classes personnalisées à l'éditeur TinyMCE, comme vous pouvez le voir sur cette capture d'écran:
Classes personnalisées (body-open-sans et heading-droid-serif) dans l'éditeur WordPress TinyMCE Si vous souhaitez voir l'ensemble du tableau de paramètres TinyMCE, consultez ce Gist.
Encore une fois, j'utilise le thème Boilerplate du Customizer pour le thème et certaines de ses fonctions pour accélérer les choses. La façon dont vous gérez vos options de thème dépend de vous..
Certaines des polices du tableau d’options que j’ai passées au thème Customizer Boilerplate avaient la google_font valeur définie. Cela permet de déterminer si la feuille de style Google Fonts doit être chargée et quelle est son URL. En utilisant ces informations, vous pouvez maintenant vous connecter au mce_css filtrer et ajouter des feuilles de style personnalisées à la fenêtre de l'éditeur TinyMCE:
$ mce_css est une liste d'URI de feuille de style, séparés par des virgules. Par conséquent, si la feuille de style de polices Google que vous chargez contient une virgule, vous devez utiliser une entité HTML à la place. Depuis que j'ai ajouté une option pour les polices corps et titre, je devrai vérifier si elles ont besoin de la feuille de style Google Fonts:
/ ** * Chargement des polices Google à utiliser dans Tiny MCE * * @param $ mce_css chaîne * @uses thsp_cbp_get_options_values () défini dans /customizer-boilerplate/helpers.php * @uses thsp_cbp_get_fields () défini dans / customizer-boilerplate / helpers. php * @return $ mce_css string * / function thsp_mce_css ($ mce_css) $ theme_options = thsp_cbp_get_options_values (); $ theme_options_fields = thsp_cbp_get_fields (); // Utilisation du thème Customizer Boilerplate pour récupérer les valeurs des options de police du thème $ body_font_value = $ theme_options ['body_font']; $ heading_font_value = $ theme_options ['heading_font']; // Utilisation du thème Customizer Boilerplate pour récupérer toutes les options du thème $ body_font_options = $ theme_options_fields ['thsp_typography_section'] ['fields'] ['body_font'] ['control_args'] ['choices']; $ heading_font_options = $ theme_options_fields ['thsp_typography_section'] ['fields'] ['heading_font'] ['control_args'] ['choices']; // Vérifier le protocole $ protocol = is_ssl ()? 'https': 'http'; // Vérifie s'il s'agit d'une police Google si (isset ($ body_font_options [$ body_font_value] ['google_font'])) ) Les virgules doivent être codées en HTML $ body_font_string = str_replace (',', ',', ',', $ body_font_options [$ body_font_value] ['google_font']); $ mce_css. = ','. protocole $. ': //fonts.googleapis.com/css? family ='. $ body_font_string; // Vérifiez si c'est une police Google si (isset ($ heading_font_options [$ heading_font_value] ['google_font'])) // Les virgules doivent être codées en HTML $ $ heading_font_string = str_replace (',', ',', ', $, entête_font_options [ $ heading_font_value] ['google_font']); $ mce_css. = ','. protocole $. ': //fonts.googleapis.com/css? family ='. $ heading_font_string; return $ mce_css; add_filter ('mce_css', 'thsp_mce_css'); Après les deux dernières étapes, c’est la partie facile. L'éditeur TinyMCE propose désormais des classes personnalisées basées sur des options de police actives. Les feuilles de style Google Fonts sont chargées, le cas échéant. Il ne reste plus qu'à ajouter famille de polices styles à editor-style.css:
/ * Corps de polices * / .body-arial font-family: Arial, sans-serif; .body-open-sans font-family: "Open Sans", sans-serif; .body-pt-sans font-family: "PT Sans", sans-serif; / * Rubriques * / .heading-georgia h1, .heading-georgia h2, .heading-georgia h3, .heading-georgia h4, .heading-georgia h5, .heading-georgia h6 font-family: Georgia, serif; .heading-open-sans-h1, .heading-open-sans-h2, .heading-open-sans-h3, .heading-open-sans-h4, .heading-open-sans-h5, .heading-open-sans-h6 font -famille: "Open Sans", sans-serif; .heading-droid-serif h1, .heading-droid-serif h2, .heading-droid-serif h3, .heading-droid-serif h4, .heading-droid-serif h5, .heading-droid-serif h6 -famille: "Droid Serif", serif;
À présent, cette méthode n’aura peut-être pas beaucoup de sens si votre thème permet aux utilisateurs de choisir parmi plus de 600 polices Google. Cependant, sachant que WordPress est construit sur le Des décisions, pas des options principe et offrant plus de 600 choix pour une seule des options est encore moins logique.
Si vous préférez conserver votre choix d'options de thème en prenant des décisions, j'espère que vous apprécierez cette méthode permettant d'ajouter Google Fonts à l'éditeur TinyMCE. Vos commentaires sont les bienvenus.
