Solution pour rendre les shortcodes dans Admin Editor

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.

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

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.

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/

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é.