Статьи

Использование API настроек — Часть 2. Создание меню администратора верхнего уровня

Декабрь 10, 2018

Это вторая часть учебника « Создание страниц настроек темы, использующих API настроек ». В этой части мы рассмотрим, как мы можем создать меню администратора верхнего уровня с более чем одной страницей настроек, а также как мы можем добавлять вкладки, когда они нам нужны. Если у вас еще не было возможности прочитать первую часть , вы можете сначала сделать это, прежде чем продолжить. Этот учебник основан на коде, показанном в первой части этого учебника.

Посмотрите на то, что мы будем создавать

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

  1. Загрузите исходные файлы и разархивируйте
  2. Найдите папку Part Two/source_files/lib и загрузите ее в папку темы twentyeleven, чтобы она находилась на том же уровне, что и twentyeleven/js вы видите.
  3. Затем откройте Part Two/source_files/functions.php в редакторе кода и скопируйте строку кода require_once .
  4. Затем откройте twentyeleven/functions.php в вашем редакторе кода.
    Найдите twentyeleven_setup() вокруг строки 74 и вставьте строку, которую вы скопировали ранее (точка 3), внутри функции, как показано ниже.
    Это заменит предыдущую строку кода require_once() вы добавили в первой части .
1
2
3
4
5
6
function twentyeleven_setup() {
 
    //require only in admin!
    if(is_admin()){
        require_once(‘lib/wptuts-theme-settings-advanced.php’);
    }

После выполнения этого шага вы сможете увидеть меню верхнего уровня Wptuts Settings в вашей административной области. Вы заметите две ссылки меню: Страница параметров первая и Страница параметров вторая . Страница параметров первая — это точно такая же страница настроек, которую вы создали в первой части, поэтому перейдите непосредственно на страницу параметров 2 После страницы настроек Wptuts Два заголовка вы увидите четыре вкладки с их отдельными полями настроек. Чтобы упростить задачу и помочь вам сконцентрироваться на коде, необходимом для создания нескольких страниц и вкладок, вы заметите, что параметры те же, что и на первой странице параметров .

Теперь, когда вы видите, как выглядит готовый результат, давайте узнаем, как мы можем воссоздать его шаг за шагом.

«Окончательный код, описанный в этом шаге, находится в папке Part Two/source_ files/step1 »

Шаг 1 Регистрация страниц администрирования

Этот шаг о создании меню администратора верхнего уровня и регистрации двух страниц настроек.

Мы будем использовать тот же документ my-theme-settings.php вы работали ранее в первой части, поэтому откройте этот файл в редакторе кода.

Зарегистрировать меню верхнего уровня

Мы отредактируем существующую wptuts_add_menu() , добавив вызов add_menu_page() . Мы добавим это сразу после того, как соберем нашу контекстную помощь, как вы видите ниже.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/*
 * The admin menu pages
 */
function wptuts_add_menu(){
     
    $settings_output = wptuts_get_settings();
    // collect our contextual help text
    $wptuts_contextual_help = $settings_output[‘wptuts_contextual_help’];
     
    // As a «top level» menu
    // add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
    add_menu_page( __(‘Wptuts Settings’), __(‘Wptuts Settings’,’wptuts_textdomain’), ‘manage_options’, WPTUTS_PAGE_BASENAME, ‘wptuts_settings_page_fn’);
     
    // old code follows below
}

Поймите параметры add_menu_page()

Обратите внимание на параметры функции add_menu_page() чтобы позже вы могли настроить вызов функции в соответствии со своими потребностями. Информация взята со страницы Кодекса :

  • $page_title — текст, отображаемый в теге заголовка страницы при $page_title меню
  • $menu_title — текст, который будет использоваться для меню
  • $capability — Возможность, необходимая для отображения этого меню пользователю.
  • $menu_slug — имя пули, к $menu_slug относится это меню (должно быть уникальным для этого меню). (Обратите внимание на использование нашей константы WPTUTS_PAGE_BASENAME !)
  • $function — $function обратного вызова для вывода содержимого этой страницы.
  • $icon_url — URL-адрес значка, который будет использоваться для этого меню. Этот параметр не является обязательным. (Мы не включили этот параметр)
  • $position — позиция в меню, в котором должно отображаться это меню. (Мы не включили этот параметр)

Зарегистрировать страницы

Затем мы заменим существующий вызов add_submenu_page() функцию add_submenu_page() чтобы зарегистрировать нашу первую страницу настроек. Затем мы зарегистрируем вторую страницу, как показано ниже.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/*
 * The admin menu pages
 */
function wptuts_add_menu(){
     
    $settings_output = wptuts_get_settings();
    // collect our contextual help text
    $wptuts_contextual_help = $settings_output[‘wptuts_contextual_help’];
     
    // As a «top level» menu
    // add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
    add_menu_page( __(‘Wptuts Settings’), __(‘Wptuts Settings’,’wptuts_textdomain’), ‘manage_options’, WPTUTS_PAGE_BASENAME, ‘wptuts_settings_page_fn’);
     
    // page one
    // add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function );
    $wptuts_settings_page = add_submenu_page(WPTUTS_PAGE_BASENAME, __(‘Wptuts Settings | Options’), __(‘Options Page One’,’wptuts_textdomain’), ‘manage_options’, WPTUTS_PAGE_BASENAME, ‘wptuts_settings_page_fn’);
        // contextual help
        if ($wptuts_settings_page) {
            add_contextual_help( $wptuts_settings_page, $wptuts_contextual_help );
        }
        // css & js
        add_action( ‘load-‘. $wptuts_settings_page, ‘wptuts_settings_scripts’ );
         
    // page two
    $wptuts_settings_page_two = add_submenu_page(WPTUTS_PAGE_BASENAME, __(‘Wptuts Settings | Options Page Two’, ‘wptuts_textdomain’), __(‘Options Page Two’,’wptuts_textdomain’), ‘manage_options’, WPTUTS_PAGE_BASENAME . ‘-page-two’, ‘wptuts_settings_page_fn’);
        // contextual help
        if ($wptuts_settings_page_two) {
            add_contextual_help( $wptuts_settings_page_two, $wptuts_contextual_help );
        }
        // css & js
        add_action( ‘load-‘. $wptuts_settings_page_two, ‘wptuts_settings_scripts’ );
}

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

Поймите параметры add_submenu_page()

Обратите внимание на параметры функции add_submenu_page() чтобы позже вы могли настроить вызов функции в соответствии со своими потребностями. Информация взята со страницы Кодекса :

  • $page_title — текст, отображаемый в теге заголовка страницы при $page_title меню
  • $menu_title — текст, который будет использоваться для меню
  • $capability — Возможность, необходимая для отображения этого меню пользователю.
  • $menu_slug — имя пули, к $menu_slug относится это меню (должно быть уникальным для этого меню). (Обратите внимание на использование нашей константы WPTUTS_PAGE_BASENAME !)
  • $function — $function обратного вызова для вывода содержимого этой страницы.

Проверьте результат

У вас все еще есть копия файла my-theme-options.php из части первой в папке twentyeleven/lib ? Если вы этого не сделаете, загрузите файл ( my-theme-options.php ), с которым вы работали в первой части этого учебного руководства, или Part One/source_files/step7 который вы найдете в папке Part One/source_files/step7 , прежде чем открывать администратора WordPress в ваш браузер

Если вы успешно выполнили все вышеперечисленное, вот так должна выглядеть ваша страница настроек на этом этапе.
Обратите внимание, что содержимое страницы будет одинаковым для обеих страниц. Этого следовало ожидать, так как мы еще не определили или не зарегистрировали настройки для второй страницы. Это мы сделаем в шагах 2 и 3.

Шаг 2 Определение настроек для каждой страницы настроек

«Окончательный код, описанный в этом шаге, находится в папке Part Two/source_ files/step2 »

Теперь, когда у нас есть наши страницы настроек, нам нужно сообщить WordPress настройки, разделы и поля, которые мы хотим зарегистрировать и внести в белый список, т.е. выполнить санитарную обработку для каждой отдельной страницы настроек. Вы можете вспомнить, что wptuts_register_settings() (расположенная в my-theme-settings.php ) делает именно это для одной страницы настроек, но как нам обрабатывать несколько страниц?
А что если мы хотим отобразить настройки страницы на вкладках?

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

Особенно те из вас, кто знаком с отличным учебным пособием « Включение API настроек в WordPress Themes » Чипа Беннетта, примут к сведению следующее: для сохранения настроек потребуется, чтобы каждая страница и вкладка сохраняли свои настройки под собственным уникальным именем опции (как используется в get_option() функции get_option() )! Это не обязательно следует воспринимать как негативную вещь. Это просто другой подход; тот, который требуется, потому что мы регистрируем, отображаем и сохраняем только те настройки на текущей странице или вкладке. Является ли это лучшим подходом для вас в конкретном проекте, можно определить только по имеющемуся проекту и количеству страниц / вкладок, которые вам нужно создать. Поэтому, пожалуйста, сохраняйте непредвзятость во время чтения.

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

Подготовьте новый документ с некоторыми вспомогательными функциями

Создайте новый документ в вашем редакторе кода и назовите его wptuts-helper-functions.php . Скопируйте и вставьте в него три приведенные ниже функции, затем загрузите их в twentyeleven/lib . Каждая функция объясняется до того, как будет дана следующая.

Код, приведенный ниже, должен быть записан в wptuts-helper-functions.php .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
 * Helper function: Check for pages and return the current page name
 *
 * @return string
 */
function wptuts_get_admin_page() {
    global $pagenow;
     
    // read the current page
    $current_page = trim($_GET[‘page’]);
     
    // use a different way to read the current page name when the form submits
    if ($pagenow == ‘options.php’) {
        // get the page name
        $parts = explode(‘page=’, $_POST[‘_wp_http_referer’]);
        $page = $parts[1];
 
        // account for the use of tabs (we do not want the tab name to be part of our return value!)
        $t = strpos($page,»&»);
         
        if($t !== FALSE) {
            $page = substr($parts[1],0,$t);
        }
         
        $current_page = trim($page);
    }
     
return $current_page;

Первая вспомогательная функция вернет имя текущей страницы. Мы зависим от $_GET .
Переменная возвращает имя страницы, которую мы в данный момент просматриваем — например, wptuts-settings, как показано в части ?page=wptuts-settings URL-адреса страницы.

Однако, когда мы сохраняем настройки, наша переменная $_GET не сможет вернуть ожидаемое имя страницы настроек (на самом деле она вернет значение NULL ).

Почему? Что ж, когда мы сохраняем наши настройки, WordPress отправит запрос POST в options.php и в этот момент у нас больше не будет ?page=wptuts-settings как часть URL-адреса нашей страницы.
Что теперь? WordPress включает имя страницы в переменную $_POST['_wp_http_referer'] .
Используя глобальный $pagenow WordPress, мы можем проверить, когда вызывается options.php, и вернуть значение, сохраненное в $_POST['_wp_http_referer']

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
 * Helper function: Set default tab
 *
 * @return string
 */
function wptuts_default_tab() {
    // find current page
    $current_page = wptuts_get_admin_page();
     
    // There may be times when the first tab has a different slug from page to page.
    // if our current page is the ‘wptuts-settings-page-two’ page then set the default tab to ‘text-inputs’
    if ($current_page == ‘wptuts-settings-page-two’) {
        $default_tab = ‘text-inputs’;
         
    // if you have more settings pages with a first tab slug other than «general» continue with an
    //}elseif($current_page == ‘your-page-slug’){
    //conditional here.
         
    // else fallback to the «general» tab.
    } else {
        $default_tab = ‘general’;
    }
return $default_tab;
}

Эта вторая вспомогательная функция возвращает имя вкладки по умолчанию. Это полезно, когда ваш вкладка по умолчанию не всегда называется general . Чтобы настроить функцию в соответствии с вашими потребностями позже, пожалуйста, найдите время, чтобы прочитать комментарии, оставленные в коде.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
 * Helper function: Check for tabs and return the current tab name
 *
 * @return string
 */
function wptuts_get_the_tab() {
    global $pagenow;
     
    // set default tab
    $default_tab = wptuts_default_tab();
     
    // read the current tab when on our settings page
    $current_tab = (isset($_GET[‘tab’]) ? $_GET[‘tab’] : $default_tab);
     
    //use a different way to read the tab when the form submits
    if ($pagenow == ‘options.php’) {
        // need to read the tab name so we explode()!
        $parts = explode(‘&tab=’, $_POST[‘_wp_http_referer’]);
        // count the «exploded» parts
        $partsNum = count($parts);
         
        // account for «&settings-updated=true» (we do not want that to be part of our return value!)
            // is it «&settings-updated=true» there?
            $settings_updated = strpos($parts[1],»&»);
             
            // filter it out and get the tab name
            $tab_name = ($settings_updated !== FALSE ? substr($parts[1],0,$settings_updated) : $parts[1]);
         
        // use if found, otherwise pass the default tab name
        $current_tab = ($partsNum == 2 ? trim($tab_name) : $default_tab);
    }
     
return $current_tab
}

Третья вспомогательная функция возвращает имя текущей вкладки.
Подобно тому, что мы сделали в функции wptuts_get_admin_page() мы используем wptuts_get_admin_page() $_GET для чтения текущего имени вкладки при отображении настроек и переменную $_POST['_wp_http_referer'] для чтения имени вкладки при сохранении настроек.

Не забудьте сохранить три функции, показанные выше, в wptuts-helper-functions.php и загрузить их в twentyeleven/lib .

Определите эти настройки

Время, чтобы определить вкладки страницы, разделы настроек и поля и контекстную справку для каждой страницы настроек. На самом деле у нас есть настройки, необходимые для «Параметры первой страницы», уже из первой части этого урока. Разделы, поля и функции контекстной помощи определены в my-theme-options.php и мы оставим их как есть.
Что мы сделаем сейчас, так это определим настройки для «Опции второй страницы».

Страница настроек «Страница параметров вторая» разделит настройки на вкладки. Создайте новый документ под названием my-theme-options-two.php затем скопируйте и вставьте в него функции, приведенные ниже. Каждая функция объясняется после кода.

Определите вкладки страницы

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/**
 * Define page tabs
 * $tabs[‘tab-slug’] = __(‘Tab Name’, ‘wpShop’);
 */
function wptuts_options_two_page_tabs() {
     
    $tabs = array();
     
    $tabs[‘text-inputs’] = __(‘Text Inputs’, ‘wpShop’);
    $tabs[‘textareas’] = __(‘Textareas’, ‘wpShop’);
    $tabs[‘select’] = __(‘Select’, ‘wpShop’);
    $tabs[‘checkboxes’] = __(‘Checkboxes’, ‘wpShop’);
     
    return $tabs;
}

Массив вкладок должен иметь как значение, имя вкладки, которое будет отображаться на каждой вкладке, так и ключ, вкладку вкладки, которая будет отображаться как часть URL-адреса страницы, как в &tab=tab-name

Определите разделы настроек для каждой вкладки

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
 * Define our settings sections
 *
 * array key=$id, array value=$title in: add_settings_section( $id, $title, $callback, $page );
 * @return array
 */
function wptuts_options_two_page_sections() {
    // we change the output based on open tab
     
    // get the current tab
    $tab = wptuts_get_the_tab();
 
    // switch sections array according to tab
    switch ($tab) {
        // Text Inputs
        case ‘text-inputs’:
            $sections = array();
            $sections[‘txt_section’] = __(‘Text Form Fields’, ‘wptuts_textdomain’);
        break;
         
        // Textareas
        case ‘textareas’:
            $sections = array();
            $sections[‘txtarea_section’] = __(‘Textarea Form Fields’, ‘wptuts_textdomain’);
        break;
         
        // Select
        case ‘select’:
            $sections = array();
            $sections[‘select_section’] = __(‘Select Form Fields’, ‘wptuts_textdomain’);
        break;
         
        // Checkboxes
        case ‘checkboxes’:
            $sections = array();
            $sections[‘checkbox_section’] = __(‘Checkbox Form Fields’, ‘wptuts_textdomain’);
        break;
    }
     
return $sections;
}

Массив разделов почти такой же, как мы определили его для «Страница параметров первая» — my-theme-options.php — в том, что он возвращает ассоциативный массив, где значением является заголовок раздела и ключ, идентификатор раздела . Однако вывод массива разделов изменяется в соответствии с текущей открытой вкладкой . Обратите внимание на switch табуляции.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// get the current tab
$tab = wptuts_get_the_tab();
 
// switch sections array according to tab
    switch ($tab) {
    // Text Inputs
    case ‘text-inputs’:
         
    break;
     
    // Textareas
    case ‘textareas’:
     
    break;
     
    // Select
    case ‘select’:
     
    break;
     
    // Checkboxes
    case ‘checkboxes’:
     
    break;
}

Каждый case — это вкладка — ключ массива из нашей функции wptuts_options_two_page_tabs() . Когда вы позже настроите эту функцию, вам нужно будет создать новый case для каждой определенной вами вкладки.

Функция wptuts_get_the_tab() вы видите, wptuts_get_the_tab() до того, как switch был определен в нашем wptuts-helper-functions.php . Это помогает нам «прочитать» имя текущей вкладки — часть &tab=tab-name URL-адреса страницы и передает его в переменную $tab .

1
2
// get the current tab
$tab = wptuts_get_the_tab();

Определите поля настроек для каждой вкладки

001
002
003
004
005
006
007
008
009
010
011
012
013
014
+015
016
+017
018
019
020
021
022
023
024
025
026
027
028
029
+030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
+055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
/**
 * Define our form fields (options)
 *
 * @return array
 */
function wptuts_options_two_page_fields() {
     
    // get the tab using wptuts_get_the_tab() for we need options.php to be able to process the form submission!
    $tab = wptuts_get_the_tab();
     
    // setting fields according to tab
    switch ($tab) {
        // Text Inputs
        case ‘text-inputs’:
            $options[] = array(
                «section» => «txt_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘Text Input — Some HTML OK!’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A regular text input field. Some inline HTML (<a>, <b>, <em>, <i>, <strong>) is allowed.’, ‘wptuts_textdomain’ ),
                «type» => «text»,
                «std» => __(‘Some default value’,’wptuts_textdomain’)
            );
             
            $options[] = array(
                «section» => «txt_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘No HTML!’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A text input field where no html input is allowed.’, ‘wptuts_textdomain’ ),
                «type» => «text»,
                «std» => __(‘Some default value’,’wptuts_textdomain’),
                «class» => «nohtml»
            );
             
            $options[] = array(
                «section» => «txt_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘Numeric Input’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A text input field where only numeric input is allowed.’, ‘wptuts_textdomain’ ),
                «type» => «text»,
                «std» => «123»,
                «class» => «numeric»
            );
             
            $options[] = array(
                «section» => «txt_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘Multinumeric Input’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A text input field where only multible numeric input (ie comma separated numeric values) is allowed.’, ‘wptuts_textdomain’ ),
                «type» => «text»,
                «std» => «123,234,345»,
                «class» => «multinumeric»
            );
             
            $options[] = array(
                «section» => «txt_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘URL Input’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A text input field which can be used for urls.’, ‘wptuts_textdomain’ ),
                «type» => «text»,
                «std» => «http://wp.tutsplus.com»,
                «class» => «url»
            );
             
            $options[] = array(
                «section» => «txt_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘Email Input’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A text input field which can be used for email input.’, ‘wptuts_textdomain’ ),
                «type» => «text»,
                «std» => «[email protected]»,
                «class» => «email»
            );
             
            $options[] = array(
                «section» => «txt_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘Multi-Text Inputs’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A group of text input fields’, ‘wptuts_textdomain’ ),
                «type» => «multi-text»,
                «choices» => array( __(‘Text input 1′,’wptuts_textdomain’) . «|txt_input1», __(‘Text input 2′,’wptuts_textdomain’) . «|txt_input2», __(‘Text input 3′,’wptuts_textdomain’) . «|txt_input3», __(‘Text input 4′,’wptuts_textdomain’) . «|txt_input4»),
                «std» => «»
            );
        break;
         
        // Textareas
        case ‘textareas’:
            $options[] = array(
                «section» => «txtarea_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘Textarea — HTML OK!’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A textarea for a block of text. HTML tags allowed!’, ‘wptuts_textdomain’ ),
                «type» => «textarea»,
                «std» => __(‘Some default value’,’wptuts_textdomain’)
            );
 
            $options[] = array(
                «section» => «txtarea_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘No HTML!’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A textarea for a block of text. No HTML!’, ‘wptuts_textdomain’ ),
                «type» => «textarea»,
                «std» => __(‘Some default value’,’wptuts_textdomain’),
                «class» => «nohtml»
            );
             
            $options[] = array(
                «section» => «txtarea_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘No HTML! Line breaks OK!’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘No HTML! Line breaks allowed!’, ‘wptuts_textdomain’ ),
                «type» => «textarea»,
                «std» => __(‘Some default value’,’wptuts_textdomain’),
                «class» => «allowlinebreaks»
            );
 
            $options[] = array(
                «section» => «txtarea_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘Some inline HTML ONLY!’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A textarea for a block of text.
                            Only some inline HTML
                            (<a>, <b>, <em>, <strong>, <abbr>, <acronym>, <blockquote>, <cite>, <code>, <del>, <q>, <strike>)
                            is allowed!’, ‘wptuts_textdomain’ ),
                «type» => «textarea»,
                «std» => __(‘Some default value’,’wptuts_textdomain’),
                «class» => «inlinehtml»
            );
        break;
         
        // Select
        case ‘select’:
            $options[] = array(
                «section» => «select_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘Select (type one)’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A regular select form field’, ‘wptuts_textdomain’ ),
                «type» => «select»,
                «std» => «3»,
                «choices» => array( «1», «2», «3»)
            );
             
            $options[] = array(
                «section» => «select_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘Select (type two)’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘A select field with a label for the option and a corresponding value.’, ‘wptuts_textdomain’ ),
                «type» => «select2»,
                «std» => «»,
                «choices» => array( __(‘Option 1′,’wptuts_textdomain’) . «|opt1», __(‘Option 2′,’wptuts_textdomain’) . «|opt2», __(‘Option 3′,’wptuts_textdomain’) . «|opt3», __(‘Option 4′,’wptuts_textdomain’) . «|opt4»)
            );
        break;
         
        // Checkboxes
        case ‘checkboxes’:
            $options[] = array(
                «section» => «checkbox_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘Checkbox’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘Some Description’, ‘wptuts_textdomain’ ),
                «type» => «checkbox»,
                «std» => 1 // 0 for off
            );
             
            $options[] = array(
                «section» => «checkbox_section»,
                «id» => WPTUTS_SHORTNAME .
                «title» => __( ‘Multi-Checkbox’, ‘wptuts_textdomain’ ),
                «desc» => __( ‘Some Description’, ‘wptuts_textdomain’ ),
                «type» => «multi-checkbox»,
                «std» => 0,
                «choices» => array( __(‘Checkbox 1′,’wptuts_textdomain’) . «|chckbx1», __(‘Checkbox 2′,’wptuts_textdomain’) . «|chckbx2», __(‘Checkbox 3′,’wptuts_textdomain’) . «|chckbx3», __(‘Checkbox 4′,’wptuts_textdomain’) . «|chckbx4»)
            );
        break;
    }
     
    return $options;
}

