Share
För en tid sedan hade vi en handledning som visar hur man integrerar WordPress Media Uploader i temat och pluginalternativ. Baserat på den här tanken utvecklar vi en annan version av det genom att ändra något i JavaScript (i princip är kärnan PHP-koden nästan densamma som den gamla). Kortfattat kommer vi att utnyttja jQuery för att skapa ett litet jQuery-plugin för att uppfylla vår avsikt istället.
Vi kommer att skapa ett samlingsalternativssida som innehåller två formulärfält: Logo och Favicon. Om man antar att var och en av dem har 3 komponenter, inklusive: ett textfält för inmatning av en bilds URL, en knapp för att visa popupen WP Media Uploader och ett förhandsgranskningsfält som visar den aktuella valda bilden.
Skapa två filer med namnet i din temakatalog wptuts.php och wptuts-upload.js. Öppna sedan functions.php i samma katalog och lägg till följande kod:
Accentsconagua
kräver ('wptuts.php'); Först av allt bör vi ange standardalternativ för vår sida för alternativ. Vi avser att gruppera alla inställningar till ett enda alternativ, wptuts_options, I detta fall. Här är innehållet i wptuts.php:
add_action ('after_setup_theme', 'wptuts_default_options'); funktion wptuts_default_options () // Kontrollera om "wptuts_options" finns // Om inte, skapa en ny. om (! get_option ('wptuts_options')) $ options = array ('logo' => ", 'favicon' =>",); update_option ('wptuts_options', $ options); De wptuts_default_options funktionen kommer att utföras strax efter temaets installation.
Då behöver vi en Options-sida där våra formulärfält visas. Det här inlägget kommer inte att fokusera djupt på inställnings API, vi antar att du förstår det. Om du inte är bekant med inställnings API, rekommenderar jag att du hänvisar till andra inlägg om det, till exempel The Complete Guide till WordPress Settings API, till exempel.
add_action ('admin_menu', 'wptuts_add_page'); funktion 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'); funktion wptuts_options_page () ?> WPTuts + Alternativsida
Inställningar Sparade.
--> Koden ovan lägger helt enkelt till en ny menysida som har en menettitel som läser Alternativ för WPTuts och slugvärdet av wptuts. Notera funktionen återuppringning wptuts_options_page, Det kommer att göra innehållet på vår options sida. Utöver det lägger vi också till en funktion som heter wptuts_print_scripts som kodar JavaScript och stilarket på vår options sida krok, kommer denna funktion att nämnas senare.
add_action ('admin_init', 'wptuts_add_options'); funktion wptuts_add_options () // Registrera nya alternativ register_setting ('wptuts_options', 'wptuts_options', 'wptuts_options_validate'); add_settings_section ('wptuts_section', 'WPTuts + Options 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'); funktion wptuts_options_validate ($ values) foreach ($ värden som $ n => $ v) $ värden [$ n] = esc_url ($ v); returnera $ värden; Kom ihåg det alternativ som heter wptuts_options? Nu registrerar vi det faktiskt till inställnings API. Det inlämnade värdet valideras av funktionen wptuts_options_validate. Koden ovan registrerar också en ny sektion som innehåller våra nya inställningsalternativ. De tre funktionerna som följer kommer att göra innehållet i den nyskapade sektionen och inställningarna:
funktion wptuts_section_callback () / * Skriv ut ingenting * /; funktion wptuts_logo_callback () $ options = get_option ('wptuts_options'); ?> "/> 
"/> "/> "/> --> Ser du att varje inställning har tre huvudkomponenter som vi planerade ovan? Textfältet har klassens värde av text-upload, knapp-upload för knappen och värdet på preview-upload för det återstående förhandsgranskningsfältet. Vi lämnade kroppen av wptuts_section_callback tom eftersom vi inte behöver skriva ut ytterligare information, skriv bara ut alla dess inställningar. Andra klasser vi inte nämner är de inbyggda WordPress-klasserna, vi använder dem för bättre användargränssnitt.
Slutligen, som sagt tidigare, måste vi bädda in några viktiga inbyggda skript inklusive Thickbox och Media uppladdning:
"/> funktion wptuts_print_scripts () wp_enqueue_style ('thickbox'); // Stylesheet används av 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')); Den sista raden i funktionen ovan kommer att bädda in vår wptuts-upload.js fil (det är fortfarande tomt hittills) som vi har skapat tidigare. All vår JavaScript-kod kommer att skrivas här, så öppna den och gå till nästa avsnitt.
I wptuts-upload.js fil, första vi behöver göra är att initiera basen för det nya plugin:
(funktion ($) $ (funktion () $ .fn.wptuts = funktion (alternativ) varvelektor = $ (detta) .selector; // Hämta väljaren // Ange standardalternativ var standardvärden = 'förhandsgranskning' : '.preview-upload', 'text': '.text-uppladdning', 'knapp': '.button-upload'; var alternativ = $ .extend (standardvärden, alternativ);); (jQuery ));
Vi har just skapat ett jQuery-plugin som heter wptuts. De väljare Indikerar HTML-elementet eller objektet som plugin kommer att påverka. Om vi till exempel skriver JavaScript så här:
$ ('. något') .wptuts (); Då kommer väljaren att vara HTML-elementet med något klass. Vi skickar vanligen HTML-omslaget, jQuery-pluginet hanterar sedan dess barnkomponenter. Ta en titt på våra två skapade inställningar, var och en har en omslag vars klass namn är ladda upp. Så vid senare användning gör vi det här:
$ ('.upload') .wptuts (); // Passera alla HTML-element med klassens värde på 'ladda upp' till jQuery-plugin. De defaults variabel innehåller alla standardalternativ för vårt plugin. Vi definierar tre standardegenskaper vars namn anger element som de refererar till och deras värden är HTML-väljaren, dessa värden styr vårt plugin och bestämmer vilka väljareBarnelementet är fältet Textfält, Knapp eller Förhandsgranskning. Naturligtvis kan dessa alternativ ersättas av användarens alternativ (om de är inställda). De alternativ är variabeln som innehåller användarens alternativ. Slutligen sammanfogar vi två typer av alternativ till en variabel som heter alternativ.
Därefter måste vi lägga till en händelsehanterare till knappelementet:
$ .fn.wptuts = funktion (alternativ) varvelger = $ (detta) .selector; // Hämta väljaren // Ange standardalternativ var standardvärden = 'förhandsvisning': '.preview-upload', 'text': '.text-upload', 'button': '.button-upload'; var options = $ .extend (standardvärden, alternativ); // När knappen klickas ... $ (options.button) .click (funktion () // Hämta textelementet. Var text = $ (detta) .siblings (options.text); // Visa WP Media Uploader popup tb_show ('Ladda upp en logotyp', 'media-upload.php? referer = wptuts & typ = bild & TB_iframe = true & post_id = 0', false); // Definiera den globala funktionen 'send_to_editor' // Definiera var det nya värdet kommer att skickas till window.send_to_editor = function (html) // Hämta URL för ny bild var src = $ ('img', html) .attr ('src'); // Skicka det här värdet till Textfältet. text.attr ('värde', src) .trigger ('change'); tb_remove (); // Stäng sedan popup-fönstret returnera false;); När en knapp klickar, avfyrar jQuery en händelsehanterare. Nedan är flödet av denna händelsefunktion:
syskon metod med textfältets klassvärde som argument.send_to_editor fungera. Den här globala funktionen definierades ursprungligen av WP Media Uploader, vars huvuduppgift är att placera en pekare till vilken det nya HTML-bildelementet (om användaren infogar en bild från popup-fönster) skickas till. Därefter kommer vi att analysera det HTML-bildelementets permalinkvärde och lagra det i src variabel.tb_remove funktion utlöser vi en händelse som heter Byta till textfältelementet som definieras bellow. $ (options.text) .bind ('ändra', funktion () // Hämta värdet på aktuellt objekt var url = this.value; // Bestäm Preview-fältet var förhandsgranskning = $ (detta) .siblings (alternativ. förhandsgranskning); // Bind värdet till Förhandsgranska fält $ (förhandsgranskning) .attr ('src', url);); Om textfältet har ett nytt värde, är det här värdet direkt kopplat till fönstret förhandsgranskning för att visa den nyvalda bilden. Den sista JavaScript som skapar plugin kommer att vara:
(funktion ($) $ (funktion () $ .fn.wptuts = funktion (alternativ) varvelektor = $ (detta) .selector; // Hämta väljaren // Ange standardalternativ var standardvärden = 'förhandsgranskning' : '.preview-upload', 'text': '.text-upload', 'button': '. knapp-uppladdning'; var options = $ .extend (standardvärden, alternativ); // när knappen klickas ... $ (options.button) .click (funktion () // Hämta textelementet. Var text = $ (detta) .siblings (options.text); // Visa WP Media Uploader popup tb_show ('Ladda upp en logotyp' , 'media-upload.php? referer = wptuts & typ = bild & TB_iframe = true & post_id = 0', false); // Definiera den globala funktionen 'send_to_editor' // Definiera var det nya värdet ska skickas till window.send_to_editor = function html) // Hämta webbadressen till ny bild var src = $ ('img', html) .attr ('src'); // Skicka det här värdet till textfältet. text.attr ('value' .trigger ('change'); tb_remove (); // Stäng popup-fönstret returnera false;); $ (options.text) .bind ('ändra', funktion () // Hämta val ue av nuvarande objekt var url = this.value; // Bestäm förhandsgranskningsfältet var förhandsgranskning = $ (detta) .siblings (options.preview); // Bind värdet till Förhandsgranska fält $ (förhandsgranskning) .attr ('src', url); ); // Användning $ ('.upload') .wptuts (); // Använd som standardalternativ. ); (jQuery)); Vår jQuery-plugin är redo att användas. I slutet av kodraderna ovan (den plats vi kommenterade), lägg bara till den här enkla koden:
// Användning $ ('.upload') .wptuts (); // Använd som standardalternativ. Det fullständiga sättet att använda det här plugin är:
$ (selector) .wptuts ('förhandsgranskning': / * Förhandsgranskarens väljare * /, 'text': / * Textväljare * /, 'knapp': / * Knappens väljare * /); Allt du behöver är att fylla i dina väljare korrekt (beroende på din HTML-struktur).
Gör så här för att få värdet av bilderna till dessa bilder:
$ wptuts_options = get_option ('wptuts_options'); $ wptuts_logo = $ wptuts_options ['logo']; // Logo $ wptuts_favicon = $ wptuts_options ['favicon']; // Favicon Lägg bara till följande kod i vilken mallfil du vill visa logotypen. Försök lägga till den till footer.php, till exempel:
">; ?> "<?php bloginfo( 'name' ); ?>")
I wptuts.php, lägg till den här koden:
funktion wptuts_add_favicon () $ wptuts_options = get_option ('wptuts_options'); $ wptuts_favicon = $ wptuts_options ['favicon']; ?> --> Det här är bara ett enkelt plugin, det ger dig möjligheten att integrera WP Media Uploader mycket enklare och med större flexibilitet. Vi behöver inte upprepa mycket JavaScript-kod för varje formad uppladdning, om du har många uppladdningsinsatser som behöver integreras med WP Media Uploader. Hoppas du gillar det. Någon återkoppling skulle uppskattas.
Du kan ladda ner källkoden längst upp i det här inlägget eller hitta den på Github.
