W tym po\u015bcie przyjrzymy si\u0119, jak przeanalizowa\u0107 bloki Gutenberga i wyodr\u0119bni\u0107 okre\u015blone bloki, aby stworzy\u0107 co\u015b innego. Przyjrzymy si\u0119 funkcjom WordPress PHP do parsowania, wyodr\u0119bniania i renderowania wybranych blok\u00f3w.<\/p>\n
Jedn\u0105 z zalet nowego edytora Gutenberga w WordPressie jest bardziej uporz\u0105dkowane dane dotycz\u0105ce tre\u015bci post\u00f3w. W dawnych czasach wszystko by\u0142o przechowywane w formacie HTML i nie by\u0142o mo\u017cliwo\u015bci wyodr\u0119bnienia okre\u015blonych fragment\u00f3w tre\u015bci bez bardzo skomplikowanych wyra\u017ce\u0144 regularnych. Ale w przypadku Gutenberga ka\u017cdy element tre\u015bci, czy to akapit, nag\u0142\u00f3wek, obraz, wideo, przycisk, czy kolumna, kt\u00f3ra zawiera inne bloki wewn\u0105trz, jest przechowywany z informacjami, kt\u00f3re m\u00f3wi\u0105 nam, czym jest ten fragment tre\u015bci.<\/p>\n
Dzi\u0119ki wbudowanym funkcjom WordPress bardzo \u0142atwo jest pobra\u0107 wszystkie bloki w tre\u015bci posta w tablicy ze wszystkimi ich informacjami. To otwiera mn\u00f3stwo przydatnych funkcji dla tw\u00f3rc\u00f3w motyw\u00f3w. Wystarczy wymieni\u0107 kilka pomys\u0142\u00f3w:<\/p>\n
Po prostu wskoczmy w to!<\/p>\n
Do analizy blok\u00f3w u\u017cywamy funkcji WordPress Zwrot z I to wszystko! Przechod\u017a przez zwr\u00f3con\u0105 tablic\u0119 z By\u0107 mo\u017ce pracujesz nad starsz\u0105 witryn\u0105 WordPress, kt\u00f3ra utworzy\u0142a posty przed uaktualnieniem do Gutenberga (lub u\u017cy\u0142a wtyczki Disable Gutenberg). W takim przypadku posty te nie b\u0119d\u0105 zawiera\u0142y ustrukturyzowanej tre\u015bci posta, ale raczej ca\u0142a tre\u015b\u0107 posta znajduje si\u0119 w bloku \u201eEdytor klasyczny".<\/p>\n Tablica zwr\u00f3cona z funkcji Mo\u017cna \u015bmia\u0142o za\u0142o\u017cy\u0107, \u017ce je\u015bli zwrot posta WordPress oferuje r\u00f3wnie\u017c funkcj\u0119 renderowania okre\u015blonego bloku za pomoc\u0105 Powy\u017cszy kod wyrenderuje wszystkie bloki posta, tak jak normalnie podczas renderowania tre\u015bci posta. Zabawna cz\u0119\u015b\u0107 pojawia si\u0119, gdy zaczynamy dodawa\u0107 kod, aby wykluczy\u0107 lub uwzgl\u0119dni\u0107 okre\u015blone bloki, kt\u00f3re nas interesuj\u0105.<\/p>\n Na przyk\u0142ad poni\u017cszy kod wydrukuje tylko bloki akapitu posta:<\/p>\n A to wyrenderuje wszystkie bloki, ale wykluczy wszystkie bloki shortcode:<\/p>\n Podczas analizowania blok\u00f3w postu najprawdopodobniej b\u0119dziesz musia\u0142 sprawdzi\u0107 typ bloku. S\u0105 do\u015b\u0107 \u0142atwe do odgadni\u0119cia. Na przyk\u0142ad blok akapitu to, dobrze zgad\u0142e\u015b, Aby unikn\u0105\u0107 dzikiego zgadywania, oto przegl\u0105d domy\u015blnych blok\u00f3w dostarczonych przez WordPress (w momencie pisania tego):<\/p>\n Osadza\u0107: \u015awiergot: Youtube: Facebook: Instagram: WordPress: SoundCloud: Spotify: Flickr: Vimeo: Animo: Chmura: Sygna\u0142 t\u0142umu: Ruch dzienny: Hulu: Obrazek: Kwestia: Kickstarter: Meetup.com: Mixcloud: Reddit: Nar\u00f3d pog\u0142osu: Prezentacja ekranu: Scribd: Udost\u0119pnianie slajd\u00f3w: Kubek: Pok\u0142ad g\u0142o\u015bnika: PRZETRZ\u0104SA\u0106: Tumblr: WideoPrasa: wordpress.tv: Amazon Kindle: Dobrze napisany post powinien zaczyna\u0107 si\u0119 od akapitu, kt\u00f3ry przedstawia, o czym jest post i zach\u0119ca ludzi do dalszego czytania. S\u0105 one idealne do wykorzystania jako fragmenty zamiast polega\u0107 na funkcji automatycznego fragmentu w WordPress!<\/p>\n Jest to funkcja, kt\u00f3r\u0105 mo\u017cesz doda\u0107 do swojego motywu Po Aby skorzysta\u0107 z tej funkcji wystarczy zadzwoni\u0107:<\/p>\n Zak\u0142adaj\u0105c, \u017ce wywo\u0142anie funkcji jest umieszczone gdzie\u015b, gdzie znajduje si\u0119 Mo\u017cesz automatycznie i dynamicznie generowa\u0107 spis tre\u015bci na podstawie blok\u00f3w nag\u0142\u00f3wk\u00f3w posta. Proces jest do\u015b\u0107 prosty; przeanalizuj bloki posta i znajd\u017a wszystkie bloki typu Blok nag\u0142\u00f3wka zawiera informacje o jego poziomie w elemencie tablicy atrybut\u00f3w (klucz \u201e Pami\u0119taj jednak, \u017ce Je\u015bli naprawd\u0119 sprostasz wyzwaniu, zapraszam do ulepszenia poni\u017cszego kodu. Problem z wygenerowaniem odpowiedniej ustrukturyzowanej Oto funkcja spisu tre\u015bci:<\/p>\n Funkcja zaczyna si\u0119 od obs\u0142ugi posta i parsowania jego blok\u00f3w. Na linii Po p\u0119tli blokowej [parse_blocks](https:\/\/developer.wordpress.org\/reference\/functions\/parse_blocks\/)()<\/code>. Jako parametr musisz poda\u0107 ci\u0105g tre\u015bci posta. Je\u015bli jeste\u015b w p\u0119tli lub masz dost\u0119p do obiektu post, po prostu podaj $post->post_content<\/code>jako parametr funkcji.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);<\/code><\/pre>\nparse_blocks()<\/code>jest tablic\u0105, w kt\u00f3rej ka\u017cdy element tablicy jest blokiem. Dla ka\u017cdego elementu bloku masz informacje takie jak typ bloku (klucz ’ blockName<\/code>’), atrybuty bloku (klucz ’ attrs<\/code>’), wewn\u0119trzne bloki dla blok\u00f3w zagnie\u017cd\u017conych, takich jak Kolumny (klucz ’ innerBlocks<\/code>’) oraz dwa elementy dla rzeczywistej zawarto\u015bci bloku (klucze ’ innerHTML<\/code>’ i ’ innerContent<\/code>’). Element innerHTML<\/code>jest ci\u0105giem tre\u015bci HTML, podczas gdy innerContent<\/code>jest tablic\u0105 ci\u0105g\u00f3w HTML.<\/p>\nparse_blocks()<\/code>, aby zrobi\u0107 swoje. Przyjrzymy si\u0119 wi\u0119cej przyk\u0142adom kodu w dalszej cz\u0119\u015bci tego postu.<\/p>\nUwaga o postach klasycznych (nie Gutenberga)<\/h2>\n
parse_blocks()<\/code>w tego rodzaju wpisach zwr\u00f3ci jeden element tablicy blokowej z blockName<\/code>ustawionym na null<\/code>. Pe\u0142na tre\u015b\u0107 HTML posta znajduje si\u0119 wewn\u0105trz innerHTML<\/code>ci\u0105gu tego elementu.<\/p>\nparse_blocks()<\/code>ma jeden element i blockName<\/code>jest null<\/code>nim, to mamy do czynienia z postem \u201eprzed Gutenbergiem”. W przeciwnym razie blockName<\/code>zawsze b\u0119dzie zape\u0142niony. Warto o tym pami\u0119ta\u0107 podczas pisania kodu do analizowania blok\u00f3w post\u00f3w i gdy chcesz obs\u0142ugiwa\u0107 starsz\u0105 zawarto\u015b\u0107 WordPressa.<\/p>\nRenderuj blok<\/h2>\n
[render_block](https:\/\/developer.wordpress.org\/reference\/functions\/render_block\/)()<\/code>. Jako parametr musisz poda\u0107 tablic\u0119 dla bloku, tak jak jedn\u0105 z tych zwr\u00f3conych z parse_blocks()<\/code>g\u00f3ry. Funkcja zwraca ci\u0105g wyrenderowanego kodu HTML, kt\u00f3ry mo\u017cna po prostu wy\u015bwietli\u0107.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);\nforeach ($blocks as $block) {\n echo render_block($block);\n}<\/code><\/pre>\nforeach ($blocks as $block) {\n if ($block['blockName'] == 'core\/paragraph') {\n echo render_block($block);\n }\n}<\/code><\/pre>\nforeach ($blocks as $block) {\n if ($block['blockName'] != 'core\/shortcode') {\n echo render_block($block);\n }\n}<\/code><\/pre>\nBlokuj nazwy<\/h2>\n
paragraph<\/code>. Nale\u017cy jednak pami\u0119ta\u0107, \u017ce wszystkie bloki Gutenberga w WordPressie s\u0105 poprzedzone przestrzeni\u0105 nazw. W przypadku podstawowych (domy\u015blnych) blok\u00f3w WordPress, wszystkie s\u0105 poprzedzone przedrostkiem \u201e core\/<\/code>„. Wyj\u0105tkiem s\u0105 bloki Osad\u017a, kt\u00f3re s\u0105 poprzedzone przedrostkiem \u201e core-embed\/<\/code>„. Na przyk\u0142ad blok akapitu b\u0119dzie mia\u0142 nazw\u0119 bloku core\/paragraph<\/code>.<\/p>\nWsp\u00f3lne bloki<\/h3>\n
\n
core\/paragraph<\/code><\/li>\ncore\/image<\/code><\/li>\ncore\/heading<\/code><\/li>\ncore\/gallery<\/code><\/li>\ncore\/list<\/code><\/li>\ncore\/quote<\/code><\/li>\ncore\/audio<\/code><\/li>\ncore\/cover<\/code><\/li>\ncore\/file<\/code><\/li>\ncore\/video<\/code><\/li>\n<\/ul>\nFormatowanie<\/h3>\n
\n
core\/preformatted<\/code><\/li>\ncore\/code<\/code><\/li>\ncore\/freeform<\/code>
\n(ale w przypadku post\u00f3w innych ni\u017c Gutenberg b\u0119dzie to null<\/code>, patrz uwaga na temat post\u00f3w innych ni\u017c Gutenberg)<\/li>\ncore\/html<\/code><\/li>\ncore\/pullquote<\/code><\/li>\ncore\/table<\/code><\/li>\ncore\/verse<\/code><\/li>\n<\/ul>\nUk\u0142ad<\/h3>\n
\n
core\/button<\/code><\/li>\ncore\/columns<\/code><\/li>\ncore\/more<\/code><\/li>\ncore\/nextpage<\/code><\/li>\ncore\/separator<\/code><\/li>\ncore\/spacer<\/code><\/li>\ncore\/media-text<\/code><\/li>\n<\/ul>\nWid\u017cety<\/h3>\n
\n
core\/shortcode<\/code><\/li>\ncore\/archives<\/code><\/li>\ncore\/categories<\/code><\/li>\ncore\/latest-omments<\/code><\/li>\ncore\/latest-posts<\/code><\/li>\n<\/ul>\nOsadzenia<\/h3>\n
\n
core\/embed<\/code><\/p>\n<\/li>\ncore-embed\/twitter<\/code><\/p>\n<\/li>\ncore-embed\/youtube<\/code><\/p>\n<\/li>\ncore-embed\/facebook<\/code><\/p>\n<\/li>\ncore-embed\/instagram<\/code><\/p>\n<\/li>\ncore-embed\/wordpress<\/code><\/p>\n<\/li>\ncore-embed\/soundcloud<\/code><\/p>\n<\/li>\ncore-embed\/spotify<\/code><\/p>\n<\/li>\ncore-embed\/flickr<\/code><\/p>\n<\/li>\ncore-embed\/vimeo<\/code><\/p>\n<\/li>\ncore-embed\/animoto<\/code><\/p>\n<\/li>\ncore-embed\/cloudup<\/code><\/p>\n<\/li>\ncore-embed\/crowdsignal<\/code><\/p>\n<\/li>\ncore-embed\/dailymotion<\/code><\/p>\n<\/li>\ncore-embed\/hulu<\/code><\/p>\n<\/li>\ncore-embed\/imgur<\/code><\/p>\n<\/li>\ncore-embed\/issuu<\/code><\/p>\n<\/li>\ncore-embed\/kickstarter<\/code><\/p>\n<\/li>\ncore-embed\/meetup-com<\/code><\/p>\n<\/li>\ncore-embed\/mixcloud<\/code><\/p>\n<\/li>\ncore-embed\/reddit<\/code><\/p>\n<\/li>\ncore-embed\/reverbnation<\/code><\/p>\n<\/li>\ncore-embed\/screencast<\/code><\/p>\n<\/li>\ncore-embed\/scribd<\/code><\/p>\n<\/li>\ncore-embed\/slideshare<\/code><\/p>\n<\/li>\ncore-embed\/smugmug<\/code><\/p>\n<\/li>\ncore-embed\/speaker<\/code><\/p>\n<\/li>\ncore-embed\/ted<\/code><\/p>\n<\/li>\ncore-embed\/tumblr<\/code><\/p>\n<\/li>\ncore-embed\/videopress<\/code><\/p>\n<\/li>\ncore-embed\/wordpress-tv<\/code><\/p>\n<\/li>\ncore-embed\/amazon-kindle<\/code><\/p>\n<\/li>\n<\/ul>\nPrzyk\u0142ad kodu: pobierz pierwszy akapit posta jako fragment<\/h2>\n
functions.php<\/code>, kt\u00f3ra zwr\u00f3ci pierwszy akapit posta. Je\u015bli nie podano wiadomo\u015bci, b\u0119dzie to odnosi\u0107 si\u0119 do globalnego obiektu wiadomo\u015bci. Obs\u0142uguje r\u00f3wnie\u017c posty spoza Gutenberga, zwracaj\u0105c dla nich rzeczywisty fragment WordPressa.<\/p>\nfunction awp_get_excerpt($post=false) {\n if (!$post) { \n global $post;\n }\n if (!$post) { return ''; }\n $excerpt = '';\n $blocks = parse_blocks($post->post_content);\n if (count($blocks) == 1 && $blocks[0]['blockName'] == null) { \/\/ Non-Gutenberg posts\n $excerpt = get_the_excerpt($post->ID);\n } else {\n foreach ($blocks as $block) {\n if ($block['blockName'] == 'core\/paragraph') {\n $excerpt = strip_tags($block['innerHTML']);\n break;\n }\n }\n }\n return \"<div class='excerpt'>$excerpt<\/div>\";\n}<\/code><\/pre>\nparse_blocks()<\/code>wywo\u0142aniu funkcji sprawdzamy, czy post zawiera nieprawid\u0142owe dane bloku (post zosta\u0142 utworzony przed Gutenbergiem) i zwracamy fragment posta, je\u015bli tak jest. W przeciwnym razie przechodzimy przez bloki posta, znajdujemy pierwszy blok akapitu i zwracamy jego innerHTML<\/code>. Na samym ko\u0144cu zwracamy napis z (jest to opcjonalne) <div><\/code>wok\u00f3\u0142 niego.<\/p>\necho awp_get_excerpt();<\/code><\/pre>\n$post<\/code>obiekt globalny, na przyk\u0142ad wewn\u0105trz p\u0119tli. Je\u015bli chcesz okre\u015bli\u0107 post, podaj obiekt post jako parametr wywo\u0142ania funkcji:<\/p>\n$post_id = 1;\n$post = get_post($post_id);\necho awp_get_excerpt($post);<\/code><\/pre>\nPrzyk\u0142ad: Utw\u00f3rz spis tre\u015bci z nag\u0142\u00f3wk\u00f3w posta<\/h2>\n
core\/heading<\/code>. Ale mo\u017cemy p\u00f3j\u015b\u0107 o krok dalej i w\u0142\u0105czy\u0107 poziomy; np. umieszczaj\u0105c h3<\/code>jako podtytu\u0142 pod h2<\/code>i tak dalej.<\/p>\nattrs<\/code>„). Wewn\u0105trz attrs<\/code>tablicy by\u0142by to element tablicy z kluczem \u201e level<\/code>” i liczb\u0105 ca\u0142kowit\u0105 oznaczaj\u0105c\u0105 poziom. A h3<\/code>mia\u0142by \u201e level<\/code>” warto\u015b\u0107 3<\/code>, a h4<\/code>mia\u0142by \u201e level<\/code>” 4<\/code>i tak dalej.<\/p>\nattrs<\/code>dla nag\u0142\u00f3wka bloki mog\u0105 by\u0107 puste! Dzieje si\u0119 tak, gdy autor nie zmieni\u0142 typu nag\u0142\u00f3wka w stosunku do domy\u015blnego w ustawieniach bloku. Aby to obej\u015b\u0107, musimy przyj\u0105\u0107 pewne za\u0142o\u017cenia. Jako domy\u015blne b\u0119d\u0105 nag\u0142\u00f3wki h2<\/code>(chyba \u017ce zmieni\u0142e\u015b to w swoim motywie). Mo\u017cemy wi\u0119c za\u0142o\u017cy\u0107, \u017ce je\u015bli blok nag\u0142\u00f3wka nie ma atrybutu poziomu, jest to h2<\/code>. W przeciwnym razie uzyskamy informacje o poziomie z atrybut\u00f3w.<\/p>\nol<\/code>listy polega na tym, \u017ce nie mo\u017cemy kontrolowa\u0107, w jaki spos\u00f3b autor ustrukturyzuje swoje tytu\u0142y. Mog\u0105 bardzo dobrze zwariowa\u0107 i zacz\u0105\u0107 od h4<\/code>nag\u0142\u00f3wka, a zaraz potem przej\u015b\u0107 od razu do h2<\/code>nag\u0142\u00f3wka. I nagle mieszaj\u0105 si\u0119 h1<\/code>w \u015brodku. Moje rozwi\u0105zanie polega wi\u0119c na wygenerowaniu p\u0142askiej ol<\/code>listy i podaniu informacji o poziomie w klasach element\u00f3w listy. Nast\u0119pnie za pomoc\u0105 sprytnego CSS mo\u017cesz odpowiednio wci\u0105\u0107 elementy listy za pomoc\u0105 lewego dope\u0142nienia.<\/p>\nKod<\/h3>\n
function awp_table_of_contents($post=false) {\n if (!$post) {\n global $post;\n }\n if (!$post) { return ''; }\n $headings = [];\n $blocks = parse_blocks($post->post_content);\n if (count($blocks) == 1 && $blocks[0]['blockName'] == null) { \/\/ Non-Gutenberg posts\n return '';\n } else {\n foreach ($blocks as $block) {\n if ($block['blockName'] == 'core\/heading') {\n $level = (isset($block['attrs']['level']))? $block['attrs']['level']: 2; \/\/ h2 as default\n $headings[] = ['title' => wp_strip_all_tags($block['innerHTML']), 'level' => $level];\n }\n }\n }\n\u00a0\n if (empty($headings)) { \/\/ No headings found in post\n return '';\n }\n\u00a0\n $toc = '<ol class=\"table-of-contents\">';\n foreach ($headings as $heading) {\n $toc .= '<li class=\"heading-level-'. $heading['level']. '\">'. $heading['title']. '<\/li>';\n }\n $toc .= '<\/ol>';\n return $toc;\n}<\/code><\/pre>\n#9<\/code>przyjmujemy stanowiska nie-Gutenberga. Funkcja kontynuuje p\u0119tl\u0119 przez wszystkie bloki i za ka\u017cdym razem, gdy znajdzie blok nag\u0142\u00f3wka, zostanie dodana do naszej $headings<\/code>tablicy. U\u017cywamy [wp_strip_all_tags](https:\/\/developer.wordpress.org\/reference\/functions\/wp_strip_all_tags\/)()<\/code>do usuwania tag\u00f3w HTML z tytu\u0142\u00f3w. Dodajemy r\u00f3wnie\u017c informacje o poziomie do naszej tablicy, gdzie domy\u015blnie jest ustawione, 2<\/code>je\u015bli atrybuty s\u0105 puste.<\/p>\n$headings<\/code>tablica powinna zawiera\u0107 kolejno wszystkie nag\u0142\u00f3wki posta. Mo\u017cemy wtedy po prostu wygenerowa\u0107 ci\u0105g HTML i wypisa\u0107 jego zawarto\u015b\u0107. Jak wspomnia\u0142em, generuj\u0119 nazw\u0119 klasy na ka\u017cdym elemencie z informacj\u0105 o poziomie nag\u0142\u00f3wka, dzi\u0119ki czemu mo\u017cemy stworzy\u0107 iluzj\u0119 ustrukturyzowanej listy za pomoc\u0105 CSS.<\/p>\n