Jak tworzyć wzorce blokowe WordPress, aby przyspieszyć tworzenie stron internetowych?

Wzory blokowe będą wielką sprawą dla wszystkich użytkowników WordPressa, a w tym poście pokażę Ci dokładnie, jak tworzyć własne wzorce blokowe.

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

Dwa dni temu wypuściłem nagranie wideo i przedstawiłem tę koncepcję, która wkrótce pojawi się w WordPressie, zwaną wzorcami blogów. To teraz trochę eksperymentalne i naprawdę jestem tym podekscytowany. I myślę, że jeśli ogarniesz swój umysł potencjałem tego, czym są wzorce blokowe, zobaczysz potencjał tego, aby pomóc Ci szybciej dostarczać strony internetowe, jeśli masz klientów, aby móc umożliwić im więcej z ich stronie internetowej.

Więc pokażę ci. Dokładnie jak stworzyć wzór blokowy w tym filmie. Teraz zrobimy kilka rzeczy, które są trochę techniczne, i wiem, że to jest kanał WordPress dla nie-technicznych, więc postaram się, aby było to tak proste, jak to tylko możliwe, ale jesteś do końca przekonamy się, jak proste jest stworzenie jednego z tych wzorów blokowych.

Więc po prostu idźmy dalej i spójrzmy na to. Oto strona, na której mówi się o nowej wersji tej funkcji w jej tworzeniu. Zdolny tylko dla przeciętnych ludzi do stworzenia wzoru blokowego. Więc kiedy przewijam w dół, daje to rodzaj szablonu. Wszystko, co się z tym wiąże, to tworzenie czegoś, co nazywa się funkcją niestandardową.

Ale nie martw się, uczynię to bardzo łatwym dla wszystkich, ale tutaj jest ten mały fragment kodu. Teraz będę miał link w opisie filmu poniżej. Zaprowadzi cię na moją stronę. Otrzymasz również pisemne instrukcje, jak to zrobić. Ten mały fragment kodu, który możesz skopiować i wkleić na swojej własnej stronie internetowej.

OK, oto czego będziemy potrzebować. Jest to nowa funkcja dla Gutenberga i będziesz potrzebować zainstalowanej wtyczki Gutenberga, więc będziesz potrzebować minimalnej wersji 7.8 i to jest to, co ostatnio wyszło. Teraz to, co się stanie, może za cztery do sześciu miesięcy, może do końca lata 2020 r. Będzie to domyślnie włączone do WordPressa, ale na razie będziesz musiał to zrobić, jeśli chcesz to wypróbować , będziesz musiał zainstalować wtyczkę Gutenberg.

Następną rzeczą, którą możesz zrobić, jest to opcjonalne, jeśli nie wiesz, jak dodać niestandardową funkcję do motywu potomnego, a ja już nawet nie używam motywu potomnego, możesz użyć tej bezpłatnej wtyczki, i jest to jedna z najlepszych darmowych wtyczek. Z którym się kiedykolwiek spotkałem, i nazywa się to fragmentami kodu. A to pozwoli nam dodać tę niestandardową funkcję i bardzo łatwy w użyciu, łatwy w zarządzaniu sposób.

Dobra? Więc będziesz tego potrzebować. A to jest opcjonalne. Jest to darmowa wtyczka zwana blokami kadencji. A to, co to robi, to dodanie do Gutenberga wielu funkcji kreatora stron. Jest całkiem schludny w tym, na co pozwala. Możesz przeciągać i zmieniać rozmiar kolumn. Jest w nim wiele elementów, które dodają wiele funkcji tego kreatora stron, ale do Gutenberga jest to całkowicie darmowa wtyczka.

Dobra. Przejdźmy teraz do mojej strony internetowej. Oto strona internetowa. Wszystko jest teraz skonfigurowane. A jeśli nie wiesz, jak zainstalować wtyczkę, pewnego dnia ktoś naprawdę się na mnie wściekł, że nie pokazałem, jak zainstalować wtyczkę i wideo. Idziesz do wtyczek, klikasz na dodaj nową, a następnie tutaj wyszukujesz nazwę tej wtyczki, a następnie klikasz.