Массив fields во многом такой же, как мы определили его для «Параметры первой страницы» Вы заметите, что я даже оставил аргументы $options[] = array() одинаковыми, за исключением параметра id единственного исключения (я просто добавил _2 ). Важно отметить, что вывод массива полей изменяется в соответствии с текущая открытая вкладка, как мы делали в нашей функции wptuts_options_two_page_sections() . Обратите внимание на switch табуляции.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// get the current tab
$tab = wptuts_get_the_tab();
 
// setting fields according to tab
    switch ($tab) {
    // Text Inputs
    case ‘text-inputs’:
         
    break;
     
    // Textareas
    case ‘textareas’:
     
    break;
     
    // Select
    case ‘select’:
     
    break;
     
    // Checkboxes
    case ‘checkboxes’:
     
    break;
}

Каждый case — это вкладка — ключи массива из нашей функции wptuts_options_two_page_tabs() . Когда вы позже настроите эту функцию, вам нужно будет создать новый case для каждой определенной вами вкладки.

Опять же, вы видите wptuts_get_the_tab() вызываемую до switch . Это помогает нам «прочитать» имя текущей вкладки — часть &tab=tab-name URL-адреса страницы и передает его в переменную $tab .

1
2
// get the current tab
$tab = wptuts_get_the_tab();

