Så här skapar du ett WordPress Avatar Management Plugin från början Komma igång

Avatar Manager för WordPress är en söt och enkel plugin för lagring av avatarer lokalt och mer. Lätt.

Förbättra din WordPress-webbplats genom att låta dina användare välja mellan att använda Gravatar eller en självhävd avatarbild direkt från deras profilskärm. Förbättrat arbetsflöde, bildgenerering på begäran och anpassade användarbehörigheter under ett inbyggt gränssnitt. Säg hej till pluginprogrammet Avatar Manager.


Introduktion

Ett WordPress-plugin är en PHP-applikation som lägger till en specifik uppsättning funktioner eller tjänster till WordPress, som kan integreras sömlöst med WordPress med hjälp av åtkomstpunkter och metoder som tillhandahålls av WordPress Plugin API.

Denna artikel kommer att vägleda dig genom processen att skapa ditt eget WordPress-plugin från början.

Notera: Denna artikel förutsätter att du redan är bekant med den grundläggande funktionaliteten i WordPress och PHP-programmering.


Steg 1. Ställa in arbetsytan

För att komma igång navigerar du till wp-content / plugins / under din WordPress-installation. För att ställa in arbetsytan, börja med att skapa följande struktur av kataloger och tomma filer som exemplifieras i bilden nedan:


Arbetsyta struktur för Avatar Manager plugin

Se till att du väljer ett unikt namn för plugin-katalogen och för den huvudsakliga PHP-filen, till exempel avatar-manager och avatar-manager.php i det här exemplet, och lägg alla plugins filer i den katalogen.

Tystnad är guld

Innan du börjar skriva vårt plugin, öppna avatar-manager / index.php och lägg till följande kod:

 

Du kan se den här filen på många ställen i WordPress. Det är ett enkelt trick som används för att förhindra katalogbläddring.


Steg 2. Skriva ett Basic WordPress-plugin

Nu är det dags att lägga in någon information i vår huvudsakliga plugin-PHP-fil.

Standard Plugin Information

Överst i pluginens huvudsakliga PHP-fil måste innehålla en standardinställningsinformationshuvud. Med denna rubrik kan WordPress känna igen att plugin finns, lägg till det på skärmen för pluginhantering så att det kan aktiveras, ladda det och köra funktionerna. utan huvudet kommer plugin aldrig att aktiveras och kommer aldrig att springa.

Öppna avatar-manager / avatar-manager.php och lägg till följande rader:

 

Den minsta informationen som WordPress behöver känna igen är vårt plugin Plugin namn linje. Resten av informationen (om den finns) kommer att användas för att skapa tabellen med plugins på skärmen för plugin management. Ordningen på linjerna är inte viktig.

Så att uppgraderingsmekanismen korrekt kan läsa versionen av vårt plugin rekommenderas att välja ett format för versionsnumret och hålla fast vid det mellan de olika utgåvorna.

Licensslugan bör vara en kort gemensam identifierare för licensen som plugin-modulen är under och är avsedd att vara ett enkelt sätt att vara tydlig om kodens licens.

versionshantering

För insyn och insikt i vår frigöringscykel och för att sträva efter att upprätthålla bakåtkompatibilitet, kommer Avatar Manager att behållas enligt Guidelines for Semantic Versioning så mycket som möjligt.

Utgåvor kommer numreras med följande format:

..

Och konstruerad med följande riktlinjer:

  • Att bryta bakåtkompatibilitet stöter huvudet (och återställer mindre och lapp).
  • Nya tillägg utan att bryta bakåtkompatibilitet stöter på mindre (och återställer plåstret).
  • Buggfixar och olika ändringar stöter på patchen.

För mer information om SemVer, besök semver.org.

Licens