Pobierz lub przepraszam, klikasz zainstaluj teraz, a następnie aktywujesz. To bardzo prosty proces. Więc kliknę na moje zainstalowane wtyczki i widać, że mam zainstalowanego Gutenberga i to były opcjonalne bloki kadencji, a oto fragmenty kodu. Więc zamierzam aktywować fragmenty kodu, a teraz możesz zobaczyć, że jest teraz aktywowany tutaj.

Więc idź dalej i kliknij fragmenty kodu, a zobaczysz niektóre z nich. A oto ten przełącznik, który jest przełączony. Wszystkie są wyłączone i tak naprawdę nie musisz zachowywać tych, z którymi są domyślnie. Możesz po prostu kliknąć tutaj i możesz je wszystkie usunąć, ale już poszedłem i dodałem tutaj jeden, zwany szablonem wzorca blokowego.

Więc co byś zrobił. Kliknij dodaj nowy i możesz nazwać ten szablon wzorca blokowego w tym małym fragmencie kodu, który pokazałem tutaj, ale zamierzam dać ci zmodyfikowaną wersję tego na mojej stronie internetowej. Po prostu skopiujesz i wkleisz to tutaj, a następnie klikniesz Zapisz zmiany.

Nie będziesz klikać Zapisz i aktywuj, będziesz klikać, aby zapisać zmiany, a za chwilę pokażę Ci dlaczego. Dobra. Więc teraz będziesz chciał zrobić ten wzór blokowy. A wzór blokowy to po prostu zapisana sekcja. Więc jeśli używasz kreatora stron, teraz wiesz, że możesz zapisywać sekcje, a niektóre z nich mają wstępnie zaprojektowane sekcje, ale myślę, że wrażenia użytkownika są znacznie lepsze w Gutenbergu.

Więc to, co będziesz chciał zrobić, to przejść do stron. I kliknij dodaj nowy, a będziesz chciał to nazwać. Um, właściwie pozwól mi pozbyć się tej trasy. Będziesz chciał nazwać ten wzór blokowy i właśnie tutaj stworzymy ten wzór blokowy. Nie będę teraz przechodził przez tworzenie wzoru blokowego.

Pokażę wam ten, który już stworzyłem i to . Tutaj. Oto wzór blokowy, który stworzyłem. Widać, że to ta sekcja. Ma to kolorowe tło. Mam tu nagłówek, kilka podtytułów i kilka przycisków, i wstawiam wideo. Stworzę więc ten wzór blokowy, abym mógł za pomocą dwóch kliknięć myszką dodać to w dowolnym miejscu na mojej stronie.

Więc to, co zamierzam zrobić, to kliknąć w prawym górnym rogu, są te trzy kropki. Są one dość trudne do zauważenia, a kiedy na nie klikniesz, pojawi się opcja, która mówi o edytorze kodu. Więc będziesz chciał kliknąć edytor kodu, a następnie pokaże ci cały kod, który jest związany z uczynieniem tego bloga wzorcem blogowym z blokowym wzorcem.

Dobra? Więc klikniesz tutaj, a następnie klikniesz kontrolkę a lub polecenie a na swoim komputerze, aby zaznaczyć to wszystko. I są nowy rok. Umieść go w schowku. Więc zamierzam to zrobić kontrolując C. więc teraz jest w moim schowku. Więc teraz zamierzam się stąd wydostać. Właściwie, jeśli chcesz wyjść z tego widoku, jest tutaj mały X, który mówi edytor kodu wyjścia, a teraz pokaże mi to tak, jak zwykle jest tutaj.

Dobra. Możesz więc zapisać to jako wersję roboczą, jeśli chcesz, ale nie będziesz tego potrzebować. To jest tylko po to, abyś stworzył ten wzór blokowy i możesz stworzyć wzór blokowy, który jest czymkolwiek i nie musi to być jeden blok rzeczy. Może to być na przykład cały szablon posta na blogu. Ok, więc teraz kliknę w miejscu, w którym wydostaję się z edytora bloków.

Teraz przejdę do fragmentów kodu. Więc właśnie tutaj stworzyłem ten szablon wzoru blokowego. Zamierzam kliknąć klon, a teraz został stworzony jego klon, a następnie kliknę w tytuł, aby rozpocząć edycję. Więc jeśli chodzi o tytuł, zmienię go na tytuł, który ma sens w zarządzaniu nim.

Więc dla mnie, po prostu go wymienię. Bohater z wideo. Więc teraz wiem, co to jest, kiedy patrzę na listę w przyszłości. OK, więc jest tu kilka rzeczy, które musisz edytować. Trzy rzeczy. To bardzo proste. Pierwszym z nich jest imię. Więc to może być dowolna nazwa, musi być pisana małymi literami, bez spacji i dziwnych znaków.

Więc pójdę dalej i wstawię teraz imię. Możesz zobaczyć, że nazwałem go bohaterem z wideo. Następnie właśnie tutaj musisz wpisać tytuł. Zastępujemy więc tytuł tego słowa i oto, co zostanie wyświetlone. Patrzysz na listę wzorców blogów, wzorców blokowania, a nie wzorców blokowania bloga. A jeśli zauważysz, możesz, to jest przyjazna nazwa, więc może zawierać spacje.

Uh, nie umieściłbym tam po prostu żadnych dziwacznych postaci. Spaces jest w porządku. Więc to właśnie pokaże na tej liście ai zaraz tutaj, gdzie jest napisane wzór a. Zamierzasz po prostu wkleić to, co właśnie skopiowałeś do schowka. Teraz chcę, żebyś zanotował jedną rzecz. Dla każdego z nich. Zostawiłem mały apostrof z przodu iz tyłu.

Widzisz, że tam jest apostrof, który musi tam być. Jeśli przypadkowo to usuniesz, odłóż go z powrotem. Dobra. Po prostu się zmieniamy. Po prostu zastępujemy tekst zastępczy. Więc tutaj nie chcę wymieniać wszystkiego. Chcę tylko zastąpić wzorzec słowa, więc go podświetlę, a następnie wkleję to, co skopiowałem.

I oto jest. Więc teraz zamierzam przewinąć w dół i tym razem kliknę na zapisz zmiany i aktywuj. I tak teraz powinno być napisane, że fragment kodu został zaktualizowany i aktywowany. A kiedy kliknę wszystkie fragmenty, możesz zobaczyć, że ten jeden bohater z wideo jest włączony. Więc w przyszłości, aby uzyskać dodatkowe wzorce blokowe, chcę przejść do miejsca, w którym jest napisane szablon wzorca blokowego, a następnie kliknąć klon i zrobić ten szablon wzorca blokowego w ten sposób.

W ten sposób zawsze mam tam szablon. Teraz, jeśli już wiesz i masz własny sposób dodawania niestandardowych funkcji, nie potrzebujesz fragmentów kodu i innych tego typu rzeczy, możesz umieścić go tam, gdzie chcesz. To po prostu o wiele łatwiejszy sposób na zarządzanie tym, jeśli mnie o to poprosisz. Ok, więc teraz przejdę do stron po moim kliknięciu dodaj nowe, a jeśli chcesz zobaczyć.

Wzory blokowe. Uh, właśnie tutaj jest ikona. A kiedy najedziesz na to kursorem, wyświetli się wzór blokowy. A kiedy na nią kliknę, zobaczysz kilka wzorów bloków, z którymi obecnie eksperymentujemy. Ale kiedy przewiniesz w dół, zobaczysz ten wzór blokowy, który stworzyłem. A co jest naprawdę fajne, to generuje podgląd miniatury.

I robi to dynamicznie. Masz narzędzia do tworzenia stron, które nawet tego nie robią. Uh, i to znacznie ułatwia zarządzanie wzorami bloków. Tak więc, tutaj możesz zobaczyć, że jest napisane bohater z szablonem. Teraz, jeśli chcę użyć tego w dowolnym miejscu na mojej stronie, wystarczy jedno kliknięcie myszką. I oto jest. I wszystko, co musiałbym w tym momencie zrobić, żeby zacząć zmieniać niektóre teksty, zmienić linki na przyciski.

Mogę kliknąć tutaj i zmienić wideo. Więc. W ten sposób tworzysz wzór blokowy. Myślę, że to wielka sprawa, ponieważ to, co się wydarzy, jest tematem. Deweloperzy i twórcy wtyczek będą mogli stworzyć dla Ciebie te wzorce blokowe, więc będzie o wiele szybciej, szybciej i łatwiej zbudować witrynę internetową za pomocą natywnego narzędzia do budowania bloków, które już zawiera WordPress.

Nie ma nic do kupienia, nie ma rozrostu kodu. Nie ma żadnej z tych rzeczy i. Co posuwa się jeszcze dalej. Możesz zobaczyć, jak łatwo jest ci tworzyć własne wzory bloków i naprawdę łatwo zobaczyć to na liście. Kliknij przycisk i zostanie tam umieszczony. Teraz możesz pomyśleć o tym, o ile łatwiej zbudować witrynę internetową, gdy masz własną bibliotekę wzorców blokowych.

Więc jeśli tworzysz strony internetowe dla klientów i nie chcesz używać kreatora stron. Po prostu chcesz użyć wbudowanego konstruktora bloków. Możesz stworzyć własną bibliotekę wzorów. Widziałeś, jakie to proste. Mogę to zrobić. Mogłeś to zrobić. Uh, możesz stworzyć własną bibliotekę wzorców blokowych, którą możesz przenosić z witryny do witryny, i możesz pokazać klientowi, jak mogą to zbudować.

Nie dotyczy to tylko stron, dotyczy to postów i nie ogranicza się tylko do jednej sekcji, którą widziałeś. Zasadniczo wszystko, co możesz stworzyć na stronie. Możesz zrobić wzór blokowy. Więc jeśli używasz kreatora bloków tylko do postów na blogu, a są pewne elementy, których chcesz używać wielokrotnie w poście na blogu, aby ulepszyć układ postów na blogu, cóż, możesz utworzyć wzór blokowy dla to.

I to jest naprawdę proste. Jedno kliknięcie i możesz z niego korzystać. W rzeczywistości całe szablony postów na blogu. Więc jeśli istnieje formuła, którą stosujesz dla sekcji postu na blogu, możesz uczynić ten post w całym blogu szablonem blokowym. To jedno kliknięcie zostanie zastosowane, a następnie wszystko, co musisz zrobić, to wskazać, kliknąć i edytować.

Więc ostatnią rzeczą, zanim tu zakończymy, jest nowy koncept i jest to coś do przemyślenia w ciągu najbliższych kilku miesięcy. Eksperymentuj z teraz. To nie całkiem Yeti, Yeti. Nie jest jeszcze gotowy na prime time, bo jeśli zauważyłeś, um, jedynym negatywem, jaki widziałem, jest to, że patrzysz na bloga. Zobacz, tam wracam.

Jeśli patrzysz na wzorce blokowe, jest to po prostu wyższa lista artykułów, przez którą musisz przewijać, więc muszą usprawnić proces kategoryzacji i organizowania. Może mają jakiś interfejs, który sprawi, że będzie bardziej wizualny i łatwiejszy w obsłudze. Jeśli masz zamiar mieć 50 różnych bloków.

Wzory. Więc po prostu muszą to poprawić. Część składni kodu może się trochę zmienić. Kto wie, kiedy to w końcu wyjdzie. Ale cały sens tego filmu ma pokazać ci, co będzie możliwe bardzo, bardzo szybko, abyś mógł zacząć. Zastanawiam się, jak może to odnieść do Twojego przepływu pracy i tego, co robisz jako twórca stron internetowych.

Tak czy inaczej, to wszystko, co mam dla Ciebie w tym poście. Mam nadzieję, że docenisz zaawansowane spojrzenie na przyszłość WordPressa w ten sposób, a jeśli doceniłeś ten film lub znalazłeś jakąś wartość, rozważ pokazanie go i udostępnij ten film, aby ludzie mogli zobaczyć, co szykuje się za rogiem.