register_block_pattern<\/code>mo\u017cesz bardzo szybko stworzy\u0107 wz\u00f3r blokowy dla siebie lub swoich klient\u00f3w.<\/p>\nWarunki wst\u0119pne<\/h2>\n\n- Instalacja WordPress<\/li>\n
- Edytor kodu<\/li>\n<\/ul>\n
Stw\u00f3rz sw\u00f3j wz\u00f3r blokowy<\/h2>\n
Budujesz wzorce blokowe z blok\u00f3w, kt\u00f3re zarejestrowa\u0142e\u015b w swojej witrynie. Mog\u0105 to by\u0107 bloki podstawowe lub dowolna liczba blok\u00f3w innych firm lub blok\u00f3w niestandardowych.<\/p>\n
Zacznij od u\u017cycia edytora WordPress do zbudowania uk\u0142adu blokowego. Mo\u017cesz u\u017cy\u0107 ustawie\u0144, aby uczyni\u0107 to tak z\u0142o\u017conym lub tak prostym, jak chcesz.<\/p>\n
W tym przyk\u0142adzie zachowamy prostot\u0119 i po prostu utworzymy wz\u00f3r blokowy, kt\u00f3ry jest nast\u0119puj\u0105cymi strukturami:<\/p>\n
\n- Blok grupowy\n
\n- Nag\u0142\u00f3wek<\/li>\n
- Ust\u0119p<\/li>\n
- Kolumny\n
\n- Kolumna 1\n
\n- Nag\u0142\u00f3wek<\/li>\n
- Ust\u0119p<\/li>\n<\/ul>\n<\/li>\n
- Kolumna 2\n
\n- Nag\u0142\u00f3wek<\/li>\n
- Ust\u0119p<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Po zbudowaniu wzorca blokowego po prostu skopiuj kod, kt\u00f3ry zosta\u0142 dla Ciebie wygenerowany.<\/p>\n
Skopiuj kod wzoru blokowego<\/p>\n
Aby to zrobi\u0107, przejd\u017a do trzech kropek w prawym g\u00f3rnym rogu edytora (oznaczonych jako Opcje) i wybierz \u201eEdytor kodu". Spowoduje to wy\u015bwietlenie kodu HTML za utworzonym wzorcem blokowym.<\/p>\n
Skopiuj ten kod do schowka.<\/p>\n
Zarejestruj wz\u00f3r blokowy<\/h2>\n
Wklej ten kod edytora bloku do edytora kodu. Je\u015bli nie masz pewno\u015bci, gdzie, mo\u017cesz u\u017cy\u0107 functions.php<\/code>swojego motywu.<\/p>\nUpewnij si\u0119, \u017ce przekazujesz go do zmiennej, umieszczaj\u0105c pojedyncze cudzys\u0142owy ('<\/code>) wok\u00f3\u0142 wklejonego tekstu, na przyk\u0142ad:<\/p>\n$block_pattern_content = '\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<h2>Example Block Pattern<\/h2>\n\n<p>Lorem ipsum dolor sit amet labore cras venenatis.<\/p>\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<h3>Sub Heading 1<\/h3>\n\n<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.<\/p>\n<\/div>\n\n<div class=\"wp-block-column\">\n<h3>Sub Heading 2<\/h3>\n\n<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n';\n<\/code><\/pre>\nMo\u017ce by\u0107 konieczne wykonanie ucieczki znak\u00f3w, w zale\u017cno\u015bci od z\u0142o\u017cono\u015bci wzoru bloku.<\/p>\n
Nast\u0119pnie musimy przekaza\u0107 to do register_block_pattern<\/code>funkcji:<\/p>\nregister_block_pattern(\n 'wholesomecode\/example-block-pattern',\n [\n 'categories' => [\n 'text',\n ],\n 'content' => $block_pattern_content,\n 'description' => 'An example block pattern',\n 'keywords' => 'example',\n 'title' => 'Example Block Pattern',\n 'viewportWidth' => 800,\n ],\n);\n<\/code><\/pre>\nTo wszystko, wz\u00f3r blokowy jest zarejestrowany.<\/p>\n
Za\u0142amanieregister_block_pattern<\/code><\/h3>\n\n- Przestrze\u0144 nazw<\/strong> \u2014 (
wholesomecode\/example-block-pattern<\/code>) to przestrze\u0144 nazw wzorca blokowego. Upewnij si\u0119, \u017ce jest to unikalne dla twojego wzoru blokowego. Je\u015bli kiedykolwiek b\u0119dziemy musieli wyrejestrowa\u0107 wz\u00f3r blokowy, to jest to ci\u0105g, kt\u00f3rego b\u0119dziemy potrzebowa\u0107.<\/li>\n- Kategorie<\/strong> \u2014 jest to kategoria wzorc\u00f3w blokowych, w kt\u00f3rej pojawi si\u0119 wzorzec blokowy, gdy wstawimy nasz wzorzec blokowy. Mo\u017cemy r\u00f3wnie\u017c dodawa\u0107 w\u0142asne kategorie<\/a>.<\/li>\n
- Tre\u015b\u0107<\/strong> \u2014 To jest kod HTML, kt\u00f3ry generuje wz\u00f3r blokowy. W tym przyk\u0142adzie u\u017cyto zmiennej, kt\u00f3r\u0105 utworzyli\u015bmy z edytora.<\/li>\n
- Opis<\/strong> \u2014 opis wzoru blokowego.<\/li>\n
- S\u0142owa kluczowe<\/strong> \u2014 s\u0142owa kluczowe, kt\u00f3rych mo\u017cna u\u017cy\u0107 do wyszukania wzorca blokowego.<\/li>\n
- Tytu\u0142<\/strong> \u2014 Tytu\u0142 wzoru blokowego.<\/li>\n
- Szeroko\u015b\u0107 rzutni<\/strong> \u2014 rzutnia wzoru bloku u\u017cywana w obszarze podgl\u0105du.<\/li>\n<\/ul>\n
Wstaw wz\u00f3r blokowy<\/h2>\n
Aby wstawi\u0107 wz\u00f3r blokowy, po prostu u\u017cyj znaku plus w lewym g\u00f3rnym rogu edytora i wybierz wz\u00f3r blokowy.<\/p>\n
Wybierz kategori\u0119, w kt\u00f3rej zarejestrowa\u0142e\u015b sw\u00f3j wz\u00f3r, i powinien si\u0119 pojawi\u0107.<\/p>\n
Wstawianie wzoru blokowego<\/p>\n
Alternatywnie mo\u017cesz wyszukiwa\u0107 wed\u0142ug zarejestrowanych s\u0142\u00f3w kluczowych.<\/p>\n
Aby zarejestrowa\u0107 kategori\u0119 bloku, wystarczy u\u017cy\u0107 register_block_pattern_category<\/code>funkcji.<\/p>\nregister_block_pattern_category(\n 'my-client',\n [\n 'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),\n ]\n);\n<\/code><\/pre>\nNast\u0119pnie mo\u017cesz u\u017cy\u0107 kategorii, kt\u00f3r\u0105 w\u0142a\u015bnie zarejestrowa\u0142e\u015b w swoim kodzie wzoru blokowego, na przyk\u0142ad:<\/p>\n
register_block_pattern(\n 'wholesomecode\/example-block-pattern',\n [\n 'categories' => [\n 'my-client',\n ],\n 'content' => $block_pattern_content,\n 'description' => 'An example block pattern',\n 'keywords' => 'example',\n 'title' => 'Example Block Pattern',\n 'viewportWidth' => 800,\n ],\n);\n<\/code><\/pre>\nTeraz, gdy znajdziesz sw\u00f3j wz\u00f3r blokowy, b\u0119dzie on znajdowa\u0107 si\u0119 w Twojej niestandardowej kategorii:<\/p>\n
![\"Zarejestruj](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168978-61e7f9e9b9076.png\")
Kategoria niestandardowego wzoru bloku<\/p>\n
Teraz mo\u017cesz zgrupowa\u0107 w jednym miejscu wszystkie niestandardowe wzory blok\u00f3w, kt\u00f3re w\u0142a\u015bnie stworzy\u0142e\u015b dla swojego klienta.<\/p>\n