Share
Cu ceva timp în urmă, am avut un tutorial care arată modul de integrare a aplicației WordPress Media Uploader în Opțiuni Temă și Plugin. Bazându-ne pe această idee, vom dezvolta o altă versiune a acesteia schimbând ceva în JavaScript (în esență, codul PHP de bază este aproape același cu cel vechi). Pe scurt, vom beneficia de avantajele jQuery pentru a crea un plugin jQuery mic pentru a ne îndeplini scopul.
Vom crea o mostră de opțiuni care conține două câmpuri de formular: Logo și Favicon. Presupunând că fiecare dintre ele are 3 componente: un câmp de text pentru introducerea adresei URL a unei imagini, un buton pentru afișarea pop-up-ului WP Media Uploader și un câmp de previzualizare care afișează imaginea selectată în prezent.
În directorul temă, creați două fișiere numite wptuts.php și wptuts-upload.js. Apoi deschideți functions.php în același director și adăugați următorul cod:
Accentsconagua
cere ('wptuts.php'); Mai întâi, ar trebui să setăm opțiunile implicite pentru pagina noastră de opțiuni. Intenționăm să grupăm toate setările într-o singură opțiune, wptuts_options, în acest caz. Iată conținutul wptuts.php:
add_action ('after_setup_theme', 'wptuts_default_options'); funcția wptuts_default_options () // Verificați dacă 'wptuts_options' există sau nu // Dacă nu, creați unul nou. dacă get_option ('wptuts_options')) $ opțiuni = array ('logo' => ',' favicon '=> ";); update_option ('wptuts_options', $ opțiuni); wptuts_default_options funcția va fi executată imediat după instalarea temei.
Apoi, avem nevoie de o pagină de opțiuni în care câmpurile de formular sunt afișate. Această postare nu se va concentra adânc pe API-ul Setări, presupunem că o înțelegeți. Dacă nu sunteți familiarizat cu API-ul Setări, vă recomandăm să vă referiți la alte postări despre acesta, cum ar fi Ghidul complet la API-ul Setări WordPress, de exemplu.
add_action ('admin_menu', 'wptuts_add_page'); funcția wptuts_add_page () $ wptuts_options_page = add_menu_page ('wptuts', 'Opțiuni WPTuts', 'manage_options', 'wptuts', 'wptuts_options_page'); add_action ('admin_print_scripts-'. $ wptuts_options_page, 'wptuts_print_scripts'); funcția wptuts_options_page () ?> Opțiuni WPTuts + Opțiuni
Setari Salvate.
--> Codul de mai sus adaugă o nouă pagină de meniu care are un titlu de meniu care citește Opțiunile WPTuts și valoarea ghiveciului wptuts. Rețineți apelul funcțional wptuts_options_page, acesta va face conținutul paginii noastre de opțiuni. În afară de aceasta, adăugăm și o funcție numită wptuts_print_scripts care încorporează JavaScript și foaia de stil pe cârligul paginii noastre de opțiuni, această funcție va fi menționată mai târziu.
add_action ('admin_init', 'wptuts_add_options'); funcția wptuts_add_options () // Înregistrați noi opțiuni register_setting ('wptuts_options', 'wptuts_options', 'wptuts_options_validate'); add_settings_section ('wptuts_section', 'WPTuts + Opțiuni secțiune', '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'); funcția wptuts_options_validate (valori $) foreach (valori $ ca $ n => $ v) $ valori [$ n] = esc_url ($ v); returneaza valorile $; Rețineți opțiunea numită wptuts_options? Acum, de fapt, îl înregistrăm în API-ul Setări. Valoarea prezentată va fi validată de funcție wptuts_options_validate. Codul de mai sus înregistrează și o nouă secțiune care conține opțiunile noi de setare. Cele trei funcții care urmează vor face conținutul secțiunii și setărilor nou create:
funcția wptuts_section_callback () / * Nu scrie nimic * /; funcția wptuts_logo_callback () $ options = get_option ('wptuts_options'); ?> „/> 
"/> „/> „/> --> Vedeți că fiecare setare are trei componente principale pe care le-am planificat mai sus? Câmpul text are valoarea din clasă text-încărcare, Buton-încărcare pentru butonul și valoarea preview-încărcare pentru câmpul de previzualizare rămas. Am părăsit corpul wptuts_section_callback gol pentru că nu este nevoie să imprimați informații suplimentare, doar să imprimați toate setările. Alte clase pe care nu le menționăm sunt clasele încorporate în WordPress, le folosim pentru un UI mai bun.
În cele din urmă, după cum am spus mai devreme, trebuie să încorporăm câteva importante scripturi încorporate, inclusiv thickbox și Incarcarea media:
"/> funcția wptuts_print_scripts () wp_enqueue_style ('thickbox'); // foaia de stil utilizată de 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 ')); Ultima linie din funcția de mai sus ne va încorpora wptuts-upload.js fișierul (este încă gol până acum) pe care l-am creat înainte. Codul nostru JavaScript va fi scris aici, așa că deschideți-l și mergeți la secțiunea următoare.
În wptuts-upload.js fișierul, primul lucru pe care trebuie să-l facem este să inițializăm baza noului plugin:
(funcția ($) $ (funcția () $ .fn.wptuts = funcția (opțiuni) var selector = $ (this) .selector; // obține selectorul // setați opțiunile implicite var defaults = : ".preview-upload", "text": ".text-upload", "buton": ".button-upload"; var options = $ .extend (default) ));
Tocmai am creat un plugin jQuery numit wptuts. selector indică faptul că elementul sau obiectul HTML pe care pluginul îl va afecta. De exemplu, dacă scriem JavaScript în felul următor:
$ (".ceva") .wptuts (); Apoi selectorul va fi elementul HTML cu ceva clasă. De obicei, trecem pachetul HTML, pluginul jQuery va manipula apoi componentele copilului său. Aruncati o privire la cele doua setari create, fiecare dintre ele are un impachet al carui nume de clasa este încărcați. Deci, în mai târziu, vom face acest lucru:
$ ('.upload') .wptuts (); // Transmiteți tot elementul HTML cu valoarea de încărcare a clasei în pluginul jQuery. implicite variabila conține toate opțiunile implicite pentru plugin-ul nostru. Definim trei proprietati implicite ale caror nume indica elementele la care se refera iar valorile lor sunt selectorul HTML, aceste valori ghideaza plugin-ul nostru si determina care selectorElementul copilului sunt câmpul Text, Buton sau Câmpul de examinare. Desigur, aceste opțiuni pot fi înlocuite cu opțiunile utilizatorului (dacă sunt setate). Opțiuni este variabila care pastreaza optiunile utilizatorului. În cele din urmă, fuzionăm două tipuri de opțiuni într-o variabilă numită Opțiuni.
Apoi, trebuie să adăugăm un handler de evenimente la elementul de buton:
$ .fn.wptuts = funcție (opțiuni) var selector = $ (acest) .selector; // Obțineți selectorul // Setați opțiunile implicite var defaults = 'preview': '.preview-upload', 'text': '.text-upload', 'button': '.button-upload'; var opțiuni = $ .extend (implicite, opțiuni); // Când butonul este apăsat ... $ (options.button) .click (funcția () // Obține elementul Text. Var text = $ (this) .siblings (options.text); // Afișează popup-ul WP Media Uploader tb_show ('Încărcați un logo', 'media-upload.php? referer = wptuts & type = imagine & TB_iframe = true & post_id = 0', false); la fereastra window.send_to_editor = funcția (html) // Obțineți adresa URL a imaginii noi var src = $ ('img', html) .attr ('src'); // Trimiteți această valoare câmpului Text. ("valoare", src) .trigger ("schimba"); tb_remove (); // apoi închide fereastra pop-up return false;); Atunci când se face clic pe un buton, jQuery declanșează un handler de evenimente pentru clicuri. Mai jos este fluxul acestei funcții de eveniment:
frate metoda cu valoarea de clasă a câmpului text ca argument.send_to_editor funcţie. Această funcție globală a fost definită inițial de WP Media Uploader, sarcina sa principală fiind plasarea unui pointer la care este trimis noul element de imagine HTML (dacă introduceți o imagine din fereastra pop-up). Apoi, vom analiza valoarea permalink a elementului de imagine HTML și îl vom păstra în src variabil.tb_remove funcția, declanșăm un eveniment numit Schimbare la elementul de câmp text care este definit mai jos. $ (optiuni.text) .bind ('change', function () // Obtineti valoarea obiectului curent var url = this.value; // Determinati campul Preview var preview = $ (this) .siblings (optiuni. preview); // Legați valoarea în câmpul Preview (previzualizare) .attr ('src', url);); Dacă câmpul Text are o valoare nouă, această valoare va fi legată instantaneu de câmpul Previzualizare pentru afișarea imaginii nou selectate. JavaScript-ul final care creează plugin-ul va fi:
(funcția ($) $ (funcția () $ .fn.wptuts = funcția (opțiuni) var selector = $ (this) .selector; // obține selectorul // setați opțiunile implicite var defaults = : ".preview-upload", "text": ".text-upload", "buton": ".button-upload"; var options = $ .extend (default) ... $ (optiuni.button) .click (function () // Obtine elementul Text. Var text = $ (this) .siblings (options.text); // Afiseaza WP Media Uploader popup tb_show , 'media-upload.php? referer = wptuts & type = image & TB_iframe = true & post_id = 0', false); // redefinirea functiei globale 'send_to_editor' // Definirea unde noua valoare va fi trimisa la window.send_to_editor = html) // Obțineți adresa URL a imaginii noi var src = $ ('img', html) .attr ('src'); // Trimiteți această valoare câmpului Text.attr ('value', src) .trigger ('change'); tb_remove (); // Apoi închide fereastra pop-up return false;); $ (options.text) .bind ue al obiectului curent var url = this.value; // Determinați câmpul Previzualizare var preview = $ (this) .siblings (options.preview); // Legați valoarea în câmpul Preview (preview) .attr ('src', url); ); // Utilizarea $ ('.upload') .wptuts (); // Utilizați opțiunea implicită. ); (jQuery)); Pluginul nostru jQuery este gata de utilizare. La sfârșitul fragmentelor de cod de mai sus (locul pe care l-am comentat), trebuie doar să adăugați acest cod simplu:
// Utilizarea $ ('.upload') .wptuts (); // Utilizați opțiunea implicită. Modul complet de utilizare a acestui plugin este:
$ (selector) .wptuts ('previzualizare': / * Selectorul de previzualizare * /, 'text': / * Selectorul textului * /, 'butonul': / * Selectorul butonului * /); Tot ce ai nevoie este să îți completezi corect selectorii (în funcție de structura HTML).
Pentru a obține valoarea URL-ului acestor imagini, trebuie doar să faceți acest lucru:
$ wptuts_options = get_option ('wptuts_options'); $ wptuts_logo = $ wptuts_options ['logo']; // Siglă $ wptuts_favicon = $ wptuts_options ['favicon']; // Favicon Pur și simplu adăugați următorul cod în orice fișier șablon pe care doriți să afișați logo-ul. Încercați să o adăugați footer.php, de exemplu:
