Slik oppretter du et WordPress Avatar Management Plugin fra scratch Komme i gang

Avatar Manager for WordPress er et søtt og enkelt plugin for lagring av avatarer lokalt og mer. Enkelt.

Forbedre WordPress-nettstedet ditt ved å la brukerne velge mellom å bruke Gravatar eller et selvbildebasert avatarbilde rett fra profilskjermen. Forbedret arbeidsflyt, on-demand bildegenerering og egendefinerte brukerrettigheter under et innfødt grensesnitt. Si hei til Avatar Manager-plugin.


Introduksjon

Et WordPress-plugin er et PHP-program som legger til et bestemt sett med funksjoner eller tjenester til WordPress, som kan sømløst integreres med WordPress ved hjelp av tilgangspunkter og metoder som tilbys av WordPress Plugin API.

Denne artikkelen vil lede deg gjennom prosessen med å lage ditt eget WordPress-plugin fra grunnen av.

Merk: Denne artikkelen antar at du allerede er kjent med grunnleggende funksjonaliteten til WordPress, og PHP programmering.


Trinn 1. Sette opp arbeidsområdet

For å komme i gang, naviger til wp-innhold / plugg / under din WordPress installasjon. For å sette opp arbeidsområdet starter du ved å opprette følgende struktur av kataloger og tomme filer som eksemplifisert i bildet nedenfor:


Arbeidsområdestruktur for plugin for Avatar Manager

Pass på å velge et unikt navn for plugin-katalogen og for den viktigste PHP-filen, for eksempel avatar-leder og avatar-manager.php i dette eksemplet, og sett alle plugins filene inn i katalogen.

Stillhet er gull

Før du begynner å skrive vårt plugin, åpne avatar-manager / index.php og legg til følgende kode:

 

Du kan se denne filen på mange steder av WordPress. Det er et enkelt triks som brukes til å forhindre mapping av kataloger.


Trinn 2. Skrive et grunnleggende WordPress-plugin

Nå er det på tide å legge inn noen informasjon i PHP-filen vår.

Standard plugininformasjon

Øverst i pluginets viktigste PHP-fil må inneholde en standard plugin-informasjonshoved. Denne overskriften lar WordPress gjenkjenne at pluginet eksisterer, legg det til plugin management skjermbildet slik at det kan aktiveres, laste det og kjøre dets funksjoner; uten overskriften, vil pluggen aldri bli aktivert og vil aldri løpe.

Åpen avatar-manager / avatar-manager.php og legg til følgende linjer:

 

Den minste informasjonen som WordPress trenger for å gjenkjenne vårt plugin er Plugin Name linje. Resten av informasjonen (hvis tilstede) vil bli brukt til å lage tabellen med plugins på plugin management skjermen. Ordrens rekkefølge er ikke viktig.

For at oppgraderingsmekanismen kan lese versjonen av pluginet på riktig måte, anbefales det å velge et format for versjonsnummeret og holde seg til det mellom de forskjellige utgivelsene.

Lisenssluggen bør være en kort felles identifikator for lisensen som plugin er under og er ment å være en enkel måte å være eksplisitt på om lisensen til koden.

versjons~~POS=TRUNC

For gjennomsiktighet og innsikt i vår utgivelsessyklus, og for å streve for å opprettholde bakoverkompatibilitet, vil Avatar Manager opprettholdes under retningslinjene for Semantisk Versjonering så mye som mulig.

Utgivelser vil bli nummerert med følgende format:

..

Og konstruert med følgende retningslinjer:

  • Bryter bakoverkompatibilitet støter hovedrollen (og tilbakestiller mindre og lapp).
  • Nye tillegg uten å bryte bakoverkompatibilitet støter den mindre (og nullstiller oppdateringen).
  • Feilrettinger og feilendringer støter på oppdateringen.

For mer informasjon om SemVer, vennligst besøk semver.org.

Tillatelse

Det er vanlig å følge standardoverskriften med informasjon om lisensiering for plugin. De fleste plugins bruker den samme lisensen som brukes av WordPress, som er GPLv2-lisensen eller en lisens kompatibel med GPLv2. For å angi et GPLv2-lisens, ta med følgende linjer i plugin-modulen:

 / * Copyright © 2013 Cătălin Dogaru Dette programmet er gratis programvare; Du kan omfordele den og / eller endre den i henhold til GNU General Public License som publisert av Free Software Foundation. enten versjon 2 av lisensen, eller (etter eget valg) enhver senere versjon. Dette programmet distribueres i håp om at det vil være nyttig, men UTEN NOGEN GARANTI; uten selv den underforståtte garantien om SALGBARHET eller EGNETHET TIL ET BESTEMT FORMÅL. Se GNU General Public License for mer informasjon. Du burde ha mottatt en kopi av GNU General Public License sammen med dette programmet; hvis ikke, skriv til Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. * /

Deretter åpne avatar-manager / LISENS og lim inn ren tekstversjon av GPLv2 til den.


Trinn 3. Programmering av Avatar Manager Plugin

Etter at du har fullført det forrige trinnet, bør du kunne finne Avatar Manager-pluginet under Plugins-skjermbildet.


Avatar Manager-plugin under Plugins Screen

Nå er det på tide å gjøre pluginet vårt faktisk å gjøre noe. Aktiver den og legg til følgende kodelinjer til hovedprogrammet PHP-fil:

 define ('AVATAR_MANAGER_VERSION', '1.0.0'); define ('AVATAR_MANAGER_PLUGIN_URL', plugin_dir_url (__FILE__)); define ('AVATAR_MANAGER_AVATAR_UPLOADS', 0); define ('AVATAR_MANAGER_DEFAULT_SIZE', 96);

De definere() funksjon definerer en navngitt konstant ved kjøring. De plugin_dir_url () funksjonen får URL-adressen (med skråstrekk) for plugin-modulen __FIL__ gikk inn. Verdien av __FIL__ er den fullstendige banen og filnavnet til den nåværende filen, og det er en av de åtte magiske konstantene som PHP gir.

La oss gå videre og initialisere pluginet vårt:

 / ** * Angir standardinnstillingene for plugin og gjør Avatar Manager tilgjengelig for oversettelse. * * @uses load_theme_textdomain () For oversettelse / lokaliseringstøtte. * @uses plugin_basename () For å hente basenavnet til plugin. * * @since Avatar Manager 1.0.0 * / funksjon avatar_manager_init () // Gjør Avatar Manager tilgjengelig for oversettelse. load_plugin_textdomain ('avatar-manager', falsk, dirname (plugin_basename (__FILE__)) '/ languages ​​/');  add_action ('init', 'avatar_manager_init');

De ADD_ACTION () ring kroker en funksjon til en bestemt handling. De i det Handlingen løper etter at WordPress er ferdig med å laste, men før noen overskrifter sendes. Også load_plugin_textdomain () samtale bør gjøres under i det, ellers kan brukerne ikke koble seg til det. Men mer om dette senere, når jeg skal dekke internasjonaliseringen av pluginet vårt. De dirname () funksjonen returnerer hovedkatalogens sti, mens plugin_basename () funksjonen får basenavnet til plugin.

Kroker, handlinger og filtre

Kroker er gitt av WordPress for å tillate et plugin å koble til resten av WordPress; det vil si å ringe til funksjoner i pluginet til bestemte tider, og dermed sette pluggen i bevegelse. Det er to typer kroker:

  • Handlinger - Handlinger er kroker som WordPress-kjerne lanserer på bestemte punkter under utførelsen, eller når bestemte hendelser oppstår.
  • Filtre - Filtre er kroker som WordPress lanserer for å endre tekst av ulike typer før du legger den til i databasen eller sender den til nettleserskjermbildet.

Trinn 4. Legge til pluginalternativer

Deretter skal vi legge til plugin-alternativene. Å tillate for tilpasning gjør et plugin langt mer fleksibelt for brukeren.

 / ** * Registrerer sanitering tilbakeringings-og plugin innstillingsfelter. * * @uses register_setting () For registrering av innstilling og sanitering * tilbakeringing. * @uses add_settings_field () For å registrere et innstillingsfelt til en innstillinger * side og seksjon. * @uses __ () For å hente den oversatte strengen fra oversettelsen (). * * @since Avatar Manager 1.0.0 * / funksjon avatar_manager_admin_init () // Registrerer plugin innstilling og dens sanitization tilbakeringing. register_setting ('discussion', 'avatar_manager', 'avatar_manager_sanitize_options'); // Registrerer Avataropplastinger innstillingsfelt under Innstillinger Diskusjon // Skjerm. add_settings_field ('avatar-manager-avatar_uploads', __ ('Avatar Uploads', 'avatar-manager'), 'avatar_manager_avatar_uploads_settings_field', 'discussion', 'avatars'); // Registrerer standardstørrelsesinnstillingsfeltet under Innstillinger Diskusjon // Skjerm. add_settings_field ('avatar-manager-default-size', __ ('Standard størrelse', 'avatar-manager'), 'avatar_manager_default_size_settings_field', 'discussion', 'avatars');  add_action ('admin_init', 'avatar_manager_admin_init');

De admin_init Handlingen utløses før noen annen krok når en bruker åpner administrasjonsområdet. De register_setting () funksjonen registrerer en innstilling og dens sanitisering tilbakeringing. De add_settings_field () funksjonen registrerer et innstillingsfelt til en innstillingsside og seksjon. Vi brukte dem til å legge til våre pluginalternativer under Innstillinger Diskusjonsskjerm. De __ () Funksjonen vil bli forklart senere, når jeg skal dekke internasjonaliseringsprosessen.

Trinn 5. Legge til sanitiseringsanropet

Før du skriver inn sanitisering tilbakeringing, må vi definere to flere funksjoner, avatar_manager_get_default_options () og avatar_manager_get_options ().

 / ** * Returnerer standardinnstillingene for plugin. * * @since Avatar Manager 1.0.0 * * @return array Plugin standardalternativer. * / funksjon avatar_manager_get_default_options () $ options = array ('avatar_uploads' => AVATAR_MANAGER_AVATAR_UPLOADS, 'default_size' => AVATAR_MANAGER_DEFAULT_SIZE); returnere $ alternativer; 

De avatar_manager_get_default_options () Funksjonen returnerer standardinnstillingene for plugin.

 / ** * Returnerer plugin alternativer. * * @uses get_option () For å få verdier for et navngitt alternativ. * @uses avatar_manager_get_default_options () For å hente plugin default * alternativer. * * @since Avatar Manager 1.0.0 * * @return array Plugin alternativer. * / funksjon avatar_manager_get_options () return get_option ('avatar_manager', avatar_manager_get_default_options ()); 

De avatar_manager_get_options () funksjonen henter nåværende plugin-alternativer. De get_otpion () funksjonen returnerer verdien av det angitte alternativet eller standardverdien hvis alternativet ikke er i databasen.

 / ** * Sanitiserer og validerer plugin-alternativer. * * @uses avatar_manager_get_default_options () For å hente plugin default * alternativer. * @uses absint () For å konvertere en verdi til et ikke-negativt heltall. * * @since Avatar Manager 1.0.0 * * @return array Sanitized plugin alternativer. * / funksjon avatar_manager_sanitize_options ($ input) $ options = avatar_manager_get_default_options (); hvis (isset ($ input ['avatar_uploads']) && trim ($ input ['avatar_uploads'])) $ alternativer ['avatar_uploads'] = trim ($ input ['avatar_uploads'])? 1: 0; hvis isset ($ input ['default_size']) && er_numerisk (trim ($ input ['default_size'])))) $ options ['default_size'] = absint (trim ($ input ['default_size'])); hvis ($ alternativer ['default_size'] < 1 ) $options['default_size'] = 1; elseif ( $options['default_size'] > 512) $ alternativer ['default_size'] = 512;  returner $ alternativer; 

De avatar_manager_sanitize_options () funksjonen sanitiserer og validerer plugin-alternativer. De isset () anrop bestemmer om en variabel er satt og ikke NULL. De trim () funksjonstrimler mellomrom fra begynnelsen og slutten av en streng. De is_numeric () funksjonen finner ut om en variabel er et tall eller en numerisk streng. De Absint () funksjonen konverterer en verdi til et ikke-negativt heltall.


Trinn 6. Legge til innstillingsfeltene

Nå er det på tide å legge inn innstillingsfeltene.

 / ** * Skriver Avatar-innstillingsfelt. * * @uses avatar_manager_get_options () For å hente plugin-alternativer. * @uses _e () For å vise oversatt streng fra oversettelsen (). * @uses sjekket () For å sammenligne to gitt verdier. * * @since Avatar Manager 1.0.0 * / funksjon avatar_manager_avatar_uploads_settings_field () // Henter plugin alternativer. $ options = avatar_manager_get_options (); ?> 