Определите контекстную справку для каждой вкладки

Следуя той же схеме переключения вывода массива в соответствии с текущей открытой вкладкой, мы определяем контекстную справку каждой вкладки.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/**
 * Contextual Help
 */
function wptuts_options_two_page_contextual_help() {
    // get the current tab
    $tab = wptuts_get_the_tab();
     
    $text = «<h3>» .
     
    // contextual help according to tab
    switch ($tab) {
        // Text Inputs
        case ‘text-inputs’:
            $text .= «<p>» .
        break;
         
        // Textareas
        case ‘textareas’:
            $text .= «<p>» .
        break;
         
        // Select
        case ‘select’:
            $text .= «<p>» .
        break;
         
        // Checkboxes
        case ‘checkboxes’:
            $text .= «<p>» .
        break;
    }
     
    // must return text!
    return $text;
}

Весь приведенный выше код настроек должен быть записан в вашем файле my-theme-options-two.php . Сохраните его и загрузите в twentyeleven/lib

Шаг 3 Регистрация вкладок и настроек для каждой страницы настроек

«Окончательный код, описанный в этом шаге, находится в папке Part Two/source_ files/step3 »

Теперь, когда все настройки нашей страницы определены, давайте скажем WordPress отобразить их.

Включите новые документы, которые мы создали на шаге 2

