WordPress.org

Последња радионица за израду Вордпрес тема је одржана у суботу, 20 априла у новосадском Стартит Центру. Овог пута смо зашли у функционалност која се на wordpress.org сматра области додатака а не тема – прилагођена мета поља и примена додатка Advanced Custom Fields. Али пре тога, размотрили смо је дан од начина на који тема може препоручити додатке који помажу комплетнијом употребом особина теме.

TGM Plugin Activation

TGM Plugin Activation је библиотека која омогућава препоруку додатака на веома једноставан начин. Омогућава корисницима да поставе и ажурирају изабране додатке у природном окружењу Вордпресове контролне табле.

Могуће је препоручити или захтевати наведене додатке, чак их и аутоматски укључити и искључити заједно са укључивањем теме, захтевати одређену верзију додатка итд. Додаци који се препоручују могу бити на различитим местима – у самој теми, на wordpress.org/plugins, Github-у и сл.  

Прилагођена мета поља

Доласком новог уређивача у 5.0 верзији Вордпреса, и његовим активним развојем, све је мања потреба за прилагођеним мета пољима. Ипак, погледали смо шта је то што је неопходно за правилну примену прилагођених поља:

1. Регистрација мета кутије – add_meta_box(), add_meta_boxes копча акције.
2. Markup за приказ мета кутије – обавезно користити wp_nonce_field().
3. Чување вредности мета поља – wp_verify_nonce() провера и санитизација података за чување у бази; save_post копча акције.

Advanced Custom Fields

Advanced Custom Fields је додатак који користи различита поља и њихове комбинације како би олакшао унос садржаја за компликоване распореде и шаблоне. Омогућава једноставно додељивање прилагођених поља било ком објекту Вордпреса, било да је то чланак, страница, таксономија или корисник.

Ако узмемо у обзир и преко 100 помоћних додатака, јасно је да овај додатак пружа огромну контролу над компликованим пројектима уз минимално време учења за нове кориснике.

Advanced Custom Fields и нови уређивач

Тренутне верзије додатка су 5.7.12 за бесплатну и 5.7.13 за Pro верзију. Ове верзије нису компатибилне са новим уређивачем. Једини начин да се овај додатак користи у последње две верзије Вордпреса је уз Disable Gutenberg додатак.

Ипак, ускоро можемо очекивати и нову, 5.8.0 верзију која је у потпуности компатибилна са уређивачем и нуди додатну функционалност регистровања блокова. У овом тренутку постоји 5.8.0-RC2 (release candidate) који је доступан свима који имају девелоперску лиценцу.

Функције

Advanced Custom Fields додатак прати Вордпресову конвенцију именовања функција што значајно утиче на веома брзо усвајање од стране девелопера.

Најосновнији начин долажења до вредности поља је помоћу функција get_field() и the_field(), при чему већ по називима функција можемо закључити да прва враћа вредност док је друга приказује.

Петља је, такође, веома слична Вордпресовој подразумеваној петљи, па тако имамо have_rows() и the_row() функције у основној петљи Advanced Custom Fields додатка.

Додатак нуди и читав низ копчи акција и филтера, који се могу употребити за додатно прилагођавање потребама теме.

Документација

Овај додатак има изузетно детаљну документацију, као и разна упутства од тога како почети па до компликованих приказа угњежђених поља. Како би се у потпуности искористио огромни потенцијал овог додатка, редовно консултовање и опсежно упознавање документације се топло препоручује.

acf-json

Синхронизација поља на различитим инсталацијама Вордпреса је у ранијим верзијама додатка била извор огромне фрустрације. Међутим, данас је довољно у теми направити acf-json директоријум и сва поља ће се аутоматски сачувати у облику .json датотека, и бити спремна за синхронизацију одмах након ажурирања.

На радионици само се укратко упознали са Text, Textarea, Image, WYSIWYG, Select, Relationship field, Flexible content, Repeater и Clone распоредом, као и са употребом условљене логике за приказивање поља. Ово је заиста само мали део могућности Advanced Custom Fields додатка.

---

Комплетан код са радионице се може преузети са званичног налога Вордпрес Србија заједнице на Github-u.

Тринаеста радионица за израду Вордпрес тема је одржана у суботу, 30 марта у новосадском Стартит Центру. Овог пута смо се посветили додатку који проширује могућности подразумеваног прилагођавача (Customizer), користећи при томе, исти API.

