Les plats clés

• L'éditeur visuel WordPress, alimenté par le contr?le de l'éditeur TinyMCE, peut être personnalisé pour ajouter des fonctionnalités uniques, telles que la création et l'enregistrement d'un plugin TinyMCE personnalisé qui enveloppe le texte sélectionné dans une classe CSS.
• Pour ajouter des fonctionnalités personnalisées, vous devez créer un plugin TinyMCE sur votre site Web WordPress, enregistrer des actions et filtres TinyMCE, et utiliser les filtres TinyMCE (MCE_EXTERNAL_PLUGINS et MCE_BUTTON .
• Les fonctionnalités personnalisées peuvent également être ajoutées en créant un plugin JavaScript qui indique à TinyMCE comment sortir le bouton et quoi faire lorsqu'il est cliqué. Cela implique d'utiliser la classe TinyMCE Plugin Manager pour ajouter le plugin à TinyMCE, d'enregistrer le bouton à l'aide de la fonction AddButton et d'enregistrer une commande à l'aide de la fonction AddCommand.
• Il est possible de personnaliser l'éditeur visuel WordPress sans coder en utilisant des plugins. Certains plugins populaires à cet effet comprennent TinyMce Advanced, WP Edit et Ultimate TinyMCE.

L'éditeur de contenu est un élément clé de WordPress. Il permet aux utilisateurs de créer et de gérer leur contenu, leurs galeries et leurs vidéos, dans une vue visuelle wysiwyg (ce que vous voyez est ce que vous obtenez).

Il est également livré avec une vue texte , qui permet aux utilisateurs d'insérer ou de modifier HTML dans leur contenu.

L'éditeur visuel WordPress est alimenté par le contr?le de l'éditeur TinyMCE, qui fournit la vue Wysiwyg, ainsi que par les boutons de mise en forme que vous voyez:

Grace à l'API TinyMCE et aux crochets filtrants de WordPress, nous pouvons ajouter nos propres fonctionnalités à l'éditeur visuel WordPress. Plus précisément, nous examinerons comment créer et enregistrer un plugin TinyMCE personnalisé qui enveloppe le texte sélectionné dans une classe CSS.

Création du plugin TinyMCE

Dans votre site Web WordPress, créez le dossier WP-Content / Plugins / TinyMCE-Custom-Class.

Nous stockons ici les fichiers de notre plugin, alors créez ensuite un fichier appelé tinymce-custom-class.php, en utilisant le code suivant:

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

Cela donne à WordPress quelques informations sur notre plugin et configure notre construction, où nous enregistrerons nos actions et filtres TinyMCE.

WordPress TinyMCE Filtres

TinyMCE fournit deux filtres clés pour enregistrer un élément sur la barre d'outils de l'éditeur visuel:

• mce_external_plugins: utilisé pour charger des plugins TinyMCE externes (https://codex.wordpress.org/plugin_api/filter_reference/mce_external_plugins)
• mce_buttons: utilisé pour ajouter / supprimer des boutons à la barre d'outils TinyMce (https://codex.wordpress.org/plugin_api/filter_reference/mce_buttons, mce_buttons_2, mce_buttons_3, _mce_butons_4)

Avant d'appeler ces filtres, nous voulons vérifier que nous sommes dans les écrans d'administration WordPress. Ajoutez le code suivant au __CONSTURT:

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

Ensuite, ajoutez la fonction setup_tinymce_plugin pour effectuer quelques vérifications supplémentaires:

<span>if ( is_admin() ) {
</span>	<span>add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
</span><span>}</span>

Cela vérifie si l'utilisateur actuel connecté dans WordPress peut modifier des publications ou des pages. S'ils ne le peuvent pas, il est inutile d'enregistrer notre plugin TinyMCE pour cet utilisateur, car ils ne verront jamais l'éditeur visuel.

Nous vérifions ensuite si l'utilisateur utilise l'éditeur visuel, car certains utilisateurs de WordPress désactivent cela via utilisateurs> votre profil . Encore une fois, si l'utilisateur n'utilise pas l'éditeur visuel, nous retournons (sortons) la fonction, car nous n'avons rien à faire d'autre.

Si les vérifications ci-dessus passent, les deux filtres WordPress TinyMCE sont enregistrés - MCE_EXTERNAL_PLUGINS et MCE_BUTTONS.

Le premier filtre - MCE_EXTERNAL_PLUGINS - nous permet d'enregistrer le fichier de plugin JavaScript TinyMCE qui interagira avec l'éditeur visuel. Ajoutons un appel de fonction pour ce filtre, à l'intérieur de notre classe:

<span>/**
</span><span>* Check if the current user can edit Posts or Pages, and is using the Visual Editor
</span><span>* If so, add some filters so we can register our plugin
</span><span>*/
</span><span>function setup_tinymce_plugin() {
</span>
    <span>// Check if the logged in WordPress User can edit Posts or Pages
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Check if the logged in WordPress User has the Visual Editor enabled
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( get_user_option( 'rich_editing' ) !== 'true' ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Setup some filters
</span>    <span>add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
</span>    <span>add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
</span>
<span>}</span>

Ici, nous enregistrons un fichier JavaScript dans le $ Plugin_Array, qui contient tous les plugins JavaScript TinyMCE.

Le deuxième filtre - MCE_BUTTONS - dit à TinyMCE que nous aimerions enregistrer un bouton dans l'éditeur visuel. Encore une fois, ajoutons un appel de fonction pour ce filtre, à l'intérieur de notre classe:

<span>/**
</span><span> * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
</span><span> *
</span><span> * <span>@param <span>array</span> $plugin_array Array of registered TinyMCE Plugins
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Plugins
</span></span><span> */
</span><span>function add_tinymce_plugin( $plugin_array ) {
</span>
    <span>$plugin_array['custom_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-class.js';
</span>    <span>return $plugin_array;
</span>
<span>}</span>

Cela enregistre le nom programmatique de notre bouton TinyMCE (Custom_class).

Création du plugin javascript

Lorsque nous avons appelé MCE_EXTERNAL_PLUGINS, nous avons fait référence à un fichier JavaScript. Nous devons maintenant créer ce fichier et y ajouter du code JavaScript. Cela indiquera à TinyMCE comment sortir le bouton, et que faire lorsqu'il est cliqué.

Créez un nouveau fichier dans le dossier du plugin appelé tinymce-custom-class.js, en insertant le code suivant:

<span>/**
</span><span> * Adds a button to the TinyMCE / Visual Editor which the user can click
</span><span> * to insert a custom CSS class.
</span><span> *
</span><span> * <span>@param <span>array</span> $buttons Array of registered TinyMCE Buttons
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Buttons
</span></span><span> */
</span><span>function add_tinymce_toolbar_button( $buttons ) {
</span>
    <span>array_push( $buttons, 'custom_class' );
</span>    <span>return $buttons;
</span>
<span>}</span>

Cette fonction JavaScript effectue quelques actions:

• Il appelle la classe TinyMce Plugin Manager, que nous pouvons utiliser pour effectuer un certain nombre d'actions liées au plugin TinyMCE. Plus précisément, nous ajoutons notre plugin à TinyMCE en utilisant la fonction ADD.
• Dans la routine ADD, nous avons accès à l'éditeur visuel via l'instance de l'éditeur. Nous enregistrons notre bouton à l'aide de la fonction AddButton, qui comprend une image de titre, de commande et d'ic?ne.
• Enfin, nous enregistrons une commande à l'aide de la fonction addCommand, qui montre une alerte nous indiquant quand notre bouton a été cliqué.

Nous devrons également inclure l'image icon.png dans notre dossier de plugin - c'est l'image d'ic?ne qui sera utilisée pour le bouton:

Enregistrez votre code et activez votre plugin dans WordPress Administration> Plugins.

Ensuite, créez ou modifiez une page ou une publication, et vous espérez voir votre bouton avec l'ic?ne:

Cliquez sur le bouton, et vous verrez le bouton cliquer! Alerte:

Définition d'une commande pour exécuter

Remplacement de l'alerte par une invite, demandant à l'utilisateur le nom de classe CSS qu'il souhaite enrouler autour du texte sélectionné dans l'éditeur visuel:

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

Cette commande effectue quelques vérifications de santé mentale, pour s'assurer que l'utilisateur a sélectionné un texte, entré un nom de classe CSS et n'a pas annulé le processus.

Si ces vérifications passent, nous exécutons ensuite la fonction EXECCOMAND de l'éditeur, pour remplacer le texte sélectionné, par le texte sélectionné enveloppé dans une balise SPAN qui inclut la classe CSS entrée.

Si tout fonctionnait, passez à la vue "texte" et vous verrez que votre texte sélectionné est maintenant enveloppé dans une étiquette de spor:

Conclusion

Nous avons créé un plugin WordPress pour ajouter un bouton à l'éditeur Visual TinyMCE. Dans ce processus, nous avons exploré les filtres que WordPress utilisés pour l'intégration avec TinyMCE, ainsi que le code JavaScript nécessaire pour ajouter un bouton et effectuer une action lorsque vous cliquez sur.

Pour télécharger le code source complet, visitez le référentiel GitHub ou le lien de téléchargement de fichiers zip directs.

Dans le prochain article, nous couvrirons quelques étapes plus avancées que nous pouvons prendre pour personnaliser notre plugin TinyMCE davantage.

Questions fréquemment posées (FAQ) sur l'ajout de fonctionnalités personnalisées à l'éditeur visuel WordPress

Comment puis-je ajouter des boutons personnalisés à l'éditeur visuel WordPress?

L'ajout de boutons personnalisés à l'éditeur visuel WordPress peut être réalisé en utilisant l'API TinyMCE. Cette API vous permet d'ajouter de nouveaux boutons à la barre d'outils et de définir leur fonctionnalité. Vous pouvez créer un nouveau fichier de plugin dans le répertoire des plugins de votre installation WordPress et utiliser le filtre ?MCE_BUTTON? pour ajouter votre bouton. Ensuite, vous pouvez utiliser le filtre 'MCE_EXTERNAL_PLUGINS' pour charger le fichier JavaScript de votre plugin, qui définira la fonctionnalité du bouton.

Puis-je personnaliser l'éditeur visuel WordPress sans codage?

Oui, vous pouvez Personnalisez l'éditeur visuel WordPress sans codage à l'aide de plugins. Il existe plusieurs plugins disponibles qui vous permettent d'ajouter, de supprimer ou de réorganiser les boutons de la barre d'outils, de modifier l'apparence de l'éditeur et d'ajouter des styles et des formats personnalisés. à cet effet, certains plugins populaires incluent TinyMCE Advanced, WP Edit et Ultimate TinyMCE.

Comment puis-je ajouter des styles personnalisés à l'éditeur visuel WordPress?

Vous pouvez ajouter des styles personnalisés au visuel WordPress visuel? éditeur en utilisant le filtre 'tiny_mce_before_init'. Ce filtre vous permet de modifier le tableau des paramètres TinyMCE, qui comprend une option ?style_formats?. Vous pouvez ajouter vos styles personnalisés à cette option en tant que tableau de tableaux, chacun définissant un style. Chaque style doit inclure un ?titre?, un ?bloc?, des ?classes? et une propriété ?wrapper?.

Qu'est-ce que TinyMCE et comment se rapporte-t-il à l'éditeur visuel WordPress?

TinyMCE est un contr?le de l'éditeur JavaScript HTML WYSIWYG basé sur la plate-forme. C'est le logiciel sous-jacent qui alimente l'éditeur visuel WordPress. En comprenant et en utilisant l'API TinyMCE, vous pouvez ajouter des fonctionnalités personnalisées à l'éditeur visuel WordPress.

Comment puis-je ajouter une police personnalisée à l'éditeur visuel WordPress?

Vous pouvez ajouter une police personnalisée WordPress? à l'éditeur visuel WordPress en utilisant le filtre 'MCE_CSS'. Ce filtre vous permet d'ajouter des fichiers CSS supplémentaires à l'éditeur. Vous pouvez créer un fichier CSS qui importe votre police personnalisée et définit une classe qui l'utilise, puis ajouter ce fichier à l'éditeur à l'aide du filtre 'MCE_CSS'.

Puis-je utiliser l'éditeur visuel WordPress sur les appareils mobiles ?

Oui, l'éditeur visuel WordPress est entièrement réactif et peut être utilisé sur les appareils mobiles. Cependant, en raison de la taille de l'écran plus petite, certains boutons de la barre d'outils peuvent être cachés dans la liste déroulante ?évier de cuisine?.

Comment puis-je ajouter des formats personnalisés à l'éditeur visuel WordPress?

Vous pouvez ajouter Formats personnalisés vers l'éditeur visuel WordPress en utilisant le filtre 'TINY_MCE_BEFORE_INIT' et l'option 'Style_Formats'. Vous pouvez définir vos formats personnalisés comme un tableau de tableaux, chacun définissant un format. Chaque format doit inclure une propriété ?title?, ?en ligne?, ?classes? et ?wrapper?.

Comment puis-je désactiver l'éditeur visuel WordPress?

Vous pouvez désactiver le visual WordPress Visual éditeur en accédant aux utilisateurs> votre profil dans la zone d'administration WordPress et en vérifiant l'option ?Désactiver l'éditeur visuel lors de l'écriture?.

Puis-je utiliser Shortcodes dans l'éditeur visuel WordPress?

Oui, oui, Vous pouvez utiliser Shortcodes dans l'éditeur visuel WordPress. Entrez simplement le shortcode dans l'éditeur et il sera traité lorsque le message s'affiche.

Comment puis-je ajouter une table à l'éditeur visuel WordPress?

Vous pouvez ajouter une table à la WordPress WordPress? éditeur visuel en utilisant le bouton ?Table? dans la barre d'outils. Si ce bouton n'est pas visible, vous devrez peut-être installer un plugin comme TinyMce avancé pour l'ajouter.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!