Вопрос или проблема
Я создал страницу настроек для своей кастомной темы на WordPress и создал различные метабоксы с помощью Settings API.
Чтобы сделать страницу более аккуратной, я создал навигационные вкладки, единственная проблема заключается в том, что я могу сохранить метабоксы только в первом разделе.
Вот мой код формы:
<?php
// Проверка прав пользователя
if (!current_user_can('manage_options')) {
return;
}
?>
<div class="wrap">
<?php settings_errors(); ?>
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
<form method="post" action="options.php" enctype="multipart/form-data">
<?php
// Управляет вкладками настройки темы
$active_tab = "primary-colors-options";
if (isset($_GET["tab"])) {
if ($_GET["tab"] == "primary-colors-options") {
$active_tab = "primary-colors-options";
settings_fields("heisenberg_sezione_colori_primari");
} else if ($_GET["tab"] == "neutral-colors-options") {
$active_tab = "neutral-colors-options";
settings_fields("heisenberg_sezione_colori_neutrali");
} else if ($_GET["tab"] == "header-options") {
$active_tab = "header-options";
settings_fields("heisenberg_header_options");
} else if ($_GET["tab"] == "footer-options") {
$active_tab = "footer-options";
settings_fields("heisenberg_footer_options");
} else {
$active_tab = "404-options";
settings_fields("heisenberg_404_options");
}
}
?>
<h2 class="nav-tab-wrapper">
<a href="?page=heisenberg-options&tab=primary-colors-options" class="nav-tab <?php if ($active_tab == 'primary-colors-options') {
echo 'nav-tab-active';
} ?> "><?php _e('Основные цвета', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=neutral-colors-options" class="nav-tab <?php if ($active_tab == 'neutral-colors-options') {
echo 'nav-tab-active';
} ?> "><?php _e('Нейтральные цвета', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=header-options" class="nav-tab <?php if ($active_tab == 'header-options') {
echo 'nav-tab-active';
} ?> "><?php _e('Заголовок', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=footer-options" class="nav-tab <?php if ($active_tab == 'footer-options') {
echo 'nav-tab-active';
} ?>"><?php _e('Подвал', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=404-options" class="nav-tab <?php if ($active_tab == '404-options') {
echo 'nav-tab-active';
} ?>"><?php _e('404', THEME_TEXT_DOMAIN); ?></a>
</h2>
<?php
do_settings_sections('heisenberg-options');
submit_button();
?>
</form>
</div>
Это мой код для Settings API:
<?php
/*-------------------------------
* WordPress Settings API
-------------------------------*/
if (!isset($_GET["tab"]) || $_GET["tab"] == "primary-colors-options") {
add_settings_section(
'heisenberg_sezione_colori_primari',
__('Основные цвета', THEME_TEXT_DOMAIN),
'display_heisenberg_general_options_content',
'heisenberg-options'
);
function display_heisenberg_general_options_content()
{
echo '<p>' . __('Lorem Ipsum.', THEME_TEXT_DOMAIN) . '</p>';
}
add_settings_field(
'colore_primario_1',
__('Цвет Основной 1', THEME_TEXT_DOMAIN),
'colore_primario_1_callback',
'heisenberg-options',
'heisenberg_sezione_colori_primari'
);
register_setting(
'heisenberg_sezione_colori_primari',
'colore_primario_1'
);
function colore_primario_1_callback()
{
$colore_primario_1 = get_option('colore_primario_1');
if (isset($colore_primario_1) && $colore_primario_1 != '') {
$colore_primario_1 = esc_attr($colore_primario_1);
} else {
$colore_primario_1 = '#05400A';
}
echo "<input type="text" name="colore_primario_1" id='colore_primario_1' value="" . $colore_primario_1 . "" class="color-picker" data-alpha-enabled='true' />";
}
} elseif ($_GET["tab"] == "neutral-colors-options") {
add_settings_section(
'heisenberg_sezione_colori_neutrali',
__('Нейтральные цвета', THEME_TEXT_DOMAIN),
'display_heisenberg_colori_neutrali_options_content',
'heisenberg-options'
);
function display_heisenberg_colori_neutrali_options_content()
{
echo '<p>' . __('Lorem Ipsum.', THEME_TEXT_DOMAIN) . '</p>';
}
add_settings_field(
'colore_neutrale_1',
__('Цвет Нейтральный 1', THEME_TEXT_DOMAIN),
'colore_neutrale_1_callback',
'heisenberg-options',
'heisenberg_sezione_colori_neutrali'
);
register_setting(
'heisenberg_sezione_colori_neutrali',
'colore_neutrale_1'
);
function colore_neutrale_1_callback()
{
$colore_neutrale_1 = get_option('colore_neutrale_1');
if (isset($colore_neutrale_1) && $colore_neutrale_1 != '') {
$colore_neutrale_1 = esc_attr($colore_neutrale_1);
} else {
$colore_neutrale_1 = '#000';
}
echo "<input type="text" name="colore_neutrale_1" id='colore_neutrale_1' value="" . $colore_neutrale_1 . "" class="color-picker" data-alpha-enabled='true' />";
}
}
Спасибо тем, кто поможет!
Я решил эту проблему, изменив группу имени в каждом разделе, следуя этой статье:
https://code.tutsplus.com/tutorials/the-wordpress-settings-api-part-5-tabbed-navigation-for-settings–wp-24971
Ответ или решение
Создание Навигационных Вкладок и Использование API Настроек в WordPress
Введение
При разработке пользовательской темы на WordPress использование API Настроек (Settings API) можно считать одним из наиболее эффективных способов управления настройками темы. Однако, создавая настройки, стоит учесть удобство их восприятия пользователем. В этом контексте навигационные вкладки (Tab Nav) служат отличным инструментом для организации настроек. В данной статье мы рассмотрим, как правильно реализовать вкладки для настройки темы, а также типичные проблемы, которые могут возникнуть при их внедрении.
Суть Проблемы
В процессе создания страницы настроек темы пользователем была реализована система вкладок. Однако возникла проблема: пользовательские метабоксы сохранялись только для первой вкладки. Эта ситуация может значительно усложнить администрирование настроек, если необходимо обрабатывать информацию из нескольких вкладок.
Решение Проблемы
Пользователь нашел решение, изменив группу имен для каждой секции, что является правильным шагом. Давайте рассмотрим данный подход более подробно.
Шаги по Созданию Вкладок с API Настроек
-
Создание Настройки для Каждой Вкладки:
При добавлении настроек с помощьюregister_setting()важно использовать уникальные имена групп, чтобы данные каждой вкладки сохранялись независимо. -
Определение Aktive Tab:
Правильное определение активной вкладки (active tab) необходимо для корректного отображения интерфейса. Убедитесь, что переменная$active_tabобновляется в зависимости от переданного параметраtab. -
Использование
settings_fields():
В коде, отвечающем за отрисовку формы, используйтеsettings_fields()с параметрами, соответствующими нужной вкладке. Это обеспечивает правильное связывание данных во время их отправки.
Примеры Реализации
Ниже приведен упрощенный пример кода, демонстрирующий, как адаптировать ваш код с учетом организации вкладок.
// Проверяем права доступа
if (!current_user_can('manage_options')) {
return;
}
// Определяем активную вкладку
$active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'primary-colors-options';
// Отображение заголовка библиотеки настроек
echo '<h2 class="nav-tab-wrapper">';
foreach ($tabs as $tab => $name) {
$class = ($tab === $active_tab) ? 'nav-tab-active' : '';
echo '<a href="?page=heisenberg-options&tab=' . $tab . '" class="nav-tab ' . $class . '">' . esc_html($name) . '</a>';
}
echo '</h2>';
// Формирование секций настроек в зависимости от вкладки
settings_fields($active_tab);
do_settings_sections('heisenberg-options');
submit_button();FAQ по API Настроек WordPress
-
Почему уникальные группы важны?
Каждая группа настроек должна иметь уникальное имя для предотвращения конфликтов и обеспечения правильного сохранения данных. -
Как изменить параметры вкладок динамически?
Вы можете добавлять новые параметры в массив$tabsи выводить их в цикле, как показано в примере.
Заключение
Создание навигационных вкладок с использованием API Настроек в WordPress дает возможность организовать интерфейс настроек более удобно для пользователя. Правильное управление группами параметров и секциями настоек обеспечит легкость в изменении данных для каждой вкладки. Если у вас остались вопросы по настройке и реализации функционала, не стесняйтесь обращаться к сообществу WordPress или искать документацию.
Используя предоставленные советы, вы сможете улучшить опыт пользователя вашего сайта и сделать настройки более интуитивными.