Мы хотим использовать наши новые вспомогательные функции и настройки в нашем файле my-theme-settings.php поэтому давайте включим новые wptuts-helper-functions.php и my-theme-options-two.php . Найдите существующий require_once('my-theme-options.php'); введите строку кода и настройте, как показано ниже.

Код, приведенный ниже, должен быть записан в файле my-theme-settings.php .

1
2
3
4
5
6
7
8
/**
 * Include the required files
 */
// helper functions
require_once(‘wptuts-helper-functions.php’);
// page settings sections & fields as well as the contextual help text.
require_once(‘wptuts-theme-options.php’);
require_once(‘wptuts-theme-options-two.php’);

Настройте wptuts_get_settings()

Время настроить существующую вспомогательную функцию wptuts_get_settings() для получения наших настроек на основе страницы или вкладки, которые мы в данный момент открыли.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/**
 * Helper function for defining variables for the current page
 *
 * @return array
 */
function wptuts_get_settings() {
     
    $output = array();
     
    /*PAGES*/
    // get current page
    $page = wptuts_get_admin_page();
     
    /*TABS*/
    // get current tab
    $tab = wptuts_get_the_tab();
     
    /*DEFINE VARS*/
    // define variables according to registered admin menu page
    switch ($page) {
        case WPTUTS_PAGE_BASENAME:
            $wptuts_option_name = ‘wptuts_options’;
            $wptuts_settings_page_title = __( ‘Wptuts Settings Page’,’wptuts_textdomain’);
            $wptuts_page_sections = wptuts_options_page_sections();
            $wptuts_page_fields = wptuts_options_page_fields();
            $wptuts_contextual_help = wptuts_options_page_contextual_help();
            $wptuts_page_tabs = »;
        break;
     
        case WPTUTS_PAGE_BASENAME .
            $wptuts_option_name = ‘wptuts_options_two’;
            $wptuts_settings_page_title = __( ‘Wptuts Settings Page Two’,’wptuts_textdomain’);
            $wptuts_page_sections = wptuts_options_two_page_sections();
            $wptuts_page_fields = wptuts_options_two_page_fields();
            $wptuts_contextual_help = wptuts_options_two_page_contextual_help();
            $wptuts_page_tabs = wptuts_options_two_page_tabs();
             
            // define a new option name according to tab
            switch ($tab) {
                // Text Inputs
                case ‘text-inputs’:
                    $wptuts_option_name = $wptuts_option_name .
                break;
                 
                // Textareas
                case ‘textareas’:
                    $wptuts_option_name = $wptuts_option_name .
                break;
                 
                // Select
                case ‘select’:
                    $wptuts_option_name = $wptuts_option_name .
                break;
                 
                // Checkboxes
                case ‘checkboxes’:
                    $wptuts_option_name = $wptuts_option_name .
                break;
            }
        break;
    }
     
    // put together the output array
    $output[‘wptuts_option_name’] = $wptuts_option_name;
    $output[‘wptuts_page_title’] = $wptuts_settings_page_title;
    $output[‘wptuts_page_tabs’] = $wptuts_page_tabs;
    $output[‘wptuts_page_sections’] = $wptuts_page_sections;
    $output[‘wptuts_page_fields’] = $wptuts_page_fields;
    $output[‘wptuts_contextual_help’] = $wptuts_contextual_help;
     
     
return $output;
}

