نحوه ی ایجاد افزونه آواتار مدیر برای وردپرس

ایجاد آواتار مدیر در وردپرس کار بسیار لذت بخشی است و افزونه ی ساده ای برای ذخیره ی آواتارهای محلی و غیر محلی ارائه می دهد. شما با این کار به کاربران خود در انتخاب و آپلود تصویرشان آزادی عمل می دهید و این کار بی شک باعث بالا رفتن وجه سایت شما می شود،به عبارت دیگر برای بهبود گردش کار این مجوز دسترسی ساده را به کاربر خود اختصاص می دهید.برای این امر می توان از پلاگین آواتار مدیر استفاده کرد که امروز تصمیم گرفتیم نحوه ی ایجاد و ساخت چنین افزونه ای را خدمت شما عزیزان آموزش دهیم.

شناسنامه افزونه آواتار مدیر :
این افزونه یک نرم افزار به زبان پی اچ پی می باشد که قادر به اضافه نمودن تنظیمات خاص و خدماتی در وردپرس می باشد و می تواند به صورت یکپارچه و منظم از نقاط دسترسی و روش های ارائه شده برای آن بهره برد.(همانند افزونه ی API)
در این مقاله سعی شده تا از ابتدا فرآیند ایجاد این افزونه توضیح داده شود!
نکته! : برای ایجاد چنین افزونه ای لازم است اطلاعاتی ابتدائی از کار با وردپرس و زبان پی اچ پی داشته باشید!

گام اول>> راه اندازی فضای کار
وارد پوشه ی /wp-content/plugins شوید و شروع به ایجاد ساختارهایی همانند تصویر زیر کنید؛
با توجه به تصویر شما باید پوشه ی اصلی با عنوان Avatar-manager ایجاد نمایید و سپس آن را باز نمایید و داخل این پوشه، پوشه ی language و فایل های  avatar-manager.css ،avatar-manager.js ،avatar-manager.php ،index.php ،LICENSE،uninstall.php بسازید.

مسلماً شما باید یک عنوان منحصر به فرد و مشخصی برای افزونه ی خود انتخاب نمایید؛ به عنوان نمونه مثل نامی که من در نظر گرفتم avatar-manager  و همچنین فایل اساسی و مهم avatar-manager.php !

سکوت طلایی است!
قبل از اینکه شروع به نوشتن کد های افزونه ی خود کنید فایل avatar-manager/index.php  را باز نمایید و کدها را مطابق زیر اضافه کنید:

&lt;?php<br />// Silence is golden.<br />?&gt;   

این کد در اکثر بخش های وردپرس قابل مشاهده می باشد.درواقع یک ترفند بسیار ساده برای جلوگیری از تکرار دایرکتوری می باشد.

گام دوم>> شروع نوشتن افزونه ی ساده وردپرس
حالا نوبت به این رسیده که اطلاعات را در فایل پی اچ پی اصلی در افزونه خود وارد نمایید.
اطلاعات استاندارد افزونه:
یک فایل اصلی پی اچ پی در افزونه باید شامل اطلاعات استانداردی در سربرگ خود باشد.این سربرگ به وردپرس اجازه می دهد تا افزونه وجود خود را اعلام کند، امکان افزودن آن به صفحه ی مدیریت افزونه ها را بدهد تا کاربر قادر به فعال سازی آن باشد، قادر به بارگذاری باشد و بتواند توابع را اجرا نماید.عدم وجود سربرگ باعث افزونه هرگز فعال سازی و اجرا نشود!
حال فایل avatar-manager/avatar-manager.php را باز کرده و کدهای موجود در خطوط زیر را در آن وارد نمایید:

 &lt;?php<br />/**<br /> * @package Avatar_Manager<br /> */<br />/*<br />Plugin Name: Avatar Manager<br />Plugin URI: http://wordpress.org/extend/plugins/avatar-manager/<br />Description: Avatar Manager for WordPress is a sweet and simple plugin for storing avatars locally and more. Easily.<br />Version: 1.0.0<br />Author:Cătălin Dogaru<br />Author URI:&lt;a href="http://profiles.wordpress.org/cdog/"&gt;http://profiles.wordpress.org/cdog/&lt;/a&gt;<br />License: GPLv2 or later<br />*/<br />?&gt;<br />  