Det är vanligt att följa standardrubriken med information om licensiering för plugin. De flesta plugins använder samma licens som används av WordPress, vilket är GPLv2-licensen eller en licens som är kompatibel med GPLv2. För att ange en GPLv2-licens, inkludera följande rader i vårt plugin:

 / * Copyright © 2013 Cătălin Dogaru Detta program är gratis programvara; Du kan omfördela den och / eller ändra den enligt villkoren i GNU General Public License som publiceras av Free Software Foundation. antingen version 2 i Licensen eller (eventuellt) någon senare version. Programmet distribueras i hopp om att det kommer att vara användbart, men UTAN NÅGOT GARANTI. utan ens den underförstådda garantin om SÄLJBARHET eller EGNETHET FÖR ET SÄRSKILT SYFTE. Se GNU General Public License för mer information. Du borde ha fått en kopia av GNU General Public License tillsammans med det här programmet. om inte, skriv till Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. * /

Nästa, öppna avatar-manager / LICENS och klistra in ren textversion av GPLv2 till den.


Steg 3. Programmera plugin för Avatarhanteraren

När du har slutfört det föregående steget bör du kunna hitta pluginprogrammet för Avatarhanteraren under Plugins-skärmen.


Avatarhanteraren plugin under Plugins Screen

Nu är det dags att göra vårt plugin faktiskt göra någonting. Aktivera det och lägg till följande rader av kod till huvudprogrammet PHP-fil:

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

De definiera() funktion definierar en namngiven konstant vid körning. De plugin_dir_url () funktionen får URL-adressen (med slående slash) för plugin __FIL__ passerade in. Värdet av __FIL__ är den fullständiga sökvägen och filnamnet för den aktuella filen och det är en av de åtta magiska konstanterna som PHP tillhandahåller.

Låt oss gå vidare och initiera vårt plugin:

 / ** * Ställer in standardinställningar och gör Avatarhanteraren tillgänglig för översättning. * * @uses load_theme_textdomain () För översättning / lokaliseringsstöd. * @ uses plugin_basename () För att hämta basnamnet för plugin. * * @since Avatar Manager 1.0.0 * / function avatar_manager_init () // Gör Avatar Manager tillgänglig för översättning. load_plugin_textdomain ('avatar-manager', false, dirname (plugin_basename (__FILE__)) '/ languages ​​/');  add_action ('init', 'avatar_manager_init');

De add_action () ring krokar en funktion till en specifik åtgärd. De i det Åtgärden körs efter att WordPress har slutfört laddning men innan några rubriker skickas. Även load_plugin_textdomain () samtal ska göras under i det, annars kan användarna inte koppla in den. Men mer om detta senare när jag täcker internationaliseringen av vårt plugin. De dirname () funktionen returnerar huvudkatalogens sökvägen, medan plugin_basename () funktionen får basnamnet på plugin.

Krokar, åtgärder och filter

Hooks tillhandahålls av WordPress för att tillåta ett plugin att haka i resten av WordPress; det vill säga att kalla funktioner i plugin vid specifika tider, och därigenom sätta pluginet i rörelse. Det finns två typer av krokar:

  • Åtgärder - Åtgärder är de krokar som WordPress-kärnan startar vid specifika punkter under körning, eller när specifika händelser inträffar.
  • Filter - Filter är krokarna som WordPress lanserar för att ändra text av olika typer innan de läggs till i databasen eller skickas till webbläsarens skärm.

Steg 4. Lägga till pluginalternativ