Разбивка кода

Мы заполняем наш массив $output названием опции , заголовком страницы, вкладками страницы , разделами настроек, полями настроек и контекстной справкой . Значения шести ключей массива меняются в зависимости от страницы настроек или вкладки, которые у нас открыты

Сначала у нас есть switch страниц

1
2
3
4
5
6
7
8
9
switch ($page) {
    case WPTUTS_PAGE_BASENAME:
         
    break;
 
    case WPTUTS_PAGE_BASENAME .
         
    break;
}

Вам нужно будет создать новый case для каждой страницы настроек, которую вы регистрируете в функции wptuts_add_menu() . (Обратите внимание, что case должен соответствовать параметру $menu_slug в add_submenu_page() функции add_submenu_page() .)

Каждый case определяет имя опции и заголовок страницы с соответствующим строковым значением. Вкладки страниц , разделы настроек, поля настроек и переменные контекстной справки определяются путем вызова соответствующих функций, которые дают соответствующий вывод. (Вы помните, что функции определены в отдельном документе — my-theme-options.php для «Параметры первой страницы» и my-theme-options-two.php для «Параметры второй страницы».)

Если конкретной странице настроек не нужны вкладки, то переменная $wptuts_page_tabs остается пустой. Это сделано, например, для «Параметры первой страницы»