تنها اطلاعاتی که در این افزونه وردپرس به آن احتیاج دارد عنوان پلاگین می باشد و دیگر اطلاعات در صورت تمایل می تواند وارد شود.برای ایجاد جدولی از افزونه ها در صفحه ی مدیریت افزونه ها می توانید اطلاعات دیگر را نیز وارد نمایید.به هر حال خطوطی که مربوط به اطلاعات بیشتر می باشد ضروری نیست!
بنابراین مکانیزم به روز رسانی می تواند به درستی هر نسخه ای که در آینده برای این افزونه توصیه می شود و برای ارتقای سطح کاربری مفید می باشد را در اختیار شما قرار دهد.
برای ساخت افزونه شما احتیاج به یک مجوز سطح دسترسی دارید تا بعداً مشکلی ایجاد نشود،برای داشتن مجوز باید یک شناسنامه ی مختصر تحت افزونه ایجاد کنید که نشان دهد کدهای شما مجاز هستند.

نسخه :
برای شفاف شدن  موضوع و درک بهتر از فرآیند انتشار و تلاش برای حفظ سازگاری آاتار مدیریت تحت دستور العمل نشخه های معنایی تا حد امکان نسخه هایی ارائه می شود.بنابراین فرمت زیر به شماره ذکر شده منتشر خواهد شد:

<major>.<minor>.<patch>   

و با دستورالعمل های زیر ساخته می شود:
1- از بین بردن ناسازگاری با موارد جعلی ( بازنشانی جزئی و پچ کردن)
2- ارسال جدید بدون از بین بردن ناسازگاری با موارد جعلی (بازنشانی پچ)
3- رفع اشکال و تغییرات متفرقه موارد جعلی در امر پچ کردن

در این امر باید به دنبال سربرگ استاندارد با اطلاعات مربوط به آن باشید تا بتوان مجوز برای افزونه ی شما صادر شود.معمولاً افزونه ها از مجوز یکسانی در وردپرس استفاده می نمایند که به نام GPLV2 یا Compatible with the GPLV2 میباشد.برای نشان دادن مجوز GPLV2 از کدهای مشمولی که در خطوط زیر آمده است در افزونه ی خود استفاده نمایید:

  /*<br />Copyright © 2013 Cătălin Dogaru<br /><br />This program is free software; you can redistribute it and/or modify it under<br />the terms of the GNU General Public License as published by the Free Software<br />Foundation; either version 2 of the License, or (at your option) any later<br />version.<br /><br />This program is distributed in the hope that it will be useful, but WITHOUT ANY<br />WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A<br />PARTICULAR PURPOSE. See the GNU General Public License for more details.<br /><br />You should have received a copy of the GNU General Public License along with<br />this program; if not, write to the Free Software Foundation, Inc., 51 Franklin<br />Street, Fifth Floor, Boston, MA 02110-1301, USA.<br />*/ 

سپس به مسیر  avatar-manager/LICENSE رفته و مجوز را در آن وارد نمایید!

گام سوم>> برنامه نویسی افزونه ی آواتار مدیر:

همانطور که مشاهده می کنید پلاگین شما در صفحه ی افزونه ها ایجاد شده است ، حال باید آن را فعال نمایید تا بتوانیم به ادامه ی ماجرا بپردازیم!
اگر افزونه ی خود را فعال کردید کدهای موجود در خطوط زیر را در فایل اصلی پی اچ پی موجود در افزونه(avatar-manager.php) وارد نمایید :

define( 'AVATAR_MANAGER_VERSION', '1.0.0' );<br />define( 'AVATAR_MANAGER_PLUGIN_URL', plugin_dir_url( __FILE__ ) );<br />define( 'AVATAR_MANAGER_AVATAR_UPLOADS', 0 );<br />define( 'AVATAR_MANAGER_DEFAULT_SIZE', 96 );   

