Éditeur visuel avancé WordPress TinyMCE Advanced et plugin AddQuicktag pour ajouter des boutons de barre de formatage. Éditeur visuel WordPress – Plugin avancé TinyMCE

02.09.2019

Il était une fois, j'envisageais un projet intéressant : un éditeur visuel pour créer un modèle WordPress directement à partir du panneau d'administration. Aujourd'hui, je vais vous parler d'un produit similaire, mais plus fonctionnel et puissant - . Il s'agit d'une version distincte de l'éditeur Web de bureau professionnel Pinegrow, qui est utilisé pour créer des sites Web dotés de réactivité, de scripts, de Bootstrap et d'autres fonctionnalités. Pinegrow WP est donc un module complémentaire spécial qui vous permet de créer des modèles WordPress.

Principales caractéristiques de Pinegrow WP :

Conversion de mises en page HTML statiques en thèmes WordPress - sélectionnez certains éléments du modèle et sélectionnez les paramètres appropriés pour eux.
Création de modèles WP à partir de zéro à l'aide d'un éditeur visuel - ajoutez simplement les éléments nécessaires à la page (barre latérale, liste de publications, etc.)

Prise en charge de 175 balises WordPress - vous permet de trouver rapidement les valeurs requises pour les éléments de mise en page HTML (titre de l'article, date, nom de l'auteur).
Prise en charge des plugins et des fonctions PHP - vous pouvez non seulement sélectionner des balises WordPress comme paramètres d'éléments, mais également définir des variables et ajouter des fonctions PHP.
La visualisation en temps réel du thème WordPress en cours de création vous permet de voir ce qui se passe après vos réglages.
Affichez le code PHP généré pour la mise en page.

De plus, vous pouvez travailler directement avec le contenu de votre site WordPress en important des images dans Pinegrow WP. Le résultat que vous recevez est du pur code PHP/HTML ; le service n’ajoute aucun élément inutile à la mise en page de base.

Voici une courte vidéo du fonctionnement de Pinegrow WP :

Vous pouvez tester ce logiciel vous-même. Pour ce faire, téléchargez le programme depuis le site officiel (il existe des versions pour Windows, Mac et Linux). Après l'installation, vous demandez une clé de licence temporaire gratuite (pendant 7 jours). Entrez le mot de passe qui vient à votre e-mail et vous êtes connecté au système.

Dans les paramètres (icône d'engrenage) Framework & Plugin Manager pour index.html, sélectionnez WordPress, puis téléchargez un modèle HTML. Ensuite, cliquez sur certains éléments de mise en page et sélectionnez les fonctions WordPress correspondantes. Par exemple : pour une image - the_post_thumbnail, pour un titre - the_title, pour une date - the_date, etc. Autrement dit, l'utilisateur n'a pas besoin de savoir exactement comment définir tel ou tel élément dans WordPress, il suffit de le rechercher dans les fonctions disponibles et de l'ajouter à la mise en page. En définissant tous les blocs de la page sur la valeur appropriée, vous obtiendrez éventuellement un modèle WordPress fonctionnel à exporter. L'algorithme est à peu près celui-ci, même si vous devrez comprendre le programme Pinegrow WP plus en détail (il existe de nombreuses fonctions et paramètres différents).

Dans l’ensemble, Pinegrow WP est très puissant, mais pas gratuit. Une licence personnelle (pour 3 ordinateurs) coûte 99 $. Vous pouvez l'utiliser pour autant de projets que vous le souhaitez ! Il existe des licences pour les entreprises et les équipes de développement. En principe, le programme est nécessaire précisément à ces fins - si vous ou votre entreprise créez professionnellement des sites Web (y compris sur WordPress), alors ce logiciel vous sera utile.

De l'auteur : Salutations, amis. J'ai décidé d'appeler cet article Plugin pour éditer du texte WordPress. Comme vous l'avez compris, ce sera un plugin qui nous aidera à éditer du texte sur WordPress, c'est-à-dire à travailler avec l'éditeur dans WordPress.

Lors de la création d’un nouvel article ou d’une nouvelle page, WordPress nous propose déjà un éditeur visuel adapté dans la plupart des cas. Voici à quoi cela ressemble par défaut dans WordPress :

Comme vous pouvez le constater, sa fonctionnalité est médiocre. Cependant, comme indiqué ci-dessus, dans la plupart des cas, ces capacités sont suffisantes. Mais, comme vous le comprenez, une personne ne suffit toujours pas, elle veut toujours quelque chose de plus. Et c'est ok

Il en va de même pour l'éditeur. Un jour, il se peut qu'il vous manque quelque chose et que vous vous demandiez : comment puis-je modifier le texte ? comment l'enregistrer ?

Dans cette situation, un plugin vous aidera, en élargissant les capacités de l'éditeur standard et en vous permettant d'éditer le texte selon vos besoins. Découvrez le plugin TinyMCE Advanced. Il comprend des dizaines d'options différentes pour éditer du texte, littéralement pour tous les goûts et toutes les couleurs.

Comme d'habitude, on commence par rechercher un plugin.

Le premier plugin trouvé dans mon cas était le nôtre. Installons-le et activons-le. En fait, cela suffit pour que le plugin fonctionne et que nous puissions utiliser les capacités avancées d’édition de texte. Jetons un coup d'œil au nouvel éditeur.

Nous avons maintenant beaucoup plus d'icônes sur le panneau de l'éditeur. Au-dessus du panneau avec des icônes se trouve également un menu d'édition dont les éléments regroupent ses capacités.

Jetons un coup d'œil aux paramètres du plugin, ils se trouvent dans le menu Paramètres - TinyMCE Advanced.

Il n'est pas nécessaire d'expliquer quoi que ce soit ici, puisque le plugin est russifié et que tout doit être clair. Par exemple, nous pouvons activer ou désactiver le menu de l'éditeur, nous pouvons ajouter de nouveaux boutons au panneau de l'éditeur, etc. Essayez de jouer avec les paramètres pour configurer l'éditeur à votre guise.

Ceci conclut cet article. Comme vous pouvez le constater, le plugin est utile et peut certainement vous être utile, surtout si vous écrivez beaucoup d'articles sur le site. Si vous souhaitez vous familiariser avec d'autres plugins utiles, je vous recommande de regarder les leçons de notre cours pour débutants -. C'est tout pour moi, bonne chance !

Ayant compris les fonctionnalités de base du panneau d’administration de WordPress. Après avoir constitué la base de notre site, nous consacrerons le plus de temps aux articles, à leur rédaction et à leur optimisation. Un éditeur a été introduit pour saisir et formater les articles dans WordPress, mais il est très inférieur aux plugins spécialisés pour ces besoins. Après avoir installé et configuré le plugin d'édition visuelle et HTML Tinymce Advanced, l'édition des entrées sera beaucoup plus facile.

Il existe de nombreux plugins d'édition de texte, dont l'un est un plugin fonctionnel qui a été choisi par un grand nombre de personnes - TinyMCE Avancé.

Navigation dans les articles :

Afin de commencer à utiliser et à tester ce plugin TinyMCE Advanced, vous devez le télécharger et l'installer, comme indiqué dans le didacticiel vidéo ci-dessous.

Description du plugin TinyMCE Avancé

Le plugin complémentaire TinyMCE Advanced editor existe depuis très longtemps et probablement 90 % des utilisateurs de la plateforme WordPress l’ont installé et l’utilisent quotidiennement.

Le plugin TinyMCE Advanced est très simple, mais il fournit en même temps toutes les fonctionnalités nécessaires pour travailler avec des pages et des publications.

Grâce à TinyMCE Advanced, nous pouvons ajouter à notre éditeur standard, disponible après , un grand nombre de nouveaux boutons qui vous seront certainement utiles.

Il est presque impossible de surestimer ce plugin, il est utilisé toutes les heures, chaque réglage minimal et fin deviendra simple et accessible avec TinyMCE Advanced.

Revue vidéo de TinyMCE Advanced, son installation et sa configuration

Dans cette vidéo, vous verrez les avantages disponibles lors de l'installation et de l'utilisation de TinyMCE Advanced.

Pourquoi TinyMCE Advanced est meilleur que le standard

Pour ceux qui ne connaissent pas encore le but des plugins, nous en avons un spécial, mais le reste peut se plonger tête baissée dans l'article.

TinyMCE Advanced existe pour créer vos publications dans des formats visuels et codés pratiques, pour modifier et créer un style d'écriture pour des textes uniques. L’éditeur proposé dans le package WordPress de base est pour le moins médiocre et ne dispose que d’outils de base.

Comme nous pouvons le constater, confirmant ce qui a été dit ci-dessus, vous n'irez pas très loin avec l'éditeur standard, c'est pourquoi TinyMCE Advanced avec ses fonctionnalités étendues nous vient en aide.

À première vue, il est clair que nos capacités vont considérablement augmenter avec cette fonctionnalité de TinyMCE Advanced. Quiconque a déjà travaillé avec des éditeurs de texte peut facilement comprendre les icônes et les fonctionnalités du plugin. Pour ceux qui ne veulent pas chercher les éléments nécessaires au hasard, nous analyserons les principales fonctionnalités et paramètres de TinyMCE Advanced.

Ce que TinyMCE Advanced nous apportera

Ainsi, l'utilisation de l'éditeur TinyMCE Advanced nous permettra d'ajouter et d'utiliser les fonctionnalités suivantes :

Création simple et pratique de tableaux directement lors de la rédaction d'un article. Édition et remplissage qui ne vous causeront aucun inconvénient.
Formatage avancé et pratique de la structure des pages. Possibilité de créer et de réguler le placement des calques (
blocs).
Vous pourrez également mettre des exposants et des indices.
Changer la couleur d'arrière-plan du texte avec TinyMCE Advanced est très simple sans utiliser CSS.
L'intégration de fichiers vidéo deviendra beaucoup plus pratique avec l'éditeur TinyMCE Advanced.
Changez la taille de la police.
Large choix de familles de polices.
Un ensemble de raccourcis clavier accélérera l’écriture et le formatage de vos textes.
Il deviendra possible d'effacer tout le formatage avec une seule touche.

Ces fonctionnalités et d’autres vous aideront à façonner vos créations avec WordPress.

Le plugin est constamment mis à jour, ce qui nous rend heureux, car c'est le principal signe que les développeurs pensent à votre confort.

En utilisant TinyMCE Advanced, vous rédigerez vos articles en toute confiance en vos capacités, nous vous souhaitons de l'inspiration et des textes uniques, à la prochaine fois

Problèmes possibles avec TinyMCE Advanced et méthodes pour les résoudre

Le plugin TinyMCE Advanced est écrit en PHP, comme n'importe quel programme, il peut ne pas fonctionner pour une raison ou une autre. Vous trouverez ci-dessous les problèmes que les utilisateurs rencontrent le plus souvent. Quel est le problème avec l'éditeur pour WordPress ?

L'éditeur visuel WordPress TinyMCE Advanced ne fonctionne pas

Si, lors de la connexion d'un plugin, vous ne pouvez pas le modifier, utiliser des icônes, ajouter ou modifier des paramètres, essayez l'opération suivante :

Vérifiez la fonctionnalité des autres plugins que vous gérez depuis le panneau d'administration, si leurs boutons de paramètres fonctionnent, puis passez au point suivant. Si des problèmes surviennent avec d'autres modules complémentaires, vous devez rechercher les raisons des paramètres internes, et non dans le plugin lui-même.
Mettez à jour WordPress vers la dernière version.
Désinstallez complètement le plugin et téléchargez TinyMCE Advanced depuis le site officiel.
Après l'installation, activez-le et vérifiez sa fonctionnalité.

Si cela ne vous aide pas, les problèmes peuvent être liés à d'autres plugins, parfois ils peuvent entrer en conflit, essayez de désactiver tous les plugins et vérifiez si la situation a changé. Si TinyMCE Advanced ne fonctionne pas et que vous devez rechercher des problèmes plus profonds avec un moteur « propre », vous devez contacter un programmeur.

Sur la page d'administration : Les boutons TinyMCE ne sont pas triés, ils ne bougent pas, la barre d'outils est vide, d'autres erreurs sur la page

Cela est généralement dû à d'autres plugins qui ajoutent des bibliothèques JavaScript incompatibles à toutes les pages, pas seulement là où cela est nécessaire. Une solution consiste à essayer de découvrir quels plugins font cela, à désactiver temporairement les plugins restants jusqu'à ce que tous les boutons TinyMCE apparaissent, et à les activer un par un, en vérifiant les modifications dans les paramètres.

Si cela ne résout pas le problème, essayez un dépannage général Javascript : videz le cache, essayez un autre navigateur, essayez un autre ordinateur si possible, supprimez et retéléchargez tous les fichiers du plugin, et enfin installez Firefox avec Firebug ou Opera, notez le premier à l'origine de JS. erreurs (importantes) et publiez-les ci-dessous ou effectuez une recherche en ligne pour découvrir la cause.

J'ai organisé les boutons et les ai enregistrés, mais rien ne change dans l'éditeur visuel sur la page des publications

Cliquez sur le bouton « Supprimer » (à côté du bouton Enregistrer) puis sur « Continuer ». Ensuite, éteignez et réactivez le plugin. Cela réinitialisera tous les paramètres stockés dans la base de données.

Certains boutons manquent dans le menu TinyMCE, ou certains outils n'apparaissent pas du tout, ou TinyMCE se comporte étrangement après l'installation du plugin.

Presque tous ces problèmes sont causés par le cache du navigateur ou le cache réseau. Videz le cache de votre navigateur, fermez votre navigateur, puis lancez-le et réessayez. Si le problème persiste, essayez de recharger la page en maintenant Ctrl (dans IE) ou Shift (dans Firefox) pour indiquer au navigateur de recharger la page depuis le serveur. Cela peut également être dû à un cache réseau quelque part entre vous et votre hébergeur. Attendez quelques heures que le problème disparaisse.

Je ne vois aucun style importé dans le menu déroulant "style"

Ces styles (classes uniquement) sont importés depuis l'éditeur dans le fichier style.css de votre thème actuel. Cependant, certains thèmes n'incluent pas ce fichier. Dans ce cas, suivez les instructions sur la page des paramètres TinyMCE Avdaced pour ajouter votre propre fichier éditeur style.css à votre thème. Lors de la définition des styles, gardez à l'esprit que TinyMCE importera uniquement les noms de classes :

Ma_classe()

Ma_autre_classe()

Je viens d'installer le plugin TinyMCE Avdaced mais rien ne s'est passé

Quittez WordPress, videz le cache de votre navigateur, redémarrez votre navigateur et réessayez. Si cela ne fonctionne pas, il se peut qu'il y ait une mise en cache proxy ou un cache réseau quelque part entre vous et votre hôte. Vous devrez peut-être attendre quelques heures pour que ce cache expire.

Lorsque j'ajoute des "émoticônes", elles n'apparaissent pas dans l'éditeur

Le bouton Emoji de TinyMCE ajoute des codes emoji. Les images réelles sont ajoutées par WordPress lors de la visualisation d'un article/d'une page. Assurez-vous que l'option « Convertir les emoji comme :-) et :-P en images » dans le menu Paramètres/Écriture est cochée.

Le plugin n'ajoute aucun bouton, il n'y a pas d'onglets « Visuel » et « Texte HTML »

Assurez-vous que la case « Désactiver Visual Editor » sous « Utilisateurs »/« Votre profil » n'est pas cochée.

Bienvenue sur le site du blog. Dans cet article, je vais vous expliquer comment remplacer et en même temps réparer un standard éditeur visuel de publication WordPress. Commençons donc par le fait qu'un éditeur de texte standard n'est essentiellement rien de plus qu'un Word ordinaire, que chacun de nous a utilisé, mais uniquement sous une forme très simplifiée. Beaucoup de gens trouvent simplement gênant d'écrire des articles quand il n'y a que quelques boutons pour formater leurs entrées, et donc beaucoup commencent à étudier pour écrire ce qu'ils veulent dans le code, mais même ici, un piège les attend.

L'éditeur HTML ne permet pas d'utiliser toutes les balises connues, mais uniquement les principales. Au fait, voici une liste de ces balises que l'éditeur WordPress comprend : adresse, a, abbr, acronyme, zone, article, apart, b, big, blockquote, br, caption, cite, class, code, col, del , détails, dd, div, dl, dt, em, figure, figcaption, pied de page, police, h1, h2, h3, h4, h5, h6, en-tête, hgroup, hr, i, img, ins, kbd, li, map , ol, p, pre, q, s, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.

Si vous essayez de saisir une autre balise non incluse dans cette liste, l’éditeur WordPress la supprimera simplement de la publication. De plus, le code PHP et JavaScript ne peut pas être utilisé dans l'éditeur HTML. Si vous souhaitez toujours insérer du code JavaScript dans un article, vous devrez alors insérer ce code dans un fichier séparé, puis le télécharger sur le blog et écrire le chemin pour ouvrir ce fichier dans l'éditeur html.

Tout cela fait qu’il est difficile de consacrer beaucoup plus de temps au travail que ce que beaucoup peuvent se permettre. Par conséquent, beaucoup cherchent comment remplacer l’éditeur visuel WordPres standard qui répondrait à leurs besoins et à leurs objectifs. Aujourd’hui, nous allons parler de l’un d’entre eux.

L'éditeur s'appelle TinyMCE Advanced, ce qui crée un outil sophistiqué Plugin CKEditor. Je n'ai pas simplement dit cela, car pas moins de 15 plugins y ont été intégrés : Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Search et Remplacer, style, tableau, caractères visuels et extras XHTML.

Il s'agit de loin de l'éditeur de texte le plus sophistiqué qui existe. En général, il s'avère que le plugin est payant, mais pour une raison quelconque, il est distribué absolument gratuitement. Les développeurs écrivent qu'ils disent que vous pouvez l'utiliser gratuitement simplement pour vous familiariser, mais pour les sites commerciaux, vous devez acheter une licence.

Même si je pense que c'est autre chose. Le plugin lui-même pèse beaucoup et tout le monde n'a pas besoin de certaines fonctions, boutons, dont il n'y a que des mers, donc le plugin peut être assemblé pour vous-même, ne laissant que ce qui est nécessaire, réduisant ainsi sa taille sans ralentir le travail du blog.

Salut tout le monde!

Aujourd'hui, je vais vous parler du plugin Ultimate tinyMCE, qui permet d'étendre considérablement les fonctions de l'éditeur visuel WordPress standard.

À l'aide du plugin Ultimate tinyMCE, vous pouvez sélectionner la police de texte appropriée, spécifier ses dimensions et traiter les images et les vidéos de manière plus fonctionnelle.

Lorsque vous rédigez un article, placez diverses émoticônes et bien plus encore aux bons endroits. Et même si vous n'êtes pas partisan des plugins inutiles, alors dans ce cas, l'article vous sera utile, car je vais y montrer comment implémenter certaines fonctions à l'aide de codes normaux.

Alors commençons ! Tous ceux qui travaillent avec le moteur WordPress savent parfaitement à quoi ressemble le panneau de travail d'un éditeur visuel standard :

Il comprend un ensemble minimum de fonctions qui permettent aux webmasters d'écrire et de publier du matériel utile sur leur blog. Personnellement, je suis assez satisfait de l'ensemble standard de fonctions de l'éditeur WordPress, mais tout le monde n'en est pas satisfait et préfère utiliser d'autres éditeurs ou programmes.

Plugin TinyMCE ultime. Amélioration de l'éditeur visuel WordPress

Vous pouvez télécharger le plugin Ultimate TinyMCE. Ensuite, installez-le sur votre blog et activez-le. Pour ceux qui ne savent pas comment sont installés les plugins, . Après avoir installé et activé le plugin, un onglet Ultimate TinyMCE supplémentaire apparaîtra dans le panneau d'administration de votre ressource :

En allant dans l’onglet, vous verrez une liste impressionnante de différents boutons, chacun ayant une fonction spécifique. Vous pouvez maintenant mettre à niveau votre éditeur visuel avec l’une des fonctionnalités manquantes présentes dans le plugin.

Je ne décrirai pas chaque bouton, car... La plupart d'entre eux ont été traduits en russe et chacun d'entre vous pourra les comprendre par lui-même. La seule chose qui mérite d'être mentionnée est leur mise en œuvre sur le blog.

Pour qu'un bouton particulier soit affiché dans le panneau de travail de l'éditeur visuel, cochez simplement la case à côté du bouton souhaité dans la colonne « Activer ». De plus, le plugin vous propose de choisir vous-même l'emplacement des boutons, ce qui peut se faire dans la colonne « Row Selection » :

Comme vous l'avez probablement remarqué, tous les boutons du panneau de l'éditeur sont situés sur deux lignes, mais grâce à Ultimate tinyMCE, vous pouvez augmenter le nombre de lignes à quatre, mais pas plus. Ceci est facilité par la valeur « ROW », qui signifie « Row ».

Par défaut, chaque élément est défini sur « ROW 1 ». Si vous laissez tout inchangé, la fonction sous forme de bouton continuera la première ligne du panneau de l'éditeur visuel et apparaîtra à la toute fin, après toutes les fonctions standards.

Si vous sélectionnez, par exemple, la valeur « ROW 3 » dans la liste, le bouton avec la fonction passera à la troisième ligne. Je pense que c'est clair ! Après avoir activé toutes les fonctions supplémentaires (j'en ai compté 53) et les avoir dispersées le long des lignes, j'ai obtenu cette image :

Impressionnant, n'est-ce pas ? Et j'ai oublié de mentionner que lors de l'ajout ou de la suppression d'une fonction, n'oubliez pas de cliquer sur le bouton « Options des boutons de mise à jour » tout en bas du plugin pour enregistrer les paramètres.

Comment étendre les fonctionnalités de l'éditeur visuel WordPress à l'aide de code

Alors, quelles fonctionnalités pouvez-vous ajouter à l’aide du code et comment procéder ?

1. Vous pouvez ajouter une « Famille de polices », c'est-à-dire vous pouvez choisir la police dont vous avez besoin dans la liste et rédiger un article entier ou un court extrait avec. Pour implémenter cette fonction, ouvrez le fichier function.php pour le modifier (chemin d'accès au fichier : /wp-content/themes/nom du thème (template)/functions.php).

Attention : avant de modifier le fichier function.php, assurez-vous de le faire pour éviter des actions incorrectes !

Après avoir ouvert le fichier, recherchez la balise à la toute fin : ?> et juste avant, insérez ce code :

add_filter("mce_buttons_2" , "add_fontselect_row_2" ) ; function add_fontselect_row_2( $mce_buttons ) ( $pastetext = array_search ( "pastetext" , $mce_buttons ) ; $pasteword = array_search ( "pasteword" , $mce_buttons ) ; $removeformat = array_search ( "removeformat" , $mce_buttons ) ; unset ( $mce_buttons [ $pastetext ] ) ; unset ( $mce_buttons [ $pasteword ] ) ; unset ( $mce_buttons [ $removeformat ] ) ; array_splice ( $mce_buttons , $pastetext , 0 , "fontselect" ) ; restrict_font_choices" ) ;. fonction restrict_font_choices( $initArray ) ( $initArray [ "theme_advanced_fonts" ] =. "Andale Mono=andale mono,fois;". "Arial=arial,helvetica,sans-serif;". "Arial Black=arial noir,avant-garde;". "Livre Antiqua=livre antiqua,palatino;""Comic Sans MS=comic sans ms,sans-serif;" "Courier Nouveau=courrier nouveau,courrier;". "Géorgie = Géorgie, Palatino ;" .. "Helvetica=helvetica;" ."Impact=impact,chicago;" . "Symbole=symbole ;" ."Tahoma=tahoma,arial,helvetica,sans-serif;"

"Terminal=terminal,monaco;" .

fonction add_more_buttons($boutons) ( $boutons = "hr" ; $boutons = "del" ; $boutons = "sub" ; $boutons = "sup" ; $boutons = "fontselect" ; $boutons = "fontsizeselect" ; $ boutons = "nettoyage" ; $boutons = "styleselect" ; $boutons = "backcolor" ;

Ensuite, enregistrez à nouveau le fichier et remettez-le sur le serveur, en remplaçant l'ancien. Nous actualisons la page avec l'éditeur visuel et voyons ce que nous obtenons :

C'est tout pour moi et maintenant vous savez aussi comment ajouter des boutons fonctionnels à l'éditeur WordPress, élargissant ainsi ses capacités standards ! Je souhaite à tous bonne chance ! Au revoir et à bientôt !

Comment aimez-vous l’article ? Peut-être connaissez-vous d’autres options pour améliorer les fonctions standards de l’éditeur visuel WordPress ? Partagez-les avec les lecteurs du blog sous forme de commentaires sur cet article.