1
2
3
4
5
6
7
8
case WPTUTS_PAGE_BASENAME:
    $wptuts_option_name = ‘wptuts_options’;
    $wptuts_settings_page_title = __( ‘Wptuts Settings Page’,’wptuts_textdomain’);
    $wptuts_page_sections = wptuts_options_page_sections();
    $wptuts_page_fields = wptuts_options_page_fields();
    $wptuts_contextual_help = wptuts_options_page_contextual_help();
    $wptuts_page_tabs = »;
break;

Наконец у нас есть switch вкладок

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
// define a new option name according to tab
switch ($tab) {
    // Text Inputs
    case ‘text-inputs’:
        $wptuts_option_name = $wptuts_option_name .
    break;
     
    // Textareas
    case ‘textareas’:
        $wptuts_option_name = $wptuts_option_name .
    break;
     
    // Select
    case ‘select’:
        $wptuts_option_name = $wptuts_option_name .
    break;
     
    // Checkboxes
    case ‘checkboxes’:
        $wptuts_option_name = $wptuts_option_name .
    break;
}

Это необходимо только на страницах настроек, которые мы хотим использовать на вкладках. Вам нужно будет создать новый case для каждой вкладки, которую вы регистрируете. (Обратите внимание, что case должен соответствовать значению tab-slug в ключе массива tab.) Каждый case определяет имя новой опции с соответствующим строковым значением.

