Создать небольшой виджет панели управления

Я пытался добавить еще один столбец с полем мобильного номера на странице учетной записи пользователя в админке. Поэтому я нашел этот хороший код на

https://coderwall.com/p/g72jfg/adding-a-phone-numer-field-to-wordpress-user-profile

Теперь я пытаюсь создать кастомный виджет для панели управления, чтобы пользователь также имел доступ к изменению своего мобильного номера непосредственно оттуда (поэтому в виджете должна быть кнопка обновления). Вы можете увидеть приложенные фото для идеи

– первое изображение показывает, как виджет должен выглядеть на панели,

– второе изображение – это то, что вы можете видеть в учетной записи пользователей в данный момент.

Я знаю несколько простых примеров создания виджета панели с помощью echo, например,

http://www.wpbeginner.com/wp-themes/how-to-add-custom-dashboard-widgets-in-wordpress/

, но до сих пор я не смог это сделать.

Любая помощь будет оценена.

Я создал небольшую/простую примерную и надеюсь, что это поможет вам.

Виджет панели администратора с кнопкой сохранения

Во-первых, мы регистрируем функцию, которая сообщает WordPress, что мы хотим создать виджет панели администратора

/**
 * Регистрация виджета панели администратора
 */
function ch_add_dashboard_widgets() {

    wp_add_dashboard_widget(
        'user_email_admin_dashboard_widget',      // Ярлык виджета
        __('Дополнительная информация профиля', 'ch_user_widget'),         // Заголовок
        'ch_user_email_admin_dashboard_widget' // Функция отображения
    );  
}

// крюк для регистрации виджета панели администратора
add_action( 'wp_dashboard_setup', 'ch_add_dashboard_widgets' );

Затем создаем функцию, которая отобразит ваш виджет

/**
 * Вывод HTML-содержимого виджета панели
 */
function ch_user_email_admin_dashboard_widget() {

  // определяем текущего пользователя, чтобы получить его номер телефона
  $user = wp_get_current_user();
  ?>

  <form id="ch_form" action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>" method="post" >

    <!-- контролирует, какую функцию будет вызывать пост -->
    <input type="hidden" name="cp_action" id="cp_action" value="ch_user_data">

    <?php wp_nonce_field( 'ch_nonce', 'ch_nonce_field' ); ?>

    <p>Пожалуйста, добавьте ваш номер телефона</p>

    <p>
        <label for="phone">Номер телефона</label>
        <input type="text" name="phone" id="cp_phone_number" value="<?php echo esc_attr( get_the_author_meta( 'phone', $user->ID ) ); ?>" class="regular-text" />
    </p>
    <p>

      <input name="save-data" id="save-data" class="button button-primary" value="Сохранить" type="submit">  
      <br class="clear">
    </p>

</form>

<?php
}

Ок, следующая часть — это сохранение. Есть два способа сохранить данные вашего виджета.

Первый — отправка данных через обычный “form-post-запрос”. Это способ работы типичных форм на сайтах. То есть у вас есть форма, вы вводите свои данные, нажимаете кнопку отправки, и данные отправляются на сервер. Сервер делает что-то с этими данными, а затем пользователь перенаправляется, например, на страницу “Спасибо”.

Второй способ почти такой же, как и первый, но с одним исключением: “form-post-запрос” отправляется через AJAX (аббревиатура от “Asynchronous JavaScript And XML“). Преимущество этого способа в том, что мы остаемся на той же странице (выражаясь очень просто).

Чтобы использовать второй способ, мы должны сообщить WordPress две вещи. Во-первых, какая функция должна быть вызвана запросом ajax и где находится ваш JavaScript файл.

/**
 * Сохраняет данные из виджета админа
 */
function ch_save_user_data() {

    $msg = '';
    if(array_key_exists('nonce', $_POST) AND  wp_verify_nonce( $_POST['nonce'], 'ch_nonce' ) ) 
    {   
       // определяем текущего пользователя, чтобы получить его номер телефона
       $user = wp_get_current_user();

       // изменить номер телефона
       update_usermeta( $user->id, 'phone', $_POST['phone_number'] );

       // сообщение об успехе
       $msg = 'Номер телефона сохранен';
    }
    else
    {   
       // сообщение об ошибке
       $msg = 'Номер телефона не сохранен';
    }

    wp_send_json( $msg );
}

/**
 * ajax крюк для зарегистрированных пользователей
 */
 add_action( 'wp_ajax_ch_user_data', 'ch_save_user_data' );

/**
 * Добавить JavaScript файл
 */
function ch_add_script($hook){

   // добавить JS-файл только на страницу панели
   if ('index.php' !== $hook) {
       return;
   }

   wp_enqueue_script( 'ch_widget_script', plugin_dir_url(__FILE__) ."/js/widget-script.js", array(), NULL, true );
}

/**
 * крюк для добавления js
 */
add_action( 'admin_enqueue_scripts', 'ch_add_script' );

ок, последний пункт это содержимое JavaScript файла.

jQuery("#ch_form").submit(function(event) {

   /* остановить форму от нормальной отправки */
   event.preventDefault();

  /* получить атрибут действия из элемента формы */
  var url = jQuery( this ).attr( 'action' );

  /* Отправить данные с использованием поста */
  jQuery.ajax({
    type: 'POST',
    url: url,
    data: {
        action: jQuery('#cp_action').val(),
        phone_number: jQuery('#cp_phone_number').val(), 
        nonce: jQuery('#ch_nonce_field').val()
    },
    success: function (data, textStatus, XMLHttpRequest) {
        alert(data);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
    }
  });

});

Ок, и в конце несколько полезных ссылок:

“AJAX in Plugins” на wordpress.org

Что такое Ajax? Руководство по плагинам на wordpress.org

Dashboard Widgets API на wordpress.org

Обработка POST-запросов способом WordPress на sitepoint.com

РЕДАКЦИЯ:

Я разместил весь код в плагине и опубликовал его на Github.

Ссылка: https://github.com/user141080/admindashboardwidget

Вау, огромное спасибо, user141080,

На мой взгляд, вы проделали большую работу! Я могу понять часть HTML формы и большинство PHP для сохранения данных, но касаемо JS я полностью вне игры 🙂

Я подтверждаю, что протестировал ваш плагин, и он работает отлично! Я даже смог добавить больше полей, просто добавив в JS в область кода

data: {
        action: jQuery('#cp_action').val(),
        phone_number: jQuery('#cp_phone_number').val(),
        city_area: jQuery('#cp_city').val(),  
        nonce: jQuery('#ch_nonce_field').val()
    },

рядом с соответствующими полями.

Единственная проблема, которую я заметил, состоит в том, что, поскольку я хочу, чтобы этот плагин работал вместе с кодом, который я использовал (https://coderwall.com/p/g72jfg/adding-a-phone-numer-field-to-wordpress-user-profile) для сохранения также полей на странице профиля пользователей, когда я сохраняю данные с виджета панели, то после простого обновления страницы на странице профиля пользователей, я вижу обновленные данные, но если я сохраняю данные со страницы профиля пользователей, то после простого обновления страницы на панели я не имею новых обновленных данных. Если я выйду и войду в систему, то я их получаю. Полагаю, это связано с чем-то вроде этой команды?

// определяем текущего пользователя, чтобы получить его номер телефона
$user = wp_get_current_user();

Спасибо за ваш труд, думаю, я бы никогда не смог зайти так далеко и сделать это, как вы 🙂