Ознака: Радионице

У суботу, 8 децембра 2018 године у новосадском Стартит Центру је одржана шеста радионица за израду Вордпрес тема. Наставили смо са шаблоном појединачног чланка и завршили ову област, започету на петој радионици.

Коментари

За измену приказа листе коментара смо користили callback, и наишли на тзв bug у коду самог Вордпреса. Када се нађемо у оваквој ситуацији веома је корисно пријавити bug, прилагодити код тренутном стању и сачекати да исправак кода стигне у званичну верзију Вордпреса. Уколико знате и како да направите исправак, цео процес се значајно убрзава.

Пријавили грешку у коду и уједно доставили исправак (#45498). Сада можемо да чекамо верзију 5.1, за коју је предвиђено да садржи овај исправак.  

Образац за коментаре смо изменили на неколико начина. Који начин изабрати зависи искључиво од тога које су размере и природа промене. Уколико желимо у потпуности да изменимо HTML markup обрасца онда има смисла измене проследити као параметар comment_form() функције.

Уколико само желимо да изменимо места пољима или да искључимо поједина поља обрасца онда је сасвим довољно користити comment_form_fields филтер копчу.

Од осталих функција везаних за шаблон коментара, додали смо наслов секције у зависности од броја коментара, функцију за кретање коментара, the_comments_navigation() и обавештења за затворене коментаре или неопходну регистрацију и пријаву уколико је то подешено у контролној табли.

Облик чланка

Облик чланка је посебан вид издвајања појединих чланака према одређеним критеријумима који отвара могућност засебног шаблона за приказ чланка. Различити облици чланка су доступни путем подршке теме.

Прилагођен шаблон чланка

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

---

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

У следећем термину ћемо се посветити виджетима и различитим приказима архива. Уједно, овим завршавамо основну обуку развијања тема а од јануара прелазимо на напредније теме. Локализација и припрема теме за превођење, подршка теме за нови уређивач (познат под кодним именом “Гутенберг”), прилагођена подешавања у прилагођавачу су само неке од области којима ћемо се бавити у 2019 години.

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

Након дуже паузе у новосадском Стартит Центру је одржана пета радионица за израду Вордпрес тема. Бавили смо се шаблоном појединачног чланка и његовим специфичним елементима.

Прилагођени део шаблона

Како бисмо обезбедили прилагођен изглед и функционалност, а опет избегли превише кондиционала за различите приказе садржаја (страница, чланак на архивама и сл), део шаблона за приказ садржаја, entry.php, смо копирали и сачували као entry-post.php. Ово нам је дало могућност да позовемо entry-post.php у single.php на динамички начин:

get_template_part( '/template-parts/entry', get_post_type() );

Ово значи да ће entry-post.php бити учитан уколико се налазимо на типу чланка post. Међутим, уколико постоји тип чланка нпр. book а не постоји entry-book.php, када се нађемо на овом типу чланка видећемо да је учитан entry.php.

Мета

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

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

Обележавање страница и кретање (пагинација и навигација)

Појединачни чланак се може поделити на више страница, што се врши помоћу wp_link_pages() функције и додавања <!–nextpage–> ознаке у садржају. Такође, могуће је кретати се од једног до другог чланка директно са странице чланка помоћу the_post_navigation() функције.

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

Коментари

За приказивање листе коментара, као и обрасца за коментаре, неопходно је додати comments.php део шаблона, а у шаблону single.php учитати коментаре путем comments_template() функције. Доступна је и поршка за HTML5 и за листу и за образац.

Функционалност коментара је доста комплексна и флексибилна. Постоји низ начина на које можемо прилагодити систем коментара, од Walker класе, преко callback функције, па све до читавог низа копчи (филтера и акција). Неке од ових начина смо испробали на радионици а неке ћемо проучити у следећем термину.

---

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

У следећем термину ћемо наставити са прилагођавањем обрасца за коментаре, преосталим ознакама које се користе у comments.php шаблону, као и осталим начинима прилагођавања шаблона појединачног чланка.

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

У суботу, 20 октобра 2018, у новосадском Стартит Центру је одржана четврта радионица за израду Вордпрес тема. Радионица је била посвећена мало напреднијој теми, Walker_Nav_Menu.

Изборник је таксономија док су ставке изборника post_type објекти.

Walker_Nav_Menu::start_lvl

Односи се на отварајућу ознаку листе, <ul>, сваког под-изборника. Враћа целокупан markup пре <ul>, као и <ul> са класама и одговарајућим размацима, item_spacing.

Уколико је потребно само променити или додати класе или аргументе изборника, онда се може користити доступан филтер, nav_menu_submenu_css_class, и нема потребе иницијализовати цео Walker.

Извор: Walker_Nav_Menu::start_lvl

Walker_Nav_Menu::end_lvl

Односи се на затварајућу ознаку листе, </ul>, сваког под-изборника.

Извор: Walker_Nav_Menu::end_lvl

Walker_Nav_Menu::start_el

Односи се на отварајућу ознаку сваке ставке, <li>, као и на одговарајућу везу, <a></a>. Овде је могуће изменити и/или додати атрибуте за сваку ставку без обзира ком нивоу изборника припада, као и за сваку везу.

Могуће је поништити или дефинисати аргументе из wp_nav_menu(), као што су before, after, link_before и link_after, што уз употребу одговарајућих кондиционала значајно олакшава додавање помоћних ознака код ставки које садрже под-изборнике.

Чак је могуће убацити било који садржај везан за ставку – ако је чланак или страница онда имамо на располагању све што можемо приказати у њиховим шаблонима (наслов, садржај, исечак, издвојену слику, аутора, коментаре, датум итд); ако је у питању таксономија могуће је приказати њене чланове, број чланака у сваком члану..

Доступни филтери: nav_menu_item_args, nav_menu_css_class, nav_menu_item_id, nav_menu_link_attributes, the_title, nav_menu_item_title и walker_nav_menu_start_el.

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

Извор: Walker_Nav_Menu::start_el

Walker_Nav_Menu::end_el

Односи се на затварајућу ознаку сваке ставке, </li>.

Извор: Walker_Nav_Menu::end_el

• 

• 

• 

• 

• 

Корисна Вордпрес функција wp_trim_words()

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

У следећем термину ћемо наставити са подразумеваним особинама теме, подршком за пост формате, HTML5, те осталим подразумеваним шаблонима.

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

Трећа радионица за израду Вордпрес тема је одржана у суботу, 6 октобра 2018, у просторијама новосадског Стартит Центра. Цела радионица је била посвећена подразумеваним особинама теме које се активирају помоћу add_theme_support() функције.

Прилагођени лого

Да би се користила функционалност прилагођеног логоа у прилагођавачу неопходно је, пре свега, активирати је уз помоћ add_theme_support( ‘custom-logo’ ) функције. Затим се на месту где желимо да прикажемо лого, најчешће у header.php шаблону, позивају функције за приказ логоа. Неке од њих су has_custom_logo(), the_custom_logo() и the_custom_logo().

У ситуацијама када нам предефинисани Вордпресов markup не одговара, можемо користити доступне филтере, као што је филтер копча get_custom_logo. На овај начин врло једноставно прилагођавамо приказ логоа нашим потребама при чему и даље користимо предности Вордпресове предефинисане функционалности.

Аутоматске везе довода

Ова особина не мења изглед и функционалност веб места али је изузетно важна за сваки блог. Додавањем add_theme_support( ‘automatic-feed-links’ ) у functions.php датотеку омогућавамо посетиоцима веб места да се лако пријаве на претплату нових чланака и коментара.

Ознака наслова

Помоћу add_theme_support( ‘title-tag’ ) функције активирамо подршку за ознаку наслова што омогућава страницама веб места адекватан наслов за претраживаче. Подразумевани наслови су дефинисани у wp_get_document_title() функцији у којој можемо пронаћи и филтере за измену наслова, document_title_parts, и сепаратора, document_title_separator.

Прилагођена позадина

Прилагођена позадина за <body> ознаку се активира додавањем add_theme_support( ‘custom-background’ ) функције. Ова функционалност додаје две нове контроле у прилагођавачу и нуди читав низ подешавања које можемо дефинисати као подразумеване, укључујући боју и слику.

Издвојена слика

Функционалност издвојене слике, која се активира додавањем add_theme_support( ‘post-thumbnails’ ) функције, баш као и прилагођени лого, захтева додатни код у шаблонима. За приказ издвојене слике, онако како је предефинисан у Вордпресу, довољно је свега пар функција као што су has_post_thumbnail() и the_post_thumbnail(), док су за прилагођавање доступни филтери.

Димензије слика се могу прилагодити помоћу add_image_size() функције. Како бисмо применили нове димензије и на све већ постојеће слике у галерији садржаја, препоручен је Force Regenerate Thumbnails додатак. Његова предност у односу на друге сличне додатке је што он, поред тога што примењује нове димензије на све постојеће слике, проверава све регистроване димензије и уклања оне слике које су сечене према димензијама које се више не користе.

Прилагођено заглавље

Функционалност прилагођеног заглавља омогућава додатни издвојени садржај, слику или видео, које је предвиђен да буде допуна идентитету веб места али је, у пракси, могуће користити је у било коју сврху. Активира се помоћу add_theme_support( ‘custom-header’ ) функције и, као и прилагођена позадина, има читав низ подешавања који се могу дефинисати као подразумевани.

За разлику од прилагођене позадине, прилагођено заглавље захтева додатни код у шаблонима. Неке од доступних функција су get_header_image(), get_custom_header(), header_image() и the_custom_header_markup().

Изборници

Изборници се користе у различите сврхе на веб местима. Основна функционалност кретања кроз веб место се постиже функцијом wp_nav_menu(). Додатна функционалност и већа контрола над изборницима се постиже регистрацијом прилагођених изборника, register_nav_menus().

• 

• 

• 

Аутор форографија Стевица Голошин.

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

У следећем термину ћемо се посветити прилагођавању изборника кроз Walker_Nav_Menu класу.

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

На другој радионици за израду Вордпрес тема, одржаној 29-ог септембра у новосадском Стартит Центру, полазници су започели израду самосталне теме за Вордпрес, назване “Радионица”.

Решавањем грешака и упозорења од стране Вордпреса, полазници су се упознали са минимумом кода, неопходним да се нова тема доведе у стање да може да се инсталира.

Ово, пре свега, подразумева постојање style.css датотеке са добро познатим коментаром; затим је неопходна index.php датотека у којој се позивају заглавље, get_header(), и подножје, get_footer(); те шаблони за заглавље, header.php, и подножје, footer.php, са неопходним позивима за адекватне копче: wp_head() и wp_footer().

Приказивање садржаја на “frontendu” смо започели функцијама за приказивање назива и описа веб места: bloginfo(), get_bloginfo(), home_url(); основном петљом и двема функцијама за приказ наслова, the_title(), и садржаја, the_content(), уноса у оквиру петље. Такође, увели смо још једну датотеку, function.php, неопходну за учитавање стилова, style.css.

Како Вордпрес подржава три основна типа шаблона: чланак, страница и архива; полазници су се упознали са датотекама за ове основне шаблоне: single.php и page.php, при чему је index.php престао да буде датотека за све шаблоне и постао шаблон само за архиве.

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

Велику помоћ у развијању чистог и одрживог кода чине тзв. делови шаблона, get_template_part() и кондиционали (is_archive(), is_home(), is_single(), is_front_page()). Полазници су се упознали са основним начином функционисања и употребом делова шаблона и кондиционала, које ће све више користити у даљем раду и развоју теме. У међувремену, листа свих кондиционала се може пронаћи овде.

За крај смо додали главни wrapper и  основни markup за уносе како би цела страница добила на семантици. Овом приликом смо се упознали са још неколико функција, корисних у оквиру петље: post_class(), the_ID(), the_category() и the_tags().

• 

• 

• 

• 

Аутор форографија Филип Петронијевић.

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

На следећој радионици, која ће се одржати 6 октобра 2018, ћемо се упознати са подршком теме (add_theme_support()), шта она представља и како се имплементира подршка за различите особине теме.

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

У Стартит Центру у Новом Саду је, 15 септембра 2018, успешно одржана прва радионица за израду Вордпрес тема. Посећеност је била много боља од очекиване, чак 50-ак полазника, чији утисци су махом позитвни.

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

Укратко, прво се учитају датотеке у којима су важна подешавања и повезивање са базом података; затим тзв. „МУ додаци“ („Must Use Plugins“), активни додаци, child тема, родитељска тема, тренутни корисник и на крају шаблони активне теме. Више о овоме се може прочитати на следећим везама:

• www.rarst.net
• www.wpbeginner.com

Остатак радионице је био посвећен изради child теме за Twentyseventeen тему. Циљ није био да се направи тема која ће се понашати или изгледати другачије од родитељске; циљ је био да се упознамо са специфичностима израде child теме у смислу приоритета и редоследа учитавања стилова и скрипти; као и који су то разлози и ситуације у којима се одлучујемо да правимо child тему.

Уколико се тема неће користити у потпуности таква каква је приликом инсталације, онда је то први знак и прави тренутак да се направи child.

Као што смо видели, учитавање стилова и скрипти путем функција wp_enqueue_style() и wp_enqueue_script() у великој мери зависи од тога како су исти позвани у родитељској теми. Ту смо се упознали са wp_enqueue_scripts копчом, као и различитим функцијама за лоцирање датотека:

• get_stylesheet_uri()
• get_stylesheet_directory_uri()
• get_template_directory()
• get_template_directory_uri()

Поменули смо и нове функције за лоцирање датотека, уведене у 4.7 верзији Вордпреса, а са којима ћемо се боље упознати у неким од наредних радионица.

Затим смо видели на које све начине је могуће променити изглед и понашање родитељске теме кроз child тему:

• Модификација стилова у style.css,
• Путем подршке теме:  add_theme_support() и remove_theme_support(),
• Уклањање копчи додатих у родитељској теми: remove_filter() и remove_action(),
• Модификација родитељске функције са function_exists провером,
• Копирање шаблона из родитељске теме на исту путању у child теми,
• Модификација прилагођеног филтера, дефинисаног у родитељској теми помоћу add_filter().

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

На следећој радионици, која ће се одржати 29 септембра 2018, започећемо израду самосталне теме са акцентом на подразумеване шаблоне и основну петљу.

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