Därefter kommer vi lägga till pluginalternativen. Tillåt för anpassning gör ett plugin mycket flexiblare för användaren.

 / ** * Registerar sanitering återuppringning och plugin inställningsfält. * * @uses register_setting () För registrering av en inställning och dess sanering * återuppringning. * @uses add_settings_field () För att registrera ett inställningsfält till en inställning * sida och avsnitt. * @uses __ () För att hämta den översatta strängen från översätten (). * * @since Avatar Manager 1.0.0 * / function avatar_manager_admin_init () // Registers plugin inställning och dess sanitization callback. register_setting ('diskussion', 'avatar_manager', 'avatar_manager_sanitize_options'); // Registers avatar Uploads inställningsfältet under Settings Discussion // Screen. add_settings_field ('avatar-manager-avatar_uploads', __ ('Avatar Uploads', 'avatar-manager'), 'avatar_manager_avatar_uploads_settings_field', 'discussion', 'avatars'); // Registers Default Size Settings-fältet under Settings Discussion // Screen. add_settings_field ('avatar-manager-default-size', __ ('Standardstorlek', 'avatar-manager'), 'avatar_manager_default_size_settings_field', 'discussion', 'avatars')  add_action ('admin_init', 'avatar_manager_admin_init');

De admin_init Åtgärd utlöses före någon annan krok när en användare får åtkomst till adminområdet. De register_setting () funktionen registrerar en inställning och dess återanvändningsanrop. De add_settings_field () funktionen registrerar ett inställningsfält till en inställningssida och sektion. Vi använde dem för att lägga till våra pluginalternativ under inställningsdiskussionsskärmen. De __ () Funktionen kommer att förklaras senare när jag täcker internationaliseringsprocessen.

Steg 5. Lägga till återuppringning av sanering

Innan vi skriver upp saniteringens återuppringning måste vi definiera ytterligare två funktioner, avatar_manager_get_default_options () och avatar_manager_get_options ().

 / ** * Returnerar standardinställningar för plugin. * * @since Avatar Manager 1.0.0 * * @return array Plugin standardalternativ. * / funktion avatar_manager_get_default_options () $ options = array ('avatar_uploads' => AVATAR_MANAGER_AVATAR_UPLOADS, 'default_size' => AVATAR_MANAGER_DEFAULT_SIZE); returnera $ alternativ 

De avatar_manager_get_default_options () funktionen returnerar standardinställningar för plugin.

 / ** * Returnerar pluginalternativ. * * @uses get_option () För att få värden för ett namngivt alternativ. * @uses avatar_manager_get_default_options () För att hämta plugin default * alternativ. * * @since Avatar Manager 1.0.0 * * @return array Plugin alternativ. * / funktion avatar_manager_get_options () return get_option ('avatar_manager', avatar_manager_get_default_options ()); 

De avatar_manager_get_options () funktionen hämtar nuvarande pluginalternativ. De get_otpion () funktionen returnerar värdet av det angivna alternativet eller standardvärdet om alternativet inte finns i databasen.

 / ** * Sanitiserar och validerar pluginalternativ. * * @uses avatar_manager_get_default_options () För att hämta plugin default * alternativ. * @uses absint () För att konvertera ett värde till ett icke-negativt heltal. * * @since Avatar Manager 1.0.0 * * @return array Sanitized plugin-alternativ. * / funktion avatar_manager_sanitize_options ($ input) $ options = avatar_manager_get_default_options (); om (isset ($ input ['avatar_uploads']) && trim ($ input ['avatar_uploads'])) $ options ['avatar_uploads'] = trim ($ input ['avatar_uploads'])? 1: 0; om isset ($ input ['default_size']) && är_numerisk (trim ($ input ['default_size'])))) $ options ['default_size'] = absint (trim ($ input ['default_size'])); om ($ alternativ ['default_size'] < 1 ) $options['default_size'] = 1; elseif ( $options['default_size'] > 512) $ options ['default_size'] = 512;  returnera $ options 

De avatar_manager_sanitize_options () funktionen sanitiserar och validerar pluginalternativ. De isset () Samtalet bestämmer om en variabel är inställd och inte NULL. De trimma() funktionsremsor whitespaces från början och slutet av en sträng. De is_numeric () funktionen finner om en variabel är ett tal eller en numerisk sträng. De absint () funktionen omvandlar ett värde till ett icke-negativt heltal.


Steg 6. Lägga till inställningsfälten