Настройте функцию вывода содержимого страницы

Наконец, для этого шага нам нужно немного wptuts_settings_page_fn()() нашу wptuts_settings_page_fn()() чтобы она отображала наши вкладки, когда они определены. Замените существующую функцию следующим:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*
 * Admin Settings Page HTML
 *
 * @return echoes output
 */
function wptuts_settings_page_fn() {
    // get the settings sections array
    $settings_output = wptuts_get_settings();
?>
    <div class=»wrap»>
        <?php
        // dislays the page title and tabs (if needed)
        wptuts_settings_page_header();
        ?>
         
        <form action=»options.php» method=»post»>
            <?php
            // http://codex.wordpress.org/Function_Reference/settings_fields
            settings_fields($settings_output[‘wptuts_option_name’]);
            // http://codex.wordpress.org/Function_Reference/do_settings_sections
            do_settings_sections(__FILE__);
            ?>
             
            <p class=»submit»>
                <input name=»Submit» type=»submit» class=»button-primary» value=»<?php esc_attr_e(‘Save Changes’,’wptuts_textdomain’); ?>» />
            </p>
             
        </form>
    &lt;/div><!— wrap —>
&lt;?php }

Мы вызываем новую функцию wptuts_settings_page_header() . Давайте продолжим и определим это в нашем wptuts-helper-functions.php . Скопируйте и вставьте следующее после функции wptuts_get_the_tab() .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * Helper function: Creates settings page title and tabs (if needed)
 *
 * @return echos output
 */
