Advertisement
  1. Code
  2. WordPress
Code

Customizer JavaScript APIs: панели, секции и конкроли

by
Length:ShortLanguages:
This post is part of a series called The WordPress Customizer JavaScript APIs.
The WordPress Customizer JavaScript APIs: Getting Started
Customizer JavaScript APIs: The Previewer

Bulgarian (Български) translation by Mihail Petrov (you can also view the original English article)

Продължаваме да се учим как да персонализираме WordPress с помощта на JavaScript. В предишният урок подготвихме два файла customizer-control.js и customizer-preview.js, които ще ни помогнат да работим с функционалността и визията на Персонализатора и неговият интерфейс за визуализация. В този ред на мисли, препоръчително е да не пропускате стъпките в предишният урок, ако желаете да  ме следвате стриктно.

В този урок ще разгледаме персонализирането на потребителската визия на Персонализатора, в това число панелите, визията за настройки и основните потребителски контроли. Ако обсъжданите понятия са нови за вас, запознайте се с предишният урок.

Как да работим с JS API - то на Customizer

Освен с помощта на PHP можете да достъпите Панелите, Секциите и потребителските Контроли, чрез JavaScript. Тоест можем да ги модифицираме. Ето и няколко примера.

Селектиране на специфичен панел, секция или потребителска контрола.

Пренареждане.

Преместване на контролата "Site Title" в секция color.

Скриване и показване

Имане възможност да манипулирате директно DOM дървото на страницата. Това действие определено ще бъде доста мъчно ако за целта си служехте само с PHP.

Предоставя ви се доста широко поле за действия. Нека да използваме възможностите, които ни предоставя API-то за да модифицираме потребителското изживяване.

Промяна на видимостта на контролите и секциите

Към момента разполагаме с четири потребителски контроли. Две от тях "Site Title" и "Display Site Title" са поместени в секцията "Site Identity". Другите две са съответно селектори за цветове. Те са позиционирани в секцията "Colors" и имат за цел промяна на цвета на текста на "Site Title" при нормално състояние и когато мишката на потребителя е позиционирана върху него.

Input Checkbox and Color picker in the Customizer pane
Четирите ни потребителски контроли.

Целта ни е да визуализираме потребителската контрола за промяна на цветовете, само и единствено когато отметката "Display Site Title" е активна.

Емилинирайки излишни контроли също така, ще намалим и размера на страничната лента на Персонализатора. Нека видим как може да го постигнем.

Премахване на Input полето

Отворете файла customizer-control.js. В момента в който кода на персонализатора е зареден, ще се изпълни следният фрагмент от код, закачен към събитието ready.

Вместо this ще ползваме променливата customize. След което подаваме анонимна функция към настройката display_blogname.

Селектираме полето "Site Title".

Деактивираме полето в момента в който отметката на display_blogname се окаже празна.

За целта ползваме jQuery и метода .prop() за да добавим атрибут disabled към желаното от нас поле. За да вземем текущата стойност ползваме метода .get(). Накрая но не на последно място, ползваме функцията .bind() за да слушаме за промяна на стойността на disabled.

Disabled and Enabled input field in customizer
В ляво : Активирай "Site Title" поле. В дясно : Деактивирай "Site Title" поле. Забележете checkbox полето.

Включване и изключване на видимостта на контролите.

Продължаваме със създаването на кода който ще се грижи за визуализиране на контролите за избор на цвят на заглавието на сайта. Както планирахме, ще скриваме контролите за избор на цвят в момента в който checkbox кутииката е неактивна и ще ги визуализираме, когато е активна.

Като за начало ще групираме всички идентификатори на контролите за избор на цвят в масив.

Итерираме върху този масив и включваме и изключваме видимостта им с помоща на метода .toggle() на jQuery.

Структурата на кода, е много подобна на тази, която вече разгледахме. В рамките на този код, селектираме всяка една от контролите в масива, с помоща на метода .control(), както вече ви показах. След това дефинираме функция която ще се грижи за видимостта на контролите с помоща на .toggle() метода.

Site Title input field is disabled and two color pickers are hidden
Checkbox който визуализира заглавието на страницата е неактивен, полето за въвеждане на текст е неактивно и контролите за избор на цвят са скрити по подразбиране.

Какво следва

В този урок ви показах, как да ползвате възможностите на Customizer API то на Wordpress за да подобрите потребителското изживяване, при работа с Customizer инструмента на Wordpress. Можем да добавим няколко допълнителни подобрения, като например, да премахнем секцията "Colors" когато няма визуализирани контроли за работа с цветове, както и много други.

В следващият урок, от тази серия ще разгледаме малко по сложен пример. Ще направим така че когато променяме нещо в рамките на превю прозореца, промените ни ще се отразяват в конпролният панел на администрацията на приложението ни. Когато потребителя избере например, заглавието на приложението, в превю прозореца, то Customizer прозореца ще даде директно възможност да бъде въведена нова информация.

Останете на линия!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.