()define تابعی برای تعریف نام در زمان اجرای ثابت می باشد.
()plugin_dir_url تابعی است که آدرس را بصورت جدا جدا برای افزونه ی __FILE__ میگذارد.ارزش __FILE__ بیشتر در مسیر کامل و عنوان فایل فعلی است و آن را یکی از هشت ثابت جادویی که فایل پی اچ پی را فراهم میکنند ، گویند.
حال برای واضح شدن این امر بیایید به افزونه ی اولیه ی خود مقدار دهی کنیم :

 /**
 * Sets up plugin defaults and makes Avatar Manager available for translation.
 *
 * @uses load_theme_textdomain() For translation/localization support.
 * @uses plugin_basename() For retrieving the basename of the plugin.
 *
 * @since Avatar Manager 1.0.0
 */
function avatar_manager_init() {
    // Makes Avatar Manager available for translation.
    load_plugin_textdomain( 'avatar-manager', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
}

add_action( 'init', 'avatar_manager_init' );   

()add_action تابعی برای صدا زدن کدها برای یک عمل خاصی است.init برای اجرای عملی در وردپرس پس از پایان بارگذاری می باشد اما قبل از ارسال سربرگ ها.همچنین ()load_plugin_textdomain باید در طی ساخت init فراخوانی می شود، به عبارت دیگر، کاربران نمی توانند کدی در آن وارد نمایند!
()dirname تابع مسیر پوشه ی والد را برمی گرداند در حالیکه ()plugin_basename تابع اسم مبنا برای افزونه می باشد.

کدها، عملیات،فیلترها:
کدها توسط وردپرس محیا شده است و اجازه می دهد تا یک افزونه به کدهای ماشین تبدیل شود.این امر توسط توابعی از افزونه در زمان های خاص فراخوانی می شود و در نتیجه افزونه را برای اجرا تنظیم می کند.دو گونه از این کد ها را برای شما تعریف کرده ایم :
action : کدهایی هستند که هسته ی وردپرس را در نقاط خاصی راه اندازی می کنند که در طی اجرا یا زمان خاصی اتفاق می افتد.
Filters: نوعی از کدها می باشند که با راه اندازی وردپرس برای تغییر متن از انواع مختلف قبل از اضافه کردن آن به پایگاه داده و یا ارسال آن بر روی صفحه ی مرورگر استفاده می شود.

گام چهارم >> افزودن تنظیمات افزونه :
در این مرحله ما باید تنظیماتی را به افزونه ی خود اضافه نماییم.مجوز سفارشی سازی به افزونه این امکان را می دهد که حالت منعطفی را برای کاربر داشته باشد تا بتواند در حد معمول یک سری تغییرات را اعمال نماید.

 /**
 * Registers sanitization callback and plugin setting fields.
 *
 * @uses register_setting() For registering a setting and its sanitization
 * callback.
 * @uses add_settings_field() For registering a settings field to a settings
 * page and section.
 * @uses __() For retrieving the translated string from the translate().
 *
 * @since Avatar Manager 1.0.0
 */
function avatar_manager_admin_init() {
    // Registers plugin setting and its sanitization callback.
    register_setting( 'discussion', 'avatar_manager', 'avatar_manager_sanitize_options' );

    // Registers Avatar Uploads settings field under the 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 field under the Settings Discussion
    // Screen.
    add_settings_field( 'avatar-manager-default-size', __( 'Default Size', 'avatar-manager' ), 'avatar_manager_default_size_settings_field', 'discussion', 'avatars' );
}

add_action( 'admin_init', 'avatar_manager_admin_init' );  

admin_init عملی است که قبل از هر گونه کدنویسی در زمانی که کاربر به سطح مدیریتی دسترسی دارد استفاده می شود.
register_setting تابعی در یک محیط ثبت نامی می باشد که پاسخ ها را ثبت می کند.
()add_setting_field تابعی است که یک رشته تنظیمات را در صفحه ی تنظیمات و بخش مربوطه ایجاد می کند. ما از این مورد برای افزودن تنظیمات افزونه مورد نظر در پایین تنظیمات صفحه ی نمایش استفاده می کنیم.

گام پنجم>> افزودن گزینه ی پاسخ به کاربر :
قبل از توضیح این بخش لازم می بینم دو تابع رو خدمت دوستان توضیح دهم.
توابع ()avatar_manager_get_default_options() , avatar_manager_get_options!

/**
 * Returns plugin default options.
 *
 * @since Avatar Manager 1.0.0
 *
 * @return array Plugin default options.
 */
function avatar_manager_get_default_options() {
    $options = array(
        'avatar_uploads' => AVATAR_MANAGER_AVATAR_UPLOADS,
        'default_size'   => AVATAR_MANAGER_DEFAULT_SIZE
    );

    return $options;
}   

()avatar_manager_get_options عملکردی است که امکان گزینه ای برای بازگشت افزونه به حالت پبش فرض را به شما می دهد.

  /**
 * Returns plugin options.
 *
 * @uses get_option() For getting values for a named option.
 * @uses avatar_manager_get_default_options() For retrieving plugin default
 * options.
 *
 * @since Avatar Manager 1.0.0
 *
 * @return array Plugin options.
 */
function avatar_manager_get_options() {
    return get_option( 'avatar_manager', avatar_manager_get_default_options() );
} 

()avatar_manager_get_options عملکردی برای بازیابی گزینه های افزونه در حال حاضر می باشد.()get_option تابع ارزش از گزینه های مشخص یا مقدار پیش فرضی را بر می گرداند، در صورتی که گزینه در پایگاه داده نباشد.

  /**
 * Sanitizes and validates plugin options.
 *
 * @uses avatar_manager_get_default_options() For retrieving plugin default
 * options.
 * @uses absint() For converting a value to a non-negative integer.
 *
 * @since Avatar Manager 1.0.0
 *
 * @return array Sanitized plugin options.
 */
function avatar_manager_sanitize_options( $input ) {
    $options = avatar_manager_get_default_options();

    if ( isset( $input['avatar_uploads'] ) && trim( $input['avatar_uploads'] ) )
        $options['avatar_uploads'] = trim( $input['avatar_uploads'] ) ? 1 : 0;

    if ( isset( $input['default_size'] ) && is_numeric( trim( $input['default_size'] ) ) ) {
        $options['default_size'] = absint( trim( $input['default_size'] ) );

        if ( $options['default_size'] < 1 )
            $options['default_size'] = 1;
        elseif ( $options['default_size'] > 512 )
            $options['default_size'] = 512;
    }

    return $options;
} 

()avatar_manager_sanitize_options تابع پاک کننده و تایید کننده ی گزینه های افزونه می باشد.()isset را در صورتی که متغیری باشد فراخوانی می کند و بیان می کند که مقدار آن NULL نمی باشد!
()Trim نوار تابع در فضاهای خالی از ابتدا تا انتهای یک رشته می باشد. ()is_numeric تابعی است که معین می کند آیای یک متغیر یک عدد است یا یک رشته ی عددی؟!
()absint تابعی است که یک مقدار را به یک عدد صحیح تبدیل می کند.

گام ششم>> اضافه کردن زمینه های تنظیم:
حال زمان آن است که زمینه هایی را برای تنظیمات اضافه نماییم؛

 /**
 * Prints Avatar Uploads settings field.
 *
 * @uses avatar_manager_get_options() For retrieving plugin options.
 * @uses _e() For displaying the translated string from the translate().
 * @uses checked() For comparing two given values.
 *
 * @since Avatar Manager 1.0.0
 */
function avatar_manager_avatar_uploads_settings_field() {
    // Retrieves plugin options.
    $options = avatar_manager_get_options();
    ?>
    <fieldset>
        <legend class="screen-reader-text">
            <span>
                <?php _e( 'Avatar Uploads', 'avatar-manager' ); ?>
            </span>
        </legend><!-- .screen-reader-text -->
        <label>
            <input <?php checked( $options['avatar_uploads'], 1, true ); ?> name="avatar_manager[avatar_uploads]" type="checkbox" value="1">
            <?php _e( 'Anyone can upload', 'avatar-manager' ); ?>
        </label>
    </fieldset>
    <?php
}  

()avatar_manager_avatar_uploads_settings_field تابعی برای چاپ آواتار می باشد. ()checked ترکیبی از دو ارزش می باشد، اگر این دو ارزش یکسان باشند checked را نسبت به checkbox اضافه می کند.

 /**
 * Prints Default Size settings field.
 *
 * @uses avatar_manager_get_options() For retrieving plugin options.
 * @uses _e() For displaying the translated string from the translate().
 *
 * @since Avatar Manager 1.0.0
 */
function avatar_manager_default_size_settings_field() {
    // Retrieves plugin options.
    $options = avatar_manager_get_options();
    ?>
    <fieldset>
        <legend class="screen-reader-text">
            <span>
                <?php _e( 'Default Size', 'avatar-manager' ); ?>
            </span>
        </legend><!-- .screen-reader-text -->
        <label>
            <?php _e( 'Default size of the avatar image', 'avatar-manager' ); ?>
            <input class="small-text" min="1" name="avatar_manager[default_size]" step="1" type="number" value="<?php echo $options['default_size']; ?>">
        </label>
    </fieldset>
    <?php
}  

()avatar_manager_default_size_settings_field تابعی برای چاپ و برگرداندن به رشته ی تنظیمات پیش فرض می باشد.
پس از افزودن زمینه ی تنظیمات، شما باید قادر به تنظیم گزینه هایی باشید که در زیر آمده است:

(تنظیمات>> گفتگوها)
اولین گزینه تعیین می کند که کاربران می توانند یک تصویر ارسال نمایند یا خیر!
گزینه ی دوم نشان دهنده ی ادنازه ی پیش فرض برای یک تصویر است.

گام هفتم>> افزودن بخش ها :
به کاربران خود اجازه دهید آواتار خود را مدیریت نمایند،ما نیازمند این هستیم که یک بخش جدید به پروفایل خود اضافه نماییم.با استفاده از کدهای زیر می توانید این بخش را به آواتار اضافه نمایید:

 /**
 * Prints Avatar section.
 *
 * @uses avatar_manager_get_options() For retrieving plugin options.
 * @uses get_post_meta() For retrieving attachment meta fields.
 * @uses remove_filter() For removing a function attached to a specified action
 * hook.
 * @uses _e() For displaying the translated string from the translate().
 * @uses checked() For comparing two given values.
 * @uses get_avatar() For retrieving the avatar for a user.
 * @uses esc_attr() For escaping HTML attributes.
 * @uses add_query_arg() For retrieving a modified URL (with) query string.
 * @uses self_admin_url() For retrieving an admin url link with optional path
 * appended.
 * @uses current_user_can() For checking whether the current user has a certain
 * capability.
 * @uses submit_button() For echoing a submit button, with provided text and
 * appropriate class.
 * @uses __() For retrieving the translated string from the translate().
 *
 * @since Avatar Manager 1.0.0
 *
 * @param array $profileuser User to edit.
 */
function avatar_manager_edit_user_profile( $profileuser ) {
    // Retrieves plugin options.
    $options = avatar_manager_get_options();

    $avatar_type = isset( $profileuser->avatar_manager_avatar_type ) ? $profileuser->avatar_manager_avatar_type : 'gravatar';

    if ( isset( $profileuser->avatar_manager_custom_avatar ) ) {
        // Retrieves attachment meta fields based on attachment 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 );
    }

    if ( ! isset( $custom_avatar_rating ) || empty( $custom_avatar_rating ) )
        $custom_avatar_rating = 'G';

    if ( ! isset( $user_has_custom_avatar ) || empty( $user_has_custom_avatar ) )
        $user_has_custom_avatar = false;

    if ( $user_has_custom_avatar )
        // Removes the function attached to the specified action hook.
        remove_filter( 'get_avatar', 'avatar_manager_get_avatar' );
    ?>
    <h3>
        <?php _e( 'Avatar', 'avatar-manager' ); ?>
    </h3>
    <table class="form-table">
        ...
    </table><!-- .form-table -->
    <?php
}

add_action( 'show_user_profile', 'avatar_manager_edit_user_profile' );
add_action( 'edit_user_profile', 'avatar_manager_edit_user_profile' );
  

show_user_profile و edit_user_profile توابعی هستند که امکان سفارشی کردن پروفایل را به کاربر می دهند.
profileuser$ پارامتری برای پوشه ی wp_user است که ماربر می تواند آن را ویرایش نماید.
()get_post_meta تابعی است که زمینه های سفارشی را با کلید مشخص شده از ارسال بر می گرداند.
()empty تابع تعیینی است که مشخص کننده متغیر خالی است.
()remove_filter تابعی برای حذف فیلتر کدها می باشد که به صورت یک تابع درآمده است.این مورد نیاز به حذف تابع سفارشی،برای بازیابی تصویر آواتار دارد.
در مرحله ی بعد،ما باید چیدمان آواتارها، فرم ارسال و انتخاب امتیاز برای نماد سفارشی هر کاربر را مشخص کنیم.
چیدمان آواتار:
این امکان را به کاربر می دهد تا بین استفاده از Gravatar و آواتار رسمی حق انتخاب داشته باشد.برای اضافه کردن آن،خطوط کد زیر را وارد نمایید:

 <tr>
    <th>
        <?php _e( 'Display this avatar', 'avatar-manager' ); ?>
    </th>
    <td class="avatar-manager">
        <fieldset>
            <legend class="screen-reader-text">
                <span>
                    <?php _e( 'Display this avatar', 'avatar-manager' ); ?>
                </span><!-- .screen-reader-text -->
            </legend>
            <label>
                <input <?php checked( $avatar_type, 'gravatar', true ); ?> name="avatar_manager_avatar_type" type="radio" value="gravatar">
                <?php echo get_avatar( $profileuser->ID, 32, '', false ); ?>
                <?php _e( 'Gravatar', 'avatar-manager' ); ?>
                <span class="description">
                    <?php _e( '<a href="http://codex.wordpress.org/How_to_Use_Gravatars_in_WordPress" target="_blank">More information</a>', 'avatar-manager' ); ?>
                </span><!-- .description -->
            </label>
            <?php if ( $user_has_custom_avatar ) : ?>
                <br>
                <label>
                    <input <?php checked( $avatar_type, 'custom', true ); ?> name="avatar_manager_avatar_type" type="radio" value="custom">
                    <?php echo avatar_manager_get_custom_avatar( $profileuser->ID, 32, '', false ); ?>
                    <?php _e( 'Custom', 'avatar-manager' ); ?>
                </label>
            <?php endif; ?>
            <?php
            if ( $user_has_custom_avatar && ( current_user_can( 'upload_files' ) || $options['avatar_uploads'] ) ) {
                $href = esc_attr( add_query_arg( array(
                    'action'                       => 'update',
                    'avatar_manager_action'        => 'remove-avatar',
                    'avatar_manager_custom_avatar' => $profileuser->avatar_manager_custom_avatar,
                    'user_id'                      => $profileuser->ID
                ),
                self_admin_url( IS_PROFILE_PAGE ? 'profile.php' : 'user-edit.php' ) ) );
                ?>
                <a class="delete" href="<?php echo wp_nonce_url( $href, 'update-user_' . $profileuser->ID ); ?>" onclick="return showNotice.warn();">
                    <?php _e( 'Delete', 'avatar-manager' ); ?>
                </a><!-- .delete -->
                <?php
            }
            ?>
        </fieldset>
    </td><!-- .avatar-manager -->
</tr>  

()get_avatar تابعی برای بازیابی نماد یک کاربر است که در آن شناسه کاربر یا ایمیل آن مورد نیاز می باشد. ما از تابع ()avatar_manager_get_custom_avatar برای این امر استفاده می نماییم.
()current_user_can تابعی است که بررسی می کند آیا کاربر در حال حاضر دارای قابلیت های خاص است یا خیر.
به طور معمول، کاربران طبق قانون اجازه ی آپلود فایل را ندارند.
()self_admin_url تابعی برای بازیابی یک لینک url مدیر به مسیر اختیاری به کاربر داده می شود. Is_profile_page تابع ثابتی است که به ما می گوید در چه زمانی امکان ویرایش مشخصات خود یا کاربر دیگری را داریم!
()wp_nonce_url تابعی برای بازیابی url فعلی می باشد. قبل از حذف آواتار کاربر باید کاربر باید آن را تایید نماید.
oneclick رویدادی است که اگر از لینک حذف می شود یک اخطار نمایش داده می شود.

فرم بارگذاری :
فرم بارگذاری به کاربر اجازه می دهد تا امکان جستجو و بارگذاری یک عکس رسمی آواتار را داشته باشد.

 <?php if ( current_user_can( 'upload_files' ) || $options['avatar_uploads'] ) : ?>
    <tr>
        <th>
            <?php _e( 'Select Image', 'avatar-manager' ); ?>
        </th>
        <td>
            <fieldset>
                <legend class="screen-reader-text">
                    <span>
                        <?php _e( 'Select Image', 'avatar-manager' ); ?>
                    </span>
                </legend><!-- .screen-reader-text -->
                <label class="description" for="avatar-manager-upload-avatar">
                    <?php _e( 'Choose an image from your computer:', 'avatar-manager' ); ?>
                </label><!-- .description -->
                <br>
                <input name="avatar_manager_import" type="file">
                <?php submit_button( __( 'Upload', 'avatar-manager' ), 'button', 'avatar-manager-upload-avatar', false ); ?>
            </fieldset>
        </td>
    </tr>
<?php endif; ?>  

()submit_button تابعی جهت نشان دادن دکمه ی ارسال همراه با متن ارائه شده و کلاس مناسب می باشد.

رتبه ی انتخاب :
تنها زمانی نشان داده می شود که آواتار بصورت رسمی در دسترس باشد. برای اضافه کردن آن خطوط زیر را وارد نمایید :

 <?php if ( $user_has_custom_avatar ) : ?>
    <tr>
        <th>
            <?php _e( 'Avatar Rating', 'avatar-manager' ); ?>
        </th>
        <td>
            <fieldset>
                <legend class="screen-reader-text">
                    <span>
                        <?php _e( 'Avatar Rating', 'avatar-manager' ); ?>
                    </span>
                </legend><!-- .screen-reader-text -->
                <?php
                $ratings = array(
                    // Translators: Content suitability rating:
                    // http://bit.ly/89QxZA
                    'G'  => __( 'G &#8212; Suitable for all audiences', 'avatar-manager' ),
                    // Translators: Content suitability rating:
                    // http://bit.ly/89QxZA
                    'PG' => __( 'PG &#8212; Possibly offensive, usually for audiences 13 and above', 'avatar-manager' ),
                    // Translators: Content suitability rating:
                    // http://bit.ly/89QxZA
                    'R'  => __( 'R &#8212; Intended for adult audiences above 17', 'avatar-manager' ),
                    // Translators: Content suitability rating:
                    // http://bit.ly/89QxZA
                    'X'  => __( 'X &#8212; Even more mature than above', 'avatar-manager' )
                );

                foreach ( $ratings as $key => $rating ) {
                    ?>
                    <label>
                        <input <?php checked( $custom_avatar_rating, $key, true ); ?> name="avatar_manager_custom_avatar_rating" type="radio" value="<?php echo esc_attr( $key ); ?>">
                        <?php echo $rating; ?>
                    </label>
                    <br>
                    <?php
                }
                ?>
                <span class="description">
                    <?php _e( 'Choose a rating for your custom avatar.', 'avatar-manager' ); ?>
                </span><!-- .description -->
            </fieldset>
        </td>
    </tr>
<?php endif; ?>  

با این کار شما به کاربر اجازه می دهید که امتیاز مناسب خود را برای استفاده از تصویر آواتار انتخاب نماید.

گام هشتم>> افزودن script  و style :
حال وقت آن رسیده که بخش های آواتار را اضافه نماییم و در این زمان باید به شمای ظاهری آن بپردازیم. در واقع یک سری کدهای Javascript برای تغییر شکل رمزگذاری باید به کار برد. این مرحله بسیار ضروری است!
Css Style :
برای ظاهر افزونه ی خود ، به مسیر avatar-manager/avatar-manager.css رفته و خطوط زیر را به آن اضافه نمایید:

#profile-page .avatar-manager img {
    margin: 2px 0;
    vertical-align: middle;
}

