Share
Qualche tempo fa, abbiamo avuto un tutorial che mostra come integrare l'Uploader dei media di WordPress nelle opzioni Tema e Plugin. Sulla base di questa idea, svilupperemo un'altra versione modificando qualcosa in JavaScript (in pratica, il codice PHP di base è quasi uguale a quello precedente). In breve, trarremo vantaggio da jQuery per creare un piccolo plugin jQuery che soddisfi invece il nostro scopo.
Creeremo una pagina Opzioni di esempio che contiene due campi modulo: Logo e Favicon. Supponendo che ognuno di essi abbia 3 componenti, tra cui: un campo di testo per l'inserimento dell'URL di un'immagine, un pulsante per visualizzare il popup di Uploader di WP Media e un campo di anteprima che mostra l'immagine attualmente selezionata.
Nella tua directory dei temi, crea due file chiamati wptuts.php e wptuts-upload.js. Quindi apri il functions.php nella stessa directory e aggiungi il seguente codice:
Accentsconagua
require ('wptuts.php'); Prima di tutto, dovremmo impostare le opzioni predefinite per la nostra pagina Opzioni. Intendiamo raggruppare tutte le impostazioni in un'unica opzione, wptuts_options, in questo caso. Ecco il contenuto di wptuts.php:
add_action ('after_setup_theme', 'wptuts_default_options'); function wptuts_default_options () // Verifica se esistono o meno "opzioni_opzioni" // In caso contrario, creane una nuova. if (! get_option ('wptuts_options')) $ options = array ('logo' => ", 'favicon' =>",); update_option ('wptuts_options', $ options); Il wptuts_default_options la funzione verrà eseguita subito dopo l'installazione del tema.
Quindi, abbiamo bisogno di una pagina Opzioni in cui vengono visualizzati i nostri campi modulo. Questo post non si concentrerà in modo approfondito sull'API delle impostazioni, assumiamo che tu capisca. Se non hai familiarità con l'API delle impostazioni, ti consiglio di fare riferimento ad altri post su di esso, come la Guida completa all'API impostazioni di WordPress, ad esempio.
add_action ('admin_menu', 'wptuts_add_page'); function wptuts_add_page () $ wptuts_options_page = add_menu_page ('wptuts', 'WPTuts Options', 'manage_options', 'wptuts', 'wptuts_options_page'); add_action ('admin_print_scripts-'. $ wptuts_options_page, 'wptuts_print_scripts'); function wptuts_options_page () ?> WPTuts + Opzioni Pagina
Impostazioni salvate.
--> Il codice sopra aggiunge semplicemente una nuova pagina di menu che ha un titolo di menu che legge Opzioni WPTuts e il valore di lumaca di wptuts. Notare la funzione callback wptuts_options_page, renderà il contenuto della nostra pagina delle opzioni. Oltre a ciò, aggiungiamo anche una funzione chiamata wptuts_print_scripts che accoda JavaScript e foglio di stile sul gancio della nostra pagina delle opzioni, questa funzione verrà menzionata in seguito.
add_action ('admin_init', 'wptuts_add_options'); function wptuts_add_options () // Registra nuove opzioni register_setting ('wptuts_options', 'wptuts_options', 'wptuts_options_validate'); add_settings_section ('wptuts_section', 'WPTuts + Opzioni Section', 'wptuts_section_callback', 'wptuts'); add_settings_field ('wptuts_logo', 'WPTuts + Logo', 'wptuts_logo_callback', 'wptuts', 'wptuts_section'); add_settings_field ('wptuts_favicon', 'WPTuts + Favicon', 'wptuts_favicon_callback', 'wptuts', 'wptuts_section'); function wptuts_options_validate ($ values) foreach ($ valori as $ n => $ v) $ valori [$ n] = esc_url ($ v); restituire $ valori; Ricorda l'opzione chiamata wptuts_options? Ora lo registriamo effettivamente all'API delle impostazioni. Il valore inviato verrà convalidato dalla funzione wptuts_options_validate. Il codice sopra registra anche una nuova sezione che contiene le nostre nuove opzioni di impostazione. Le tre funzioni seguenti renderanno il contenuto della sezione e delle impostazioni appena create:
function wptuts_section_callback () / * Stampa nulla * /; function wptuts_logo_callback () $ options = get_option ('wptuts_options'); ?> "/> 
"/> "/> "/> --> Vedete che ogni impostazione ha tre componenti principali che abbiamo progettato sopra? Il campo di testo ha il valore della classe di text-upload, Pulsante-upload per il pulsante e il valore di Anteprima-upload per il campo di anteprima rimanente. Abbiamo lasciato il corpo di wptuts_section_callback vuoto perché non abbiamo bisogno di stampare alcuna informazione aggiuntiva, basta stampare tutte le sue impostazioni. Altre classi che non menzioniamo sono le classi incorporate di WordPress, le usiamo per migliorare l'interfaccia utente.
Infine, come detto in precedenza, dobbiamo incorporare alcuni script incorporati importanti inclusi thickbox e Caricamento dei media:
"/> function wptuts_print_scripts () wp_enqueue_style ('thickbox'); // Foglio di stile utilizzato da Thickbox wp_enqueue_script ('thickbox'); wp_enqueue_script ('media-upload'); wp_enqueue_script ('wptuts-upload', get_template_directory_uri (). '/wptuts-upload.js', array ('thickbox', 'media-upload')); L'ultima riga nella funzione sopra incorporerà il nostro wptuts-upload.js file (è ancora vuoto finora) che abbiamo creato prima. Tutto il nostro codice JavaScript verrà scritto qui, quindi aprilo e vai alla sezione successiva.
Nel wptuts-upload.js file, la prima cosa che dobbiamo fare è inizializzare la base del nuovo plugin:
(function ($) $ (function () $ .fn.wptuts = function (options) var selector = $ (this) .selector; // Ottieni il selettore // Imposta le opzioni predefinite var defaults = 'preview' : '.preview-upload', 'text': '.text-upload', 'button': '.button-upload'; var options = $ .extend (defaults, options);); (jQuery ));
Abbiamo appena creato un plugin jQuery chiamato wptuts. Il selettore indica l'elemento HTML o l'oggetto su cui il plugin avrà effetto. Ad esempio, se scriviamo JavaScript come questo:
$ ('.qualcosa') .wptuts (); Quindi il selettore sarà l'elemento HTML con il qualcosa classe. Di solito passiamo il wrapper HTML, il plugin jQuery manipolerà quindi i suoi componenti figlio. Dai un'occhiata alle nostre due impostazioni create, ognuna di esse ha un wrapper di cui è il nome della classe caricare. Quindi, in seguito, lo faremo:
$ ('.upload') .wptuts (); // Passa tutti gli elementi HTML con il valore della classe di 'upload' al plugin jQuery. Il default variabile contiene tutte le opzioni predefinite per il nostro plugin. Definiamo tre proprietà predefinite il cui nome indica gli elementi a cui si riferiscono e i loro valori sono il selettore HTML, questi valori guidano il nostro plugin e determinano quali selettoreL'elemento figlio è il campo Testo, Pulsante o Anteprima. Naturalmente, queste opzioni possono essere sostituite dalle opzioni dell'utente (se sono impostate). Il opzioni è la variabile che contiene le opzioni dell'utente. Infine, uniamo due tipi di opzioni in una variabile denominata opzioni.
Successivamente, dobbiamo aggiungere un gestore di eventi all'elemento button:
$ .fn.wptuts = function (options) var selector = $ (this) .selector; // Ottieni il selettore // Imposta le opzioni predefinite var defaults = 'preview': '.preview-upload', 'text': '.text-upload', 'button': '.button-upload'; var options = $ .extend (defaults, options); // Quando si fa clic sul pulsante ... $ (options.button) .click (function () // Ottieni l'elemento Text. Var text = $ (this) .siblings (options.text); // Mostra il popup di WP Media Uploader tb_show ('Carica un logo', 'media-upload.php? referer = wptuts & type = image & TB_iframe = true & post_id = 0', false); // ridefinisci la funzione globale 'send_to_editor' // Definisci dove verrà inviato il nuovo valore to window.send_to_editor = function (html) // Ottieni l'URL della nuova immagine var src = $ ('img', html) .attr ('src'); // Invia questo valore al campo Testo. ('value', src) .trigger ('change'); tb_remove (); // Quindi chiudi la finestra popup return false;); Quando viene cliccato un pulsante, jQuery attiva un gestore di eventi click. Di seguito è riportato il flusso di questa funzione evento:
fratello metodo con il valore della classe del campo di testo come argomento.send_to_editor funzione. Questa funzione globale è stata originariamente definita da WP Media Uploader, il suo compito principale è quello di posizionare un puntatore a cui viene inviato il nuovo elemento immagine HTML (se l'utente inserisce un'immagine dalla finestra popup). Successivamente, analizzeremo il valore del permalink dell'elemento immagine HTML e lo memorizzeremo nel file src variabile.tb_remove funzione, attiviamo un evento chiamato modificare all'elemento del campo Testo che è definito sotto. $ (options.text) .bind ('change', function () // Ottieni il valore dell'oggetto corrente var url = this.value; // Determina il campo Preview var preview = $ (this) .siblings (options. anteprima); // Associa il valore al campo Anteprima $ (anteprima) .attr ('src', url);); Se il campo Testo ha un nuovo valore, questo valore sarà immediatamente associato al campo Anteprima per visualizzare l'immagine appena selezionata. L'ultimo JavaScript che crea il plugin sarà:
(function ($) $ (function () $ .fn.wptuts = function (options) var selector = $ (this) .selector; // Ottieni il selettore // Imposta le opzioni predefinite var defaults = 'preview' : '.preview-upload', 'text': '.text-upload', 'button': '.button-upload'; var options = $ .extend (defaults, options); // Quando si fa clic sul pulsante ... $ (options.button) .click (function () // Ottieni l'elemento Text. Var text = $ (this) .siblings (options.text); // Mostra il popup di WP Media Uploader tb_show ('Carica un logo' , 'media-upload.php? referer = wptuts & type = image & TB_iframe = true & post_id = 0', false); // ridefinisce la funzione globale 'send_to_editor' // Definisce dove verrà inviato il nuovo valore a window.send_to_editor = function ( html) // Ottieni l'URL della nuova immagine var src = $ ('img', html) .attr ('src'); // Invia questo valore al campo Testo. text.attr ('value', src) .trigger ('change'); tb_remove (); // Quindi chiudi la finestra popup return false;); $ (options.text) .bind ('change', function () // Ottieni la val ue dell'oggetto attuale var url = this.value; // Determina il campo Anteprima var preview = $ (this) .siblings (options.preview); // Associa il valore al campo Anteprima $ (anteprima) .attr ('src', url); ); // Usage $ ('.upload') .wptuts (); // Usa come opzione predefinita. ); (jQuery)); Il nostro plugin jQuery è pronto per essere utilizzato. Nella parte finale dei frammenti di codice sopra (il posto in cui abbiamo commentato), basta aggiungere questo semplice codice:
// Usage $ ('.upload') .wptuts (); // Usa come opzione predefinita. Il modo completo di usare questo plugin è:
$ (selettore) .wptuts ('anteprima': / * Selettore anteprima * /, 'testo': / * Selettore testo * /, 'pulsante': / * Selettore pulsanti * /); Tutto ciò che serve è compilare correttamente i selettori (in base alla struttura HTML).
Per ottenere il valore dell'URL di queste immagini, procedi nel seguente modo:
$ wptuts_options = get_option ('wptuts_options'); $ wptuts_logo = $ wptuts_options ['logo']; // Logo $ wptuts_favicon = $ wptuts_options ['favicon']; // Favicon Basta aggiungere il seguente codice in qualsiasi file di modello che si desidera mostrare il logo. Prova ad aggiungerlo a footer.php, per esempio:
">; ?> "<?php bloginfo( 'name' ); ?>")
Nel wptuts.php, aggiungi questo codice:
function wptuts_add_favicon () $ wptuts_options = get_option ('wptuts_options'); $ wptuts_favicon = $ wptuts_options ['favicon']; ?> --> Questo è solo un semplice plugin, ti darà la possibilità di integrare WP Media Uploader molto più facilmente e con maggiore flessibilità. Non è necessario ripetere molto codice JavaScript per ciascun input di caricamento del modulo nel caso in cui si debbano integrare molti input di upload con WP Media Uploader. Spero ti piaccia. Qualsiasi feedback sarebbe apprezzato.
Puoi scaricare il codice sorgente nella parte superiore di questo post o trovarlo su Github.
