Помните времена, когда нам нужно было создавать страницы параметров для наших тем? Конечно, вы делаете, потому что они все еще нужны нам! Когда настройщик WordPress не справляется с управлением функциональностью вашей темы, вам необходимо создать дополнительную страницу параметров, чтобы обеспечить удобство работы для ваших пользователей.
Хотя всегда есть возможность создавать эти панели параметров с нуля, лучше использовать уже изобретенные колеса. В этой части серии «Инструментарий Smart WordPress Developer» мы рассмотрим Vafpress, основную структуру опций тем WordPress для вашего следующего проекта темы.
Когда настройщика недостаточно
Время для некоторого противоречия: я не думаю, что Настройщик готов к темам — пока.
Несмотря на то, что я признаю, что Customizer — это просто потрясающий инструмент, я также вижу, что он просто не подходит для обслуживания всех функций даже простой многоцелевой темы. Я знаю, я знаю, многоцелевые темы — это бездушные, капиталистические темы, которые разрушают мир WordPress … или они? Я имею в виду, я признаю, что было бы лучше, если бы одноцелевые темы были более популярными, но можем ли мы игнорировать тот факт, что многоцелевые темы — это самый первый выбор большинства дизайнерских агентств, фрилансеров и даже начинающих пользователей WordPress, которые хотят создавать сайт для их бизнеса?
В конце концов, мы должны спросить себя, чтобы понять необходимость каркасов опций темы по отношению к Настройщику: WordPress для WordPress или WordPress для людей? Хотя я поддерживаю WordPress, становящийся все более и более стандартизированным в различных аспектах, я также считаю, что мы не можем игнорировать требования сообщества пользователей WordPress. В конце концов, если бы мы, разработчики, игнорировали требования пользователей, WordPress не стал бы таким большим, как сейчас.
Кроме того, я не думаю, что настройщик будет достаточно для одноразовых тем (пока). У нас даже нет стандартизированного и централизованного способа создания частей контента (таких как слайдеры, меню и тому подобное), и что бы вы ни говорили против этого, пользователям WordPress нужен (и всегда будет) единый интерфейс для управления своими темами.
Я оставляю этот раздел коротким, потому что тема Vafpress как инструмент разработчика WordPress, и я могу говорить о «фреймворках опций настройщика и темы» для еще тысячи слов. Но не позволяйте мне прекратить это, не позволяйте вам комментировать: я хотел бы услышать ваше мнение об этом!
Использование Vafpress с вашей темой
Излишне говорить об этом, но обычно каждый раздел открывается простым вступлением: Vafpress — это фреймворк опций темы. И очень хороший, я должен сказать. Созданная Vafour, индонезийской командой веб-разработчиков, Vafpress утверждает, что создание темы WordPress никогда не было таким простым и быстрым .
Просто скачайте Vafpress со своей официальной страницы загрузки или из своего репозитория GitHub , и давайте быстро перейдем к хорошему.
Знакомство с полями управления Vafpress
На день, когда я пишу этот урок, Vafpress имеет 19 полей управления, разделенных на две категории, называемые « Поля » и « Мультиполя ».
-
textbox: генерирует текстовый ввод. -
textarea: генерирует полеtextarea. -
toggle: генерируетtoggleда / нет. -
slider: генерирует ползунок диапазона. -
upload: генерирует поле загрузки с помощью WordPress Media Manager. -
color: генерирует палитру цветов. -
date: генерирует указатель даты. -
codeeditor: генерирует редактор кода. -
wpeditor: генерирует WYSIWYG-редактор. -
fontawesome: генерирует средство выбора значков с помощью Font Awesome. -
notebox: создает поле, которое вы можете использовать для информирования пользователей вашей темы. -
html: позволяет отображать пользовательский HTML-код. -
select: генерирует простое поле<select>. -
multiselect: генерирует несколько выпадающих меню. -
checkbox: генерирует группу флажков. -
checkimage: генерирует группу выбираемых изображений, работающих как флажки. -
radiobutton: генерирует группу переключателей. -
radioimage: генерирует группу выбираемых изображений, работающих как радиоблоки. -
sorter: генерирует сортируемое поле с множественным выбором.
Было бы неправильно, если бы я не закончил этот раздел без примера, давайте сделаем один простой пример. Следующие строки кода создают поле Color Picker:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<?php
‘fields’ => array(
array(
‘type’ => ‘color’,
‘name’ => ‘example_color_picker’,
‘label’ => ‘Color Picker’,
‘description’ => ‘Set a color for your headings here!’,
‘default’ => ‘rgba(255,255,255,.75)’,
‘format’ => ‘hex’,
),
array(
// another field
),
)
?>
|
Создание страниц параметров и заполнение их полями управления
Эта часть может быть сложной на первый взгляд, но она имеет плавную кривую обучения.
Панель параметров, которую мы можем создать с помощью Vafpress, состоит из пары строительных блоков:
- Поля — мы только что прошли через это.
- Разделы сохраняют контрольные поля.
- Меню или подменю содержат разделы.
- Построитель страниц параметров строит панель параметров.
Давайте начнем с просмотра конструкции «компоновщика страниц параметров»:
|
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
|
<?php
function my_options() {
// initialize the object
$theme_options = new VP_Option( array(
// set it to TRUE if you don’t want the option values to be saved (in your theme demo, perhaps)
‘is_dev_mode’ => false,
// the name for the settings in the database
‘option_key’ => ‘vpt_option’,
// the slug of your options page
‘page_slug’ => ‘vpt_option’,
// path to the template file or the array
‘template’ => get_template_directory() .
// parent menu page
‘menu_page’ => ‘themes.php’,
// decides whether to automatically name menus or not
‘use_auto_group_naming’ => true,
// show (by default) or hide the «Export/Import» page
‘use_exim_menu’ => true,
// minimum user role to view the options panel
‘minimum_role’ => ‘edit_theme_options’,
// type of the layout (fixed by default)
‘layout’ => ‘fixed’,
// title of the options page
‘page_title’ => __( ‘Theme Options’, ‘vp_textdomain’ ),
// title of the main menu item
‘menu_label’ => __( ‘Theme Options’, ‘vp_textdomain’ ),
));
}
// hook it to the after_setup_theme action
add_action( ‘after_setup_theme’, ‘my_options’ )
?>
|
Хорошая вещь в «конструкторе страниц опций» заключается в том, что вы можете указать на отдельный файл, в котором хранятся все ваши меню (и разделы внутри меню, и поля внутри разделов). В приведенном выше примере мы указали на файл шаблона с именем options-template.php . Давайте посмотрим, чем заполнить этот файл:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<?php
return array(
‘title’ => __(‘Vafpress Option Panel’, ‘vp_textdomain’),
‘logo’ => »,
‘menus’ => array(
array(
‘title’ => __(‘Special Controls’, ‘vp_textdomain’),
‘name’ => ‘menu_2’,
‘icon’ => ‘/icon/special.png’,
‘controls’ => array(
// … collection of Sections and or Control Fields …
),
),
)
);
?>
|
Если вы хотите, вы можете сделать несколько «вложенных меню»:
|
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
|
<?php
return array(
‘title’ => __(‘Vafpress Option Panel’, ‘vp_textdomain’),
‘logo’ => »,
‘menus’ => array(
array(
‘title’ => __(‘Standard HTML Controls’, ‘vp_textdomain’),
‘name’ => ‘menu_1’,
‘icon’ => ‘font-awesome:icon-magic’,
‘menus’ => array(
array(
‘title’ => __(‘Regular’, ‘vp_textdomain’),
‘name’ => ‘submenu_1’,
‘icon’ => ‘font-awesome:icon-th-large’,
‘controls’ => array(
// … collection of Sections and or Control Fields …
),
),
array(
‘title’ => __(‘Image’, ‘vp_textdomain’),
‘name’ => ‘submenu_2’,
‘icon’ => ‘font-awesome:icon-picture’,
‘controls’ => array(
// … collection of Sections and or Control Fields …
),
),
),
),
)
);
?>
|
А внутри массива аргументов 'controls' мы используем что-то вроде следующего:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<?php
‘controls’ => array(
array(
‘title’ => __(‘TextBox and TextArea’, ‘vp_textdomain’),
‘name’ => ‘section_1’,
‘description’ => __(‘TextBox and TextArea Showcase’, ‘vp_textdomain’),
‘fields’ => array(
// … collection of control fields …
),
),
)
?>
|
Опять же, сначала это может занять небольшую практику, но когда вы привыкнете, это прогулка по парку.
Достижение еще большего с Vafpress
Все эти функции должны быть достаточными для такой среды, как Vafpress, но Vafpress не останавливается на достигнутом — у него есть еще пара хитростей:
- Тематический шаблон : Vafpress предлагает тематический шаблон для людей, которые хотят опробовать его, увидев живой пример на своих серверах.
- Метабоксы: Vafpress позволяет создавать метабоксы для экранов ввода записей, чтобы вы могли обеспечить еще больше функциональности своей темой. Ознакомьтесь с документацией здесь .
- Генератор шорткодов: Vafpress имеет встроенный генератор шорткодов ( здесь описано), так что вы можете помочь своим пользователям с легкостью вставлять шорткоды вашей темы.
- Динамические источники данных: Вам когда-нибудь нужно было заполнять некоторые из ваших полей управления существующими данными? Вафпресс позволяет вам это делать. На этой странице вы можете научиться связывать динамические данные в свои «мультиполя».
- Взаимодействия для управляющих полей. Возможно, вы захотите создать управляющие поля, которые зависят друг от друга, или связать их значения вместе. С функциональностью взаимодействия полей управления , можно сделать и то, и другое.
Подведение итогов на сегодня
С Vafpress вы можете многого достичь — больше, чем мы рассмотрели в этом руководстве. Обязательно ознакомьтесь с документацией Vafpress, чтобы узнать больше об этом.
Что вы думаете о Vafpress? Как вы думаете, вы дадите ему шанс в вашем следующем тематическом проекте? Расскажите нам, что вы думаете в разделе комментариев ниже. И если вам понравилась статья, не забудьте поделиться ею с друзьями!
Увидимся в следующей части, где мы рассмотрим CMB2, метабокс, настраиваемые поля и библиотеку форм для WordPress.