Jak tworzyć wzory bloków, aby przyspieszyć budowanie strony internetowej

Wzory bloków będą wielką sprawą dla wszystkich użytkowników WordPress. W tym poście pokażę ci dokładnie, jak tworzyć własne wzorce bloków.


dodatek działań („init”, funkcja () {

register_pattern („NAME”, [
„title” => __ („TITLE”),
„content” =>
'WZÓR'
]);
});

Dwa dni temu wyszedłem z wideo i przedstawiłem tę koncepcję, która pojawia się tuż za rogiem WordPress, zwaną wzorami blogowymi. W tej chwili jest to trochę eksperymentalne i jestem tym bardzo podekscytowany. I myślę, że jeśli skupisz się na potencjale, jakie są wzorce bloków, możesz zobaczyć potencjał, aby to zrobić, aby pomóc Ci szybciej dostarczać strony internetowe, jeśli masz klientów, aby móc im więcej robić z ich stronie internetowej.

Więc ci pokażę. Dokładnie jak stworzyć wzór blokowy w tym filmie. Teraz zrobimy kilka rzeczy, które są trochę po stronie techników i wiem, że to kanał WordPress dla nie-techników, więc postaram się uczynić to tak prostym, jak to możliwe, ale ty do końca przekonam się, jak łatwo jest stworzyć jeden z tych wzorów bloków.

Przejdźmy więc do tego. Oto strona, na której mówi o nowej wersji tej funkcji. W stanie tylko przeciętni ludzie mogą utworzyć wzór blokowy. Więc kiedy przewijam w dół, daje to rodzaj szablonu. Więc wszystko, co się w to angażuje, to tworzenie czegoś zwanego funkcją niestandardową.

Ale nie martw się, zrobię to bardzo łatwo dla wszystkich, ale właśnie tam znajduje się ten mały fragment kodu. Teraz będę mieć link w opisie filmu poniżej. Zabierze Cię na moją stronę internetową. Otrzymasz pisemne instrukcje, jak to zrobić, a także. Ten mały fragment kodu, który możesz skopiować i wkleić na swojej stronie internetowej.

Dobra, oto czego będziemy potrzebować. Jest to nowa funkcja dla Gutenberga. Będziesz musiał zainstalować aktywowaną wtyczkę Gutenberg, więc będziesz potrzebować minimalnej wersji 7.8 i właśnie to niedawno wyszło. Teraz to, co się stanie, może za cztery do sześciu miesięcy, może do końca lata 2020 roku zostanie to domyślnie włączone do WordPress, ale na razie będziesz musiał, jeśli chcesz to wypróbować , musisz zainstalować wtyczkę Gutenberg.

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

W porządku? Więc będziesz tego potrzebować. I to jest opcjonalne. Jest to darmowa wtyczka zwana blokami kadencji. Dzięki temu Gutenberg dodaje wiele funkcji do tworzenia stron. To jest całkiem fajne w tym, co pozwala ci robić. Możesz przeciągać i zmieniać rozmiar kolumn. Jest w nim wiele elementów, które dodają wiele funkcji tego narzędzia do budowania stron, ale dla Gutenberga i jest to całkowicie darmowa wtyczka.

W porządku. Przejdźmy teraz do mojej strony. Oto strona internetowa. Wszystko jest już skonfigurowane. A jeśli nie wiesz, jak zainstalować wtyczkę, ktoś naprawdę się na mnie wściekł za to, że nie pokazałem, jak zainstalować wtyczkę i wideo. Idziesz do wtyczek, klikasz na dodaj nowy, a potem właśnie tutaj szukasz nazwy tej wtyczki, a następnie klikasz.

Pobierz lub przepraszam, kliknij teraz, a następnie aktywuj. To bardzo prosty proces. Kliknę więc zainstalowane wtyczki i widać, że mam zainstalowanego Gutenberga, i to były opcjonalne bloki kadencji, a oto fragmenty kodu. Zamierzam więc aktywować fragmenty kodu i widać, że teraz jest aktywowany.

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

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

Nie będziesz klikać przycisku Zapisz i aktywuj, kliknij przycisk Zapisz, aby zapisać zmiany, a ja pokażę ci dlaczego za chwilę. W porządku. Więc teraz chcesz zrobić ten wzór bloku. A wzór blokowy to po prostu zapisana sekcja. Więc jeśli używasz narzędzia do tworzenia stron, teraz wiesz, że możesz zapisywać sekcje, a niektóre z nich mają wstępnie zaprojektowane sekcje, ale wrażenia użytkownika, myślę, że w Gutenberg jest znacznie lepiej.

