Solution pour rendre les shortcodes dans Admin Editor

19

J'ai posé cette question il y a environ un an et j'espère qu'il existe un type de solution simple qui me permettra d'atteindre mon objectif. Alors voilà:

J'utilise souvent des codes courts dans l'éditeur d'administration, mais lorsque je remets cela au client, ils ne comprennent souvent pas comment ils fonctionnent.

Ce que je recherche, c'est une solution qui rendrait simplement automatiquement la sortie associative des shortcodes dans l'éditeur WYSIWYG administrateur.

D'un point de vue visuel, j'aimerais que cela s'affiche de la même manière que lorsque la ligne "plus" apparaît ou lorsqu'une image est affichée dans l'éditeur. J'entends par là que l'utilisateur verrait la sortie mais ne pourrait que la supprimer mais pas éditer le contenu du shortcode rendu.

NetConstructor.com
la source
Avez-vous lu cet article ( wp.tutsplus.com/tutorials/theme-development/… )? Vérifiez la partie TinyMCE.
cr0z3r
1
J'ai lu cela, mais pour autant que je sache, il ne s'agit que de créer / enregistrer des codes courts et de créer des boutons pour l'éditeur pour insérer rapidement des codes courts ... Mais aucune information sur le rendu de ces shortcodes avec les homologues de blocs HTML comme je l'ai décrit.
NetConstructor.com
Voulez-vous dire que vous souhaitez inclure une aide visuelle représentative du shortcode que vous incluez, et non pas remplacer le shortcode par le HTML réel? c'est-à-dire l'espace réservé de la galerie, qui n'est pas réellement le code de la galerie, mais plutôt un espace réservé visuel qui fait simplement savoir à l'utilisateur: "Hé, il y a une galerie ici"?
Matthew Boynes
Exactement! Et je voudrais qu'il soit un peu flexible, ce qui me permet de le personnaliser par shortcode (similaire à ce que vous avez dit dans la galerie ou lorsqu'une image est incluse)
NetConstructor.com

Réponses:

19

En fait, ce n'est pas trop mal de faire ce que vous demandez. Cela devrait vous prendre environ une heure pour faire votre premier, et 10 minutes pour faire les suivants.

En fin de compte, ce que vous allez faire est de créer un plugin TinyMCE. Voici ce que vous devez vous armer pour commencer:

  1. Guide général pour créer un plugin tinymce
  2. Exemple de code de WordPress Core
  3. Un guide général sur l'ajout d'un plugin TinyMCE à WordPress. J'ai trouvé celui-ci , qui semble suffisant.

Vous avez maintenant tous les outils pour vous en sortir! De tout cela, le code qui vous intéressera le plus est ce bloc dans l'exemple de code WP:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

Ici, le shortcode d'une galerie est remplacé par une imgbalise. La imgbalise a la classe wp-gallery, qui est stylisée par le CSS trouvé ici .

Edit 2016-04-06: Contenu et liens mis à jour pour TinyMCE 4 et WordPress 4.4

Matthew Boynes
la source
intéressant! laissez-moi vous demander ... que pensez-vous de la conversion automatique du contenu réel de tous les shortcodes en contenu associatif?
NetConstructor.com
Tout dépendrait du contenu. Tout d'abord, rappelez-vous que certains fichiers HTML sont supprimés, ont du mal à être rendus dans TinyMCE, etc. Deuxièmement, disons que votre shortcode rend un bloc de code HTML complexe - si votre utilisateur est allé le modifier, il pourrait le casser par inadvertance. Troisièmement, si votre shortcode a des options, ces options sont désormais rendues non modifiables, sauf si vous tuez le bloc HTML entier et refaites le shortcode. Il y a de fortes chances que si votre code est suffisamment complexe pour que vous ayez besoin d'un shortcode, je pense que l'espace réservé est votre meilleur choix.
Matthew Boynes
avez-vous déjà vu une solution par quelqu'un d'autre à ce sujet?
NetConstructor.com
0

Ce n'est pas une réponse complète, juste une direction de conception. Je pense que la meilleure approche est quelque chose comme ceci:

Dans le post de modification de l'administrateur

Extrayez tous les shortcodes de la publication enregistrée et rendez-les dans une métabox, à l' exception de l'éditeur . Assurez-vous qu'ils apparaissent dans le même ordre que les shortcodes se produisent dans le petit éditeur.

Dans l'API javascript de tinyMCE

Faire une fonction jQuery, lorsque l'utilisateur clique sur un shortcode, il échange le HTML de la metabox dans l'éditeur. Et vice versa. L'ordre lui-même devrait être correct en tant qu'association, mais je ne crains pas de placer des shortcodes. Cependant, il existe de nombreuses façons de concevoir une belle connexion ID. Les mises à jour des shortcodes peuvent être effectuées à la volée avec ajax.

N'enregistrez jamais l'état de shortcode rendu

Avant de changer d'éditeur, d'enregistrer des brouillons, des brouillons automatiques et de publier, effectuez un appel d'API pour déclencher la restauration, de sorte que l'état de shortcode rendu ne soit jamais enregistré ...

Cela peut être fait, mais vous devez être familier avec l'API tinyMCE pour comprendre où et quand accéder au contenu de l'éditeur et vous connecter aux actions javascript avant de «sauvegarder» et plus encore.

Il peut y avoir plusieurs éditeur tinyMCE sur le même post-edit pageload.

La partie restauration peut être étudiée en regardant le [gallery]code court. Mais le clic sur [MY_SHORTCODE]doit être fait par quelques astuces jQuery.

dans le script admin_footer, accédez au contenu de l'endroit où le curseur est actif avec:

var $editor_content = $(tinymce.activeEditor.getBody());

est un indice sur la façon de commencer.

Jonas Lundman
la source
0

Je cherchais également un moyen d'afficher graphiquement et de modifier les shortcodes. Et maintenant, enfin, j'ai trouvé un tutoriel qui fait exactement cela: https://generatewp.com/take-shortcodes-ultimate-level/

Capture d'écran

J'ajoute la description pour que les moteurs de recherche la récupèrent:

Nous allons créer un plugin simple avec un shortcode, puis nous allons ajouter un bouton de l'éditeur TinyMCE pour insérer ce shortcode dans une fenêtre contextuelle qui collectera toutes les entrées utilisateur pour les attributs de shortcode. Ensuite, nous allons remplacer le shortcode dans l'éditeur TinyMCE par une image d'espace réservé, un peu comme la galerie native de WordPress (qui est en fait un shortcode, au cas où vous ne le saviez pas), et enfin - nous allons autoriser l'édition du shortcode et de ses attributs en double-cliquant sur l'image d'espace réservé.

Marc Chéhab
la source