Nu är det dags att lägga till inställningsfälten.

 / ** * Skriver ut fönstret Avataruppladdningsinställningar. * * @uses avatar_manager_get_options () För att hämta pluginalternativ. * @uses _e () För att visa den översatta strängen från översätten (). * @uses checked () För att jämföra två givna värden. * * @since Avatar Manager 1.0.0 * / funktion avatar_manager_avatar_uploads_settings_field () // Hämtar pluginalternativ. $ options = avatar_manager_get_options (); ?> 

De avatar_manager_avatar_uploads_settings_field () återuppringningsutskrifter Avatar-inställningsfältet. De kontrollerade() funktionen jämför två angivna värden och, om värdena är desamma, läggs till kontrollerade attribut till den aktuella kryssrutan. De _E () Funktionen kommer att beskrivas senare när jag förklarar internationaliseringsprocessen.

 / ** * Skriver ut standardfältet Storleksinställningar. * * @uses avatar_manager_get_options () För att hämta pluginalternativ. * @uses _e () För att visa den översatta strängen från översätten (). * * @since Avatar Manager 1.0.0 * / function avatar_manager_default_size_settings_field () // Hämtar pluginalternativ. $ options = avatar_manager_get_options (); ?> 

De avatar_manager_default_size_settings_field () återuppringningstryck Standardfältet Storleksinställningar.

Efter att du har lagt till inställningsfälten bör du kunna hitta pluginalternativen under Inställningsdiskussionsskärmen.


Inställningsalternativ för Avatarhanteraren under Inställningsdiskussionsskärmen

Det första alternativet kontrollerar om låg privilegierade användare kan ladda upp en avatarbild eller inte, medan det andra alternativet representerar standardstorleken för en avatarbild.


Steg 7. Lägga till Avataravsnittet

För att tillåta användare att hantera sin avatar måste vi lägga till en ny sektion på deras profilsida. Låt oss gå vidare och lägga till Avatar-avsnittet under användarprofilens användarskärm:

 / ** * Skriver Avatar sektion. * * @uses avatar_manager_get_options () För att hämta pluginalternativ. * @uses get_post_meta () För att hämta bilagan meta fält. * @uses remove_filter () För att ta bort en funktion som är kopplad till en angiven åtgärd * krok. * @uses _e () För att visa den översatta strängen från översätten (). * @uses checked () För att jämföra två givna värden. * @uses get_avatar () För att hämta avataren för en användare. * @uses esc_attr () För att flytta HTML-attribut. * @uses add_query_arg () För att hämta en ändrad URL-adress (med) frågesträng. * @uses self_admin_url () För att hämta en admin-URL-länk med valfri sökväg * bifogad. * @uses current_user_can () För att kontrollera om den nuvarande användaren har en viss * kapacitet. * @uses submit_button () För att echo en inlämningsknapp, med angiven text och * lämplig klass. * @uses __ () För att hämta den översatta strängen från översätten (). * * @since Avatar Manager 1.0.0 * * @param array $ profileuser Användare att redigera. * / funktion avatar_manager_edit_user_profile ($ profileuser) // Hämtar pluginalternativ. $ options = avatar_manager_get_options (); $ avatar_type = isset ($ profileuser-> avatar_manager_avatar_type)? $ profileuser-> avatar_manager_avatar_type: 'gravatar'; om (isset ($ profileuser-> avatar_manager_custom_avatar)) // Hämtar meta-fält för bilaga baserat på bilaga 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);  om (! isset ($ custom_avatar_rating) || tom ($ custom_avatar_rating)) $ custom_avatar_rating = 'G'; om (! isset ($ user_has_custom_avatar) || tom ($ user_has_custom_avatar)) $ user_has_custom_avatar = false; om ($ user_has_custom_avatar) // Tar bort funktionen som är ansluten till den angivna åtgärdskroken. remove_filter ('get_avatar', 'avatar_manager_get_avatar'); ?> 