De avatar_manager_avatar_uploads_settings_field () Tilbakeringingsutskrifter Innstillingsfelt for Avataropplastinger. De sjekket() funksjonen sammenligner to givne verdier, og hvis verdiene er de samme, legger du til sjekket Tilordne gjeldende avkrysningsboks. De _E () Funksjon vil bli beskrevet senere, når jeg skal forklare internasjonaliseringsprosessen.

 / ** * Skriver ut standard størrelse innstillingsfelt. * * @uses avatar_manager_get_options () For å hente plugin-alternativer. * @uses _e () For å vise oversatt streng fra oversettelsen (). * * @since Avatar Manager 1.0.0 * / funksjon avatar_manager_default_size_settings_field () // Henter plugin alternativer. $ options = avatar_manager_get_options (); ?> 

De avatar_manager_default_size_settings_field () tilbakeringingsutskrifter Standard størrelse innstillingsfelt.

Etter at du har lagt inn innstillingsfeltene, bør du kunne finne pluginalternativene under Innstillingsdiskusjonsskjermbildet.


Avinstalleringsprogrammet for Avatarbehandling under Innstillinger Diskusjonsskjerm

Det første alternativet styrer om lav privilegerte brukere kan laste opp et avatarbilde eller ikke, mens det andre alternativet representerer standardstørrelsen for et avatarbilde.


Trinn 7. Legge til Avataravsnittet

For å tillate brukere å administrere deres avatar, må vi legge til en ny seksjon på profilsiden deres. La oss gå videre og legge til Avatar-delen under Brukerens profilskjerm:

 / ** * Skriver Avatar-delen. * * @uses avatar_manager_get_options () For å hente plugin-alternativer. * @uses get_post_meta () For å hente vedlegg meta felt. * @uses remove_filter () For å fjerne en funksjon knyttet til en spesifisert handling * krog. * @uses _e () For å vise oversatt streng fra oversettelsen (). * @uses sjekket () For å sammenligne to gitt verdier. * @uses get_avatar () For å hente avataren for en bruker. * @uses esc_attr () For å rømme HTML-attributter. * @uses add_query_arg () For å hente en endret URL-streng (med). * @uses self_admin_url () For å hente en admin URL-link med valgfri sti * vedlagt. * @uses current_user_can () For å sjekke om den nåværende brukeren har en viss * evne. * @uses submit_button () For å ekko en send-knapp, med gitt tekst og * passende klasse. * @uses __ () For å hente den oversatte strengen fra oversettelsen (). * * @since Avatar Manager 1.0.0 * * @param array $ profileuser Bruker å redigere. * / funksjon avatar_manager_edit_user_profile ($ profileuser) // Henter plugin-alternativer. $ options = avatar_manager_get_options (); $ avatar_type = isset ($ profileuser-> avatar_manager_avatar_type)? $ profileuser-> avatar_manager_avatar_type: 'gravatar'; hvis (isset ($ profileuser-> avatar_manager_custom_avatar)) // Henter vedleggsmetafeltene basert på vedleggs-ID. $ custom_avatar_rating = get_post_meta ($ profileuser-> avatar_manager_custom_avatar, '_avatar_manager_custom_avatar_rating', true); $ user_has_custom_avatar = get_post_meta ($ profileuser-> avatar_manager_custom_avatar, '_avatar_manager_is_custom_avatar', true);  hvis (! isset ($ custom_avatar_rating) || tom ($ custom_avatar_rating)) $ custom_avatar_rating = 'G'; hvis (! isset ($ user_has_custom_avatar) || tom ($ user_has_custom_avatar)) $ user_has_custom_avatar = false; hvis ($ user_has_custom_avatar) // Fjerner funksjonen som er festet til den angitte handlingen. remove_filter ('get_avatar', 'avatar_manager_get_avatar'); ?> 

...

De show_user_profile og edit_user_profile handlinger hjelper til med tilpasning av brukerprofilsiden. De $ profileuser parameteren er a WP_User objektet om at brukeren skal redigeres. De get_post_meta () funksjonen returnerer verdiene til de egendefinerte feltene med den angitte nøkkelen fra det angitte innlegget. De tømme() funksjonen bestemmer om en variabel er tom. De remove_filter () funksjon fjerner en funksjon som er festet til en spesifisert filterkrok; det er nødvendig å fjerne vår egendefinerte funksjon for å hente et avatar bilde.

Deretter skal vi legge til en avataravleser, et opplastingsskjema og en vurderingskoder for det tilpassede avatarbildet for hver bruker.

Avatarvælgeren

Avatarvælgeren lar en bruker velge mellom å bruke Gravatar eller et tilpasset avatarbilde. For å legge til det, skriv følgende kode:

      

'avatar', 'avatar', 'avatar' -edit.php '))); ?> ID); ?> "onclick =" return showNotice.warn (); ">

De get_avatar () funksjonen henter avataren for en bruker som oppgav en bruker-ID eller e-postadresse. For å gjenopprette et tilpasset avatarbilde av en bruker-ID, brukte vi avatar_manager_get_custom_avatar () funksjon, som vi vil skrive senere. De current_user_can () funksjonen kontrollerer om den nåværende brukeren har en viss evne. Vanligvis er små privilegerte brukere som abonnenter ikke lov til å laste opp filer; Det er derfor vi bruker $ alternativer [ 'avatar_uploads'] variabel. De esc_attr () funksjonen unngår HTML-attributter. De self_admin_url () funksjonen henter en admin URL-lenke med valgfri bane som er lagt til. De IS_PROFILE_PAGE Konstant forteller oss om vi redigerer vår profil eller en annen brukers profil. De wp_nonce_url () funksjonen henter URL med nonce lagt til URL-spørringen. Før du sletter en avatar, ber vi brukeren å bekrefte ved å ringe showNotice.warn () metode på ved trykk Hendelsen til Slett-koblingen som viser en advarsel.

Opplastingsskjemaet

Opplastingsskjemaet lar brukeren bla gjennom og laste opp et tilpasset avatarbilde:

       

De submit_button () funksjonen ekkoer en sendeknapp, med gitt tekst og passende klasse.

Vurderingsvelgeren

Klassifiseringsvelgeren vises kun når en tilpasset avatar er tilgjengelig. For å legge til det, skriv følgende linjer:

       
__ ('G - Passer for alle publikum', 'avatar-manager'), // Oversettere: Innholdsstatus: // http://bit.ly/89QxZA 'PG' => __ ('PG - muligens støtende, vanligvis for publikum 13 og over ',' avatar-manager '), // Oversettere: Vurdering av innholdsegnethet: // http://bit.ly/89QxZA' R '=> __ (' R - Intensert for voksen publikum over 17 ',' avatar-manager '), // Oversettere: Innholdsvurdering: // http://bit.ly/89QxZA' X '=> __ (' X - enda mer moden enn ovenfor ',' avatar-manager ' )); foreach ($ ratings som $ key => $ rating) ?>

Det lar brukeren velge en passende vurdering for det tilpassede avatarbildet som blir brukt.


Trinn 8. Legge til skript og stiler

Nå som vi har lagt til Avatar-seksjonen, er det på tide å style det. Også, vi vil skrive noen JS for å endre formkodingen; Dette trinnet kreves fordi vi har lagt til en filopplastingskontroll til den.

CSS-stilen

For å style vårt plugin, åpne avatar-manager / avatar-manager.css og skriv følgende linjer:

 # profil-side .avatar-manager img margin: 2px 0; vertikaljustering: midt;  # profil-side .avatar-manager .delete color: red; polstring: 2px;  # profil-side .avatar-manager .delete: svever bakgrunn: rød; farge: #fff; tekst-dekorasjon: ingen; 

Dette justerer et avatarbilde vertikalt med en radiobox og stiler slettekoblingen tilsvarende for en sømløs integrering med WordPress 'innfødt grensesnitt.

The JS Script

Deretter åpne avatar-manager / avatar-manager.js og legg til følgende kode:

 jQuery (dokument) .ready (funksjon () jQuery ('# din-profil') .attr ('enctype', 'multipart / form-data'););

De .attr () funksjonen angir verdien av ett eller flere attributter for hvert matchet element. De enctype Attributt angir hvordan skjemadata skal kodes når de sendes til serveren. Vi må endre verdien til multipart / skjema-data å tillate filopplastinger.


