Большинство тем WordPress имеют страницу настроек тем, чтобы настроить их функции, поведение и стили. Предоставление страницы настроек темы вместе с темой облегчает пользователям настройку темы вместо непосредственного редактирования файлов PHP или CSS. Это облегчает обновление вашей темы, так как пользователи не потеряют внесенные изменения.
В этом уроке мы изучим рекомендуемый «WordPress» способ создания страницы настроек темы, то есть с помощью API настроек WordPress. API настроек WordPress был добавлен в WordPress 2.7 и с тех пор стал одним из самых популярных API WordPress. Этот учебник также будет полезен, если вы планируете добавить страницу настроек в свой плагин WordPress. Давайте начнем.
Что мы включим в страницу настроек темы?
Параметры на странице настроек темы зависят от того, какие функции и настройки поддерживает ваша тема. Тем не менее, есть некоторые общие вещи, которые включены в каждую страницу настроек темы. Вот некоторые из распространенных вариантов: социальные URL, статический или адаптивный макет и логотип заголовка. В этом уроке я покажу вам, как включить эти четыре параметра на нашей странице настроек темы.
Создание элемента меню страницы настроек темы
Сначала мы должны создать пункт меню на панели администратора, который будет открывать страницу настроек нашей темы.
Мы можем создать пункт меню, используя WordPress Menu API. Вот код для создания пункта меню.
function theme_settings_page(){}
function add_theme_menu_item()
{
add_menu_page("Theme Panel", "Theme Panel", "manage_options", "theme-panel", "theme_settings_page", null, 99);
}
add_action("admin_menu", "add_theme_menu_item"); Здесь theme-panel theme_settings_page Мы будем кодировать эту функцию дальше.
Вот как это выглядит.
Обзор API настроек
API настроек используется для заполнения страницы, созданной API пункта меню. Страница настроек разделена на разделы и поля.
Для этого урока мы просто создадим один раздел и поместим все поля внутри этого раздела.
Вот код функции theme_settings_page
function theme_settings_page()
{
?>
<div class="wrap">
<h1>Theme Panel</h1>
<form method="post" action="options.php">
<?php
settings_fields("section");
do_settings_sections("theme-options");
submit_button();
?>
</form>
</div>
<?php
}
Здесь мы регистрируем раздел, используя settings_fieldsection theme-options Наконец, submit_button()
Вот как это должно выглядеть.
Добавление URL социальных профилей
Теперь давайте добавим поля на нашей странице настроек для хранения URL-адресов наших профилей в Facebook и Twitter. Почти каждая тема WordPress имеет параметры социального профиля, поэтому это удобный, практичный пример.
Вот код для добавления текстовых полей ввода с помощью API настроек.
function display_twitter_element()
{
?>
<input type="text" name="twitter_url" id="twitter_url" value="<?php echo get_option('twitter_url'); ?>" />
<?php
}
function display_facebook_element()
{
?>
<input type="text" name="facebook_url" id="facebook_url" value="<?php echo get_option('facebook_url'); ?>" />
<?php
}
function display_theme_panel_fields()
{
add_settings_section("section", "All Settings", null, "theme-options");
add_settings_field("twitter_url", "Twitter Profile Url", "display_twitter_element", "theme-options", "section");
add_settings_field("facebook_url", "Facebook Profile Url", "display_facebook_element", "theme-options", "section");
register_setting("section", "twitter_url");
register_setting("section", "facebook_url");
}
add_action("admin_init", "display_theme_panel_fields");
После инициализации админ-панели мы регистрируем обратные вызовы разделов и полей. Здесь мы используем три важные функции:
-
add_settings_section -
add_settings_field -
register_setting
Вот как должна выглядеть наша страница настроек.
Теперь мы увидели, как добавить поля ввода текста, используя нашу страницу настроек. Давайте посмотрим, как добавить флажок, предоставив возможность выбора между статическими или адаптивными макетами.
Добавление опции для выбора между макетами
Давайте посмотрим, как расширить функцию display_theme_panel_fields
Вот код для достижения этого.
function display_twitter_element()
{
?>
<input type="text" name="twitter_url" id="twitter_url" value="<?php echo get_option('twitter_url'); ?>" />
<?php
}
function display_facebook_element()
{
?>
<input type="text" name="facebook_url" id="facebook_url" value="<?php echo get_option('facebook_url'); ?>" />
<?php
}
function display_layout_element()
{
?>
<input type="checkbox" name="theme_layout" value="1" <?php checked(1, get_option('theme_layout'), true); ?> />
<?php
}
function display_theme_panel_fields()
{
add_settings_section("section", "All Settings", null, "theme-options");
add_settings_field("twitter_url", "Twitter Profile Url", "display_twitter_element", "theme-options", "section");
add_settings_field("facebook_url", "Facebook Profile Url", "display_facebook_element", "theme-options", "section");
add_settings_field("theme_layout", "Do you want the layout to be responsive?", "display_layout_element", "theme-options", "section");
register_setting("section", "twitter_url");
register_setting("section", "facebook_url");
register_setting("section", "theme_layout");
}
add_action("admin_init", "display_theme_panel_fields");
Мы добавили новое поле настроек, используя add_settings_fieldregister_settings Стоит отметить, что если мы хотим сказать, установил ли пользователь флажок или нет, мы используем функцию checked()
Функция checked()checked
Вот как выглядит наша страница настроек.
Загрузка логотипа
Функция register_setting Мы можем использовать этот обратный вызов для обработки загрузки.
Вот код для загрузки логотипа на нашей странице настроек.
function logo_display()
{
?>
<input type="file" name="logo" />
<?php echo get_option('logo'); ?>
<?php
}
function handle_logo_upload()
{
if(!empty($_FILES["demo-file"]["tmp_name"]))
{
$urls = wp_handle_upload($_FILES["logo"], array('test_form' => FALSE));
$temp = $urls["url"];
return $temp;
}
return $option;
}
function display_theme_panel_fields()
{
add_settings_section("section", "All Settings", null, "theme-options");
add_settings_field("logo", "Logo", "logo_display", "theme-options", "section");
register_setting("section", "logo", "handle_logo_upload");
}
add_action("admin_init", "display_theme_panel_fields");
Здесь мы используем wp_handle_upload
Вот как теперь выглядит наша страница настроек, она красиво складывается!
Получение настроек
Тема должна получить значения настроек в интерфейсе. API настроек внутренне сохраняет значения с помощью API настроек. Следовательно, вы можете получить значения с помощью функции get_option()
Это довольно просто, вот код.
<?php
$layout = get_option('theme_layout');
$facebook_url = get_option('facebook_url');
$twitter_url = get_option('twitter_url');
Вывод
В этой статье мы увидели, как мы можем легко создать страницу настроек темы с помощью API настроек. Мы создали поля ввода текста, файлов и флажков для ввода в различных форматах данных. Продолжайте и попробуйте расширить страницу и добавить дополнительные элементы управления формы самостоятельно.