...

De show_user_profile och edit_user_profile åtgärder hjälper till att anpassa användarprofilsidan. De $ profileuser parametern är a WP_User Ändamålet med användaren att redigeras. De get_post_meta () funktionen returnerar värdena för de anpassade fälten med den angivna nyckeln från det angivna inlägget. De tömma() funktionen avgör om en variabel är tom. De remove_filter () funktionen tar bort en funktion som är ansluten till en viss filterkrok; Det är nödvändigt att ta bort vår anpassade funktion för att hämta en avatarbild.

Därefter ska vi lägga till en avatarplockare, en uppladdningsblankett och en betygsväljare för den egna avatarbilden för varje användare.

Avatarväljaren

Avatarväljaren låter en användare välja mellan att använda Gravatar eller en anpassad avatarbild. För att lägga till det skriver du följande kod:

      

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

De get_avatar () funktionen hämtar avataren för en användare som angav ett användar-ID eller e-postadress. För att hämta en anpassad avatarbild av ett användar-ID, använde vi avatar_manager_get_custom_avatar () funktion, som vi skriver senare. De current_user_can () funktionen kontrollerar om den aktuella användaren har en viss förmåga. Normalt tillåter låga privilegierade användare som abonnenter inte att ladda upp filer. det är därför vi använder $ flaggor [ 'avatar_uploads'] variabel. De esc_attr () funktionen rymmer HTML-attribut. De self_admin_url () funktionen hämtar en länk för administratörslänken med tilläggsfri sökväg. De IS_PROFILE_PAGE konstant berättar om vi redigerar vår profil eller en annan användares profil. De wp_nonce_url () funktion hämtar URL med nonce läggas till URL-fråga. Innan vi raderar en avatar ber vi användaren att bekräfta genom att ringa showNotice.warn () metod vid onclick händelse av länken Radera som visar ett varningsmeddelande.

Uppladdningsformuläret

Uppladdningsformuläret tillåter en användare att bläddra och ladda upp en anpassad avatarbild:

       

De skickaknapp() funktionen ekar en inlämningsknapp, med angiven text och lämplig klass.

Betygsväljaren

Betygsökaren visas bara när en anpassad avatar är tillgänglig. För att lägga till det skriver du följande rader:

       
__ ('G - Lämplig för alla publiken', 'avatar-manager'), // Översättare: Innehållsklassificering: // http://bit.ly/89QxZA 'PG' => __ ('PG - Eventuellt offensiv, vanligtvis för publik 13 och högre ',' avatar-manager ') // Translators: Content suitability rating: // http://bit.ly/89QxZA' R '=> __ (' R - Avsett för vuxen publik över 17 ',' avatar-manager '), // Översättare: Innehållsklassificering: // http://bit.ly/89QxZA' X '=> __ (' X - Ännu mer mogen än ovan ',' avatar-manager ' )); foreach ($ betyg som $ key => $ rating) ?>

Det låter användaren välja ett lämpligt betyg för den anpassade avatarbilden som används.


Steg 8. Lägga till skript och format

Nu när vi har lagt till Avatar-sektionen är det dags att stila det. Vi skriver också lite JS för att ändra formulärkodningen; Detta steg krävs eftersom vi har lagt till en filuppladdningskontroll till den.

CSS-stilen

För att ställa in vårt plugin, öppna avatar-manager / avatar-manager.css och skriv följande rader:

 # profil-sida .avatar-manager img margin: 2px 0; vertikaljustering: mitt;  # profil-sida .avatar-manager .delete färg: röd; vaddering: 2px;  # profil-sida .avatar-manager .delete: sväva bakgrund: röd; färg: #fff; text-dekoration: ingen; 

Detta anpassar en avatarbild vertikalt med en radiobox och formaterar länken Ta bort för att få en sömlös integration med WordPress 'inbyggda gränssnitt.