Więc to, co chcesz zrobić, to przejść do stron. I kliknij dodaj nowy, a będziesz chciał nazwać to. Um, właściwie pozbyłem się tej trasy. Będziesz chciał nazwać ten wzorzec bloku, i właśnie tutaj stworzymy ten wzorzec bloku. Nie zamierzam teraz tworzyć wzoru bloków.

Pokażę ci ten, który już stworzyłem i jest. Tutaj. Oto wzór, który utworzyłem. Widać było, że to ta sekcja. Ma to kolorowe tło. Mam tutaj nagłówek, kilka podtytułów i kilka przycisków, a następnie wstawiam wideo. Więc zrobię z tego wzór bloków, dzięki czemu będę mógł za pomocą dwóch kliknięć myszy dodać to do dowolnego miejsca na mojej stronie.

Więc zamierzam kliknąć w prawym górnym rogu, są te trzy kropki. Są dość trudne do zobaczenia, a kiedy je klikniesz, pojawi się ta opcja, która mówi edytor kodu. Będziesz więc chciał kliknąć edytor kodu, a następnie pokaże cały kod związany z przekształceniem tego bloga we wzorzec blokowy.

W porządku? Więc klikniesz tutaj, a następnie klikniesz klawisz Control lub polecenie A na komputerze, aby zaznaczyć to wszystko. I są nowy rok. Umieść go w schowku. Więc zrobię to 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 tu mały X, który mówi edytor kodów wyjścia, a teraz pokaże mi, jak to jest normalnie tutaj.

W porządku. Możesz więc zapisać to jako wersję roboczą, jeśli chcesz, ale nie będziesz tego potrzebować. To jest tylko dla ciebie, aby utworzyć ten wzór bloku, i możesz stworzyć wzór bloku, który jest dowolny i nie musi to być jeden blok rzeczy. Może to być na przykład cały szablon posta na blogu. Okej, więc teraz kliknę tam, gdzie jest to, co wyciąga mnie z edytora bloków.

Teraz wrócę do fragmentów kodu. Właśnie tutaj utworzyłem szablon wzoru bloku. Kliknę klon, a teraz utworzono go, a następnie kliknę tytuł, aby rozpocząć edycję. W przypadku tytułu zamierzam zmienić go na tytuł, który ma sens w zarządzaniu nim.

Więc dla mnie, po prostu to nazwiemy. Bohater z wideo. Teraz wiem, co to jest, kiedy patrzę na listę w przyszłości. Okej, więc jest kilka rzeczy, które musisz edytować. Trzy rzeczy. To bardzo proste. Pierwszy to imię. Może to być dowolna nazwa, musi być pisana małymi literami, bez spacji i funky.

Więc pójdę naprzód i nadam teraz imię. Widać, że nazwałem go bohaterem dzięki wideo. Następnie tutaj musisz wpisać tytuł. Zastępujemy więc ten tytuł słowa i właśnie to się pojawi. Patrzysz na listę wzorców blogów, bloków, a nie wzorców bloków blogów. A jeśli zauważysz, możesz, to przyjazna nazwa, więc może mieć spacje.

Uh, nie umieściłbym tam żadnych funky. Spacje są w porządku. To właśnie pokaże na tej liście a następnie tutaj, gdzie jest napisane wzór a. Wkleisz to, co właśnie skopiowałeś do schowka. Teraz chcę, żebyś odnotował jedną rzecz. Dla każdego z nich. Zostawiłem małą apostrofę z przodu iz tyłu.

Widzicie, że musi tam być apostrof. Jeśli to przypadkowo usuniesz, odłóż go z powrotem. W porządku. Po prostu się zmieniamy. Właśnie zastępujemy tekst zastępczy. Więc tutaj nie chcę wszystkiego zastępować. Chcę tylko zastąpić wzór słowa, więc zaznaczę go, a następnie wkleję to, co skopiowałem.

I oto jest. Więc teraz przewiń w dół i tym razem kliknę zapisać zmiany i aktywować. I tak teraz powinien powiedzieć, że snippet został zaktualizowany i aktywowany. A kiedy kliknę wszystkie fragmenty, zobaczysz, że ten jeden bohater z wideo jest włączony. Tak więc w przyszłości, aby uzyskać dodatkowe wzory bloków, chcę przejść do miejsca, w którym jest napisane szablon wzoru bloku, a następnie kliknąć klon i utworzyć szablon szablonu bloku.

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