Trinn 9. Enqueuing skript og stiler

Den sikre og anbefalte metoden for å legge til skript og stiler til en WordPress-generert side, er ved å bruke wp_enqueue_script () og wp_enqueue_style (). Disse funksjonene inkluderer skript og stiler hvis de ikke allerede er inkludert, og håndterer avhengighet på en sikker måte.

 / ** * Enqueues plugin skript og stiler for Brukere Din Profil Screen. * * @uses wp_register_style () For å registrere en CSS stilfil. * @uses wp_enqueue_style () For enqueuing en CSS stilfil. * @uses wp_register_script () For registrering av en JS-skriptfil. * @uses wp_enqueue_script () For enqueuing en JS skriptfil. * * @since Avatar Manager 1.0.0 * / funksjon avatar_manager_admin_enqueue_scripts () global $ hook_suffix; hvis ($ hook_suffix == 'profile.php' || $ hook_suffix == 'user-edit.php') // Registers plugin CSS stilfil. wp_register_style ('avatar-manager.css', AVATAR_MANAGER_PLUGIN_URL. 'avatar-manager.css', array (), '1.0.0'); // Enqueues plugin CSS stilfil. wp_enqueue_style ('avatar-manager.css'); // Registrerer plugin JS script fil. wp_register_script ('avatar-manager.js', AVATAR_MANAGER_PLUGIN_URL. 'avatar-manager.js', array ('jquery'), '1.0.0'); // Enqueues plugin JS skriptfil. wp_enqueue_script ('avatar-manager.js');  add_action ('admin_enqueue_scripts', 'avatar_manager_admin_enqueue_scripts');

De admin_enqueue_scripts handling er den første handlingen hekta i administrasjonsskripthandlingene. Deretter den globale variabelen $ hook_suffix brukes til å legge til våre skript og stiler bare på de nødvendige sidene. Før enqueuing et script eller en stil, må vi registrere det først. De wp_register_style () funksjonen er en trygg måte å registrere en CSS stilfil for senere bruk; de wp_enqueue_style () funksjonen brukes til å enqueue den. På samme måte, wp_register_script () og wp_enqueue_script () Funksjoner brukes til å registrere og enqueue vår plugin JS script fil.

Etter dette trinnet bør du kunne finne pluginalternativene under User Your Profile Screen.


Alternativet Avatar Manager plugin under Brukerens profilskjerm

Det første alternativet lar deg velge mellom å bruke Gravatar eller et selvbetjent avatarbilde. Det andre feltet lar deg bla gjennom og laste opp et tilpasset avatarbilde. Alternativet Avatar-vurdering vises kun når en tilpasset avatar er tilgjengelig. Men mer om dette senere, når vi skal håndtere avataropplastinger.


Hva blir det neste

Dette fullfører den første delen av opplæringen vår. Jeg håper du har hatt den tiden vi har brukt sammen og funnet det å være nyttig. I neste del skal vi fullføre Avatar Manager plugin; Vi håndterer avataropplastinger og on-demand bildegenerering, internasjonaliserer pluginet vårt og mye mer. Takk for at du leste!


referanser

  • WordPress Coding Standards - Generell informasjon om kodingsstandarder for WordPress-utvikling.
  • Skrive et plugin - Best utgangspunkt for å lære om hvordan å utvikle WordPress plugins.
  • Plugin API - Beskrivelse av hvordan du bruker handling og filter kroker i WordPress plugin, og kjernefunksjoner som plugins kan overstyre.
  • Innstillinger API - En referanse med eksempler for å legge til nye innstillinger i eksisterende innstillingsskjermbilder.
  • Funksjonsreferanse - En artikkel med mange av de viktigste WordPress-funksjonene som er nyttig for plugin og temautviklere; Viser de fleste kjernefunksjonene, unntatt malemerker.
  • SemVer - Semantic Versioning (SemVer) spesifikasjon.
  • GPLv2 - GNU General Public License, versjon 2.

Eksterne linker

  • Avatar Manager på WordPress Plugin Directory - Offisielt hjem for plugin for Avatar Manager.
  • Avatar Manager på GitHub - Kildekode for plugin for Avatar Manager.