WP Mega Customizer (Aufanpassen!)

Screenshot

Легко настраивайте свой WP кастомайзер, добавляя/удаляя любые желаемые настройки.

Так, например, создать собственный селектор для логотипов или стиля шрифта можно за 2-3 минуты! Без строчки кода!

Описание

Легкий плагин для настройки вашего WP theme customizer.

Основная цель этого проекта - позволить менеджеру настроить WP customizer с помощью новых разделов/панелей/элементов управления.

Какова цель этого проекта:

Использование всех стандартные элементы управления WordPress / Woocommerce customizer для создания новых правил CSS
Создание совершенно новые элементы управления для Customizer
Управление существующими настройками настройщика, скрытие пунктов меню
Изменить порядок пунктов меню настройщика
Создание новых панелей настройки / разделов и элементов управления
Редактировать и удалять ранее созданные настройки
Перенесите ваши настройки в тему, используя экспорт->импорт

С чего мне начать?

Установите и активируйте плагин
Чтобы создать / просмотреть / отредактировать / переставить элементы управления и настройки
- перейдите в раздел Темы-> Aufanpassen!.
- Обратите внимание на то, какой элемент управления используется и как вы его инициализируете.
Чтобы настроить настройщик - используйте вкладку Меню в редакторе меню WP Customizer:
Добавить панель - добавляет новую панель
Добавить раздел - добавляет новый раздел на нужную панель
Добавить элемент управления - добавляет новый элемент управления и настройки в настройщик Наиболее важным для нового пункта меню здесь является селектор CSS - это элемент DOM, который вы настраиваете - оно не может быть пустым или некорректным - это приведет к ошибкам компилятора LESS/SASS!
После добавления того или иного, нажмите Сохранить меню, а затем перейдите в настройщик, чтобы просмотреть изменения
Не забывайте: все изменения CSS сохраняются только тогда, когда вы публикуете их и выходите из настройщика.

Параметры и настройки

Страница пользовательских настроек плагина находится в разделе Темы->Aufanpassen! меню.

Таким образом, редактор Меню является здесь первой вкладкой, хотя общей была бы Элементы управления, потому что элемент управления - это то, на чем основан элемент управления свойствами CSS элемента меню.

Важно!

Меню, которое вы видите в Aufanpassen! меню редактора и фактического настройщика могут отличаться, некоторые пункты могут быть скрыты или даже реорганизованы с помощью Customizer JS или правил CSS темы. Мы не разрешаем применять ни одно из этих правил в нашем редакторе.

Но всему свой черед.

Панели

Панели в настройщике группируют разделы. Панель может иметь заголовок и описание. С точки зрения пользовательского интерфейса панель - это просто пункт меню, который объединяет в себе несколько разделов.

Разделы

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

Элементы управления

Элемент управления в Customizer - это CSS-свойство (например, text-decoration). Компонент управления пользовательским интерфейсом (например, выпадающий список).

Элементы управления для CSS-свойств Customizer в нашем редакторе меню основаны на пользовательских элементах управления, которые мы наследуем от WP/Woo или пользовательских расширений WP_Customize, зарегистрированных в CMS.

Главное, что следует помнить о каждом элементе управления, который вы создаете с помощью нашего редактора,

CSS selector и CSS property

никогда не должны быть недопустимыми или пустыми - это может нарушить весь CSS темы и привести к полному сбою в вашем интерфейсе.

Настройки управления таковы:

Свойство CSS (правило css, которое мы создаем) - выпадающий список с доступным Aufanpassen! элементы управления
- (смотрите информацию о вкладке Элементы управления ниже)
Label
Описание
CSS-селектор (тот же синтаксис, как если бы вы создали отдельный css-файл. Например. .my-class)
Значение по умолчанию для вашего свойства CSS

Элементы управления

Вкладка Элементы управления представляет все возможные пользовательские элементы управления для свойств CSS, которые мы можем использовать в Customizer.

Каждый элемент управления имеет:

Правило CSS для использования
Имя, которое будет отображаться в выпадающем списке, когда мы создадим пользовательские элементы управления
- для меню настройки на вкладке Меню
Класс для использования в WP Customizer

