WordPress Тема за персонализиране на котлона

WordPress Тема за персонализиране на котлона
  1. 1. Въведение в персонализатора на теми WordPress
  2. 2. Взаимодействие с персонализатор на теми за WordPress
  3. 3. В момента четете: WordPress Тема за персонализиране на котлона
  4. 4. Удължаване на котлона за персонализиране на темата за WordPress
  5. 5. Тема персонализатор котел – Условни опции, Детски теми и приставки

Актуализация: Тази статия е редактирана на 19 февруари 2013 г., за да отразява промените, направени в котлона на персонализатора на тема.


Надяваме се да прочетете и да се насладите на първите две публикации от серията Тематичен персонализатор – Въведение в WordPress Themaier за персонализиране и взаимодействие с персонализатора на теми. Сега е време да преминете към основното ястие и да започнете да сглобявате котлона за тематичен персонализатор, който ще можете да използвате във вашите теми. Тази публикация съдържа няколко дълги блока код, така че обърнете внимание на вградените коментари.

Забележка: Ако предпочитате просто да използвате котлона веднага, можете да го изтеглите от Github и да промените полета в масив $ options, като закачите във филтърната кука „thsp_cbp_options_array“.

Какво създаваме

Структура на директорията на темата за персонализиране на котела

Структура на директорията на темата за персонализиране на котела

  • customizer.php – Това е основният файл на кокетната платка за персонализатор на тема, този, който добавя секции, настройки и контроли, използвайки данни от масива от опции
  • поръчка controls.php – Класове за персонализирани контроли и кука за действие, която ви позволява да добавяте свои собствени персонализирани контроли
  • helpers.php – Помощни функции, използвани за извличане на теми, опции по подразбиране и т.н..
  • options.php – Опции за пример и филтърна кука, която ви позволява да редактирате масива от опции и да използвате собствените си полета
  • инструмент за персонализиране-controls.css – Основен CSS за изображение, заменено с радио, персонализирано управление

Цялата идея е да можете да копирате тези файлове в поддиректория във вашата тематична директория, да включите customizer.php файл от своите функции.php и да промените всичко, което харесвате, включително и особено масива от опции, като използвате темите за закачалки на котлите за тематичен персонализатор (обяснено в част 4). Update: Преди това просто редактирате options.php, но използването на куки прави нещата много по-чисти.

Сега нека използваме реален пример – ще добавим текстов контрол в нов раздел за персонализиране на теми. Масивът е поставен в помощна функция и има филтър, приложен към него, когато се върне. По този начин можете да добавите още опции от детска тема или плъгин. Ето го:

