По работе я провожу значительную часть времени за аудитом сторонних расширений. Одним из удивительных моментов в процессе аудита является наблюдение за тем, куда разработчики помещают свои настройки.
Некоторые разработчики помещают их в раздел Настройки, некоторые — в пользовательский пункт меню, а некоторые просто засовывают их куда попало.
Если вы создаете WooCommerce расширение, то самое простое, что вы можете сделать для улучшения пользовательского интерфейса, — это разместить все настройки WooCommerce там, где их смогут найти пользователи — на новой вкладке настроек WooCommerce. Звучит довольно просто, но вы удивитесь, как много людей этого не делают.
Добавление новой вкладки настроек WooCommerce состоит из трёх небольших шагов:
- Добавить вашу новую вкладку в массив существующих вкладок
- Создать массив настроек и передать его в функцию вывода
- Этот же массив передать в функцию сохранения настроек
Добавление вкладки в настройки WooCommerce
Прежде всего, необходимо добавить новую вкладку настроек. На самом деле это довольно просто. Нужно просто добавить один дополнительный элемент массива через фильтр woocommerce_settings_tabs_array.
<?php
class WC_Settings_Tab_Demo {
public static function init() {
add_filter( 'woocommerce_settings_tabs_array', __CLASS__ . '::add_settings_tab', 50 );
}
public static function add_settings_tab( $settings_tabs ) {
$settings_tabs['settings_tab_demo'] = __( 'Settings Demo Tab', 'woocommerce-settings-tab-demo' );
return $settings_tabs;
}
}
WC_Settings_Tab_Demo::init();
В результате создается совершенно новая вкладка, которую можно использовать.
Добавление полей на свою вкладку настроек
Теперь необходимо заполнить новую вкладку настройками. Существует удобная функция woocommerce_admin_fields, которую можно вызвать и передать массив опций. Здесь есть один прием, который можно использовать для облегчения следующего шага. Создайте одну функцию, которая возвращает только массив настроек, а затем другую функцию, которая вызывает функцию woocommerce_admin_fields. Вы поблагодарите меня за это на следующем этапе.
Ниже вы увидите, что я передаю четыре настройки. Две из них — это собственно настройки, одна — заголовок и ещё одна — конец раздела. Можете просмотреть output_fields() в class-wc-admin-settings.php, чтобы увидеть все доступные опции.
Это выглядит примерно так:
<?php
add_action( 'woocommerce_settings_tabs_settings_tab_demo', 'settings_tab' );
function settings_tab() {
woocommerce_admin_fields( get_settings() );
}
function get_settings() {
$settings = array(
'section_title' => array(
'name' => __( 'Section Title', 'woocommerce-settings-tab-demo' ),
'type' => 'title',
'desc' => '',
'id' => 'wc_settings_tab_demo_section_title'
),
'title' => array(
'name' => __( 'Title', 'woocommerce-settings-tab-demo' ),
'type' => 'text',
'desc' => __( 'This is some helper text', 'woocommerce-settings-tab-demo' ),
'id' => 'wc_settings_tab_demo_title'
),
'description' => array(
'name' => __( 'Description', 'woocommerce-settings-tab-demo' ),
'type' => 'textarea',
'desc' => __( 'This is a paragraph describing the setting. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda.', 'woocommerce-settings-tab-demo' ),
'id' => 'wc_settings_tab_demo_description'
),
'section_end' => array(
'type' => 'sectionend',
'id' => 'wc_settings_tab_demo_section_end'
)
);
return apply_filters( 'wc_settings_tab_demo_settings', $settings );
}
Сохранение настроек
Итак, теперь вы уже должны видеть свои настройки на новой вкладке. Но если вы нажмете кнопку сохранения, то заметите, что ничего не происходит. Вам все еще нужно подключить функцию сохранения. Надеюсь, вы воспользовались моим советом в предыдущем разделе и создали отдельную функцию, возвращающую массив настроек, который нужно просто передать в функцию сохранения, woocommerce_update_options().
<?php
add_action( 'woocommerce_update_options_settings_tab_demo', 'update_settings' );
function update_settings() {
woocommerce_update_options( get_settings() );
}
Заключение
На самом деле во всем этом процессе всего три шага. Если вы следовали им, то все готово. Замените мои фиктивные настройки на свои реальные. Если у вас возникли проблемы с прохождением этих шагов, то полная версия приведена ниже:
<?php
/
* Plugin Name: WooCommerce Settings Tab Demo
* Plugin URI: https://gist.github.com/BFTrick/b5e3afa6f4f83ba2e54a
* Description: A plugin demonstrating how to add a WooCommerce settings tab.
* Author: Patrick Rauland
* Author URI: http://speakinginbytes.com/
* Version: 1.0
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
class WC_Settings_Tab_Demo {
/
* Bootstraps the class and hooks required actions & filters.
*
*/
public static function init() {
add_filter( 'woocommerce_settings_tabs_array', __CLASS__ . '::add_settings_tab', 50 );
add_action( 'woocommerce_settings_tabs_settings_tab_demo', __CLASS__ . '::settings_tab' );
add_action( 'woocommerce_update_options_settings_tab_demo', __CLASS__ . '::update_settings' );
}
/
* Add a new settings tab to the WooCommerce settings tabs array.
*
* @param array $settings_tabs Array of WooCommerce setting tabs & their labels, excluding the Subscription tab.
* @return array $settings_tabs Array of WooCommerce setting tabs & their labels, including the Subscription tab.
*/
public static function add_settings_tab( $settings_tabs ) {
$settings_tabs['settings_tab_demo'] = __( 'Settings Demo Tab', 'woocommerce-settings-tab-demo' );
return $settings_tabs;
}
/
* Uses the WooCommerce admin fields API to output settings via the @see woocommerce_admin_fields() function.
*
* @uses woocommerce_admin_fields()
* @uses self::get_settings()
*/
public static function settings_tab() {
woocommerce_admin_fields( self::get_settings() );
}
/
* Uses the WooCommerce options API to save settings via the @see woocommerce_update_options() function.
*
* @uses woocommerce_update_options()
* @uses self::get_settings()
*/
public static function update_settings() {
woocommerce_update_options( self::get_settings() );
}
/
* Get all the settings for this plugin for @see woocommerce_admin_fields() function.
*
* @return array Array of settings for @see woocommerce_admin_fields() function.
*/
public static function get_settings() {
$settings = array(
'section_title' => array(
'name' => __( 'Section Title', 'woocommerce-settings-tab-demo' ),
'type' => 'title',
'desc' => '',
'id' => 'wc_settings_tab_demo_section_title'
),
'title' => array(
'name' => __( 'Title', 'woocommerce-settings-tab-demo' ),
'type' => 'text',
'desc' => __( 'This is some helper text', 'woocommerce-settings-tab-demo' ),
'id' => 'wc_settings_tab_demo_title'
),
'description' => array(
'name' => __( 'Description', 'woocommerce-settings-tab-demo' ),
'type' => 'textarea',
'desc' => __( 'This is a paragraph describing the setting. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda. Lorem ipsum yadda yadda yadda.', 'woocommerce-settings-tab-demo' ),
'id' => 'wc_settings_tab_demo_description'
),
'section_end' => array(
'type' => 'sectionend',
'id' => 'wc_settings_tab_demo_section_end'
)
);
return apply_filters( 'wc_settings_tab_demo_settings', $settings );
}
}
WC_Settings_Tab_Demo::init();
Источник: How to Add a WooCommerce Settings Tab
Источник: https://www.kobzarev.com/wordpress/how-to-add-a-woocommerce-settings-tab/