Кирки

Обзиром да је додатак, Кирки се кроз тему може препоручити крајњим корисницима на неколико начина. Ми смо се одлучили за додавање тзв. инсталер скрипте која ће препоручити додатак оног тренутка када се отвори прилагођавач и врло једноставно, притиском на једно дугме, поставити додатак у инсталацију Вордпреса.

Пошто користи подразумевани API, додавање панела и секција је исто као и без додатка. Међутим, оно што овај додатак чини толико популарним и корсиним је велики број доступних контрола, као и сам начин на који се контроле додају у тему.

Наиме, без Кирки додатка, свака контрола иде у пару са подешавањем што доводи до непотробно велике количине кôда као и повремених понављања. Кирки је цео овај процес упростио тиме што све неопходне податке из подешавања и контроле ставља у један низ.

Сваку од ових контрола веома једноставно додајемо у прилагођавач помоћу kirki/fields филтера, који филтрира низ контрола и додаје нове.

Типографија

Контрола за типографију нуди читав низ подешавања који крајњем кориснику могу дати огромну контролу над сваким аспектом типографије веб места. Све фамилије са Google Fonts су доступне а могуће је филтрирати према разним стандардима (serif, sans-serif и monospace) и варијантама (regular, italic, bold итд). Оно што нисмо успели да пронађемо је како дефинисати subset.

Прекидач (Switch)

Прекидач нам пружа једноставну функционалност укључивања и искључивања било чега: неке друге контроле или неког дела веб места. Овде треба обратити пажњу на вредности дефинишемо (string) и које прекидач враћа (bool).

Уз помоћ active_callback аргумента додатог било којој другој контроли а који проверава вредност прекидача, врло лако можемо ту контролу да прикажемо одн. сакријемо једноставном применом прекидача. Ми смо искористили ову функционалност за приказивање и сакривање контроле типографије.

Група радио дугмића (Radio Buttonset)

Слично прекидачу, група радио дугмића се може користити за укључивање и искључивање али и у многе друге сврхе. Овде можемо имати неограничен број опција и већу контролу над вредностима које се враћају.

Палета боја

Палета боја је изузетно корисна када желите крајњим корисницима да пружите могућност промене боја на веб месту. Како бисмо применили ове боје као прилагођене стилове, користили смо Heredoc и wp_add_inline_style().

Сортирање (Sortable)

Помоћу Киркија можемо врло лако да мењамо редослед различитим елементима. Контрола за сортирање чак нуди и могућност укључивања и искључивања елемената притиском на иконицу која приказује око.

Поље са вишеструким потврдама (Multicheck)

Пре него што смо сазнали да се елементи за сортирање могу укључити и искључити у склопу контроле за сортирање, ову функционалност видљивости смо добили употребом поља са вишеструким потврдама. Употребом ове контроле се веома једноставно може постићи велика флексибилност и прилагодљивост теме.

Понављач (Repeater)

Понављач је изузетно корисна контрола сваки пут када је потребно непознати број пута поновити одређену контролу, или групу контрола при чему је могуће ограничити максимални број понављања. Ми смо употребили понављач за ираду клизача чланака (slider). Овом приликом смо се користили једном од неколико доступних метода Киркијеве помоћне класе, Kirki_Helper::get_posts().

---

Комплетан код са радионице се може преузети са званичног налога Вордпрес Србија заједнице на Github-u.

Следећи термин посвећујемо прилагођеним пољима и додатку за проширивање ове функционалности – Advanced Custom Fields.

Радионице су бесплатне али је потребно пријавити се на Meetup групи Вордпрес Србија заједнице.

Дванаеста радионица за израду Вордпрес тема је одржана у суботу, 16 марта у новосадском Стартит Центру. Овај термин смо посветили прилагођавачу (Customizer).

Објекти прилагођавача

Прилагођавач је сачињен од четири типа објекта: панел, секција, подешавање и контрола. Сваки од њих има три метода, add_, get_ и remove_, који нам омогућавају да прилагодимо прилагођавач различитим потребама. За било какво прилагођавање користимо customize_register копчу акције.

Панел

Подразумевани прилагођавач нема регистрованих панела али их је лако додати помоћу add_panel метода. Панел може садржавати једну или више секција. Уколико ће имати само једну секцију, онда је за корисничко искуство много корисније да та секција буде самостална.

