Share
Welkom WordPress Thema- en Plugin-ontwikkelaars! We willen allemaal dat onze themagebruikers hun eigen afbeeldingen of logo's kunnen uploaden met behulp van een door ons gemaakte pagina met thema-opties (inclusief plug-ins-pagina's), maar hoe programmeer je het? Gebruik je WordPress Media Uploader (zoals wanneer je een aanbevolen afbeelding uploadt of een afbeelding invoegt in een bericht) of voeg je gewoon een invoerveld toe en vergeet je alle andere dingen? Upload je afbeeldingen correct naar een uploadmap? Bevestigt u de afbeelding aan de WordPress Mediabibliotheek? En dit is een belangrijk punt, verwijdert u het bestand (als dit is wat de gebruiker wil) op de juiste manier? Welnu, het is tijd om vorm te geven aan onze pagina met thema-opties met behulp van de WordPress-interface. We willen blije gebruikers, we willen een gebruikersvriendelijke interface.
Deze tutorial is gericht op het uploaden van afbeeldingen naar een pagina met thema-opties, dus als je niet helemaal zeker weet hoe je er een moet maken, raad ik je in de eerste plaats aan om de geweldige tutorial van Tom McFarlin eens te bekijken. API-serie.
We moeten een map maken met de naam wptuts-opties in de hoofdmap van het thema met een bestand genaamd wptuts-options.php waar de volledige code die nodig is om onze pagina met thema-opties te maken, wordt gedefinieerd. We moeten ook een map maken met de naam js waar we de JavaScript-bestanden opslaan die we nodig hebben.
Allereerst moeten we ons bellen wptuts-options.php bestand vanuit ons functions.php:
Accentsconagua
require_once ('wptuts-options / wptuts-options.php'); In onze wptuts-options.php bestand zullen we een functie creëren waarin we de standaardwaarden zullen specificeren. In dit geval is de waarde de afbeeldings-URL op onze server. We zullen standaard een lege reeks toewijzen, maar we kunnen ook de URL toewijzen van een afbeelding die we al in een bepaalde themamap hebben.
functie wptuts_get_default_options () $ options = array ('logo' => "); return $ options; Nu gaan we een functie aanmaken die, als onze optie niet bestaat in de database (we zullen het noemen theme_wptuts_options), zal het initiëren met de waarden gegeven door onze vorige functie.
function wptuts_options_init () $ wptuts_options = get_option ('theme_wptuts_options'); // Zijn onze opties opgeslagen in de database? if (false === $ wptuts_options) // Zo niet, dan behouden we onze standaardopties $ wptuts_options = wptuts_get_default_options (); add_option ('theme_wptuts_options', $ wptuts_options); // In andere gevallen hoeven we de DB // Initialize Theme options add_action ('after_setup_theme', 'wptuts_options_init') niet bij te werken; Nu is het tijd om onze pagina Thema-opties te maken, deze toe te voegen aan het beheerdersdashboard en een formulier te maken.
// Voeg "WPTuts Options" link toe aan de "Uiterlijk" menufunctie wptuts_menu_options () // add_theme_page ($ page_title, $ menu_title, $ capability, $ menu_slug, $ function); add_theme_page ('WPTuts Options', 'WPTuts Options', 'edit_theme_options', 'wptuts-settings', 'wptuts_admin_options_page'); // Laad de pagina Admin-opties add_action ('admin_menu', 'wptuts_menu_options'); functie wptuts_admin_options_page () ?>
Samenvattend: door de haak te gebruiken ADMIN_MENU we hebben onze pagina toegevoegd aan het Admin Panel onder Uiterlijk -> Opties WPTuts en het zou geïdentificeerd kunnen worden door de naaktslak wptuts-settings. Hierna hebben we een formulier gemaakt waarop nog geen invoerveld is gebaseerd setting_fields en do_settings_sections functies. Zoals ik al eerder zei, is het doel van deze tutorial niet om te beschrijven hoe deze functies werken, dus we gaan niet uitleggen waarvoor ze zijn bedoeld. Je kunt de serie van Tom lezen over wat hierboven is gelinkt.
Maar let op het feit dat, afgezien van het maken van de knop voorleggen, we hebben ook een nieuwe gemaakt, a Reset knop. Als we erop drukken, is de standaardwaarde de standaardwaarde.
Eindelijk gaan we onze knop maken om afbeeldingen te uploaden en een invoerveld waarin, zodra het is geüpload, de URL wordt getoond.
functie wptuts_options_settings_init () register_setting ('theme_wptuts_options', 'theme_wptuts_options', 'wptuts_options_validate'); // Voeg een formuliersectie toe voor het logo add_settings_section ('wptuts_settings_header', __ ('Logo Options', 'wptuts'), 'wptuts_settings_header_text', 'wptuts'); // Voeg Logo uploader toe add_settings_field ('wptuts_setting_logo', __ ('Logo', 'wptuts'), 'wptuts_setting_logo', 'wptuts', 'wptuts_settings_header'); add_action ('admin_init', 'wptuts_options_settings_init'); functie wptuts_settings_header_text () ?> Er valt hier niet veel meer te zeggen, alleen dat de waarde van het logo veld toont de escaped image URL. Op dit moment is dit wat ons scherm laat zien:
En vergeet onze gegevensvalidatiefunctie niet:
functie wptuts_options_validate ($ input) $ default_options = wptuts_get_default_options (); $ valid_input = $ default_options; $ submit =! empty ($ input ['submit'])? waar onwaar; $ reset =! leeg ($ input ['reset'])? waar onwaar; if ($ submit) $ valid_input ['logo'] = $ input ['logo']; elseif ($ reset) $ valid_input ['logo'] = $ default_options ['logo']; return $ valid_input;
Laten we de waarde van de opslaan logo net zoals het is als we het formulier verzenden of het met de standaardwaarde laten als we het formulier opnieuw instellen. Het is raadzaam om de waarde van het invoerveld te controleren en de URL's te valideren.
Als we op dit punt zijn aangekomen (ik hoop het wel) en we zijn niet echt moe, kunnen we de vorm proberen. We zullen zien dat de waarde van het invoerveld zonder problemen wordt opgeslagen en dat hierna een URL als waarde wordt weergegeven.
Laten we nu verder gaan met wat het echt belangrijk is.
Stap 1 Het benodigde JavaScript toevoegen
Als we willen dat de WordPress Media Uploader correct werkt, moeten we verschillende JavaScript-bibliotheken importeren, evenals wat extra CSS:
We moeten de volgende code introduceren in de wptuts-options.php het dossier:
functie wptuts_options_enqueue_scripts () wp_register_script ('wptuts-upload', get_template_directory_uri (). '/ wptuts-options / js / wptuts-upload.js', array ('jquery', 'media-upload', 'thickbox')); if ('appearance_page_wptuts-settings' == get_current_screen () -> id) wp_enqueue_script ('jQuery'); wp_enqueue_script (thickbox); wp_enqueue_style (thickbox); wp_enqueue_script ( 'media-upload'); wp_enqueue_script ( 'wptuts-upload'); add_action ('admin_enqueue_scripts', 'wptuts_options_enqueue_scripts'); Er zijn een aantal dingen die we moeten verduidelijken: in de eerste regel registreren we een script (we hebben er nog niet over gesproken) dat het proces zal uitvoeren dat is gericht op het openen van het modelvenster en het verzamelen van beeldgegevens. Zoals we eerder hebben uitgelegd, gaan we een map maken met de naam js. Een bijzonderheid van dit script is dat het afhankelijk is van een aantal andere bibliotheken, zoals jQuery, Media-Upload en Thickbox, allemaal komen ze wanneer je WordPress installeert.
In de tweede regel gebruiken we de get_current_screen () functie die ons de slug van de pagina geeft waar we aan werken. Deze functie kan niet altijd worden gebruikt en afhankelijk van de haak die we gebruiken, is deze beschikbaar of niet. Met de haak admin_enqueue_scripts de functie werkt zonder problemen. get_current_screen () -> id geeft ons een slak van de pagina waar we aan werken. Voor de pagina's die standaard in het WordPress Admin Panel verschijnen, kan dit 'thema's''bericht bewerken''plugins'enz. In ons geval lijkt deze naaktslak appearance_page_ OUR_SLUG. Herinner je je de slug die we in de add_theme_page functie? Welnu, onze pagina Thema-opties heeft eindelijk de volgende slak: appearance_page_wptuts-settings. We laden dus alleen scripts wanneer dat nodig is.
De andere twee regels voegen de Javascript-bibliotheken jQuery, Thickbox, Media Upload en onze JS toe, wptuts-upload.js. Verder voegen we ook de Thickbox CSS toe.
Ondanks hoe het eruitziet, zal ons script eenvoudiger zijn dan het lijkt. Het is alleen nodig om een aantal Thickbox-functies en de Media Uploader te leren kennen om het te laten werken. Het probleem is dat het moeilijk is om er informatie over te vinden en uiteindelijk, als de goede programmeurs die we zijn, hebben we geen andere keuze dan met code te werken. Zoals we net zullen zien, is het heel gemakkelijk om te doen. Laten we doorgaan naar onze eerste versiecode:
jQuery (document) .ready (functie ($) $ ('# upload_logo_button'). klik (functie () tb_show ('Upload een logo', 'media-upload.php? referer = wptuts-settings & type = image & TB_iframe = true & post_id = 0 ', false); return false;);); Succes! Als we nu meteen op onze Upload Logo knop de WordPress Media Uploader verschijnt. Geweldig, we zijn klaar, tot snel! Nee, dit is niet waar, maar het zal niet veel langer duren om onze Theme Options-pagina op een eenvoudige manier te laten werken.
Bij het bekijken van de code kunnen we zien dat we een klikgebeurtenis hebben toegewezen aan de knop waarmee een Thickbox-functie wordt gestart om het modale venster te tonen. Deze functie accepteert drie parameters:
Upload een logo'vals omdat we niet met groepen afbeeldingen gaan werken, maar met slechts één.Onder hen, de meest interessante is de URL. WordPress gebruikt een bestand met de naam media-upload.php om het venster te beheren en ook meerdere $ _GET parameters. Dat moeten we onthouden & tekens moeten worden gecodeerd met hun HTML-entiteit, zodat de URL probleemloos werkt.
referer - Deze parameter is optioneel. We zullen het later gebruiken om een klein trucje te doen.type - Het is het type bestand. Het kan zijn video-, audio, beeld of het dossier.TB_iframe - Het moet altijd geselecteerd zijn waar dus het venster wordt getoond in een iframe, anders werkt het niet. Hoewel je dit misschien moeilijk kunt geloven, het is de belangrijkste parameter en nu zullen we zien waarom.post_id - Het wordt gebruikt om aan te geven dat het beeld niet aan een bericht zal worden gekoppeld en dat het vrij zal zijn als een vogeltje.Wel, ik wil niet tegen je liegen. Slechts één van deze drie parameters is echt nodig: TB_iframe. We kunnen de andere vergeten. Sommige versies geleden, verenigde WordPress zijn Media Uploader om elk type bestand te uploaden, zonder afbeeldingen te hoeven differentiëren van video's of muziek, dus type is niet nodig en de post-ID is standaard 0. Hoe dan ook, er is geen kwaad om ze achter te laten voor het geval we een probleem hebben met de compatibiliteit. Het zou interessant zijn om aan te geven post_id als het een metabox is in een post.
Het volgende deel van ons JavaScript moet de volgende functie bevatten:
window.send_to_editor = function (html) var image_url = $ ('img', html) .attr ('src'); $ ( '# LOGO_URL') val (afbeelding_url).; tb_remove (); send_to_editor is een gebeurtenis opgenomen in de WordPress JavaScript Media Uploader-bibliotheek. Het levert afbeeldingsgegevens in HTML-indeling, zodat we ze kunnen plaatsen waar we maar willen.
Deze gebeurtenis levert een parameter aan de handlerfunctie, html dat de volgende code bevat (als voorbeeld):
Het is dus gemakkelijk om de afbeeldings-URL te extraheren als deze eenmaal op de server is geladen via de lijn $ ( 'Img', html) .attr ( 'src'); dan wordt het opgeslagen in ons invoerveld met de lijn $ ( '# LOGO_URL') val (afbeelding_url).;.
De functie tb_remove sluit het modale venster, meer niet. Nu kunnen we het formulier al verzenden en de afbeeldings-URL opslaan in de database. We kunnen nu stoppen, maar het resultaat ziet er niet echt mooi of gebruikersvriendelijk uit, dus laten we een verbetering aanbrengen.
Als we opletten, kunnen we bij het uploaden van de afbeelding met de Media Uploader de afbeeldings-URL invoegen in ons invoerveld via de Invoegen in bericht knop. Dit kan de gebruiker in verwarring brengen. Om die reden kunnen we deze tekst wijzigen met behulp van filters in WordPress. We typen de volgende code in onze wptuts-options.php het dossier:
function wptuts_options_setup () global $ pagenow; if ('media-upload.php' == $ pagenow || 'async-upload.php' == $ pagenow) // Nu vervangen we de 'Insert into Post Button' in Thickbox add_filter ('gettext', 'replace_thickbox_text', 1, 3); add_action ('admin_init', 'wptuts_options_setup'); function replace_thickbox_text ($ translation_text, $ text, $ domain) if ('Insert into Post' == $ text) $ referer = strpos (wp_get_referer (), 'wptuts-settings'); if ($ referer! = ") return __ ('Ik wil dat dit mijn logo is!', 'wptuts'); return $ translation_text; Gebruik de haak admin_init, we controleren of de pagina's waaraan we werken, worden gebruikt door de Media Uploader. Deze pagina's zijn: media-upload.php en async-upload.php. De eerste opent het modale venster en de tweede wordt geladen zodra de afbeelding is geüpload. Om te bevestigen dat we met een van deze werken, moeten we de globale variabele gebruiken $ pagenow en niet de functie get_current_screen () omdat admin_init staat deze functie nog steeds niet toe.
Waarom gebruiken we het referer variabele? Ok, dit is een beetje lastig en het werkt als volgt:
Afbeelding uploaden knop, de verwijzende URL is zoiets als http://www.ourdomain.com/... / wp-admin / themes.php? page = wptuts_settings http: // localhost / ... /wp-admin/media-upload.php?referer=wptuts-settings&type=image. Zie nu waarom we de parameter referer in onze JavaScript hebben opgenomen? We moeten weten vanaf welke pagina we de Media Uploader lanceren, omdat we de Invoegen in bericht tekst in de knop alleen op onze pagina Thema-opties en niet in een berichtpagina bijvoorbeeld. Dat is waarom ik de parameter referer heb opgenomen. Nu, met behulp van de wp_get_referer () functie krijgen we de referer-URL en hoeven we alleen de wptuts-settings string in die URL. Met deze methode zullen we het in de juiste context vervangen.
We passen nu de gettext filter en elke zin die bevat 'In post invoegen' we vervangen door 'Ik wil dat dit mijn logo is!'. Als we het Thickbox-venster opnieuw openen en een nieuw bestand laden, zullen we zien dat de tekst van de knop is gewijzigd. Als u niet helemaal zeker bent over het gebruik van de gettext filter en aangezien dit niet een van de doelen van deze zelfstudie is, kunt u de WordPress Codex bezoeken.
Er zijn enkele verbeteringen aangebracht, niet waar?
De gebruiker moet altijd kijken naar wat er op het scherm gebeurt. Het is niet genoeg voor de gebruiker om een afbeelding te uploaden en naar de pagina te gaan om te controleren of de afbeelding daar is. Nu gaan we een invoerveld toevoegen aan onze pagina met thema-opties, zodat de gebruiker in staat is om de mooie afbeelding al geladen te zien.
We moeten de volgende code schrijven in onze wptuts_options_settings_init () functie:
// Huidige afbeelding toevoegen Preview add_settings_field ('wptuts_setting_logo_preview', __ ('Logo Preview', 'wptuts'), 'wptuts_setting_logo_preview', 'wptuts', 'wptuts_settings_header'); En we moeten ook een nieuwe functie voor de preview maken:
functie wptuts_setting_logo_preview () $ wptuts_options = get_option ('theme_wptuts_options'); ?> ; ?>)
Als we nu een nieuwe afbeelding uploaden en we het formulier verzenden, zien we dit:
Stoer! Doe rustig aan, niet rennen. Er zijn twee stappen om te nemen, in eerste instantie uploaden we de afbeelding en dan zijn we gedwongen om het formulier in te dienen als we de wijzigingen willen opslaan. De gebruiker zou kunnen denken als de afbeelding is geüpload, waar is mijn logo in godsnaam? Moet ik het formulier indienen? Voorkom dat je van streek raakt door enkele eenvoudige regels aan onze JavaScript toe te voegen:
window.send_to_editor = function (html) var image_url = $ ('img', html) .attr ('src'); $ ( '# LOGO_URL') val (afbeelding_url).; tb_remove (); $ ('# upload_logo_preview img'). attr ('src', image_url); $ ( '# Submit_options_form') trekker ( 'klik').; We uploaden de afbeelding en we kunnen zien dat het formulier is verzonden! Gewoon een zin toevoegen: nu activeren we de afbeelding wanneer de afbeelding is geladen Klik evenement op de knop voorleggen en het formulier wordt onmiddellijk verzonden, waarbij tegelijkertijd de database en het voorbeeld van de afbeelding worden bijgewerkt. Perfect!
Verwijderen wat onnodig is
Tot nu toe is het formulier aantrekkelijk, bruikbaar en het werkt meer dan ok, maar er is iets dat ons begint te storen. Waarom hebben we het invoerveld nodig? Hé, we hebben het nodig om de afbeeldings-URL op te slaan. Laten we het op een andere manier bekijken: waarom heeft de gebruiker een invoerveld nodig? Voor niets. Het volstaat om de gebruiker de afbeelding te tonen die is geüpload en dat alles naar behoren werkt.
Laten we onze vorm iets meer converteren met de wptuts_setting_logo () functie:
function wptuts_setting_logo () $ wptuts_options = get_option ('theme_wptuts_options'); ?> Als u het niet had gemerkt, is het enige dat we hebben gedaan het wijzigen van het invoertype van het formulier. We hebben het nu over a verborgen invoerveld en niet een tekst invoer veld. Het formulier behoudt dezelfde functionaliteit, maar het is veel aangenamer voor de gebruiker:
Stap 3 De afbeelding verwijderen
Uiteraard zal de gebruiker op een gegeven moment de afbeelding willen verwijderen. Om dingen te faciliteren gaan we een knop maken om het te verwijderen. De afbeelding mag echter niet alleen worden verwijderd als de gebruiker op de knop klikt, maar ook als deze wordt verwijderd wanneer een nieuwe afbeelding wordt geüpload of als het formulier opnieuw wordt ingesteld.
Eerste dingen eerst. We gaan de nieuwe knop maken in de wptuts_setting_logo () functie:
function wptuts_setting_logo () $ wptuts_options = get_option ('theme_wptuts_options'); ?> Als we opletten, wordt de nieuwe knop alleen weergegeven als er al een logo is geladen. Trouwens, we hebben het hier over een soort knop, dus we zullen het formulier verzenden als we erop klikken.
We zullen de volgende validatiefunctionaliteit moeten toevoegen, zodat de knop naar behoren werkt, wptuts_options_validate ():
$ default_options = wptuts_get_default_options (); $ valid_input = $ default_options; $ wptuts_options = get_option ('theme_wptuts_options'); $ submit =! empty ($ input ['submit'])? waar onwaar; $ reset =! leeg ($ input ['reset'])? waar onwaar; $ delete_logo =! leeg ($ input ['delete_logo'])? waar onwaar; if ($ submit) if ($ wptuts_options ['logo']! = $ input ['logo'] && $ wptuts_options ['logo']! = ") delete_image ($ wptuts_options ['logo']); $ valid_input [ 'logo'] = $ invoer ['logo']; elseif ($ reset) delete_image ($ wptuts_options ['logo']); $ valid_input ['logo'] = $ default_options ['logo']; elseif ( $ delete_logo) delete_image ($ wptuts_options ['logo']); $ valid_input ['logo'] = "; return $ valid_input; Oké, wat doen we hier? We hebben een nieuwe toegevoegd $ wptuts_options variabele om te controleren of de gebruiker op de knop heeft geklikt Logo verwijderen knop. Als de gebruiker dit doet, is de Verwijder afbeelding functie wordt uitgevoerd en we stellen de waarde van de logo-URL in als een lege string. Bovendien wordt het logo verwijderd als we het indienen en we een andere afbeelding uploaden naar degene die we al hebben of zelfs als we het formulier opnieuw instellen.
Voorzichtig! Het opnieuw instellen van het formulier en het verwijderen van de afbeelding hoeft niet hetzelfde proces te zijn. In ons geval is de standaardwaarde een lege tekenreeks, zodat ze overeenkomen.
Nu zullen we het toevoegen Verwijder afbeelding() functie:
functie delete_image ($ image_url) global $ wpdb; // We moeten de meta-ID van de afbeelding ophalen. $ query = "SELECT ID FROM wp_posts waar guid = '". esc_url ($ image_url). "'EN post_type =' bijlage '"; $ results = $ wpdb-> get_results ($ query); // En verwijder het voor elke ($ resultaten als $ rij) wp_delete_attachment ($ row-> ID);
De waarheid is dat deze stap een diepere uitleg behoeft, maar het is echt gemakkelijk. Het eerste wat we doen, is het uitvoeren van een query die de Meta-ID van onze afbeelding in de database zal achterhalen. Je denkt misschien dat het een leugen is, maar onze beeldgegevens bevinden zich in de wp_posts tafel. Welnu, de query probeert die registers te selecteren waarvan de guid (de afbeeldings-, post- of pagina-URL) overeenkomt met die van onze afbeeldingen en post_type = 'bijlage' (Het is een bijlage, is het niet?). We bewaren deze ID (er mogen er niet meer dan één zijn) in $ resultaten en geef het door als een parameter voor de WordPress wp_delete_attachment () die de afbeelding zelf zal verwijderen en ook de bijlage uit de mediabibliotheek zal verwijderen. Het is gemakkelijk, schoon en optimaal.
Stap 4 Ons logo laten zien in onze sitekop
Laten we eens kijken waar deze puinhoop ons naartoe leidde. We hebben de header.php sjabloon waarin we een spatie gaan invoegen voor ons geliefde logo, waar we dit stuk code zullen invoegen op de plaats die we het best bevallen:
> 
Hier is het resultaat:
Laatste opmerkingen
De waarheid is dat er niet veel meer te zeggen valt. Is het mogelijk om dit op een andere manier te doen? Natuurlijk, en eigenlijk vind ik constant voorbeelden, maar vanuit mijn oogpunt is de WordPress Media Uploader echt nuttig en eenmaal bekend, maakt het echt het leven gemakkelijk. We bewaren code, validatie (in de tutorial hebben we niet veel gebruikt, we hadden meer moeten gebruiken en we raden je aan hier meer over te lezen) en gebruiken we het bestandssysteem dat WordPress ons ter beschikking stelt. Dit zijn allemaal voordelen voor de gebruiker, die gewend is om met de interface van WordPress te werken en kan zien hoe alles goed werkt en volgens de standaardfunctionaliteit van WordPress. In feite zou je kunnen denken dat dit de standaardfunctionaliteit van WordPress is.
Externe bronnen
Hoewel we het hebben gehad over specifieke WordPress-functionaliteit, is de waarheid dat er veel tussentijdse kennis nodig is. Hier hebben we een lijst met gerelateerde bronnen:
- De complete handleiding voor de WordPress Settings API
- Thickbox op Github
gettext Filter- Omkadering met de database in WordPress
wp_delete_attachment
; ?>)
