Share
Uno dei motivi principali per cui WordPress è la piattaforma CMS più diffusa disponibile è il livello di personalizzazione che porta alla tavola. Oggi esamineremo il processo di integrazione di una di quelle funzionalità popolari, shortcode, nel modo più intuitivo possibile, nel nostro tema.
Anche se ci sono alcune migliaia di miliardi di opzioni tra cui scegliere, WordPress ha consacrato la corona come il re dei CMS e delle piattaforme di blogging con la sua incredibile flessibilità. Uno shortcode è una di quelle caratteristiche che aumentano la facilità d'uso del sistema.
Tuttavia, la maggior parte delle implementazioni richiede ancora di ricordare lo shortcode stesso. Quando hai creato un capolavoro di un tema, l'usabilità non dovrebbe restare indietro. Ti mostrerò come creare shortcode e quindi integrarlo con l'editor stesso, quindi l'utente non deve sottoporsi a dei documenti semplicemente per ricordare la sintassi corretta per incorporare un pulsante. Incuriosito? Iniziamo subito!
Si chiama a codice corto ed è stato parte dell'installazione di base di WordPress da quando ha colpito la versione 2.5. Fondamentalmente, questi sono simili al BBCodes utilizzato su un popolare software di message board: markup leggero usato per formattare il contenuto.
Qui puoi definire i tuoi codici da utilizzare all'interno del tema. A differenza dei BBCode, tuttavia, gli shortcode vengono principalmente utilizzati per proteggere l'utente da marcature noiose e possibili errori. Usando uno shortcode, per esempio un pulsante, l'utente non deve ricordare la marcatura complicata che deve essere inserita per creare il pulsante. Nel complesso, è piuttosto una spinta per l'usabilità di un tema e, possibilmente, per amicizia.
Se non hai familiarità con il concetto di un BBCode, e per estensione, shortcode, ecco come appare la versione più semplice:
[My-gallery]
Se hai mai incorporato una galleria con WordPress, hai già utilizzato uno shortcode!
Ci sono altre due varianti con le quali dovresti anche familiarizzare.
[pulsante] Contenuto [/ pulsante] [collegamento a = "www.net.tutsplus.com"] NetTuts + [/ link]
Implementeremo ciascuna di queste variazioni prima di passare ad altre cose più impegnative.
Ogni implementazione di shortcode richiede un processo in due fasi:
Indipendentemente dalla complessità dello shortcode, i passaggi principali rimangono gli stessi.
In primo luogo impareremo come implementare lo shortcode più semplice possibile. Come caso d'uso, diciamo che termina ogni post con un testo di firma comune. Copiare e incollare potrebbe essere un approccio semplice, ma potresti sentirti un luddite. Risolviamo questo problema con una certa rapidità del WP!
Salvo diversa indicazione, tutto il codice qui sotto va in functions.php
La funzione primaria si occupa della logica di base del tuo shortcode. Dovremo creare questo prima prima di procedere.
function signOffText () return 'Grazie mille per aver letto! E ricorda di iscriverti al nostro feed RSS. ';
Il prossimo passo, come si può supporre, è quello di collegare il sistema WordPress per associare lo shortcode a questo testo. Questo è fatto usando il add_shortcode metodo.
Accentsconagua
add_shortcode ('signoff', 'signOffText'); Sì, basta una sola fodera. Il primo parametro definisce lo shortcode che userete nell'editor, mentre il secondo indica la funzione che abbiamo creato un momento fa.
Nota: Il add_shortcode il metodo viene sempre dopo il metodo del gestore.
Questo dovrebbe farlo. Basta digitare [cancella la sottoscrizione] nel tuo editor e WordPress sostituirà il testo in modo dinamico secondo necessità.
In seguito, daremo un'occhiata a un'altra variante: avvolgere alcuni contenuti con alcuni markup. Dovresti usarlo in questo modo:
[quote] Alcuni testi [/ quote]
La funzione primaria deve essere leggermente modificata qui. Stiamo notando che la nostra funzione riceve due parametri: attributi attraverso il atts variabile e il contenuto stesso attraverso il soddisfare variabile.
Il prossimo passo è semplicemente quello di restituire la marcatura avvolta attorno al testo selezionato.
citazione di funzione ($ atts, $ content = null) return '" '$ Content.'"';
Questo passaggio rimane lo stesso:
add_shortcode ("quote", "quota"); Mi piace chiamare i miei shortcode esattamente come le funzioni primarie a meno che la denominazione non sia pesante. Puoi avere i tuoi stili quindi sentiti libero di cambiare lo schema di denominazione. Non ci sono buone pratiche accettate.
Infine, daremo un'occhiata all'aggiunta di attributi al mix. Dovresti usarlo in questo modo:
[link a = "www.net.tutsplus.com"] NetTuts + [/ link]
La funzione primaria deve essere rifattorizzata per gestire tutte le nuove funzionalità che stiamo introducendo. Per prima cosa, uniamo gli attributi passati con lo shortcode e gli attributi che ci aspettiamo. Puoi leggere di più sul processo qui.
Il passo finale, come sempre, è semplicemente quello di restituire il markup che vogliamo dopo averlo riempito in modo appropriato. Qui, ho usato i dati inviati con lo shortcode per riempire l'ancora href attributo e contenuto.
collegamento funzione ($ atts, $ content = null) extract (shortcode_atts (array ("a" => 'http://net.tutsplus.com'), $ atts)); return ''. $ content. ''; Questo passaggio rimane invariato, ma essenziale. Ricorda, senza questo, WordPress non ha nulla a che fare con lo shortcode.
add_shortcode ("link", "link"); Questo è dove ti aspetteresti che questo tutorial finisca ma no, hai indovinato. Come ho detto prima, i codici brevi portano via molto dolore, ma ci sono alcuni trucchi. Per uno, l'utente deve ricordare gli shortcode che ha a sua disposizione per utilizzarli in modo significativo.
Se hai solo una coppia, va tutto bene, ma con temi ricchi di funzionalità, ricordando che ognuno diventa un lavoro ingrato. Per ovviare a questo, aggiungeremo pulsanti direttamente all'interfaccia di TinyMCE, quindi l'utente può semplicemente fare clic sul pulsante per fare tutto.
Ad esempio, ti insegnerò come aggiungere la seconda variante all'editor. Spero che tu possa estrapolare queste informazioni per la funzionalità specifica che hai in mente.
Il primo passo del processo è l'aggancio in WordPress e l'aggiunta del nostro codice di inizializzazione. Il seguente frammento si prende cura di questo. Ricorda, tutto questo deve essere nel tuo functions.php file.
add_action ('init', 'add_button'); Stiamo chiedendo a WordPress di eseguire la funzione chiamata ADD_BUTTON quando la pagina viene inizialmente caricata. add_action è il nostro gancio negli interni di WordPress.
function add_button () if (current_user_can ('edit_posts') && current_user_can ('edit_pages')) add_filter ('mce_external_plugins', 'add_plugin'); add_filter ('mce_buttons', 'register_button'); Questo piccolo snippet di codice verrà eseguito quando la pagina viene caricata. In alto, stiamo controllando se l'utente ha l'autorizzazione necessaria per modificare una pagina o un post prima di procedere.
Una volta fatto, colleghiamo due delle nostre funzioni [da scrivere] a filtri specifici. Entrambe queste funzionalità si collegano all'architettura front-end di TinyMCE tramite WordPress. Il primo viene eseguito quando l'editor carica i plugin mentre il secondo viene eseguito quando i pulsanti stanno per essere caricati.
Nell'esempio sopra, procediamo indipendentemente dalla modalità in cui si trova l'editor. Se vuoi visualizzarlo solo quando l'editor è, ad esempio, in modalità visiva, devi eseguire un controllo rapido. Se get_user_option ( 'rich_editing') valuta a vero, sei in modalità visuale. Altrimenti, modalità HTML. Solitamente tendo ad aggiungere questi pulsanti solo in modalità visiva, ma mi sento libero di mischiarli e abbinarli qui.
function register_button ($ buttons) array_push ($ buttons, "quote"); ritorno $ pulsanti;
La funzione semplicemente aggiunge il nostro shortcode alla matrice di pulsanti. Puoi anche aggiungere un divisore tra il tuo nuovo pulsante e i pulsanti precedenti passando in un | prima.
function add_plugin ($ plugin_array) $ plugin_array ['quote'] = get_bloginfo ('template_url'). '/ js / customcodes.js'; return $ plugin_array; Lo snippet in alto consente a TinyMCE e WordPress di sapere come gestire questo pulsante. Qui, mappiamo il nostro citazione shortcode a un file JavaScript specifico. Noi usiamo il get_bloginfo metodo per ottenere il percorso del modello corrente. Per il bene dell'organizzazione, sto mantenendo il mio piccolo plugin MCE insieme agli altri miei file JS.
Ora nella parte finale del nostro sforzo. Ricorda, il seguente codice va in un file chiamato customcodes.js inserito nella directory JS del tuo tema. Se pensavi che fosse successo functions.php come tutto il codice sopra, nessun cookie per te!
(function () tinymce.create ('tinymce.plugins.quote', init: function (ed, url) ed.addButton ('quote', title: 'Aggiungi un preventivo', immagine: url + '/ image .png ', onclick: function () ed.selection.setContent (' [quote] '+ ed.selection.getContent () +' [/ quote] '););, createControl: function (n, cm) return null;,); tinymce.PluginManager.add ('quote', tinymce.plugins.quote);) (); Sembra un po 'complesso ma ti assicuro, è tutto tranne. Scopriamolo in una sezione più piccola per semplificarci l'analisi.
Primo l'ordine del giorno è una chiusura rapida per evitare di inquinare lo spazio dei nomi globale. Dentro, chiamiamo il creare metodo per creare un nuovo plugin passando il nome e altri attributi assortiti. Per brevità, chiamerò il mio plugin citazione.
Una volta dentro, definiamo il dentro funzione che viene eseguita al momento dell'inizializzazione. Ed punta all'istanza dell'editor mentre url punta all'URL del codice del plugin.
La maggior parte degli attributi dovrebbe essere abbastanza auto-esplicativa. Nota che l'immagine che passi è relativa alla cartella principale del file JS che contiene il codice. Qui sarebbe directory tematica / js.
Il prossimo su, creiamo il gestore di eventi per questo pulsante attraverso il al clic funzione. Il one-liner che contiene in pratica ottiene il testo selezionato, se esiste, e lo avvolge con un shortcode. setContent e getContent sono metodi di supporto forniti da tinyMCE per manipolare il testo selezionato.
Finalmente, nell'ultima riga, aggiungiamo il plugin appena creato al plugin manager di tinyMCE. Presta attenzione ai nomi che stai utilizzando in ogni passaggio. È soggetto a errori se non stai prestando attenzione. E questo è tutto! Sono stati fatti! Carica l'editor e assicurati che il tuo nuovo pulsante spiffy funzioni.
E il gioco è fatto. Abbiamo integrato con successo gli shortcode in un tema WordPress in modo molto intuitivo. Spero che tu abbia trovato questo tutorial come aiuto. Sentiti libero di riutilizzare questo codice altrove nei tuoi progetti e inserire i commenti nei commenti se hai bisogno di assistenza.
Domande? Belle cose da dire? Critiche? Colpisci la sezione dei commenti e lasciami un commento. Felice codifica e grazie mille per la lettura!