Важно је имати у виду да панел мора да има бар једну секцију да би био видљив у прилагођавачу. Исто тако, да би секција била видљива у прилагођавачу, мора да садржи бај деан пар подешавања и контроле.

Доступне методе: add_panel, get_panel и remove_panel.

Секција

Секција може бити самостална а може и да, поред других секција, припада панелу. Све подразумеване секције су самосталне. За додавање нове секције користимо add_section метод WP_Customize_Manager објекта док за уклањање користимо remove_section. За промену било ког аргумента подразумеване секције користимо get_section.

Подразумеване секције су:

Назив	ID	Приоритет (Редослед)
Site Title & Tagline	title_tagline	20
Colors	colors	40
Header Image	header_image	60
Background Image	background_image	80
Menus (Panel)	nav_menus	100
Widgets (Panel)	widgets	110
Static Front Page	static_front_page	120
default		160
Additional CSS	custom_css	200

Доступне методе: add_section, get_section и remove_section.

Подешавање

Подешавање увек иде у пару са контролом. Овде се дефинише да ли ће вредност контроле бити сачувана као option или theme_mod, подразумевана вредност контроле, начин приказивања промене у самом прилагођавачу итд.

Препоручује се да јединствени назив подешавања, ID, буде исти као и контролин јер ово омогућава лакше динамичко приказивање вредности код неких контрола, као што су select и radio.

Доступне методе: add_setting, get_setting и remove_setting.

Контрола

Котрола је заправо поље обрасца помоћу кога добијамо жељену вредност од корисника.

Подразумевана подешавања и контроле:

Назив	ID	Секција
Site Title	blogname	title_tagline
Tagline	blogdescription	title_tagline
Display Site Title and Tagline	header_text	title_tagline
Site Icon	site_icon	title_tagline
Logo	custom_logo	title_tagline
Header Text Color	header_textcolor	colors
Background Color	background_color	colors
Header Image	header_image	header_image
Header Image Data	header_image_data	header_image
Header Video	header_video	header_image
External Header Video	external_header_video	header_image
Background Image	background_image	background_image
Preset	background_preset	background_image
Image Position	background_position	background_image
Image Size	background_size	background_image
Repeat Background Image	background_repeat	background_image
Scroll with Page	background_attachment	background_image
Your homepage displays	show_on_front	static_front_page
Homepage	page_on_front	static_front_page
Posts page	page_for_posts	static_front_page
CSS code	custom_css	custom_css

Доступне контроле:

• text,
• textarea,
• email,
• url,
• radio,
• select,
• number,
• checkbox,
• dropdown-pages,
• password,
• hidden и
• date.

Доступне напредне контроле:

• WP_Customize_Image_Control,
• WP_Customize_Color_Control,
• WP_Customize_Media_Control,
• WP_Customize_Upload_Control,
• WP_Customize_Background_Image_Control,
• WP_Customize_Background_Position_Control,
• WP_Customize_Cropped_Image_Control,
• WP_Customize_Site_Icon_Control,
• WP_Customize_Theme_Control,
• WP_Customize_Code_Editor_Control,
• WP_Customize_Date_Time_Control

Доступне методе: add_control, get_control и remove_control.

Селективно освежавање

Како би корисничко искуство живог прегледа промена у прилагођавачу било што ефикасније, уместо освежавања целе странице, могуће је освежавање само елемента који се мења на страници. Ово се постиже transport параметром у подешавању и додавањем подешавања у selective_refresh објект.

Санитизација

Сваку вредност коју добијамо као унос корисника је неопходно припремити за похрањивање у базу података. Тај процес се назива санитизација.

У Вордпресу постоје готове функције које врше санитизацију за одређене типове вредности. Називи већине ових функција започињу са sanitize_.

За вредности које можемо очекивати из прилагођавача а за које не постоје припремљене функције, санитизацију вршимо помоћу прилагођених функција. Вордпресов тим за преглед тема, WPTRT, је припремио низ примера доступних на Github-u.

---

Комплетан код са радионице се може преузети са званичног налога Вордпрес Србија заједнице на Github-u.

Следећи термин ћемо посветити напреднијом употребом прилагођавача помоћу Кирки додатка.

Радионице су бесплатне али је потребно пријавити се на Meetup групи Вордпрес Србија заједнице.