Share
For en stund siden hadde vi en opplæring som viser hvordan du integrerer WordPress Media Uploader i Tema- og pluginalternativer. Basert på denne ideen, utvikler vi en annen versjon av den ved å endre noe i JavaScript (i utgangspunktet er den kjente PHP-koden nesten den samme som den gamle). Kort sagt, vi vil dra nytte av jQuery for å lage et lite jQuery-plugin for å oppfylle vår hensikt i stedet.
Vi lager en utvalgsalternativer-side som inneholder to skjemafelter: Logo og Favicon. Forutsatt at hver av dem har 3 komponenter, inkludert: et tekstfelt for å legge inn et bilde URL, en knapp for å vise popup-vinduet WP Media Uploader og et forhåndsvisningsfelt som viser det valgte bildet.
I temakatalogen din, opprett to filer med navnet wptuts.php og wptuts-upload.js. Åpne deretter functions.php i samme katalog og legg til følgende kode:
Accentsconagua
krever ('wptuts.php'); Først av alt, bør vi angi standardalternativer for vår Options-side. Vi har til hensikt å gruppere alle innstillinger i et enkelt alternativ, wptuts_options, i dette tilfellet. Her er innholdet av wptuts.php:
add_action ('after_setup_theme', 'wptuts_default_options'); funksjon wptuts_default_options () // Sjekk om "wptuts_options" eksisterer eller ikke. Hvis ikke, opprett ny. hvis (! get_option ('wptuts_options')) $ options = array ('logo' => ", 'favicon' =>",); update_option ('wptuts_options', $ options); De wptuts_default_options Funksjonen vil bli utført rett etter temaets installasjon.
Deretter trenger vi en Options-side der skjemafeltene våre vises. Dette innlegget vil ikke fokusere dypt på Innstillinger API, vi antar at du forstår det. Hvis du ikke er kjent med Innstillings-API, anbefaler jeg at du henviser til andre innlegg om det, for eksempel The Complete Guide til WordPress Settings API, for eksempel.
add_action ('admin_menu', 'wptuts_add_page'); funksjon 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'); funksjon wptuts_options_page () ?> WPTuts + Valg side
Instillinger lagret.
--> Koden ovenfor legger ganske enkelt til en ny menyside som har en menytittel som leser Alternativer for WPTuts og slugverdien av wptuts. Merk funksjonen tilbakeringing wptuts_options_page, det vil gjengi innholdet på vår tilleggsside. Ved siden av det legger vi også til en funksjon som heter wptuts_print_scripts som ankler JavaScript og stilark på vår sides side, vil denne funksjonen bli nevnt senere.
add_action ('admin_init', 'wptuts_add_options'); funksjon wptuts_add_options () // Registrer nye alternativer 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'); funksjon wptuts_options_validate ($ values) foreach ($ verdier som $ n => $ v) $ verdier [$ n] = esc_url ($ v); returner $ verdier; Husk alternativet som heter wptuts_options? Nå registrerer vi faktisk det til Innstillinger API. Dens innsendte verdi vil bli validert av funksjonen wptuts_options_validate. Koden ovenfor registrerer også en ny seksjon som inneholder våre nye innstillingsalternativer. De tre funksjonene som følger vil gjøre innholdet i den nyopprettede delen og innstillingene:
funksjon wptuts_section_callback () / * Skriv ut ingenting * /; funksjon wptuts_logo_callback () $ options = get_option ('wptuts_options'); ?> "/> 
"/> "/> "/> --> Ser du at hver innstilling har tre hovedkomponenter som vi planlagt ovenfor? Tekstfeltet har klassens verdi på tekst-opplasting, button-opplasting for knappen, og verdien av forhåndsvisning-opplasting for det gjenværende forhåndsvisningsfeltet. Vi forlot kroppen av wptuts_section_callback tom fordi vi ikke trenger å skrive ut ytterligere informasjon, bare skriv ut alle innstillingene. Andre klasser vi ikke nevner er de innebygde WordPress-klassene, vi bruker dem til bedre brukergrensesnitt.
Til slutt, som sagt tidligere, må vi legge inn noen viktige innebygde skript inkludert thickbox og Media opplasting:
"/> funksjon wptuts_print_scripts () wp_enqueue_style ('thickbox'); // Stylesheet brukt 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 siste linjen i funksjonen ovenfor vil legge oss inn i vår wptuts-upload.js fil (den er fortsatt tom så langt) som vi har opprettet før. All vår JavaScript-kode vil bli skrevet her, så åpne den og gå til neste del.
I wptuts-upload.js fil, første ting vi trenger å gjøre er å initialisere basen av det nye plugin:
(funksjon ($) $ (funksjon () $ .fn.wptuts = funksjon (alternativer) varvelger = $ (dette) .selector; // Hent selgeren // Angi standardalternativer var standard = 'forhåndsvisning' : '.preview-upload', 'text': '.text-opplasting', 'knapp': '.button-upload'; varalternativer = $ .extend (standard, alternativer);); (jQuery ));
Vi har nettopp opprettet en jQuery-plugin som heter wptuts. De velger Indikerer HTML-elementet eller objektet som pluginet vil påvirke. For eksempel, hvis vi skriver JavaScript slik:
$ ('. noe') .wptuts (); Da vil velgeren være HTML-elementet med noe klasse. Vi sender vanligvis HTML-wrapper, jQuery-pluginet vil da manipulere sine barnekomponenter. Ta en titt på våre to opprettede innstillinger, hver av dem har en omslag hvis klassens navn er laste opp. Så i senere bruk vil vi gjøre dette:
$ ('.upload') .wptuts (); // Passer alle HTML-elementene med klassens verdi av 'upload' til jQuery-plugin. De mislighold variabel inneholder alle standardalternativer for pluginet vårt. Vi definerer tre standardegenskaper hvis navn angir elementer de refererer til, og deres verdier er HTML-velgeren, disse verdiene veileder pluginet og bestemmer hvilke velgerBarnelementet er feltet Tekstfelt, Knapp eller Forhåndsvisning. Selvfølgelig kan disse alternativene erstattes av brukerens alternativer (hvis de er angitt). De opsjoner er variabelen som inneholder brukerens valg. Til slutt fusjonerer vi to typer alternativer til en variabel som heter opsjoner.
Deretter må vi legge til en hendelsehandler til knappelementet:
$ .fn.wptuts = funksjon (alternativer) varvelger = $ (dette) .selector; // Hent selgeren // Angi standardalternativer var standard = = '' forhåndsvisning ':' .preview-opplasting ',' tekst ':' .text-opplasting ',' knapp ':' .button-opplasting '; var opsjoner = $ .extend (standard, alternativer); // Når knappen klikkes ... $ (options.button) .click (funksjon () // Hent tekstelementet. Var text = $ (dette) .siblings (options.text); // Vis WP Media Uploader popup tb_show ('Last opp en logo', 'media-upload.php? referer = wptuts & type = bilde & TB_iframe = true & post_id = 0', false); // Definer den globale funksjonen 'send_to_editor' // Definer hvor den nye verdien skal sendes til window.send_to_editor = function (html) // Få URL til nytt bilde var src = $ ('img', html) .attr ('src'); // Send denne verdien til tekstfeltet. text.attr ('verdi', src) .trigger ('change'); tb_remove (); // Lukk popup-vinduet returner falskt;); Når en knapp klikkes, branner jQuery en klikkhendelsehandler. Nedenfor er strømmen av denne hendelsesfunksjonen:
søsken metode med tekstfeltet klassens verdi som argument.send_to_editor funksjon. Denne globale funksjonen ble opprinnelig definert av WP Media Uploader, hovedoppgaven er å plassere en peker som det nye HTML-bildeelementet (hvis brukeren legger inn et bilde fra et popup-vindu) sendes til. Deretter vil vi analysere HTML-bildeelementets permalink-verdi og lagre det i src variabel.tb_remove funksjon, utløser vi en hendelse som heter endring til tekstfeltelementet som er definert bellow. $ (options.text) .bind ('endre', funksjon () // Få verdien av nåværende objekt var url = this.value; // Bestem Preview-feltet var forhåndsvisning = $ (dette) .siblings (alternativer. forhåndsvisning); // bind verdien til Preview-feltet $ (forhåndsvisning) .attr ('src', url);); Hvis tekstfeltet har en ny verdi, blir denne verdien umiddelbart bundet til forhåndsvisningsfeltet for å vise det nylig valgte bildet. Den endelige JavaScript som lager pluginet vil være:
(funksjon ($) $ (funksjon () $ .fn.wptuts = funksjon (alternativer) varvelger = $ (dette) .selector; // Hent selgeren // Angi standardalternativer var standard = 'forhåndsvisning' : '.preview-upload', 'text': '.text-upload', 'button': '.button-upload'; varalternativer = $ .extend (standardinnstillinger, alternativer); // Når knappen klikkes ... $ (options.button) .click (funksjon () // Hent tekstelementet. Var text = $ (dette) .siblings (options.text); // Vis WP Media Uploader popup tb_show ('Last opp et logo' , 'media-upload.php? referer = wptuts & type = bilde & TB_iframe = true & post_id = 0', false); // Definer den globale funksjonen 'send_to_editor' // Definer hvor den nye verdien skal sendes til window.send_to_editor = function html) // Få URL til nytt bilde var src = $ ('img', html) .attr ('src'); // Send denne verdien til tekstfeltet. text.attr ('value' .trigger ('change'); tb_remove (); // Lukk popup-vinduet returner false;); $ (options.text) .bind ('change', function () // Få valget ue av nåværende objekt var url = this.value; // Bestem forhåndsvisningsfeltet var forhåndsvisning = $ (dette) .siblings (options.preview); // Bind verdien til Forhåndsvis felt $ (forhåndsvisning) .attr ('src', url); ); // Bruk $ ('.upload') .wptuts (); // Bruk som standardvalg. ); (jQuery)); Vår jQuery-plugin er klar til bruk. I slutten av kodestykket ovenfor (stedet vi kommenterte), legg bare til denne enkle koden:
// Bruk $ ('.upload') .wptuts (); // Bruk som standardvalg. Full måte å bruke dette plugin på er:
$ (selector) .wptuts ('forhåndsvisning': / * Forhåndsvisningsvelger * /, 'tekst': / * Tekstvelger * /, 'knapp': / * Knappens velger * /); Alt du trenger er å fylle ut seleksjonene dine riktig (avhengig av HTML-strukturen).
For å få verdien av disse bildene, må du bare gjøre dette:
$ wptuts_options = get_option ('wptuts_options'); $ wptuts_logo = $ wptuts_options ['logo']; // Logo $ wptuts_favicon = $ wptuts_options ['favicon']; // Favicon Bare legg til følgende kode i hvilken som helst malfil du vil vise logoen. Prøv å legge den til footer.php, for eksempel:
">; ?> "<?php bloginfo( 'name' ); ?>")
I wptuts.php, legg til denne koden:
funksjon wptuts_add_favicon () $ wptuts_options = get_option ('wptuts_options'); $ wptuts_favicon = $ wptuts_options ['favicon']; ?> --> Dette er bare et enkelt plugin, det vil gi deg muligheten til å integrere WP Media Uploader mye mer easilly og med mer fleksibilitet. Vi trenger ikke å gjenta mye JavaScript-kode for hver formularopplasting, hvis du har mange opplastingsinnganger som må integreres med WP Media Uploader. Håper du liker det. Eventuelle tilbakemeldinger vil bli verdsatt.
Du kan laste ned kildekoden øverst på dette innlegget eller finne den på Github.
