Co musisz wiedzieć o katalogu wzorców WordPress

Opublikowany: 2021-08-26

Pod koniec zeszłego roku napisałem obszerny przewodnik o tym, czym są wzorce WordPress, do czego służą oraz jak je tworzyć i używać w edytorze bloków WordPress. W ciągu nieco ponad pół roku, dzięki pracy stojącej za całą społecznością WordPress, nastąpił ogromny postęp w rozwoju wzorców blokowych. Widzimy, jak po opublikowaniu wersji WordPress 5.8 jej dostępność i wykorzystanie gwałtownie rośnie. Z tego powodu uważam, że warto być na bieżąco z katalogiem wzorców WordPress, ponieważ wpłynie to na sposób, w jaki przeprojektujemy nasze strony i motywy w przyszłości.

Jak już wcześniej skomentowaliśmy, wzorzec blokowy to zestaw predefiniowanych sekcji lub fragmentów składających się z grupy bloków, które można wykorzystać do tworzenia stron i postów. Te projekty mogą być czymś tak prostym, jak sekcja z dwoma przyciskami lub sekcja cenowa z krzykliwymi i złożonymi projektami.

Wstaw i edytuj wzory bloków

Wstawianie wzoru blokowego z edytora bloków jest tak samo proste, jak dodawanie dowolnego bloku. Po kliknięciu ikony + w lewym górnym rogu edytora pojawia się wyskakujące okno dialogowe, w którym można dodawać bloki, wzory lub inne elementy wielokrotnego użytku.

Wstawianie wzoru blokowego w edytorze WordPress
Wyszukaj wzór blokowy w edytorze WordPress.

W zakładce Wzory znajdziesz listę rozwijaną, w której możesz wybrać według kategorii wzory do wyszukania. Niektóre ze znalezionych wzorców są domyślnie dostarczane z WordPress, inne są specyficzne dla zainstalowanego motywu, a niektóre będą pochodzić z wtyczek. W rzeczywistości istnieje wiele wtyczek, które dodadzą zupełnie nowy zestaw pięknych wzorów!

Po wybraniu dowolnego wzoru zestaw bloków, które go tworzą, zostanie automatycznie dodany do Twojego posta lub strony. Wszystko, co musisz teraz zrobić, to dostosować je tak, aby zawierały żądaną zawartość.

Edycja jednego z bloków tworzących wzór
Edycja jednego z bloków tworzących wzór.

Kopiuj i wklej z katalogu wzorców WordPress

Pod koniec kwietnia 2021 roku WordPress opublikował katalog Pattern na WordPress.org. W chwili pisania tego posta (23 sierpnia 2021 r.) na WordPress.org nie ma pozycji menu umożliwiającej bezpośrednie przejście do tej strony. Przynajmniej nie ma żadnego po angielsku, bo jest po hiszpańsku.

Katalog wzorców na WordPress.org
Katalog wzorców na WordPress.org

Chociaż na pierwszy rzut oka ten katalog może wydawać się taki sam jak katalog motywów lub wtyczek, ma on funkcję bardzo łatwego dodawania dowolnego wzorca do dowolnego postu lub strony.

Wyszukiwanie wzorców blokowych w katalogu wzorców WordPress.org jest bardzo podobne do tego, co masz na pulpicie WordPress. Możesz wyszukiwać według słów kluczowych lub masz również zestaw kategorii, aby zawęzić wyszukiwanie. Dodatkowo, jeśli jesteś zalogowany na WordPress.org, możesz dodać zakładkę do dowolnego wzoru.

Dwukrotne kliknięcie na wzór pokazuje go szczegółowo i możesz wybierać pomiędzy różnymi wymiarami ekranu, aby zobaczyć, jak wygląda na każdym z nich.

Wzór katalogu kart społecznościowych zespołu WordPress
Wzór katalogu WordPress: Zespołowe karty społecznościowe

Jak widać na powyższym obrazku masz przycisk, za pomocą którego możesz skopiować wzór i po wklejeniu na dowolną stronę lub post, masz już cały zestaw klocków, dzięki czemu możesz następnie dokonać niezbędnych modyfikacji, aby dostosować je do Twoja strona internetowa, tak jak lubisz:

Zastępując zdjęcia, teksty i linki, szybko budujesz sekcję bloków, która idealnie pasuje do tego, czego potrzebujesz na stronie.

Łatwe, prawda?

Dodaj wzorce do katalogu wzorców WordPress

Chociaż wciąż trwają prace nad tym, jak powinno wyglądać ostateczne środowisko tworzenia i przesyłania wzorców do Katalogu wzorców WordPressa, jest teraz otwarte zaproszenie do przesyłania własnych wzorców do opublikowania w katalogu. Zobaczmy na prostym przykładzie, jak to robimy.

Najpierw musisz stworzyć swój własny wzór. Możesz go utworzyć bezpośrednio w edytorze bloków, tak jak w przypadku wzorca referencji, który właśnie stworzyłem poniżej z tego, który mamy na naszej stronie głównej. Pamiętaj, że jeśli dołączasz obrazy, muszą one mieć bezpłatną licencję do użytku komercyjnego.

Co mówią o nas nasi klienci

Nasi klienci nas kochają, ponieważ…

Imagen de un perfil de mujer

️️️️️.
WOW, to naprawdę działa!
Jak dotąd ta wtyczka jest najlepszym narzędziem, z którego korzystaliśmy. Wszyscy nasi klienci są zachwyceni pracą z tą wtyczką. Łatwy w użyciu i ładny interfejs użytkownika.

Imię Nazwisko – Stanowisko

Imagen de un perfil de mujer

️️️️️.
WOW, to naprawdę działa!
Jak dotąd ta wtyczka jest najlepszym narzędziem, z którego korzystaliśmy. Wszyscy nasi klienci są zachwyceni pracą z tą wtyczką. Łatwy w użyciu i ładny interfejs użytkownika.

Imię Nazwisko – Stanowisko

Imagen de un perfil de mujer

️️️️️.
WOW, to naprawdę działa!
Jak dotąd ta wtyczka jest najlepszym narzędziem, z którego korzystaliśmy. Wszyscy nasi klienci są zachwyceni pracą z tą wtyczką. Łatwy w użyciu i ładny interfejs użytkownika.

Imię Nazwisko – Stanowisko

Następnie musisz mieć Konto Github i wypełnij predefiniowany formularz, w którym musisz podać:

  • opis wzoru,
  • tytuł,
  • kategorię tych dostępnych w katalogu,
  • zrzut ekranu wzoru,
  • kredyty graficzne, które dołączyłeś, i
  • znacznik blokowy. Aby to zrobić, wystarczy ustawić mysz w grupie, która tworzy wzór, kliknąć przycisk z ikoną trzech kropek, a następnie kliknąć Kopiuj (aby móc wkleić go do Github).
Wysyłanie nowego wzorca do katalogu wzorców WordPress
Edycja przesyłania nowego wzorca do katalogu wzorców WordPress.

I to wszystko. Możesz przejść do zakładki Podgląd , aby zobaczyć, jak poszło, a na koniec kliknąć przycisk Prześlij nowy problem .

Widok wzorców wysłany do katalogu wzorców WordPress
Widok wzorca przesłanego do katalogu wzorców WordPress.

Teraz wystarczy poczekać, aż ktoś go przejrzy, aby stał się dostępny w katalogu wzorców WordPress.

Aktualności katalogowe

Jak wspomniałem wcześniej, proces przesyłania wzorów jest wciąż w fazie rozwoju. Trwają prace, aby nie trzeba było przesyłać z GitHub i wystarczy być zalogowanym do WordPress.org.

Pomysł, nad którym pracujemy, polega na tym, że z https://wordpress.org/patterns/new-pattern/ (obecnie strona jest pusta) zobaczysz stronę podobną do poniższego obrazu, na którym po zalogowaniu się do WordPress.org, będziesz miał przycisk Utwórz wzór.

Propozycja nowej strony tworzenia wzorów
Makieta nowej strony tworzenia wzorców (źródło: Block Pattern Directory).

Aby utworzyć wzorzec, będziesz mógł użyć hostowanej przez WordPress instancji edytora bloków. Ten edytor będzie działał (w większości) jak normalny edytor bloków, ale z kilkoma poprawkami. Pierwsza zmiana polega na tym, że będziesz mieć niestandardową wersję wyskakującego okienka powitalnego edytora, skupioną na tworzeniu i przesyłaniu wzorców.

Edytor wzorców powitalna makieta wyskakująca
Edytor wzorców powitalny makieta wyskakująca (źródło: katalog wzorców WordPress.org.

Z drugiej strony pasek boczny edycji wzorca będzie również zawierał informacje o nim, takie jak tytuł, opis i kategorie.

Makieta paska bocznego edytora wzorców
Makieta paska bocznego edytora wzorców (źródło: katalog wzorców WordPress.org).

Na koniec będziesz mieć możliwość przesłania wzoru do sprawdzenia i udostępnienia go reszcie świata.

Makieta zgłoszenia wzorca do recenzji i publikacji w katalogu wzorców
Makieta przesłanego wzorca do recenzji i publikacji w katalogu wzorców (źródło: katalog wzorców WordPress.org).

Zreasumowanie

Wzorce blokowe WordPress prawdopodobnie staną się najczęściej używanymi elementami do projektowania stron i postów. Są wystarczająco przydatne, aby dodawać sekcje, które mają sens jako całość i które pozwalają budować strony znacznie szybciej, niż gdybyś musiał dodawać każdy z bloków, które tworzą tę sekcję, jeden po drugim. A wyszukiwanie wzorców w katalogu zostanie ustandaryzowane w podobny sposób jak w przypadku wtyczek i motywów.

Osobiście, gdy teraz patrzę na dostępne wzory w katalogu, nadal trudno mi znaleźć te, które wykorzystałbym bezpośrednio na mojej stronie. Ale wiem, że to się zmieni za kilka dni. Gdy świetni projektanci zaczną dodawać swoje propozycje, będziemy mieli na wyciągnięcie ręki ogromną eksplozję projektów, które pozwolą nam znacznie szybciej aktualizować nasze strony.

Zdjęcie Nicka Morrisona na Unsplash.