Share
Een tijdje geleden hadden we een zelfstudie waarin werd uitgelegd hoe de WordPress Media Uploader te integreren in Thema- en Plugin-opties. Op basis van dit idee zullen we een andere versie ervan ontwikkelen door iets in JavaScript te veranderen (in feite is de kern-PHP-code bijna hetzelfde als de oude). Kortom, we zullen gebruik maken van jQuery om een kleine jQuery plug-in te maken om in plaats daarvan aan ons doel te voldoen.
We zullen een voorbeeldoptiespagina maken met twee formuliervelden: Logo en Favicon. Ervan uitgaande dat elk van hen 3 componenten heeft, waaronder: een tekstveld voor het invoeren van de URL van een afbeelding, een knop voor het weergeven van de WP Media Uploader popup, en een previewveld met de momenteel geselecteerde afbeelding.
Maak in je themadirectory twee bestanden met de naam wptuts.php en wptuts-upload.js. Open vervolgens de functions.php in dezelfde map en voeg de volgende code toe:
Accentsconagua
vereisen ('wptuts.php'); Allereerst moeten we standaardopties instellen voor onze pagina Opties. We zijn van plan om alle instellingen in één optie te groeperen, wptuts_options, in dit geval. Hier is de inhoud van wptuts.php:
add_action ('after_setup_theme', 'wptuts_default_options'); function wptuts_default_options () // Controleer of de 'wptuts_options' bestaat // Maak een nieuwe aan als dat niet het geval is. if (! get_option ('wptuts_options')) $ options = array ('logo' => ", 'favicon' =>",); update_option ('wptuts_options', $ options); De wptuts_default_options functie zal worden uitgevoerd direct na de installatie van het thema.
Vervolgens hebben we een pagina Opties nodig waarin onze formuliervelden worden weergegeven. Dit bericht zal niet diep focussen op de Settings API, we nemen aan dat u het begrijpt. Als u niet vertrouwd bent met de instellingen-API, raad ik u aan naar andere berichten erover te verwijzen, zoals de Complete Guide To The WordPress Settings API, bijvoorbeeld.
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 + optiespagina
Instellingen opgeslagen.
--> De bovenstaande code voegt eenvoudig een nieuwe menupagina toe met een menutitel die luidt WPTuts-opties en de slakwaarde van wptuts. Let op de functie callback wptuts_options_page, het zal de inhoud van onze optiespagina weergeven. Daarnaast voegen we ook een functie toe genaamd wptuts_print_scripts die JavaScript en stylesheet in de wacht sleept op de haak van onze opties, zal deze functie later worden genoemd.
add_action ('admin_init', 'wptuts_add_options'); function wptuts_add_options () // Registreer nieuwe opties 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'); function wptuts_options_validate ($ values) foreach ($ values as $ n => $ v) $ values [$ n] = esc_url ($ v); return $ waarden; Onthoud de genoemde optie wptuts_options? Nu registreren we het daadwerkelijk bij de Settings API. De ingediende waarde wordt gevalideerd door de functie wptuts_options_validate. De bovenstaande code registreert ook een nieuw gedeelte dat onze nieuwe instellingsopties bevat. De volgende drie functies zullen de inhoud van de nieuw gecreëerde sectie en instellingen weergeven:
function wptuts_section_callback () / * Print niets * /; functie wptuts_logo_callback () $ options = get_option ('wptuts_options'); ?> "/> 
"/> "/> "/> --> Zie je dat elke instelling drie hoofdcomponenten heeft die we hierboven hebben gepland? Het tekstveld heeft de waarde van de klasse van text-upload, button-upload voor de knop en de waarde van Preview-upload voor het resterende voorbeeldveld. We hebben het lichaam verlaten wptuts_section_callback leeg omdat we geen extra informatie hoeven af te drukken, druk gewoon alle instellingen af. Andere klassen die we niet noemen, zijn de ingebouwde WordPress-klassen, we gebruiken ze voor een betere gebruikersinterface.
Tot slot, zoals eerder gezegd, moeten we enkele belangrijke ingebouwde scripts insluiten, waaronder thickbox en Media uploaden:
"/> functie wptuts_print_scripts () wp_enqueue_style ('thickbox'); // Stylesheet gebruikt door 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')); De laatste regel in de bovenstaande functie zal ons insluiten wptuts-upload.js bestand (het is nog steeds leeg tot nu toe) dat we eerder hebben gemaakt. Al onze JavaScript-code wordt hier geschreven, dus open deze en ga naar het volgende gedeelte.
In de wptuts-upload.js bestand, het eerste wat we moeten doen is de basis van de nieuwe plugin initialiseren:
(functie ($) $ (function () $ .fn.wptuts = function (options) var selector = $ (this) .selector; // Download de selector // Stel standaardopties in var defaults = 'preview' : '.preview-upload', 'text': '.text-upload', 'button': '.button-upload'; var options = $ .extend (standaardinstellingen, opties);); (jQuery ));
We hebben zojuist een jQuery-plug-in gemaakt wptuts. De keuzeschakelaar geeft het HTML-element of -object aan waar de plug-in invloed op zal hebben. Als we bijvoorbeeld JavaScript zoals dit schrijven:
$ ('.something') .wptuts (); Dan is de selector het HTML-element met de iets klasse. Meestal geven we de HTML-wrapper door, de jQuery-plug-in zal dan de onderliggende componenten manipuleren. Bekijk onze twee gemaakte instellingen, elk van hen heeft een wrapper wiens klasse de naam is uploaden. Dus bij later gebruik doen we dit:
$ ('.upload') .wptuts (); // Geef alle HTML-elementen door met de waarde van de klasse 'uploaden' naar de jQuery-plug-in. De defaults variabele bevat alle standaardopties voor onze plug-in. We definiëren drie standaardeigenschappen waarvan de naam elementen aanduiden waarnaar ze verwijzen en hun waarden de HTML-selector zijn, deze waarden begeleiden onze plug-in en bepalen welke keuzeschakelaarHet onderliggende element is het veld Tekst, Knop of Voorbeeld. Natuurlijk kunnen deze opties worden vervangen door opties van gebruikers (als ze zijn ingesteld). De opties is de variabele die de opties van die gebruiker bevat. Ten slotte voegen we twee soorten opties samen in één variabele met de naam opties.
Vervolgens moeten we een gebeurtenishandler aan het knopelement toevoegen:
$ .fn.wptuts = function (options) var selector = $ (this) .selector; // Selecteer de selector // Stel standaardopties in var defaults = 'preview': '.preview-upload', 'text': '.text-upload', 'button': '.button-upload'; var options = $ .extend (standaardinstellingen, opties); // Wanneer op de knop wordt geklikt ... $ (options.button) .click (function () // Het element Text ophalen. Var text = $ (this) .siblings (options.text); // Show WP Media Uploader popup tb_show ('Upload een logo', 'media-upload.php? referer = wptuts & type = image & TB_iframe = true & post_id = 0', false); // Definieer de globale functie 'send_to_editor' // Definieer waar de nieuwe waarde zal worden verzonden to window.send_to_editor = function (html) // Haal de URL van de nieuwe afbeelding op var src = $ ('img', html) .attr ('src'); // Verzend deze waarde naar het veld Tekst text.attr ('value', src) .trigger ('change'); tb_remove (); // Sluit vervolgens het pop-upvenster return false;); Wanneer op een knop wordt geklikt, start jQuery een gebeurtenishandler voor klikken. Hieronder ziet u de stroom van deze gebeurtenisfunctie:
broer methode met de klassenwaarde van het Tekstveld als argument.send_to_editor functie. Deze globale functie is oorspronkelijk gedefinieerd door WP Media Uploader, maar de belangrijkste taak is om een aanwijzer te plaatsen waarnaar het nieuwe HTML-afbeeldingselement (als de gebruiker een afbeelding invoert uit het pop-upvenster) wordt verzonden. Vervolgens zullen we de permalink-waarde van dat HTML-beeldelement analyseren en opslaan in de src veranderlijk.tb_remove functie activeren we een genoemde gebeurtenis verandering naar het tekstveldelement dat hieronder wordt gedefinieerd. $ (options.text) .bind ('change', function () // Verkrijg de waarde van het huidige object var url = this.value; // Bepaal het voorbeeldveld var preview = $ (this) .siblings (options. voorbeeld); // Bind de waarde aan Voorbeeldveld $ (voorbeeld) .attr ('src', url);); Als het veld Tekst een nieuwe waarde heeft, wordt deze waarde onmiddellijk gebonden aan het veld Voorbeeld voor het weergeven van de nieuw geselecteerde afbeelding. De laatste JavaScript-code die de plug-in maakt, is:
(functie ($) $ (function () $ .fn.wptuts = function (options) var selector = $ (this) .selector; // Download de selector // Stel standaardopties in var defaults = 'preview' : '.preview-upload', 'text': '.text-upload', 'button': '.button-upload'; var options = $ .extend (standaardinstellingen, opties); // Wanneer op de knop wordt geklikt ... $ (options.button) .click (function () // Get the Text element. Var text = $ (this) .siblings (options.text); // Show WP Media Uploader popup tb_show ('Upload een logo' , 'media-upload.php? referer = wptuts & type = image & TB_iframe = true & post_id = 0', false); // Definieer de globale functie 'send_to_editor' // Definieer waar de nieuwe waarde naar window.send_to_editor = function ( html) // Ontvang de URL van nieuwe afbeelding var src = $ ('img', html) .attr ('src'); // Verzend deze waarde naar het veld Tekst text.attr ('value', src) .trigger ('change'); tb_remove (); // Sluit vervolgens het pop-upvenster return false;); $ (options.text) .bind ('change', function () // Verkrijg de val ue van het huidige object var url = this.value; // Bepaal het voorbeeldveld var preview = $ (this) .siblings (options.preview); // Bind de waarde in Voorbeeldveld $ (voorbeeld) .attr ('src', url); ); // Gebruik $ ('.upload') .wptuts (); // Gebruik als standaardoptie. ); (jQuery)); Onze plug-in jQuery is klaar voor gebruik. Plaats aan het einde van de bovenstaande codefragmenten (de plaats die we hebben gemarkeerd) deze eenvoudige code:
// Usage $ ('.upload') .wptuts (); // Gebruik als standaardoptie. De volledige manier om deze plug-in te gebruiken is:
$ (selector) .wptuts ('preview': / * Selectie-selector * /, 'tekst': / * Tekstselecteur * /, 'knop': / * Knop's selector * /); Het enige dat u nodig hebt, is uw selectors correct in te vullen (afhankelijk van uw HTML-structuur).
Ga als volgt te werk om de waarde van de URL van deze afbeeldingen te achterhalen:
$ wptuts_options = get_option ('wptuts_options'); $ wptuts_logo = $ wptuts_options ['logo']; // Logo $ wptuts_favicon = $ wptuts_options ['favicon']; // Favicon Voeg eenvoudig de volgende code toe aan elk sjabloonbestand dat u aan het logo wilt laten zien. Probeer het toe te voegen footer.php, bijvoorbeeld:
">; ?> "<?php bloginfo( 'name' ); ?>")
In wptuts.php, voeg deze code toe:
function wptuts_add_favicon () $ wptuts_options = get_option ('wptuts_options'); $ wptuts_favicon = $ wptuts_options ['favicon']; ?> --> Dit is slechts een eenvoudige plug-in, het geeft je de mogelijkheid om de WP Media Uploader veel eenvoudiger en met meer flexibiliteit te integreren. We hoeven niet veel JavaScript-code te herhalen voor elke invoer voor het uploaden van formulieren, voor het geval dat u veel upload-ingangen heeft die moeten worden geïntegreerd met WP Media Uploader. Hoop dat je het leuk vindt. Alle feedback wordt op prijs gesteld.
Je kunt de broncode downloaden bovenaan dit bericht of vinden op Github.