Blokuj wzory. Uh, tutaj jest jej ikona. A kiedy najedziesz na niego kursorem, wyświetli się wzór bloków. A kiedy kliknę na niego, zobaczysz niektóre wzorce bloków, z którymi obecnie eksperymentuje się. Ale kiedy przewiniesz w dół, zobaczysz wzór bloków, który stworzyłem. A naprawdę fajne jest to, że generuje podgląd miniatur.

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

Mogę kliknąć tutaj i mogę zmienić wideo. Więc. W ten sposób tworzysz wzór bloku. To chyba wielka sprawa, ponieważ to, co się wydarzy, będzie tematem. Programiści i twórcy wtyczek będą mogli tworzyć dla Ciebie te wzorce bloków, więc zbudowanie strony internetowej przy użyciu natywnego narzędzia do budowania bloków, które WordPress już zawiera, będzie znacznie szybsze, szybsze i łatwiejsze..

Nie ma nic do kupienia, nie ma wzdęcia kodu. Nie ma żadnej z tych rzeczy i. Co idzie dalej? Możesz zobaczyć, jak łatwo jest tworzyć własne wzorce bloków, i naprawdę łatwo jest to zobaczyć na liście. Kliknij przycisk i zostanie tam umieszczony. Teraz możesz pomyśleć o tym, jak łatwiej zbudować stronę internetową, gdy masz własną bibliotekę wzorców bloków.

Więc jeśli tworzysz strony internetowe dla klientów i nie chcesz korzystać z programu budującego strony. Po prostu chcesz użyć wbudowanego konstruktora bloków. Możesz stworzyć własną bibliotekę wzorów. Widziałeś, jakie to łatwe. Mogę to zrobić. Mogłaś to zrobić. Możesz utworzyć własną bibliotekę wzorców bloków, które możesz przenosić z witryny do witryny, i możesz pokazać klientowi, jak to zbudować.

Teraz nie dotyczy to tylko stron, dotyczy 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 bloku. Jeśli więc używasz konstruktora bloków tylko do postów na blogu, a istnieją pewne elementy, których chcesz używać w postach na blogu, aby poprawić układ postów na blogu, możesz utworzyć wzorzec bloku dla to.

I to jest naprawdę łatwe. Jedno kliknięcie i możesz z niego korzystać. W rzeczywistości całe szablony postów na blogu. Jeśli więc istnieje formuła, którą stosujesz do sekcji posta na blogu, możesz sprawić, że cały blog będzie szablonem bloku. To jedno kliknięcie zostanie zastosowane, a następnie wszystko, co musisz zrobić, to wskazać, kliknąć i edytować.

Ostatnią rzeczą, zanim tu podsumujemy, jest to nowa koncepcja, nad którą warto się zastanowić przez kilka następnych miesięcy. Eksperymentuj z teraz. To nie do końca Yeti, Yeti. Nie jest jeszcze gotowy na najwyższy czas, bo jeśli zauważyłeś, jedyny minus, jaki widziałem, to kiedy patrzysz na blog. Zobacz, znowu idę.

Jeśli patrzysz na wzorce bloków, to tylko wyższa lista artykułów, w której musisz przewijać, więc muszą usprawnić proces kategoryzacji i organizowania. Być może mają jakiś interfejs, aby był bardziej wizualny i łatwy w obsłudze. Jeśli masz 50 różnych bloków.

Wzory Muszą to tylko poprawić. Część składni kodu może się nieco zmienić. Kto wie, kiedy w końcu to wyjdzie. Ale celem tego filmu jest pokazanie, co będzie możliwe bardzo, bardzo szybko, abyś mógł zacząć. Zastanawiasz się, jak to może mieć zastosowanie do Twojego przepływu pracy i tego, co robisz jako twórca stron internetowych.

W każdym razie to wszystko, co mam dla ciebie w tym poście. Mam nadzieję, że docenisz zaawansowane spojrzenie na przyszłość WordPress w ten sposób, a jeśli doceniasz ten film lub znajdziesz jakąś wartość, zastanów się nad tym, aby podnieść kciuki i udostępnić ten film, aby ludzie mogli zobaczyć, co będzie za rogiem.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector