Soluzione per visualizzare gli shortcode nell'editor di amministrazione

Question

Soluzione per visualizzare gli shortcode nell'editor di amministrazione

15 dic 2011, 17:43:16

Visualizzazioni: 18.9K

Voti: 22

Ho posto questa domanda circa un anno fa e spero esista una soluzione semplice che mi permetta di raggiungere il mio obiettivo. Ecco il problema:

Utilizzo spesso shortcode nell'Editor di Amministrazione, ma quando li consegno al cliente spesso non capiscono come funzionano.

Ciò che sto cercando è una soluzione che possa automaticamente visualizzare l'output associato agli shortcode all'interno dell'editor WYSIWYG di amministrazione.

Dal punto di vista visivo, vorrei che questo si mostrasse in modo simile a quando appare la riga "more" o quando un'immagine viene visualizzata nell'editor. Con questo intendo dire che l'utente dovrebbe vedere l'output ma potrebbe solo eliminarlo, non modificare il contenuto dello shortcode renderizzato.

NetConstructor.com

4.41K

funzioni editor shortcode

Commenti

Hai letto questo (http://wp.tutsplus.com/tutorials/theme-development/wordpress-shortcodes-the-right-way/) articolo? Controlla la parte su TinyMCE.

cr0z3r

15 dic 2011 17:50:42

L'ho letto, ma per quanto ne so tratta solo della creazione/registrazione degli shortcode e della creazione di pulsanti per l'editor per inserire rapidamente gli shortcode... Ma nessuna informazione sul rendering di quegli shortcode con le controparti HTML block come ho descritto.

NetConstructor.com

15 dic 2011 20:51:23

Intendi che vuoi includere un aiuto visivo che rappresenti lo shortcode che stai includendo, e non sostituire effettivamente lo shortcode con il vero HTML? Ad esempio il segnaposto della galleria, che non è effettivamente il codice della galleria, ma piuttosto un segnaposto visivo che semplicemente informa l'utente, "Ehi, c'è una galleria qui"?

Matthew Boynes

30 gen 2012 07:27:38

Esatto! E vorrei che fosse un po' flessibile in modo da poterlo personalizzare per ogni shortcode (simile a quello che hai detto per la galleria o quando viene inclusa un'immagine)

NetConstructor.com

30 gen 2012 12:55:39

https://wordpress.org/plugins/shortcode-ui/

jgraup

30 ago 2016 17:12:03

Tutte le risposte alla domanda

Commenti

interessante! fammi chiedere... cosa ne pensi di avere il contenuto effettivo di tutti gli shortcode convertito automaticamente nel contenuto associato?

NetConstructor.com

1 feb 2012 11:09:44

Dipende tutto dal contenuto. Innanzitutto, ricorda che alcuni HTML vengono rimossi, hanno problemi di rendering in TinyMCE, ecc. Secondo, diciamo che il tuo shortcode genera un blocco di HTML complesso - se l'utente andasse a modificarlo, potrebbe romperlo involontariamente. Terzo, se il tuo shortcode ha delle opzioni, queste diventano non modificabili a meno che tu non elimini l'intero blocco HTML e ricrei lo shortcode. Probabilmente, se il tuo codice è abbastanza complesso da richiedere uno shortcode, penso che il placeholder sia la soluzione migliore.

Matthew Boynes

1 feb 2012 16:09:28

hai mai visto una soluzione proposta da qualcun altro su questo?

NetConstructor.com

24 nov 2012 01:54:24

Questa non è una risposta completa, ma solo una direzione di design. Penso che l'approccio migliore sia qualcosa del genere:

Nella modifica del post in admin

Estrai tutti gli shortcode dal post salvato e renderizzali all'interno di un metabox, separato dall'editor. Assicurati che appaiano nello stesso ordine in cui gli shortcode compaiono nell'editor TinyMCE.

Nell'API JavaScript di TinyMCE

Crea una funzione jQuery, quando l'utente clicca su uno shortcode, scambia l'HTML dal metabox all'interno dell'editor. E viceversa. L'ordine stesso dovrebbe essere sufficiente come associazione, ma non sono sicuro riguardo agli shortcode che racchiudono contenuto. Comunque ci sono molti modi per progettare una buona connessione tramite ID. Gli aggiornamenti degli shortcode possono essere fatti al volo con ajax.

Non salvare mai lo stato renderizzato dello shortcode

Prima di cambiare editor, salvare bozze, autobozze e pubblicare, fai una chiamata API per attivare il ripristino, così lo stato renderizzato dello shortcode non viene mai salvato...

Questo può essere fatto, ma devi avere familiarità con l'API di TinyMCE per capire dove e quando accedere al contenuto dell'editor, e agganciarti alle azioni JavaScript prima del 'salvataggio' e altro ancora.

Possono esserci diversi editor TinyMCE caricati nella stessa pagina di modifica del post.

La parte di ripristino può essere studiata osservando il comportamento dello shortcode [gallery]. Ma il click su [MIO_SHORTCODE] deve essere gestito con qualche trucco jQuery.

Nello script admin_footer, accedi al contenuto dove il cursore è attivo con:

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

è un suggerimento su come iniziare.

Jonas Lundman

384

10 giu 2018 04:00:58

Stavo cercando un modo per visualizzare graficamente e modificare anche gli shortcode. E ora, finalmente, ho trovato un tutorial che fa esattamente questo: https://generatewp.com/take-shortcodes-ultimate-level/

Screenshot

Aggiungo la descrizione in modo che i motori di ricerca la rilevino:

Creeremo un semplice plugin con uno shortcode, poi aggiungeremo un pulsante all'editor TinyMCE per inserire quello shortcode attraverso un popup che raccoglierà tutti gli input dell'utente per gli attributi dello shortcode. Successivamente, sostituiremo lo shortcode nell'editor TinyMCE con un'immagine segnaposto, proprio come la galleria nativa di WordPress (che in realtà è uno shortcode, nel caso non lo sapessi), e infine - permetteremo la modifica dello shortcode e dei suoi attributi facendo doppio clic sull'immagine segnaposto.

Marc Chéhab

1

23 giu 2018 23:14:28

Matthew Boynes 7.12K · Accepted Answer · 2012-01-31T00:42:48Z

In realtà non è troppo difficile fare quello che stai chiedendo. Dovresti impiegare circa un'ora per il primo tentativo e poi solo 10 minuti per quelli successivi.

In sostanza quello che dovrai fare è creare un plugin per TinyMCE. Ecco cosa ti servirà per iniziare:

Guida generale per creare un plugin tinymce
Codice di esempio dal Core di WordPress
Una guida generica su come aggiungere un plugin TinyMCE a WordPress. Ho trovato questa, che sembra adeguata.

Ora hai tutti gli strumenti per completare il lavoro! Di tutto questo, il codice che ti interesserà di più è questo blocco nell'esempio di WordPress:

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  }

Qui, lo shortcode per una galleria viene sostituito con un tag img. Il tag img ha la classe wp-gallery, che viene stilizzata da il CSS che trovi qui.

Aggiornamento 2016-04-06: Contenuti e link aggiornati per TinyMCE 4 e WordPress 4.4