/ **
* Помощна функция, която съдържа масив от опции за теми.
*
* @return масив $ options масив от опции за теми
* @uses thsp_get_theme_customizer_fields (), дефиниран в персонализатора / helpers.php
* /
функция thsp_get_theme_customizer_fields () {

/ *
* Използване на помощна функция, за да получите необходимата възможност по подразбиране
* /
$ Requir_capability = thsp_settings_page_capability ();

$ options = масив (


// Идент. № на раздела
'new_customizer_section' => масив (

/ *
* Проверяваме дали това е съществуващ раздел
* или нова, която трябва да бъде регистрирана
* /
'съществуваща_секция' => невярно,
/ *
* Аргументи, свързани с раздела
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => масив (
'title' => __ ('Заглавие на нов раздел', 'my_theme_textdomain'),
'description' => __ ('Ново описание на секцията', 'my_theme_textdomain'),
'приоритет' => 10
),

/ *
* масивът 'field' съдържа всички полета, които трябва да бъдат
* добавен към този раздел
* /
'polja' => масив (

/ *
* ==========
* ==========
* Текстово поле
* ==========
* ==========
* /
// Идент. № на полето
'new_text_field' => масив (
/ *
* Задаване на свързани аргументи
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => масив (
'default' => __ ('Текстова стойност по подразбиране', 'my_theme_textdomain'),
'type' => 'опция',
'способност' => $ необходима_възможност,
'транспорт' => 'опресняване',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Контрол свързани аргументи
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => масив (
'label' => __ ('Нов етикет за контрол на текст', 'my_theme_textdomain'),
'type' => 'text', // Контрол на текстовото поле
'приоритет' => 1
)
)

)

),

);

/ *
* куката за филтър 'thsp_customizer_options' ще ви позволи
* добавете / премахнете някои от тези опции от детска тема
* /
върнете apply_filters ('thsp_customizer_options', $ options);

}

Update: Масивът остава същият, но сега можете също да прехвърлите масива от опции към кука за филтър, вижте Част 4 за повече подробности.

На пръв поглед изглежда сложно, знам, но нека да обясня.

Най- опции $ масивът се състои от раздел (и) (само един в случая – new_customizer_section), всеки раздел има своите аргументи, полета и булева стойност (съществуваща_секция), за да посочи дали е нов раздел или просто добавяме някои полета към съществуващ един. Масивът с аргументи е идентичен с този, на който преминавате $ Wp_customize-> add_section метод. Масивът от полета е малко по-сложен.

Update: масивът за избор в контролните аргументи вече е многоизмерен масив.

Всяко поле се състои от настройка на персонализатор и управление на персонализатор. Ето защо имаме масиви за настройки_args и control_args. Те са почти същите като масивите от аргументи, които бихте предали $ Wp_customize-> add_setting и $ Wp_customize-> add_control методи. Единствената разлика е масивът за избор в контролни аргументи, $ wp_customize-> add_control изисква той да бъде обикновен ключ => масив от двойки стойности и вместо това използваме многоизмерен масив.

По този начин е възможно да предадете повече данни на всеки един от изборите, така че ако например зареждате Google Fonts в темата си, ще можете да имате низове, които ви позволяват да заредите правилния шрифт в масива от решения , Можете да видите пример за това тема, която използва персонализаторска котелна плоча.

Така че, ако вече сте запознати с тези три метода, всички са много познати.

Добавянето на контрола за отметка е почти същото, просто трябва да промените „тип“ на „квадратче“ в масива „control_args“:

/ *
* ==============
* Поле за отметка
* ==============
* /
'new_checkbox_field' => масив (
'setting_args' => масив (
'default' => true,
'type' => 'опция',
'способност' => $ необходима_възможност,
'транспорт' => 'опресняване',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => масив (
'label' => __ ('Нов етикет за управление на радиото', 'my_theme_textdomain'),
'type' => 'checkbox', // Управление на полето за отметка
'приоритет' => 2
)
),

Контролите на радиото и селектирането са почти еднакви, просто трябва да посочите даден избор:

/ *
* ============
* ============
* Радио поле
* ============
* ============
* /
'new_radio_field' => масив (
'setting_args' => масив (
'по подразбиране' => 'опция-2',
'type' => 'опция',
'capability' => $ thsp_cbp_capability,
'транспорт' => 'опресняване',
),
'control_args' => масив (
'label' => __ ('Нов етикет за управление на радиото', 'my_theme_textdomain'),
'type' => 'radio', // Радиоуправление
'choices' => масив (
'option-1' => масив (
'label' => __ ('Вариант 1', 'my_theme_textdomain')
),
'option-2' => масив (
'label' => __ ('Вариант 2', 'my_theme_textdomain')
),
'option-3' => масив (
'label' => __ ('Вариант 3', 'my_theme_textdomain')
)
),
'приоритет' => 3
)
),

/ *
* ============
* ============
* Изберете поле
* ============
* ============
* /
'new_select_field' => масив (
'setting_args' => масив (
'по подразбиране' => 'опция-3',
'type' => 'опция',
'capability' => $ thsp_cbp_capability,
'транспорт' => 'опресняване',
),
'control_args' => масив (
'label' => __ ('Нов етикет на полето за избор', 'my_theme_textdomain'),
'type' => 'select', // Избор на контрол
'choices' => масив (
'option-1' => масив (
'label' => __ ('Вариант 1', 'my_theme_textdomain')
),
'option-2' => масив (
'label' => __ ('Вариант 2', 'my_theme_textdomain')
),
'option-3' => масив (
'label' => __ ('Вариант 3', 'my_theme_textdomain')
)
),
'приоритет' => 4
)
)

И накрая, два сложни контролни типа, които са вградени в WordPress – качване на файлове и качване на изображения:

/ *
* ============
* ============
* Качване на файл
* ============
* ============
* /
'new_file_upload_field' => масив (
'setting_args' => масив (
'по подразбиране' => '',
'type' => 'опция',
'capability' => $ thsp_cbp_capability,
'транспорт' => 'опресняване',
),
'control_args' => масив (
'label' => __ ('Качване на файл', 'my_theme_textdomain'),
'type' => 'upload', // Контрол на полето за качване на файлове
'приоритет' => 5
)
),

/ *
* ============
* ============
* Качване на изображения
* ============
* ============
* /
'new_image_upload_field' => масив (
'setting_args' => масив (
'по подразбиране' => '',
'type' => 'опция',
'capability' => $ thsp_cbp_capability,
'транспорт' => 'опресняване',
),
'control_args' => масив (
'label' => __ ('Качване на изображения', 'my_theme_textdomain'),
'type' => 'image', // Контрол на полето за качване на изображение
'приоритет' => 6
)
)

Обърнете внимание, че използвах ‘Type’ => ‘опция’ при задаване на аргументи за всички тези полета. Това ще позволи всички стойности да се съхраняват като една стойност във вашата база данни. Алтернативата е ‘Type’ => ‘theme_mod’ но засега нека се придържаме към „вариант“.

Използване на масив от опции за добавяне на секции, настройки и контроли за персонализиране

Ако не сте сигурни как да взаимодействате с WordPress Theme Customizer, отидете и проверете, защото това ще правим сега. Единствената разлика е, че вместо да добавяме секции, настройки и контроли един по един, ще автоматизираме процеса, използвайки създаден сериализиран масив. Нека просто скочим в него:

функция thsp_cbp_customize_register ($ wp_customize) {

/ **
* Персонализирани контроли
* /
изисквам (dirname (__ FILE__). '/custom-controls.php');


/ *
* Вземете всички полета с помощта на помощна функция
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Вземете име на запис в DB, ​​под който ще се съхраняват опциите
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Прекарайте през масива и добавете секции за персонализиране
* /
foreach ($ thsp_sections като $ thsp_section_key => $ thsp_section_value) {

/ **
* Добавя раздел за персонализиране, ако е необходимо
* /
if (! $ thsp_section_value ['съществуваща_секция']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Добавяне на раздел
$ Wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // край ако

/ *
* Прегледайте масив от полета във всяка секция
* и добавете настройки и контроли
* /
$ thsp_section_fields = $ thsp_section_value ['polja'];
foreach ($ thsp_section_fields като $ thsp_field_key => $ thsp_field_value) {

/ *
* Проверете дали за опцията се съхранява опция или „тема_мод“
*
* Ако нищо не е зададено, методът $ wp_customize-> add_setting по подразбиране ще бъде 'theme_mod'
* Ако като опция се използва 'опция', нейната стойност ще бъде запазена във вход
* {префикс} _ таблица с опции. Името на опцията се определя от функцията thsp_cbp_option ()
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. '['. $ thsp_field_key. "];
} else {
$ setu_control_id = $ thsp_field_key;
}

/ *
* Добавете по подразбиране функция за обратно извикване, ако няма определена
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Добавя настройки за персонализиране
* /
$ Wp_customize-> add_setting (
$ setting_control_id,
$ Thsp_field_value [ 'setting_args']
);

/ **
* Добавя контрол на персонализатора
*
* Стойността „секция“ трябва да се добави към масива „control_args“
* така че контролът може да бъде добавен към текущата секция
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* Методът $ wp_customize-> add_control изисква „изборите“ да са прост ключ => стойностна двойка
* /
if (isset ($ thsp_field_value ['control_args'] ['решения'])) {
$ thsp_cbp_choices = масив ();
foreach ($ thsp_field_value ['control_args'] ['избор'] като $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['label'];
}
$ thsp_field_value ['control_args'] ['choices'] = $ thsp_cbp_choices;
}


// Проверете типа управление
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
нов WP_Customize_Color_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} elseif ('image' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
нов WP_Customize_Image_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} elseif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
нов WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} else {
$ Wp_customize-> add_control (
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
);
}

} // край foreach

} // край foreach

}
добавяне ("customize_register", "thsp_cbp_customize_register");

