Wzory blokowe WordPress

Od czasu wprowadzenia wzorców blokowych nastąpił gwałtowny wzrost zainteresowania wzorcami blokowymi w ekosystemie WordPress.

Dodanie wzorców blokowych do Gutenberga było dość korzystne dla użytkowników WordPressa. Dzieje się tak, ponieważ możesz teraz korzystać z gotowych projektów podczas projektowania witryny i dostosowywać je do swoich preferencji. To naprawdę pomaga zaoszczędzić czas w porównaniu z projektowaniem stron witryny od podstaw.

W tym artykule przyjrzymy się, czym są te wzorce bloków, gdzie je znaleźć, jak z nich korzystać, a także w porównaniu z blokami wielokrotnego użytku.

Spis treści

Czym są wzory blokowe

Korzystanie z istniejących wzorców blokowych

Wzory blokowe a bloki wielokrotnego użytku

Jak stworzyć własne wzory blokowe

• Podejście ręczne
• Za pośrednictwem katalogu wzorców

Jak utworzyć wtyczkę z niestandardowymi wzorami bloków?

Wyrejestrowanie wzorców blokowych

Wyrejestrowanie kategorii wzorów blokowych

Wniosek

Czym są wzory blokowe

Wzory blokowe to zbiór bloków połączonych w celu utworzenia wstępnie zaprojektowanych układów.

Użytkownik WordPressa, który na przykład chce skonfigurować wezwanie do działania, może to zrobić, dodając do swojej strony kilka bloków, takich jak nagłówek, akapit i przycisk. Układanie bloków w celu dopasowania do preferowanego układu projektu może jednak nie być takie łatwe, szczególnie dla początkujących użytkowników WordPressa. Wzory blokowe przydają się w takim przypadku, ponieważ użytkownicy WordPressa mogą po prostu dodać wzór blokowy wezwania do działania. Następnie mogą edytować wzory bloków do żądanego widoku.

Korzystanie z istniejących wzorców blokowych

WordPress integruje edytor bloków (Gutenberg), który zastępuje klasyczny edytor. W edytorze możesz łatwo dodawać wzorce do swoich stron lub postów. Na początek musisz najpierw kliknąć na wstawiacz bloków.

Po kliknięciu przejdź do zakładki Wzory zilustrowanej poniżej:

Następnie kliknij przycisk „Eksploruj”

W wyrenderowanym wyskakującym okienku będziesz mieć wiele wzorców pogrupowanych na podstawie różnych kategorii.

Aby wstawić wzór do strony lub posta, wystarczy go kliknąć, a następnie powinien zostać wyrenderowany na twojej stronie lub poście.

Gdy to zrobisz, możesz dalej dostosować blok(i) we wzorze do swoich preferencji.

Możesz również znaleźć więcej wzorów z katalogu wzorców bloków wordpress.org.

Po znalezieniu preferowanego wzoru wystarczy go skopiować, klikając przycisk kopiowania wyświetlany po najechaniu kursorem myszy na żądany wzór.

Po wykonaniu tego będziesz musiał wkleić wzór na swojej stronie lub poście.

Wzory blokowe a bloki wielokrotnego użytku

Blok wielokrotnego użytku to zbiór jednego lub większej liczby bloków, których możesz użyć później w swoim poście lub na stronie.

Zgodnie z powyższą definicją, bloki wielokrotnego użytku wydają się dość podobne do wzorców blokowych w tym sensie, że oba obejmują dodanie gotowych bloków w poście lub na stronie. Istnieje jednak różnica między tymi dwoma przedmiotami.

Jeśli chodzi o bloki wielokrotnego użytku, bloki te nie są dość elastyczne w porównaniu do wzorów blokowych. Bloki wielokrotnego użytku zachowują pojedynczą instancję bez względu na to, na której stronie lub w poście zostały zastosowane. Oznacza to, że jeśli dodasz blok wielokrotnego użytku do kilku stron i zdecydujesz się dostosować blok wielokrotnego użytku na jednej ze stron, zmiany zostaną zastosowane do wszystkich wystąpień bloku wielokrotnego użytku na wszystkich stronach.

Z drugiej strony, jeśli chodzi o wzorce blokowe, po dodaniu wzorca blokowego do kilku stron i dokonaniu pewnych dostosowań na wzorcu blokowym na określonej stronie, dostosowania nie są stosowane do wzorców blokowych na pozostałych stronach. Instancje szyku blokowego są więc różne.

W przeciwieństwie do bloków wielokrotnego użytku, wzorce bloków można również zarejestrować w motywie lub kodzie wtyczki.

Wzorce blokowe są idealne, jeśli chcesz użyć określonego układu, który zostanie zastosowany do wielu stron lub postów, skąd można je następnie dostosować na poszczególnych stronach lub postach, aby dopasować je do kontekstu odpowiednich stron lub postów.

Z drugiej strony bloki wielokrotnego użytku są idealne w scenariuszach, w których chcesz powielać i używać dokładnie tej treści na swoich stronach. Może to być na przykład w banerach reklamowych.

Jak stworzyć własne wzory blokowe

Istnieją różne sposoby tworzenia własnych wzorów blokowych. W tym artykule zajmiemy się dwiema z tych metod, którymi są:

• Podejście ręczne
• Za pośrednictwem katalogu wzorców

Podejście ręczne

W tym podejściu będziemy musieli najpierw utworzyć kolekcję bloków na stronie lub poście, a później zarejestrować ją jako wzorzec.

Tworzenie kolekcji bloków

Aby skonfigurować kolekcję bloków, musisz wykonać następujące czynności:

i) Najpierw utwórz nową stronę lub post

ii) Dodaj żądane bloki, które mają tworzyć wzór lub układ w poście lub na stronie. W naszym przypadku dodamy do nich blok mediów i tekstu, a także blok przycisków i trochę stylizacji.

Poniżej znajduje się przykładowe wyświetlanie bloków:

Rejestrowanie wzoru blokowego

W celu zarejestrowania kolekcji klocków jako wzorca klockowego należy wykonać następujące czynności:

i) Na stronie lub poście, na którym masz kolekcję bloków, przejdź do edytora kodu:

ii) Skopiuj wszystkie wyrenderowane kody i wklej je w wybranym edytorze tekstu, takim jak Notatnik lub Sublime Text:

iii) Następnie dodaj poniższy kod do pliku functions.php w motywie potomnym:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => 'Fill in your copied code here' ) ); } add_action( 'init', 'reg_block_patterns' );

Będziesz musiał zastąpić treść „Tu wypełnij skopiowany kod” kodem skopiowanym w (ii) powyżej.

Poniżej znajduje się próbka końcowego kodu z naszego końca:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' );

Gdy to zrobisz, możesz odwiedzić swoją stronę lub post, a po przejściu do sekcji wzorców zobaczysz nowy wzorzec w sekcji „Polecane”, jak pokazano poniżej:

Rejestrowanie kategorii wzorów

WordPress udostępnia kilka domyślnych kategorii wzorców, których można używać podczas rejestrowania wzorców. Należą do nich: Przyciski, Kolumny, Galeria, Nagłówki, Tekst, Zapytanie i Polecane.

Podczas rejestrowania wzorców blokowych lepszym podejściem byłoby rejestrowanie wzorców w niestandardowych kategoriach. Aby to osiągnąć, musisz najpierw zarejestrować kategorię wzorów.

Aby zarejestrować kategorię wzorców, musisz dodać następujący kod w pliku functions.php motywu potomnego.

 function register_category_pattern() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_category_pattern' );

Możesz zmienić etykietę kategorii zgodnie z własnymi preferencjami. W powyższym przykładzie kodu używamy etykiety kategorii „Niestandardowy”.

Aby kategoria niestandardowego wzorca była wyświetlana na Twojej stronie lub poście, musisz powiązać ją z wzorcem. W naszym przypadku zmienimy oryginalny kod rejestracji wzorca, aby uwzględnić tę kategorię wzorców. Aby to zrobić, wyszukaj ten wiersz kodu:

 'categories' => array( 'featured' ),

Następnie musisz zmienić kategorię w miejscu, która jest „polecana” na „niestandardową”, tak aby kod wyglądał teraz jako:

 'categories' => array( 'custom' ),

Ostateczny kod do zarejestrowania wzorca i kategorii wzorców w naszym przypadku wyglądałby następująco:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

Gdy już uzyskasz dostęp do swojej strony lub posta i spróbujesz dodać do niej wzór, zostanie on wyrenderowany w naszej nowo zarejestrowanej kategorii „Niestandardowe”, jak pokazano poniżej:

Za pośrednictwem katalogu wzorców

W przypadku, gdy chcesz stworzyć wzorzec, który jest dostępny dla wszystkich w ekosystemie WordPress, możesz to teraz osiągnąć z Katalogu wzorców.

Po uzyskaniu dostępu do katalogu wzorców będziesz musiał wykonać następujące czynności:

i) Zaloguj się do katalogu wzorców.

ii) Kliknij link „utwórz nowy wzór”.

iii) Na następnym ekranie dodaj tytuł wzoru i zacznij dodawać żądane bloki. Musisz dodać co najmniej trzy bloki.

iv) Po zakończeniu dodawania bloków możesz zapisać wzór jako szkic.

v) Następnie sprawdź, czy Twój wzór nie narusza wytycznych przedstawionych tutaj: Wytyczne dotyczące wzorca. Jeśli wszystko jest w porządku, możesz przesłać wzór.

Możesz przeglądać wzory, które masz na miejscu, klikając link „moje wzory” zilustrowany tutaj:

Wzorce renderowane w sekcji „moje wzorce” to te, które są szkicami, wzorcami przesłanymi przez Ciebie i wzorcami oczekującymi na sprawdzenie.

vi) Następnie możesz skopiować nowy blok i wkleić go na swoją stronę lub post.

Jak utworzyć wtyczkę z niestandardowymi wzorami bloków?

Zamiast mieć kod do zarejestrowania wzorca i kategorii w pliku functions.php, możesz zdecydować się na niestandardową wtyczkę, która może być używana do dodawania wzorców i kategorii wzorców. W tym celu musisz wykonać następujące czynności:

i) Uzyskaj dostęp do plików witryny za pośrednictwem panelu hostingowego lub alternatywnie przez FTP za pomocą oprogramowania FTP, takiego jak Filezilla

ii) Przejdź do wp-content > ścieżka do katalogu wtyczek

iii) W katalogu wtyczek utwórz folder o nazwie „wzorce niestandardowe”

iv) W folderze utwórz plik o nazwie custom-patterns.php

v) Dodaj następujący komentarz nagłówka w pliku:

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */

Możesz dostosować powyższy komentarz w nagłówku, aby pasował do żądanej nazwy wtyczki.

vi) Pod komentarzem nagłówka dodaj swój kod, aby zarejestrować wzorzec i kategorię. W naszym przypadku użyjemy kodu, który wcześniej stworzyliśmy, aby zarejestrować nasz wzorzec i kategorię niestandardową. Ostateczny kod będzie zatem następujący:

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */ function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

vii) Na liście wtyczek na pulpicie nawigacyjnym powinieneś teraz mieć widok wtyczki z listy wtyczek. Kliknij link aktywacyjny obok nazwy wtyczki, aby ją aktywować

viii) Po aktywacji powinieneś teraz mieć widok wzoru bloku i niestandardowej kategorii w edytorze bloku, jak pokazano poniżej:

Wyrejestrowanie wzorców blokowych

Możliwe jest usunięcie zarejestrowanych wzorców blokowych. Jeśli na przykład chcesz usunąć wzorzec blokowy „my-plugin/media-text-pattern”, który mieliśmy wcześniej podczas rejestracji, musisz dodać następujący kod w pliku functions.php motywu potomnego:

 function deregister_my_pattern() { unregister_block_pattern( 'my-plugin/media-text-pattern' ); } add_action( 'init', 'deregister_my_pattern' );

W powyższym kodzie musisz zastąpić „my-plugin/media-text-pattern” nazwą wzorca, który zarejestrowałeś.

Wyrejestrowanie kategorii wzorów blokowych

Jeśli chcesz tylko wyrejestrować kategorię wzorców i zachować sam wzorzec, będziesz musiał dodać następujący kod w pliku functions.php motywu potomnego:

 function deregister_pattern_category() { unregister_block_pattern_category( 'custom'); } add_action( 'init', 'deregister_pattern_category');

Powyższy kod wyrejestrowuje kategorię „niestandardową”, którą wcześniej dodaliśmy. Będziesz musiał zastąpić „niestandardowe” kategorią, którą zarejestrowałeś.

Wniosek

W tym artykule przyjrzeliśmy się, czym są wzorce blokowe, jak ich używać, a także rejestrowaniu i wyrejestrowaniu wzorców blokowych i kategorii. Wzory bloków są kluczowe podczas projektowania witryny za pomocą edytora bloków. Ułatwiają projektowanie dynamicznych stron i postów w Twojej witrynie przy niewielkim wysiłku.

Mamy nadzieję, że ten artykuł dostarczy odpowiednich informacji na temat korzystania z wzorców blokowych w Twojej witrynie. Jeśli masz jakieś pytania lub komentarze, prosimy o przesłanie zgłoszenia w sekcji komentarzy poniżej.