#profile-page .avatar-manager .delete {
    color: red;
    padding: 2px;
}

#profile-page .avatar-manager .delete:hover {
    background: red;
    color: #fff;
    text-decoration: none;
}   

جاوا اسکریپت :
در این مرحله به مسیر avatar-manager/avatar-manager.js رفته و کدهای زیر را در آن وارد نمایید :

 jQuery( document ).ready( function() {
    jQuery( '#your-profile' ).attr( 'enctype', 'multipart/form-data' );
} );  

()attr. تابعی برای تنظیم کردن یک مقدار مشخص برای عناصر همسان می باشد. enctype ویژگی مشخصی است که بیان می کند چگونه فرم اطلاعات باید در هنگام ارائه ی آن به سرور کدگذاری شود. در اینجا ما احتیاج به تغییر multipart/form-data برای اعطای مجوز بارگذاری فایل داریم.

گام نهم>> تولید script و Style:
یک روش ایمن و قابل توصیه، اضافه کردن اسکریپت ها و پرداختن به ظاهر افزونه ی وردپرسی شما می باشد.به طور کلی در یک صفحه از  ()wp_enqueue_script و ()wp_enqueue_style استفاده می شود که این توابع شامل اسکریپت ها و ظواهری می باشد :

 /**
 * Enqueues plugin scripts and styles for Users Your Profile Screen.
 *
 * @uses wp_register_style() For registering a CSS style file.
 * @uses wp_enqueue_style() For enqueuing a CSS style file.
 * @uses wp_register_script() For registering a JS script file.
 * @uses wp_enqueue_script() For enqueuing a JS script file.
 *
 * @since Avatar Manager 1.0.0
 */