Преминете през всички секции, добавете тези, които вече не съществуват, след това преминете през всички полета във всеки раздел, добавете настройка и контрол за всеки. Това е всичко, което се случва тук.

Не забравяйте, че използвахме ‘type’ => ‘option’ за всички настройки? Ето защо сега имаме “My_theme_options [$ thsp_field_key]” както за настройките, така и за секциите. Това ще съхранява всички стойности като един сериализиран масив, който можете да извлечете, като използвате get_option („my_theme_options“). Или можете просто да използвате помощни функции, дефинирани в helpers.php за извличане както на текущите, така и на стандартните стойности за всички полета:

/ **
* Вземете опционни стойности
*
* Масив, който съдържа всички стойности на опциите
* Стандартната стойност на опцията се използва, ако потребителят не е посочил стойност
*
* @uses thsp_get_theme_customizer_defaults (), дефиниран в /customizer/options.php
* @return масив Текущи стойности за всички опции
* @since Theme_Customizer_Boilerplate 1.0
* /
функция thsp_cbp_get_options_values ​​() {

// Вземете настройките по подразбиране
$ option_defaults = thsp_cbp_get_options_defaults ();

// Разбор на запаметените опции с настройките по подразбиране
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), масив ()), $ option_defaults);

// Върнете анализирания масив
върнете $ thsp_cbp_options;

}


/ **
* Вземете опции по подразбиране
*
* Връща масив, който съдържа стойности по подразбиране за всички опции
*
* @uses thsp_get_theme_customizer_fields (), определен в /customizer/options.php
* @return масив $ thsp_option_defaults Стойности по подразбиране за всички опции
* @since Theme_Customizer_Boilerplate 1.0
* /
функция thsp_cbp_get_options_defaults () {

// Вземете масива, който съдържа всички полета за тема теми
$ thsp_sections = thsp_cbp_get_fields ();

// Инициализирайте масива, за да държи стойностите по подразбиране за всички опции на тема
$ thsp_option_defaults = array ();

// Прегледайте масива от параметри на опциите
foreach ($ thsp_sections като $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['полета]];

foreach ($ thsp_section_fields като $ thsp_field_key => $ thsp_field_value) {

// Добавете асоциативен ключ от масив към масива по подразбиране за всяка опция в масива от параметри
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} else {
$ thsp_option_defaults [$ thsp_field_key] = невярно;
}

}

}

// Върнете масива по подразбиране
върнете $ thsp_option_defaults;

}

Имам само още едно нещо, което трябва да отбележа – санираща функция за обратно извикване, която посочихме в масива „settings_args“. Функцията е дефинирана в exte.php и просто изпълнява данни wp_kses_post функция:

/ **
* Функция за възстановяване на обажданията по тематична настройка на санитария
* /
функция thsp_sanitize_cb ($ вход) {

върнете wp_kses_post ($ input);

}

Къде от тук?

Засега можете да използвате тази тема за персонализиране на котлона във вашите теми, всичко, което трябва да направите, е да я изтеглите от Github, да копирате в директорията на вашата тема и да включите основния файл от function.php, който е 100% функционален и достатъчно добър за повечето теми.

Тъй като темата ви не е „като повечето теми“, следващата седмица ще видим как да разширите котлона, като използваме филтъра и куките за действие..

Бих искал да чуя как мислите, че този котел може да бъде подобрен или разширен, така че, моля, изстреляйте в коментарите.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map