Share
Wanneer het WordPress-team een nieuwe versie uitbrengt, introduceren ze enkele nieuwe functies, niet alleen voor gebruikers, maar ook voor ontwikkelaars. WordPress biedt veel tools die het gemakkelijker maken om nieuwe fantastische thema's of plug-ins te ontwikkelen.
Een van de nieuwste beschikbare API's voor WordPress-ontwikkelaars is de nieuwe Color Picker; Met deze functie kunt u het standaardtekstveld vervangen door een mooie en gebruiksvriendelijke kleurenkiezer.
In deze zelfstudie laat ik u zien hoe u de kleurkiezer toevoegt in uw WordPress-project. Laten we beginnen.
Er zijn enkele interessante redenen waarom WordPress-ontwikkelaars kleurenkeuze moeten implementeren met behulp van de nieuwe API:
Nadat we een aantal van de belangrijkste aspecten van WordPress Color Picker hebben behandeld, kunnen we deze toevoegen aan onze plug-in of thema.
Voordat ik verder ga, moet ik aangeven dat de Color Picker-API is geïntroduceerd in WordPress versie 3.5, dus om deze tutorial te doorlopen, zorg je ervoor dat versie 3.5 of hoger is geïnstalleerd.
Als u de kleurkiezer wilt toevoegen, voegt u eenvoudig een jQuery-bestand en een stylesheetbestand toe. De onderstaande coderegels laten u zien hoe u dat moet doen.
Accentsconagua
add_action ('admin_enqueue_scripts', 'wptuts_add_color_picker'); function wptuts_add_color_picker ($ hook) if (is_admin ()) // Voeg het css-bestand van de kleurkiezer toe wp_enqueue_style ('wp-color-picker'); // Voeg ons aangepaste jQuery-bestand toe met WordPress Color Picker-afhankelijkheid wp_enqueue_script ('custom-script-handle', plugins_url ('custom-script.js', __FILE__), array ('wp-color-picker'), false, true) ; Merk op dat wanneer we de custom-script.js met wp-color-picker afhankelijkheid. Nu kunt u de kleurkiezer toepassen op uw tekstvelden in uw jQuery-bestand.
(functie ($) // Voeg kleurkiezer toe aan alle ingangen met 'kleurveld' klasse $ (function () $ ('. color-field'). wpColorPicker (););) (jQuery) ; Op dit moment is het tijd om te laten zien hoe de Color Picker in een echte plug-in integreert.
Dit is wat we gaan bespreken:
Zodra u uw plug-in in uw WordPress hebt ingesteld wp-content / plugins map zijn we klaar om aan de slag te gaan. De afbeelding hieronder laat zien hoe ik de plug-in heb gestructureerd voor deze tutorial.
Plug-in structuur Binnen color-picker-plugin.php bestand, schrijf de opmerkingen met plugin-info en maak een nieuwe PHP-klasse genaamd CPA_Theme_Options. De onderstaande code toont alle klassemethoden die we stap voor stap implementeren.
/ * Plugin Name: Color Picker API Plug-in URI: http://code.tutsplus.com Beschrijving: Demo over de nieuwe Color Picker API-versie: 1.0 Auteur: code.tutsplus.com Auteur URI: http: //code.tutsplus. com * / / ** * Hoofdklasse - CPA staat voor Color Picker API * / class CPA_Theme_Options / * --------------------------- ----------------- * * Attributen * ----------------------------- --------------- * / / ** Verwijst naar een enkel exemplaar van deze klasse. * / private static $ instance = null; / * Opgeslagen opties * / openbare $ opties; / * -------------------------------------------- * * Constructor * -------------------------------------------- * / / ** * Creëert of retourneert een exemplaar van deze klasse. * * @return CPA_Theme_Options Een enkele instantie van deze klasse. * / public static function get_instance () if (null == self :: $ instance) self :: $ instance = new self; return self :: $ instance; // end get_instance; / ** * Initialiseert de plug-in door localisatie, filters en beheerfuncties in te stellen. * / persoonlijke functie __construct () / * --------------------------------------- ----- * * Functies * ----------------------------------------- --- * / / ** * Functie die de optiepagina onder het instellingenmenu zal toevoegen. * / public function add_page () / ** * Functie die de optiespagina zal weergeven. * / public function display_page () / ** * Functie die opties voor beheerpagina's registreert. * / public function register_page_options () / ** * Functie die een JavaScript-bestand voor Color Piker toevoegt. * / public function enqueue_admin_js () / ** * Functie die alle velden valideert. * / public function validate_options ($ fields) / ** * Functie die controleert of waarde een geldige HEX-kleur is. * / openbare functie check_color ($ waarde) / ** * Callback-functie voor instellingensectie * / openbare functie display_section () / * Laat leeg * / / ** * Functies die de velden weergeven. * / public function title_settings_field () public function bg_settings_field () // end class CPA_Theme_Options :: get_instance ();
Laten we eerst de constructor van de klasse implementeren. De onderstaande code laat zien wat de plug-in zal doen wanneer een nieuwe instantie wordt aangemaakt.
Het zal:
opties kenmerk met opgeslagen instellingen.persoonlijke functie __construct () // Voeg de pagina toe aan het admin-menu add_action ('admin_menu', array (& $ this, 'add_page')); // Registreer pagina-opties add_action ('admin_init', array (& $ this, 'register_page_options')); // CSS-regels voor Color Picker wp_enqueue_style ('wp-color-picker'); // Registreer javascript add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_js')); // Krijg geregistreerde optie $ this-> options = get_option ('cpa_settings_options'); De volgende stap behandelt hoe u de optiespagina kunt toevoegen en hoe u deze kunt weergeven.
/ ** * Functie die de optiepagina onder het instellingenmenu zal toevoegen. * / public function add_page () // $ page_title, $ menu_title, $ capability, $ menu_slug, $ callback_function add_options_page ('Thema-opties', 'Thema-opties', 'manage_options', __FILE__, array ($ this, 'display_page' )); / ** * Functie die de optiespagina zal weergeven. * / openbare functie display_page () ?> thema opties
Merk op dat we al geschreven hebben - in de display_page () methode - de code die het formulier, de velden en de verzendknop toevoegt voor het registreren van pagina-opties.
Stap 5
In deze stap gaan we de methoden implementeren die twee instellingenvelden registreren en weergeven: Blog Titel veld en Achtergrond kleur veld. Beide velden behoren tot de thema opties sectie.
/ ** * Functie die opties voor beheerderspagina registreert. * / public function register_page_options () // Voeg sectie toe voor optievelden add_settings_section ('cpa_section', 'Theme Options', array ($ this, 'display_section'), __FILE__); // id, title, display cb, page // Add Title Field add_settings_field ('cpa_title_field', 'Blog Title', array ($ this, 'title_settings_field'), __FILE__, 'cpa_section'); // id, titel, weergave cb, pagina, sectie // Achtergrondkleurveld toevoegen add_settings_field ('cpa_bg_field', 'Background Color', array ($ this, 'bg_settings_field'), __FILE__, 'cpa_section'); // id, title, display cb, page, section // Register-instellingen register_setting (__FILE__, 'cpa_settings_options', array ($ this, 'validate_options')); // optiegroep, optienaam, opschonen cb / ** * Functies die de velden weergeven. * / public function title_settings_field () $ val = (isset ($ this-> options ['title']))? $ this-> options ['title']: "; echo"'; public function bg_settings_field () $ val = (isset ($ this-> options ['title']))? $ this-> options ['background']: "; echo"'; Stap 6
Deze stappen zijn gericht op validatie. De onderstaande code laat zien hoe de twee velden moeten worden gevalideerd voordat ze worden opgeslagen.
/ ** * Functie die alle velden valideert. * / public function validate_options ($ fields) $ valid_fields = array (); // Valideer titelveld $ title = trim ($ velden ['titel']); $ valid_fields ['title'] = strip_tags (stripslashes ($ title)); // Valideer achtergrondkleur $ background = trim ($ fields ['background']); $ background = strip_tags (stripslashes ($ background)); // Controleer of is een geldige hex kleur als (FALSE === $ this-> check_color ($ achtergrond)) // Plaats de foutmelding add_settings_error ('cpa_settings_options', 'cpa_bg_error', 'Voeg een geldige kleur in voor achtergrond' , 'fout' ); // $ setting, $ code, $ message, $ type // Haal de vorige geldige waarde $ valid_fields ['background'] = $ this-> options ['background']; else $ valid_fields ['background'] = $ achtergrond; return apply_filters ('validate_options', $ valid_fields, $ fields); / ** * Functie die controleert of de waarde een geldige HEX-kleur is. * / openbare functie check_color ($ waarde) if (preg_match ('/ ^ # [a-f0-9] 6 $ / i', $ waarde)) // als gebruiker een HEX-kleur invoegt met # return true ; return false; Als de gebruiker probeert de kleurcode handmatig in te voegen, meldt de Kleurkiezer hem of haar dat hij / zij een ongeldige waarde heeft getypt op het verzendformulier; echter, kleur zal - hoewel het misschien verkeerd is - nog steeds worden opgeslagen. De check_color () functie zorgt ervoor de kleureninvoer te valideren.
Stap 7
Dit is de laatste stap waarin we ons JavaScript-bestand gaan gebruiken dat een eenvoudig tekstveld converteert in een handige kleurenkiezer.
/ ** * Functie die een JavaScript-bestand voor Color Piker toevoegt. * / public function enqueue_admin_js () // Zorg ervoor dat u de wp-color-picker depantie toevoegt aan js file wp_enqueue_script ('cpa_custom_js', plugins_url ('jquery.custom.js', __FILE__), array ('jquery', ' wp-color-picker '), ", true); Laten we het makenjquery.custom.js het dossier.
(functie ($) $ (function () // Voeg kleurkiezer toe aan alle ingangen met 'color-field' class $ ('.cpa-color-picker') .wpColorPicker (););) ( jQuery); Als u de plug-in probeert te activeren, moet u een dashboardpagina krijgen met alle velden zoals in de onderstaande afbeelding:
Laatste beheerderspagina
Dat is het!
In deze zelfstudie hebt u geleerd hoe u de nieuwe kleurkiezer van WordPress kunt gebruiken. In de plug-in demo heb ik je laten zien hoe je de kleurkiezer kunt integreren in een echte plug-in, maar je kunt de API gebruiken waar je nodig hebt, zoals in een metabox, een widget-formulier enzovoort.
De kleurkiezer werkt met WordPress 3.5+, maar als een gebruiker een eerdere versie heeft, werkt uw code. Zorg ervoor dat u elke kleurinvoer valideert met behulp van de check_color () methode getoond in Stap 6.
Nu zullen uw plug-ins of thema's krachtiger en gebruiksvriendelijker zijn.
Laatste beheerderspagina