function avatar_manager_admin_enqueue_scripts() {
    global $hook_suffix;

    if ( $hook_suffix == 'profile.php' || $hook_suffix == 'user-edit.php' ) {
        // Registers plugin CSS style file.
        wp_register_style( 'avatar-manager.css', AVATAR_MANAGER_PLUGIN_URL . 'avatar-manager.css', array(), '1.0.0' );

        // Enqueues plugin CSS style file.
        wp_enqueue_style( 'avatar-manager.css' );

        // Registers plugin JS script file.
        wp_register_script( 'avatar-manager.js', AVATAR_MANAGER_PLUGIN_URL . 'avatar-manager.js', array( 'jquery' ), '1.0.0' );

        // Enqueues plugin JS script file.
        wp_enqueue_script( 'avatar-manager.js' );
    }
}

add_action( 'admin_enqueue_scripts', 'avatar_manager_admin_enqueue_scripts' );  

()admin_enqueue_scripts عملی است که اول اقدام به کد کردن در اسکریپت مدیریتی می کند، سپس با متغیر سراسری hook_suffix$ که به اسکریپت شما افزوده می شود و فقط نیازهای صفحه را بررسی می کند.قبل از تولید اسکریپت و استایل ها،اول از همه باید آن را ثبت نماییم.
()wp_register_style تابعی است که راه ایمنی را برای ثبت یک فایل Css.style ایجاد می کند.
()wp_enqueue_style تابعی برای استفاده تولید کننده می باشد. شبیه به ()wp_register_script و ()wp_enqueue_script که توابعی برای ثبت تولیدات فایل جاوا اسکریپت افزونه ی شما می باشد.
پس از این مراحل شما باید برای گزینه های افزونه ی خود موقعیت ها را مشخص و تنظیم نمایید!

موفق و سربلند باشید!