function wptuts_settings_page_header() {
     
    // get the tabs
    $settings_output = wptuts_get_settings();
    $tabs = $settings_output[‘wptuts_page_tabs’];
     
    // get the current tab
    $current_tab = wptuts_get_the_tab();
     
    // display the icon and page title
    echo ‘&lt;div id=»icon-options-general» class=»icon32″>&lt;br />&lt;/div>’;
    echo ‘&lt;h2>’ .
     
    // check for tabs
    if ($tabs !=») {
        // wrap each in anchor html tags
        $links = array();
        foreach( $tabs as $tab => $name ) {
            // set anchor class
            $class = ($tab == $current_tab ? ‘nav-tab nav-tab-active’ : ‘nav-tab’);
            $page = $_GET[‘page’];
            // the link
            $links[] = "&lt;a class='$class' href='?page=$page&tab=$tab'>$name&lt;/a>";
        }
         
        echo '&lt;h3 class="nav-tab-wrapper">';
            foreach ( $links as $link ) {
                echo $link;
            }
        echo '&lt;/h3>';
    }
}

Разбивка кода

Мы собираем наши вкладки, вызывая wptuts_get_settings()вспомогательную функцию.

1
2
3
// get the tabs
$settings_output = wptuts_get_settings();
$tabs = $settings_output['wptuts_page_tabs'];

Затем мы получаем текущую вкладку с wptuts_get_the_tab()функцией помощника.

1
2
// get the current tab
$current_tab = wptuts_get_the_tab();

Мы повторяем значок и заголовок страницы.

1
2
3
// display the icon and page title
echo '&lt;div id="icon-options-general" class="icon32">&lt;br />&lt;/div>';
echo '&lt;h2>' . $settings_output['wptuts_page_title'] . '&lt;/h2>';

Если у нас есть определенные вкладки, мы их отображаем.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
// check for tabs
if ($tabs !='') {
    // wrap each in anchor html tags
    $links = array();
    foreach( $tabs as $tab => $name ) {
        // set anchor class
        $class = ($tab == $current_tab ? 'nav-tab nav-tab-active' : 'nav-tab');
        $page = $_GET[‘page’];
        // the link
        $links[] = "&lt;a class='$class' href='?page=$page&tab=$tab'>$name&lt;/a>";
    }
     
    echo '&lt;h3 class="nav-tab-wrapper">';
        foreach ( $links as $link ) {
            echo $link;
        }
    echo '&lt;/h3>';
}

Код вкладки должен быть знаком тем из вас, кто проходил через Учебное пособие по внедрению
API настроек в темах WordPress Чипа Беннетта

Проверьте результат

Если вы успешно выполнили все вышеперечисленное, на «второй странице параметров» должны отображаться вкладки, как показано ниже.

Сбор вариантов темы вместе для использования в нашей теме

Последнее, что нам нужно сделать перед завершением второй части этого урока, — это собрать воедино опции темы, которые мы сохранили для каждой страницы настроек и вкладки в нашей $wptuts_optionпеременной. Для этого нам нужно настроить wptuts_get_global_options()функцию, которую мы написали twentyeleven/functions.phpв первой части

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
 * Collects our theme options
 *
 * @return array
 */
function wptuts_get_global_options(){
     
    $wptuts_option = array();
 
    // collect option names as declared in wptuts_get_settings()
    $wptuts_option_names = array (
        'wptuts_options',
        'wptuts_options_two_text_inputs',
        'wptuts_options_two_textareas',
        'wptuts_options_two_select',
        'wptuts_options_two_checkboxes'
    );
 
    // loop for get_option
    foreach ($wptuts_option_names as $wptuts_option_name) {
        if (get_option($wptuts_option_name)!= FALSE) {
            $option = get_option($wptuts_option_name);
             
            // now merge in main $wptuts_option array!
            $wptuts_option = array_merge($wptuts_option, $option);
        }
    }
     
return $wptuts_option;
}

Разбивка кода

Мы берем каждое имя опции, которое мы определили для каждой страницы и вкладки.

,

1
2
3
4
5
6
7
8
// collect option names as declared in wptuts_get_settings()
$wptuts_option_names = array (
    'wptuts_options',
    'wptuts_options_two_text_inputs',
    'wptuts_options_two_textareas',
    'wptuts_options_two_select',
    'wptuts_options_two_checkboxes'
);

Затем мы вызываем get_option()функцию для каждого и объединяем их в один большой массив, который затем выводим

,

1
2
3
4
5
6
7
8
9
// loop for get_option
    foreach ($wptuts_option_names as $wptuts_option_name) {
        if (get_option($wptuts_option_name)!= FALSE) {
            $option = get_option($wptuts_option_name);
             
            // now merge in main $wptuts_option array!
            $wptuts_option = array_merge($wptuts_option, $option);
        }
    }

Как упоминалось в первой части , укажите конкретный параметр в любом из ваших шаблонов тем, например так: &lt;?php echo $wptuts_option['wptuts_txt_input']; ?>— значение в скобках — это идентификатор параметра, который вы хотите отобразить.

На этом заканчивается вторая часть нашего урока. Надеюсь, вам понравилось это читать!

37
Share: