Настройка административной панели WordPress: текстовая справка
Конечный результат, которого мы хотим достигнуть:
Скачать исходные файлы
Это четвертая из шести частей цикла "Пользовательская настройка панели администрирования WordPress":
1. Пользовательская настройка панели администрирования WordPress: Форма входа;
2. Пользовательская настройка панели администрирования WordPress: панель управления сайтом;
3. Настраиваем панель администрирования WordPress: пользовательское меню администрирования;
4. Настройка административной панели WordPress: текстовая справка;
5. Настройка панели администрирования WordPress – списки объектов;
6. Настраиваем панель администрирования WordPress – изменяем стиль элементов.
Во второй части данного цикла статей, я показал, как добавлять собственные метабоксы (custom metaboxes) на панель управления WordPress, которую вы можете использовать, чтобы реализовать текстовые подсказки для ваших клиентов или пользователей.
Но как быть, если надо предоставить текстовую справку на отдельно выбранном экране редактирования? В этой статье, я покажу вам как это сделать.
План работы:
- Добавление метабокса с текстовой справкой в окно редактирования записи (Post);
- Добавление метабокса с правой стороны от окна редактирования;
- Добавление «фейкового» метабокса над окном редактирования.
Для выполнения данных пунктов я собираюсь создать плагин. Если вы уже создали плагин после прочтения первой-третьей части из данной серии статей, то вы, возможно, захотите добавить код, представленный в этой части, к вашему плагину. Это позволит объединить все функции по настройке административной панели в единый плагин.
Что нужно для получения успешного результата
Чтобы успешно выполнить все инструкции, представленные в данной статье, вам понадобится:
- Установленный WordPress;
- Доступ к папке плагинов вашего сайта;
- Текстовый редактор для написания кода.
Подготовка
В начало кода плагина я вставил следующие сроки:
/*
Plugin Name: Wptuts+ Customize the Admin Part 4 - Help Text
Plugin URI: <a href="http://rachelmccollin.co.uk/" target="_blank">http://rachelmccollin.co.uk</a>
Description: This plugin supports the tutorial in Wptuts+. It adds help text to the WordPress editing screen.
Version: 1.0
Author: Rachel McCollin
Author URI: <a href="http://rachelmccollin.com/" target="_blank">http://rachelmccollin.com</a>
License: GPLv2
*/Добавление метабокса с текстовой справкой в окно редактирования записи (Post)
Чтобы добавить метабокс с текстовой справкой, мы будем использовать функцию add_meta_box(). Она отлично подходит для создания метабокса для окна редактирования записи или изменения настроек. Эта функция имеет несколько параметров:
<?php add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args ); ?>Описание параметров:
- $id – уникальный ID для метабокса;
- $title – заголовок, который будут видеть пользователи;
- $callback –callback-функция определяет содержимое метабокса;
- $post_type – тип записи, при редактировании которого будет появляться метабокс. Оставьте параметр пустым, чтобы ваш метабокс появлялся при редактировании записей любого типа;
- $context – место расположения метабокса на экране: ‘normal’, ‘advanced’ или ‘side’. По умолчанию устанавливается позиция ‘advanced’, которая размещает метабокс в основной части экрана редактирования;
- $priority – определяет приоритет для данного метабокса ('high', 'core', 'default' или 'low'). Этот параметр полезен, если вы добавляете несколько метабоксов;
- $callback_args – аргументы, передаваемые в вашу callback-функцию (опционально).
Итак, чтобы добавить метабокс в основную часть окна редактирования записи, я добавил в плагин следующий код:
// Add metabox below editing pane
function wptutsplus_metabox_after_title() {
add_meta_box( 'after-title-help', 'Using this Screen', 'wptutsplus_after_title_help_metabox_content', 'post', 'advanced', 'high' );
}
add_action( 'add_meta_boxes', 'wptutsplus_metabox_after_title' );Этот код добавляет пустой метабокс, который пока не работает, потому что я не добавил callback-функцию. А вот и она:
// callback function to populate metabox
function wptutsplus_after_title_help_metabox_content() { ?>
<p>Use this screen to add new articles or edit existing ones. Make sure you click 'Publish' to publish a new article once you've added it, or 'Update' to save any changes.</p>
<?php }После всех этих шагов, на странице редактирования постов появится наш метабокс, как это показано на скриншоте:
Как вы можете видеть, я удалил некоторые стандартные метабоксы из окна редактирования записи (такие, как «Отрывки» и «Дискуссии»), но мой метабокс все еще находится ниже окна редактирования и не достаточно заметен.
Есть возможность использовать функцию add_meta_box(), чтобы вставить метабокс над основным окном редактирования не прибегая к использованию jQuery (этот способ сдвигает окно редактирования вниз и, по моему мнению, может справиться с этой задачей).
Итак, какие есть альтернативы?
- Можно добавить наш метабокс над метабоксом ‘Публикация’, что очень наглядно для пользователя;
- С помощью хитрого трюка с использованием хука edit_form_after_title, можно добавить «фейковый» метабокс над панелью редактирования.
Я начну со способа под номером один.
1. Добавление метабокса с правой стороны от окна редактирования
Чтобы добавить метабокс справа от окна редактирования записи, я использую функцию add_meta_box() так же, как и раньше, но с несколько измененными параметрами. Я также буду использовать другую callback-функцию для наполнения метабокса содержимым.
Добавьте следующий код в ваш плагин:
// Add help text to right of screen in a metabox
function wptutsplus_metabox_top_right() {
add_meta_box( 'after-title-help', 'Publishing and Saving Changes', 'wptutsplus_top_right_help_metabox_content', 'post', 'side', 'high' );
}
// callback function to populate metabox
function wptutsplus_top_right_help_metabox_content() { ?>
<p>Make sure you click 'Publish' below to publish a new article once you've added it, or 'Update' to save any changes.</p>
<?php }
add_action( 'add_meta_boxes', 'wptutsplus_metabox_top_right' );Этот код добавит маленький метабокс с указаниями. Из-за своих размеров, если вы добавите много текста, то метабокс может сдвинуть вниз остальные находящиеся под ним, так что будьте внимательны. Результат можно увидеть на скриншоте:
Примечание: я закомментировал функцию, которая выводит метабокс над окном редактирования, перед добавлением метабокса справа, поэтому вы не видите его на скриншоте выше.
2. Добавление «фейкового» метабокса над окном редактирования
Добавление метабокса в правую часть экрана это достаточно простая задача. Но что делать, если мы хотим добавить этот метабокс слева от окна редактирования?
Чтобы сделать это, надо использовать функцию edit_form_after_title вместо add_meta_box(), которая позволяет вставлять содержимое между заголовком и окном редактирования. Я прикрепил хук к этой функции, чтобы добавить разметку, которая будет выводиться на экран.
Я также использовал в этой разметке класс оригинального метабокса, чтобы воспроизвести его содержание.
Добавьте в плагин следующий код:
function wptutsplus_text_after_title( $post_type ) { ?>
<div class="after-title-help postbox">
<h3>Using this screen</h3>
<div class="inside">
<p>Use this screen to add new articles or edit existing ones. Make sure you click 'Publish' to publish a new article once you've added it, or 'Update' to save any changes.</p>
</div><!-- .inside -->
</div><!-- .postbox -->
<?php }
add_action( 'edit_form_after_title', 'wptutsplus_text_after_title' );Я добавил разметку, которая делает наш «фейковый» метабокс похожим на настоящий, включив в код классы .postbox и .inside:
Однако в этой разметке есть проблема – она будет показываться на экране редактирования для всех типов постов. Это связано с тем, что я не использую функцию add_meta_box(), и, соответственно, не имею возможности отредактировать параметр $post_type.
Поэтому я пойду другим путем и реализую проверку типа окна редактирования записи ДО вывода разметки.
Находясь в административной части WordPress, я не могу использовать стандартные условные операторы, которые я бы использовал при создании шаблона, чтобы определить текущее местоположение в административной панели. Но можно воспользоваться функцией get_current_screen(), чтобы определить экран, на котором в данный момент находится пользователь.
Функция get_current_screen() возвращает массив, который содержит в себе, помимо всего прочего, тип записи на текущей странице. Я могу использовать этот массив для проверки на предмет того, что редактируемое в данный момент имеет тип «post».
Вставьте внутрь своей функции над всем содержимым следующие строки:
$screen = get_current_screen();
$edit_post_type = $screen->post_type;
if ( $edit_post_type != 'post' )
return;
?>Теперь, полностью функция будет выглядеть так:
// Add fake metabox above editing pane
function wptutsplus_text_after_title( $post_type ) {
$screen = get_current_screen();
$edit_post_type = $screen->post_type;
if ( $edit_post_type != 'post' )
return;
?>
<div class="after-title-help postbox">
<h3>Using this screen</h3>
<div class="inside">
<p>Use this screen to add new articles or edit existing ones. Make sure you click 'Publish' to publish a new article once you've added it, or 'Update' to save any changes.</p>
</div><!-- .inside -->
</div><!-- .postbox -->
<?php }
add_action( 'edit_form_after_title', 'wptutsplus_text_after_title' );В результате проделанной работы, наш «фейковый» метабокс будет появляться только при выводе окна редактирования записи. Вы можете реализовать эту функцию также для других типов постов (таких, как 'page' и 'attachment', а также для своих собственных типов записей), чтобы отображать в каждом случае соответствующую текстовую справку.
Заключение
Добавление текстовой справки отдельно к каждой странице административной части может быть очень полезным, чтобы пользователи, которые нуждаются в такой справке, каждый раз не возвращались за ней на главную страницу панели управления.
В этой статье, мы узнали, каким образом можно создать метабоксы с текстовой справкой на экранах редактирования, а также как использовать хук edit_form_after_title для добавления справки непосредственно над окном редактирования.