Учебники

Как создать пользовательскую страницу панели инструментов WordPress

Как создать пользовательскую страницу панели инструментов WordPress

Несколько дней назад меня попросили создать настраиваемую панель управления WordPress, чтобы заменить первоначальную. Это не просто отображение или скрытие уже настроенных метабоксов, это замена всей панели инструментов. Это был первый раз, когда меня попросили сделать что-то подобное, так что это было довольно сложно. Как всегда, в этом случае я просмотрел Интернет, чтобы увидеть, не было ли уже сделано что-то подобное. и снова безрезультатно. Я не знаю, плохо ли я спрашиваю Google о конкретных вещах, или большинство руководств по WordPress относятся к тем же вопросам, но я ничего не нашел.

Затем, я помню, что, начиная с WordPress 3.x, после первого входа в систему после обновления появляется новая страница. Это более или менее то, чем я хотел заниматься.

После быстрого поиска в основных файлах WordPress я нашел действительно отличный материал. И, наконец, мне удалось создать целую кастомную панель инструментов в стиле WordPress. Для этого я снова создал плагин.

Шаг 1: создание плагина

Если вы читали мои предыдущие сообщения о WPexplorer, теперь вы должны знать о создании плагина, но вот вам напоминание.

Откройте папку плагинов в wp-content и создайте новый репозиторий под названием «sweet-custom-dashboard», а внутри этой папки создайте новый файл с именем «sweet-custom-dashboard.php». Затем откройте файл.

Чтобы объявить плагин, просто добавьте в файл этот код:

<?php /* Plugin Name: Sweet Custom Dashboard Plugin URL: http://remicorson.com/sweet-custom-dashboard Description: A nice plugin to create your custom dashboard page Version: 0.1 Author: Remi Corson Author URI: http://remicorson.com Contributors: corsonr Text Domain: rc_scd */

Только добавив этот код, вы уже создали плагин, пустой плагин, но рабочий плагин!

Теперь нам нужно определить константу для URL-адреса плагина, которая нам понадобится позже. Добавьте этот код:

/* |-------------------------------------------------------------------------- | CONSTANTS |-------------------------------------------------------------------------- */ // plugin folder url if(!defined('RC_SCD_PLUGIN_URL')) { define('RC_SCD_PLUGIN_URL', plugin_dir_url( __FILE__ )); }

Пришло время создать основной класс нашего плагина:

/* |-------------------------------------------------------------------------- | MAIN CLASS |-------------------------------------------------------------------------- */ class rc_sweet_custom_dashboard { /*--------------------------------------------* * Constructor *--------------------------------------------*/ /** * Initializes the plugin */ function __construct() { } // end constructor } // instantiate plugin's class $GLOBALS['sweet_custom_dashboard'] = new rc_sweet_custom_dashboard();

Шаг 2: конструктор

На втором шаге нам нужно добавить действие, которое будет происходить, только если пользователь находится на странице панели инструментов. Для этого замените функцию конструктора этим кодом:

function __construct() { add_action('admin_menu', array( &$this,'rc_scd_register_menu') ); add_action('load-index.php', array( &$this,'rc_scd_redirect_dashboard') ); } // end constructor

Добавляя этот код, мы сообщаем WordPress, что хотим загрузить функцию rc_get_screen() при загрузке index.php (index.php – это страница панели управления). Мы также говорим WordPress зарегистрировать новую страницу панели инструментов. Тот, который мы будем использовать при перенаправлении. Следующим шагом является создание функции rc_redirect_dashboard ().

Шаг 3: перенаправление панели управления

Функция rc_redirect_dashboard () довольно проста. Его цель – перенаправить пользователя на настраиваемую страницу, когда он хочет получить доступ к панели инструментов по умолчанию. Для этого мы должны проверить, находимся ли мы на правом экране (читайте «страницу»), используя функцию get_current_screen (). Когда эта функция вызывается из хука ‘admin_init’, она возвращает NULL, отчасти поэтому я подключил rc_dashboard_redirection () к «load-index.php». Вот содержание функции:

function rc_scd_redirect_dashboard() { if( is_admin()) { $screen = get_current_screen(); if( $screen->base == 'dashboard') { wp_redirect( admin_url( 'index.php?page=custom-dashboard') ); } } }

Этот код довольно понятен, если мы находимся в админке, и если текущий экран – «дашборд», то мы принудительно перенаправляем на файл с именем «custom_dashboard.php».

Регистрация страницы дашборда

Пришло время зарегистрировать новую страницу панели инструментов. Для этого нам нужно добавить две функции: одну для регистрации страницы в меню WordPress и одну для заполнения страницы содержимого:

function rc_scd_register_menu() { add_dashboard_page( 'Custom Dashboard', 'Custom Dashboard', 'read', 'custom-dashboard', array( &$this,'rc_scd_create_dashboard') ); } function rc_scd_create_dashboard() { include_once( 'custom_dashboard.php' ); }

Если вы сохранили файл, активируйте плагин и попытайтесь получить доступ к панели управления, вы должны увидеть пустую страницу или сообщение 404. Мы можем создать собственную панель управления.

Шаг 4. Создание настраиваемой панели инструментов

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

Для начала создайте новый файл с именем «custom_dashboard.php» в папке sweet-custom-dashboard. Откройте его и добавьте этот код:

<?php /** * Our custom dashboard page */ /** WordPress Administration Bootstrap */ require_once( ABSPATH. 'wp-load.php' ); require_once( ABSPATH. 'wp-admin/admin.php' ); require_once( ABSPATH. 'wp-admin/admin-header.php' ); ?>

Первая функция require_once () загружает WordPress, добавив эту простую строку, вы теперь можете использовать любые переменные WordPress или любые функции.

Две другие загрузки require_once () необходимы для правильного отображения администрирования.

Все, что нам осталось, это создать содержимое нашей настраиваемой панели инструментов. Приведенный ниже код вдохновлен файлом, упомянутым ранее, поэтому вам, возможно, придется немного изменить его в соответствии с вашими потребностями. В моем примере мне просто нужно меню с 3 ссылками, которые будут отображаться в виде вкладок, и двумя абзацами, один раз включающими изображение. Вот код:

<div class="wrap about-wrap"> <h1><?php _e( 'Welcome to My Custom Dashboard Page' ); ?></h1> <div class="about-text"> <?php _e('Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.' ); ?> </div> <h2 class="nav-tab-wrapper"> <a href="#" class="nav-tab nav-tab-active"> <?php _e( 'Step 1' ); ?> </a><a href="#" class="nav-tab"> <?php _e( 'Step 2' ); ?> </a><a href="#" class="nav-tab"> <?php _e( 'Step 3' ); ?> </a> </h2> <div class="changelog"> <h3><?php _e( 'Morbi leo risus, porta ac consectetur' ); ?></h3> <div class="feature-section images-stagger-right"> <img src="<?php echo esc_url( admin_url( 'images/screenshots/theme-customizer.png') ); ?>" class="image-50" /> <h4><?php _e( 'Risus Consectetur Elit Sollicitudin' ); ?></h4> <p><?php _e( 'Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.' ); ?></p> <h4><?php _e( 'Mattis Justo Purus' ); ?></h4> <p><?php _e( 'Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.' ); ?></p> </div> </div> </div>

В этом коде нет ничего интересного, это просто HTML-код.

И, наконец, нам нужно загрузить нижний колонтитул администрирования WordPress. Для этого просто оставьте эту строку внизу файла:

<?php include( ABSPATH. 'wp-admin/admin-footer.php' );

Вот и все! Плагин теперь отлично работает, есть, конечно, много способов сделать его лучше, например, вы можете добавить пользовательские таблицы стилей и пользовательские файлы javascript, или вы можете добавить дополнительную проверку для отображения пользовательской панели инструментов только для некоторых ролей пользователей …

Что ж, надеюсь, вам понравился этот урок, и я с нетерпением жду ваших комментариев в разделе комментариев!

Еще одна вещь: в официальном репозитории плагинов WordPress уже есть скомпилированная версия плагина. Нажмите здесь, чтобы загрузить ее.

Источник записи: https://www.wpexplorer.com

Похожие сообщения
Учебники

Резервное копирование WordPress в облако с помощью BackWPup - подробное руководство

Учебники

Как ограничить контент по участнику в WordPress

Учебники

9 советов для успешного запуска продукта WordPress

Учебники

Создание пользовательских статусов заказов WooCommerce для WordPress