Share
A partire dalla versione 4.0, ci sono 18 API integrate in WordPress. Sono tutti estremamente importanti per diversi aspetti di WordPress e insieme aiutano WordPress ad essere il sistema di gestione dei contenuti più flessibile al mondo.
Una di queste API è l'API QuickTags, che consente agli sviluppatori di temi e plug-in di aggiungere nuovi pulsanti alla modalità Testo (di solito chiamata la modalità HTML) dell'editor di WordPress. In questo tutorial, apprenderemo cos'è l'API QuickTags e come utilizzare l'API per creare nuovi pulsanti per l'editor HTML.
Anche se è più di questo, WordPress è comunemente usato come "sistema di gestione dei contenuti" e WordPress deve consentire agli utenti gestire il soddisfare facilmente ed efficacemente. Ecco perché WordPress viene fornito con TinyMCE, uno dei migliori editor WYSIWYG ("What You See Is What You Get") di tutti i tempi, e probabilmente l'editor di contenuti più appropriato per WordPress. TinyMCE offre agli utenti un'esperienza di modifica dei contenuti senza complicazioni, che visualizza simultaneamente il contenuto quasi come un'anteprima esatta di ciò che stanno per pubblicare.
Ma ad alcuni utenti non piace vederlo. In effetti, alcuni utenti preferirebbero vedere il codice sorgente del contenuto in modo tale da avere il controllo totale su ciò che stanno per pubblicare. O forse l'utente sarebbe sul "Visual editor" e vuole controllare e verificare il codice sorgente. È qui che entra in gioco "l'editor HTML". La modalità HTML dell'editor di WordPress visualizza il codice sorgente del contenuto e nient'altro.
Ci sono pulsanti in cima all'editor HTML, che chiamiamo "pulsanti Quicktag", e ci permettono di modificare il contenuto senza tornare all'editor visivo. Utilizzando l'API QuickTags, possiamo creare nuovi pulsanti insieme a quelli esistenti.
L'utilizzo dell'API QuickTags è molto semplice perché mentre il core quicktags.js il file ha molto di più, dovremmo (e dovremmo) usare solo una funzione: QTags.addButton ().
Se si desidera passare lo script come file separato (che è l'utilizzo consigliato), è necessario utilizzare lo snippet di codice riportato di seguito:
Ma se non hai altra scelta che stampare lo script in linea, puoi farlo con il seguente frammento di codice:
Abbastanza facile, vero? Si noti che abbiamo usato il admin_print_footer_scripts azione questa volta.
Accentsconagua
QTags.addButton () Il QTags.addButton () la funzione ha otto parametri:
QTags.addButton (id, display, arg1, arg2, access_key, titolo, priorità, istanza);
id (stringa, obbligatorio): Un ID univoco che sarà l'HTML ID valore per il pulsante Quicktag. (Tieni presente che il valore ID per ogni pulsante verrà anteposto automaticamente alla stringa 'Qt_content_'.)display (stringa, obbligatorio): Testo da visualizzare sul pulsante.arg1 (stringa o funzione, obbligatorio): Un tag iniziale da inserire o il nome di una funzione di callback.arg2 (stringa, facoltativo): Il tag finale da inserire se necessario.chiave di accesso (stringa, facoltativo): Tasto di accesso per il pulsante.titolo (stringa, facoltativo): L'HTML titolo valore per il pulsante.priorità (intero, facoltativo): Il luogo in cui andrà il tuo pulsante: da 1 a 9 per il primo posto, da 11 a 19 per il secondo, da 21 a 29 per il terzo e così via.esempio (stringa, facoltativo): Un'istanza Quicktags specifica per mostrare il pulsante solo lì, se c'è più di un'istanza di Quicktags sulla pagina. (Se questo non è impostato, il pulsante verrà aggiunto a tutte le istanze.)L'API QuickTags potrebbe sembrare spaventosa e complicata all'inizio (soprattutto se la tua conoscenza di JavaScript è debole come me), ma come vedrai in questo momento, non c'è nulla di cui preoccuparsi scrivere piccoli pezzi di codice per creare pulsanti Quicktag.
Iniziamo con qualcosa di semplice: supponiamo di aggiungere due pulsanti di shortcode: uno per prima acclude uno shortcode e uno per lo shortcode a chiusura automatica. Ecco cosa fai:
QTags.addButton ('info-box', 'info box', '[infobox]', '[/ infobox]'); Vedi com'è facile? Tutto quello che devi fare è impostare un ID, un nome di pulsante e le stringhe da stampare quando si fa clic sul pulsante. Puoi anche non imposta il secondo argomento (quarto parametro) e stampa uno shortcode auto-includente:
QTags.addButton ('firma', 'firma', '[firma]'); Questo è tutto quello che c'è da sapere sull'utilizzo di base dei pulsanti Quicktag!
Ovviamente, non tutti i pulsanti Quicktag sono ugualmente creati. Puoi creare semplici pulsanti Quicktag che racchiudono e chiudono automaticamente con facilità, ma potrebbe essere necessario creare un pulsante che necessiti di un po 'più di lavoro. Ecco dove entrano in gioco le funzioni JavaScript.
Mostreremo semplici esempi di questo, ma tocca alla tua immaginazione creare pulsanti Quicktag complicati con funzioni JavaScript.
Ora, facciamo due rapidi esempi. Il primo è il classico mettere in guardia pulsante:
QTags.addButton ('alert', 'alert', my_alert); function my_alert () alert ('Hello Quicktag!'); Come puoi immaginare, compare "Hello Quicktag!" Messaggio. Ora facciamo qualcosa con un prompt:
QTags.addButton ('my_prompt', 'alert', my_prompt); function my_prompt () var my_class = prompt ('Enter a class name:', "); if (my_class) QTags.insertContent (''); Questo è un po 'più complicato: ti chiede di digitare un nome di classe e di stampare un div con la classe che hai specificato.
Come ho detto prima, l'API sembra un po 'intimidatoria. Ma come puoi vedere, usarlo è piuttosto semplice, anche quando lo usi per attivare le funzioni di callback. La modalità HTML ha alcuni utenti molto dedicati e apprezzerebbero molto se inserissi un pulsante o due quando sviluppi un tema o un plugin.
Qual è la tua opinione sull'API Quicktags? Prenderesti in considerazione l'idea di utilizzarlo o hai qualcos'altro da aggiungere a questo tutorial? Dicci cosa ne pensi commentando di seguito. E se ti è piaciuto l'articolo, non dimenticare di condividerlo con i tuoi amici!