Важно: не создавайте элементов управления с неопределенным классом - это также полностью нарушит тему!

Атрибуты - данные синтаксиса JSON (объект, массив), в которых мы инициализируем выбранный выше класс. Например, это как мы можем инициализировать обычный и наиболее часто используемый собственный класс WP_Customize_Control для CSS background-repeat свойство - это создаст выпадающий список с нужными параметрами (здесь - выбор):

{
    `type`: `select`,
    `choices`: {
        `repeat`: `Repeat`,
        `repeat-x`: `Repeat X`,
        `repeat-y`: `Repeat Y`,
        `no-repeat`: `No repeat`,
        `initial`: `Initial`,
        `inherit`: `Inherited`
    }
}

Default - то же значение JSON или text для установки значения по умолчанию в вашем пользовательском элементе управления. Например, для выпадающего списка из предыдущего примера мы можем использовать no-repeat в качестве значения по умолчанию. Другим хорошим примером может быть цвет фона или значение свойства CSS color по умолчанию установлено на rgba(255,255,255,0.7)

Импорт

Импорт позволяет выбрать файл данных и определить, что импортируем.

Важные примечания

Если вы выберете поврежденный файл данных JSON (или даже не JSON) - это может привести к поломке всего вашего сайта!!!

Экспорт

При экспорте мы можем определить, хотим ли мы экспортировать также все настройки из текущей темы или только данные кастомайзера.

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

Разное

Элементы управления настройщиком

Включить пользовательские элементы управления / панели в меню настройки - при отключении WP Customizer не будет иметь ни одного из элементов управления, созданных на вкладке Меню.

Пользовательский CSS

Включить пользовательские правила CSS для текущей темы
- при отключении ни один CSS не будет помещен в очередь на компиляцию.

Использовать данные родительской темы

Определяет, объединяем ли мы все настройки (но не результирующий CSS) от родительской темы к дочерней.
- Например, если у нас есть какая-то пользовательская панель в родительской теме под названием Моя панель - она будет автоматически присутствовать в дочерней теме, однако все настройки, которые мы позже сделаем поверх такой панели в дочерней теме, не повлияют на ее родительскую.

Примечание: Если вы удалили какой-то элемент, но он все еще там, проверьте пункт меню родительской темы (то же самое касается элемента управления).

Шрифты Google

Выполните обновление списка шрифтов Google для выпадающего списка семейства шрифтов

Перейти к теме

Полностью извлеките (eject) текущий проект укажите активную тему для распространения. Например. если на данный момент мы закончили со всеми настройками темы и нам нужны все элементы управления, которые мы создали, + наш готовый CSS - для включения в дистрибутив темы - просто выполните eject.
Плагин не понадобится
- Всё меню/элементы управления настройщика и сгенерированный CSS будут внедрены в тему автоматически.

Примечание: извлеченный код не будет использоваться, пока плагин активен. Извлечение можно выполнять столько раз, сколько потребуется.

ВАЖНО! Для выполнения этой операции папка темы должна быть доступна для записи на сервере.

Ограничения для пользователей

