Share
Når WordPress-teamet utgir en ny versjon, introduserer de noen nye funksjoner, ikke bare for brukere, men også for utviklere. WordPress tilbyr mange verktøy som gjør det enklere å utvikle nye fantastiske temaer eller plugins.
En av de nyeste APIene som er tilgjengelig for WordPress-utviklere, er den nye fargeplukkeren; Denne funksjonen tillater å erstatte standard tekstfelt med en fin og brukervennlig fargeplukker.
I denne opplæringen skal jeg vise deg hvordan du legger til fargeplukkeren i WordPress-prosjektet. La oss komme i gang.
Det er noen interessante grunner til at WordPress-utviklere bør implementere farger valg ved hjelp av den nye plukkeren API:
Etter at vi dekker noen av de viktigste aspektene av WordPress Color Picker, la oss legge den inn i plugin eller tema.
Før du fortsetter, må jeg angi at Color Picker API ble introdusert med WordPress versjon 3.5, så for å kunne jobbe gjennom denne opplæringen, så sørg for at du har installert versjon 3.5 eller nyere.
For å legge til farger velger du bare en jQuery-fil og stilarkfil. Kodelinjene under viser deg hvordan du gjør det.
Accentsconagua
add_action ('admin_enqueue_scripts', 'wptuts_add_color_picker'); funksjon wptuts_add_color_picker ($ hook) if (is_admin ()) // Legg til fargeplukkeren css fil wp_enqueue_style ('wp-color-picker'); // Inkluder vår tilpassede jQuery-fil med WordPress Color Picker-avhengighet wp_enqueue_script ('custom-script-handle', plugins_url ('custom-script.js', __FILE__), array ('wp-fargeplukker'), falsk, sann) ; Legg merke til at når vi har tatt med custom-script.js med wp-fargevelgeren avhengighet. Nå kan du bruke fargeplukkeren til tekstfeltene i jQuery-filen din.
(funksjon ($) // Legg til fargevalg til alle innganger som har 'fargefelt' klasse $ (funksjon () $ ('.fargefelt'). wpColorPicker (););) (jQuery) ; På dette tidspunktet er det på tide å vise hvordan fargeplukeren integreres inne i en ekte plugin.
Her er hva vi skal dekke:
Når du har konfigurert pluginet ditt inne i WordPress wp-innhold / tillegg mappe er vi klare til å komme i gang. Bildet nedenfor viser hvordan jeg har strukturert pluginet for denne opplæringen.
Plugin Structure Innsiden fargevelger-plugin.php fil, skriv kommentarene med plugininfo og opprett en ny PHP-klasse som heter CPA_Theme_Options. Koden nedenfor viser alle klassemetoder vi skal implementere trinn for trinn.
/ * Plugin Name: Color Picker API Plugin URI: http://code.tutsplus.com Beskrivelse: Demo om den nye Color Picker API Versjon: 1.0 Forfatter: code.tutsplus.com Forfatter URI: http: //code.tutsplus. com * / / ** * Hovedklasse - CPA står for Color Picker API * / klasse CPA_Theme_Options / * --------------------------- -----------------* * Egenskaper *----------------------------- --------------- * / / ** Henviser til en enkelt forekomst av denne klassen. * / privat statisk $ instance = null; / * Lagrede alternativer * / offentlige $ alternativer; / * -------------------------------------------- * * Constructor * -------------------------------------------- * / / ** * Oppretter eller returnerer en forekomst av denne klassen. * * @return CPA_Theme_Options En enkelt forekomst av denne klassen. * / offentlig statisk funksjon get_instance () if (null == self :: $ instance) self :: $ instance = nytt selv; returner selv: $ instance; // ende get_instance; / ** * Initialiserer plugin ved å angi lokalisering, filtre og administrasjonsfunksjoner. * / privat funksjon __construct () / * --------------------------------------- ----- * * Funksjoner * ----------------------------------------- --- * / / ** * Funksjon som vil legge til valgsiden under Innstillingsmeny. * / offentlig funksjon add_page () / ** * Funksjon som viser alternativsiden. * / offentlig funksjon display_page () / ** * Funksjon som vil registrere admin side alternativer. * / offentlig funksjon register_page_options () / ** * Funksjon som vil legge til javascript-fil for Color Piker. * / offentlig funksjon enqueue_admin_js () / ** * Funksjon som vil validere alle felt. * / offentlig funksjon validate_options ($ felt) / ** * Funksjon som vil sjekke om verdien er en gyldig HEX-farge. * / offentlig funksjon check_color ($ verdi) / ** * Tilbakeringingsfunksjon for innstillingsseksjonen * / offentlig funksjon display_section () / * La blank * / / ** * Funksjoner som viser feltene. * / offentlig funksjon title_settings_field () offentlig funksjon bg_settings_field () // sluttklasse CPA_Theme_Options :: get_instance ();
La oss først implementere klassekonstruktøren. Koden nedenfor viser hva plugin vil gjøre når en ny forekomst blir opprettet.
Det vil:
opsjoner Tilordne med innstillinger lagret.privat funksjon __construct () // Legg til siden til admin-menyen add_action ('admin_menu', array (& $ this, 'add_page')); // Registrer sidealternativer add_action ('admin_init', array (& $ this, 'register_page_options')); // Css regler for Color Picker wp_enqueue_style ('wp-color-picker'); // Registrer javascript add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_js')); // Få registrert alternativ $ this-> options = get_option ('cpa_settings_options'); Neste trinn dekker hvordan du legger til tilleggssiden og hvordan du viser den.
/ ** * Funksjon som vil legge til valgsiden under Innstillingsmeny. * / offentlig funksjon add_page () // $ page_title, $ menu_title, $ capability, $ menu_slug, $ callback_function add_options_page ('Temaalternativer', 'Temaalternativer', 'manage_options', __FILE__, array ($ this, 'display_page' )); / ** * Funksjon som viser alternativsiden. * / offentlig funksjon display_page () ?> Temaalternativer
Legg merke til at vi allerede har skrevet - inne i display_page () metode - koden som legger til skjemaet, feltene og innleveringsknappen for registrering av sidealternativer.
Trinn 5
I dette trinnet skal vi implementere metodene som vil registrere og vise to innstillingsfelter: bloggtittel felt og Bakgrunnsfarge felt. Begge feltene tilhører Temaalternativer seksjon.
/ ** * Funksjon som vil registrere admin side alternativer. * / offentlig funksjon register_page_options () // Legg til seksjon for alternativfelt add_settings_section ('cpa_section', 'Theme Options', array ($ dette, 'display_section'), __FILE__); // id, tittel, display cb, side // Legg til tittelfelt add_settings_field ('cpa_title_field', 'Blogtittel', array ($ dette, 'title_settings_field'), __FILE__, 'cpa_section'); // id, tittel, display cb, side, seksjon // Legg til bakgrunnsfargefelt add_settings_field ('cpa_bg_field', 'Bakgrunnsfarge', array ($ this, 'bg_settings_field'), __FILE__, 'cpa_section'); // id, tittel, display cb, side, seksjon // Registrer innstillinger register_setting (__FILE__, 'cpa_settings_options', array ($ this, 'validate_options')); // alternativgruppe, alternativnavn, sanitize cb / ** * Funksjoner som viser feltene. * / offentlig funksjon title_settings_field () $ val = (isset ($ this-> alternativer ['title'])))? $ this-> alternativer ['title']: "; echo"'; offentlig funksjon bg_settings_field () $ val = (isset ($ this-> alternativer ['title'])))? $ this-> alternativer ['background']: "; echo"'; Trinn 6
Disse trinnene er fokusert på validering. Koden nedenfor viser hvordan du validerer de to feltene før du lagrer dem.
/ ** * Funksjon som vil validere alle felt. * / offentlig funksjon validate_options ($ felt) $ valid_fields = array (); // Validate Title Field $ title = trim ($ felt ['title']); $ valid_fields ['title'] = strip_tags (stripslashes ($ title)); // Valider bakgrunnsfarge $ background = trim ($ felt ['bakgrunn']); $ background = strip_tags (stripslashes ($ background)); // Sjekk om er en gyldig hex-farge hvis (FALSE === $ this-> check_color ($ background)) // Angi feilmeldingen add_settings_error ('cpa_settings_options', 'cpa_bg_error', 'Sett inn en gyldig farge for bakgrunnen' , 'feil'); // $ innstilling, $ kode, $ melding, $ type // Få forrige gyldig verdi $ valid_fields ['background'] = $ this-> alternativer ['background']; ellers $ valid_fields ['background'] = $ background; return apply_filters ('validate_options', $ valid_fields, $ felt); / ** * Funksjon som vil sjekke om verdien er en gyldig HEX-farge. * / offentlig funksjon check_color ($ verdi) if (preg_match ('/ ^ # [a-f0-9] 6 $ / i', $ verdi)) // hvis brukeren setter inn en HEX-farge med # return true ; returner falsk; Hvis brukeren prøver å sette inn fargekoden manuelt, informerer fargeplukkeren ham eller henne om at han / hun har skrevet en ugyldig verdi på innleveringsskjemaet. men fargen - selv om den kan være feil - vil fortsatt bli lagret. De check_color () funksjonen tar vare på å validere fargeinngangen.
Trinn 7
Dette er det siste trinnet der vi skal inkludere vår JavaScript-fil som konverterer et enkelt tekstfelt i en nyttig fargeplukker.
/ ** * Funksjon som vil legge til javascript-fil for Color Piker. * / offentlig funksjon enqueue_admin_js () // Pass på at du legger til wp-color-picker-avhengigheten til js-filen wp_enqueue_script ('cpa_custom_js', plugins_url ('jquery.custom.js', __FILE__), array ('jquery' wp-color-picker '), "true"; La oss lagejquery.custom.js fil.
(funksjon ($) $ (funksjon () // Legg til fargevalg til alle innganger som har 'fargefelt' klasse $ ('.cpa-fargeplukker') .wpColorPicker (););) jQuery); Hvis du prøver å aktivere pluginet, bør du få en dashboardside med alle feltene som i bildet vist nedenfor:
Endelig admin side
Det er det!
I denne opplæringen har du lært hvordan du skal inkludere den nye fargevalgeren drevet av WordPress. I plugin-demoen har jeg vist deg hvordan du integrerer fargeplukkeren i en ekte plugin, men du kan bruke APIen der du trenger, for eksempel inne i en meta-boks, en widget skjema og så videre.
Fargeplukkeren fungerer med WordPress 3.5 +, men hvis en bruker har en tidligere versjon, vil koden din fungere. Sørg for å validere hver fargeinngang ved hjelp av check_color () metode vist i Trinn 6.
Nå vil pluginene eller temaene dine bli kraftigere og brukervennlige.
Endelig admin side