JS-skriptet

Nästa, öppna avatar-manager / avatar-manager.js och lägg till följande kod:

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

De .attr () funktionen sätter värdet på ett eller flera attribut för varje matchat element. De enctype attribut anger hur formdata ska kodas när de skickas till servern. Vi behöver ändra sitt värde till multipart / form-data att tillåta filuppladdningar.


Steg 9. Enqueuing skript och stilar

Den säkra och rekommenderade metoden att lägga till skript och format på en WordPress-genererad sida är att använda wp_enqueue_script () och wp_enqueue_style (). Dessa funktioner inkluderar skript och stilar om de inte redan har inkluderats och hanterar beroenden på ett säkert sätt.

 / ** * Enqueues plugin skript och stilar för användarna din profil skärm. * * @uses wp_register_style () För att registrera en CSS-stilfil. * @uses wp_enqueue_style () För enqueuing en CSS stilfil. * @uses wp_register_script () För registrering av en JS-skriptfil. * @uses wp_enqueue_script () För enqueuing en JS-skriptfil. * * @since Avatar Manager 1.0.0 * / funktion avatar_manager_admin_enqueue_scripts () global $ hook_suffix; om ($ 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'); // Registers 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 script fil. wp_enqueue_script ('avatar-manager.js');  add_action ('admin_enqueue_scripts', 'avatar_manager_admin_enqueue_scripts');

De admin_enqueue_scripts Åtgärd är den första åtgärden ansluten till adminskriptåtgärderna. Då den globala variabeln $ hook_suffix Används för att bara lägga till våra skript och stilar på de sidor som behövs. Innan enqueuing ett skript eller en stil måste vi registrera det först. De wp_register_style () funktionen är ett säkert sätt att registrera en CSS-stilfil för senare användning. de wp_enqueue_style () funktionen används för att mäta den. På samma sätt, wp_register_script () och wp_enqueue_script () Funktioner används för att registrera och skriva in vår plugin JS-skriptfil.

Efter det här steget bör du kunna hitta pluginalternativen under användarprofilens användarskärm.


Inställningar för Avatarhanteraren i användarskärmen Användare

Det första alternativet låter dig välja mellan att använda Gravatar eller en självhäftad avatarbild. Det andra fältet låter dig bläddra och ladda upp en anpassad avatarbild. Alternativet Avatar Rating visas bara när en anpassad avatar är tillgänglig. Men mer om detta senare när vi hanterar avataruppladdningar.


Vad kommer härnäst

Detta kompletterar den första delen av vår handledning. Jag hoppas att du har haft den tid vi har spenderat tillsammans och tyckte att det var användbart. I nästa del ska vi slutföra pluginprogrammet Avatar Manager. Vi hanterar avataruppladdningar och bildgenerering på begäran, internationaliserar vårt plugin och mycket mer. Tack för att du läser!


referenser

  • WordPress-kodningsstandarder - Allmän information om kodningsstandarder för WordPress-utveckling.
  • Skriva ett plugin - Bästa startplatsen för att lära sig hur man utvecklar WordPress-plugins.
  • Plugin API - Beskrivning av hur man använder åtgärd och filterhakar i ditt WordPress-plugin och kärnfunktioner som plugins kan åsidosätta.
  • Inställnings API - En referens med exempel för att lägga till nya inställningar på befintliga inställningsskärmar.
  • Funktionsreferens - En artikel med många av de viktigaste WordPress-funktionerna är användbara för att plugga och utveckla teman. listar de flesta av kärnfunktionerna, exklusive mallstaggar.
  • SemVer - Semantic Versioning (SemVer) specifikation.
  • GPLv2 - GNU General Public License, version 2.

Externa länkar

  • Avatar Manager på WordPress Plugin Directory - Officiellt hem för plugin för Avatarhanteraren.
  • Avatarhanteraren på GitHub - Källkod för plugin för Avatarhanteraren.