Запретить использование тем->Aufanpassen!` панель управления администратора для других администраторов сайта
- (в списке указаны только администраторы блога).

Примечание: все пользовательские меню customizer и пользовательский CSS по-прежнему будут включены в WP Customizer и тему.

Руководство разработчика

Примечание

Мы создаем пользовательские элементы управления (доступные элементы управления) с помощью предопределенного расширения WP Customizer классов, зарегистрированных в WP.
- Мы также определяем атрибуты и правило css для каждого такого элемента управления.
- Атрибуты применяются, когда класс расширения WP Customizer инициализируется
- css-правило - это правило для применения, например padding, margin и т.п.
- Вы можете создать несколько элементов управления для одного и того же правила CSS, просто назовите его правильно, чтобы не вводить себя в заблуждение при редактировании меню настройки.
Далее мы создаем пользовательский пункт меню Customizer
- который основан на одном из элементов управления, созданных нами на предыдущем шаге.
- Такой пункт меню определяет
  - какой селектор DOM будет использоваться
  - какой элемент управления использовать для настройки выбранного DOM.

Вот и все! Смотрите структуру данных ниже для получения дополнительной информации.

ВНИМАНИЕ!

ВАЖНО: изменение структуры DOM в admin - это высокий риск испортить всю базовую функциональность того, как мы создаем и редактируем основное меню настройки! Имейте это в виду!

ПРИМЕЧАНИЕ: для извлечения всех доступных шрифтов из Aufanpassen существует глобальная функция aufonts, добавленная начиная с версии 2.0.6

ВАЖНО

use

Не использовать use ClassName; директивы внутри #EJECTABLE классов! Использовать только \ClassName!

Описание данных (для разработчиков - на английском)

menu [Array] Defines all custom menu elements we create
- slug [String] ID for panel/section/control, begins with ‘auf_’
  - id [String] Same as above for better relations
  - ctype [String] One of panel/section/control/setting
  - type [String] When adding a setting, this is set to theme_mod
  - default [String] Default control value
  - parent [String] Slug/ID of the parental element
  - rule [String] CSS rule to apply. Defines custom control (see below)
  - title [String] Title for the panel or section
  - label [String] Label for the control we create
  - description [String]
  - selector [String] DOM element selector to apply rule to
  - priority [Integer] Menu item priority
  - setting [String] Setting slug we added before adding the control

Example

[ 'menu' => [
        'auf_control_2341' => [
            `id`            => 'auf_control_2341',
            'ctype'         => 'control',
            'default'       => '12px',
            'parent'        => 'auf_section_4321',
            'rule'          => 'padding',
            'label'         => 'Site header padding',
            'description'   => 'Defines padding for the entire site header',
            'selector'      => '#site-header',
            'priority'      => 123,
            'setting'       => 'auf_setting_2342'  
         ]    
    ]
]

Controls

controls [Array] Defines available controls to use when creating menu above
- rule_id [String] CSS rule identificator
  - rule [String] CSS rule to apply
  - name [String] String-label for the control
  - class [String] Class name to use as a WP Customizer extension class
  - attributes [Array] Attributes to apply with the class defined above
  - default [String] Default value to use with the control

Example

[ 'controls' => [
        'padding_123'   => [
            'rule'      => 'padding',
            'name'      => 'My super padding',
            'class'     => 'WP_Customize_Control',
            'attributes'=> [ 'type' => 'text' ],
            'default'   => '10'
        ], 
    ]
]

Hidden

hidden [Array] Defines which items to remove temporarily from Customizer
- slug [String] Slug of the menu item (panel/section/control) to hide. Always unique.
  - id [String] WP Customizer ID of panel/section/control
  - type [String] Type - panel/section/control - to hide

Example

[ 'hidden' => [
        'some_panel_123' => 'panel'
    ], 
]

Ordered

ordered [Array] Defines reordered items for the Customizer menu
- slug [String] Slug of the menu item (panel/section/control). Always unique
  - id [String] WP Customizer ID of panel/section/control
  - type [String] Type - panel/section/control
  - priority [Integer] Order integer value

Example

[ 'ordered' => [
        'some_control_123' => [
            'type'      => 'control',
            'priority'  => 999
        ]
    ], 
]

Заметка: Идентификатор WP Customizer может быть одинаковым для раздела / панели /элемента управления. Например, у него может быть раздел с идентификатором background_image, и тот же идентификатор может быть установлен для элемента управления внутри этого раздела. Это заставило нас переработать данные, которые мы храним.

Options

options [Array] Defines plugin options
- option_name [String] Option ID
  - option_value [String] Option value

Example

[ 'options' => [
    'mod_enabled' => true
]

Версии

2.2.0
Исправлена ошибка: превышение максимального значения параметров ввода php при сохранении пунктов меню.
Все пункты меню сохраняются / удаляются / скрываются сразу после выполнения действия над каждым из них (не массово).
Полная переработка для извлекаемого кода - проблема с директивами use.
2.1.3
Исправлена ошибка: автоматические обновления на основе Cron для плагина mu не работают должным образом.
2.1.2
Исправлена ошибка: фатальная ошибка при извлечении Aufanpassen с помощью элемента управления выбором шрифтов на пользовательской панели.
Исправлена ошибка: доступ к несуществующему смещению массива в /vendor/less.php:7953
2.0.6
Глобальная функция aufonts для извлечения всех доступных шрифтов.
2.0.5
Активируйте импортированные настройки напрямую.
Исправлена ошибка: импорт из старых настроек не работает.
2.0.4
Исправлена ошибка при импорте данных из новой версии Aufanpassen (от плагина к плагину)
2.0.3
Улучшен вход в систему при ошибке синтаксического анализатора
Разрешенные кавычки в селекторах (например, [name=some_name])
Исправлен предварительный просмотр с кавычками в селекторах
2.0.2
Удалена бесплатная лицензия
Важное исправление при импорте меню (родительских идентификаторов)
2.0.1
Исправлена важная ошибка в компиляторе без поставщика
2.0.0
Полная переработка в плагин
Совершенно новый редактор меню / элементов управления, полностью основанный на JS (планируется доработка React)
Правильные названия шрифтов, заключенные в двойные кавычки
Автоматизация обновления шрифтов Google (смотрите вкладку Другие настройки)
Импорт / экспорт настроек для любой установленной темы
Автоматическое распределение настроек дочерней темы (но не наоборот)
Настройки, зависящие от темы (разная тема - разные настройки)
Предварительный просмотр правильных свойств CSS image с помощью медиабиблиотеки WP
Правильные имена свойств CSS camelCase в preview JS
Функциональность извлечения для текущего распространения темы
Удалена зависимость пользовательского интерфейса от блока jQuery (для чистой совместимости с WP)
Решена проблема с зависимостью от jQuery enqueue
0.1.2
Обновлены шрифты Google
Обход пустых CSS-селекторов
Элемент управления для редактирования DOM или добавления содержимого :после `:до’
Исправлено несколько ошибок в управлении шрифтами
Доработка инициализации
Вкладка справки для страницы настроек администратора генерируется из этого readme вместо статического содержимого
0.1.1
Обновление правила активации (только для администраторов)
Обновите описание
0.1.0
Важное исправление в том, как мы инициализируем подкаталог CSS (ошибка mkdir)
0.0.9
Исправлена проблема с ручкой перетаскивания элементов
0.0.8
Результирующий CSS-файл имеет префикс current theme slug, чтобы предотвратить его загрузку в другие темы
Данные для темы перемещены за пределы папки Aufanpassen
0.0.7
Устранены проблемы с совместимостью с PHP 7.4
0.0.6
Улучшенная обработка ошибок
0.0.5
Отложенное обновление страницы, вместо этого отображаются уведомления о каждой новой настройке / панели после добавления
Значение по умолчанию обновляется при выборе нового элемента управления, а селектор CSS остается не очищенным после добавления новой настройки
Инструменты->Добавленные элементы Aufanpassen следуют своей иерархии
0.0.4
Доработка над js и css при добавлении нового элемента
0.0.3
Первый стабильный релиз
Изменены постфиксы над правилами с помощью _ (подчеркивание)
Изменен слайдер (добавлены единицы измерения)
0.0.2
Преобразование в тематический аддон, доработка авторизации администратора для администраторов, расширяемые элементы управления
0.0.1
Первая версия MVP

WP Mega Customizer (Aufanpassen!)

Описание

Какова цель этого проекта:

С чего мне начать?

Параметры и настройки

Меню

Важно!

Элементы управления

Импорт

Важные примечания

Экспорт

Разное

Элементы управления настройщиком

Пользовательский CSS

Использовать данные родительской темы

Шрифты Google

Перейти к теме

Ограничения для пользователей

Руководство разработчика

ВНИМАНИЕ!

ВАЖНО

Описание данных (для разработчиков - на английском)

Menu

Example

Controls

Example

Hidden

Example

Ordered

Example

Options

Example

Версии

Описание

Конвейеры