Czy chcesz utworzyć niestandardowy blok WordPress dla swojej witryny?
Chociaż WordPress zawiera wiele podstawowych bloków do tworzenia treści, możesz potrzebować czegoś bardziej specyficznego dla swojej witryny.
W tym artykule pokażemy dwa sposoby tworzenia niestandardowych bloków Gutenberg dla witryny WordPress.
Dlaczego warto tworzyć niestandardowe bloki WordPress?
WordPress jest wyposażony w intuicyjny edytor bloków, który umożliwia łatwe tworzenie postów i stron poprzez dodawanie treści i elementów układu jako bloków.
Domyślnie WordPress jest dostarczany z kilkoma powszechnie używanymi blokami. Wtyczki WordPress mogą również dodawać własne bloki, z których można korzystać.
Czasami jednak możesz chcieć utworzyć własny niestandardowy blok, aby zrobić coś konkretnego na swojej stronie WordPress, ponieważ nie możesz znaleźć wtyczki bloków, która działa dla Ciebie.
Dzięki niestandardowym blokom możesz dodać do swojej witryny unikalne funkcje i funkcjonalności, które mogą nie być dostępne w gotowych blokach. Może to pomóc zautomatyzować procesy lub usprawnić tworzenie treści na blogu WordPress.
Na przykład, można utworzyć niestandardowy blok do wyświetlania referencji, a następnie łatwo wstawić i zarządzać tym blokiem bez znajomości kodowania.
Powiedziawszy to, zobaczmy, jak łatwo utworzyć całkowicie niestandardowy blok w WordPress.
W tym samouczku pokażemy dwie metody tworzenia niestandardowego bloku. Możesz użyć szybkich linków poniżej, aby przejść do wybranej metody:
Metoda 1: Tworzenie niestandardowych bloków dla WordPress przy użyciu WPCode (zalecane)
Jeśli jesteś początkującym i nie masz doświadczenia w kodowaniu, ta metoda jest dla Ciebie.
WPCode to najlepsza na rynku wtyczka do tworzenia fragmentów kodu WordPress, która sprawia, że dodawanie niestandardowego kodu do witryny jest bardzo łatwe i bezpieczne.
Jest ona wyposażona w funkcję fragmentów bloków, która umożliwia łatwe tworzenie niestandardowych bloków dla witryny WordPress bez pisania jakiegokolwiek kodu.
Najpierw należy zainstalować i aktywować wtyczkę WPCode. Aby uzyskać szczegółowe instrukcje, warto zapoznać się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.
Uwaga: WPCode oferuje również darmową wersję, której można użyć do dodania niestandardowego kodu do swojej witryny. Będziesz jednak potrzebować wersji Pro wtyczki, aby odblokować funkcję niestandardowych fragmentów bloków.
Po aktywacji należy przejść do strony Code Snippets ” + Add Snippet na pasku bocznym administratora WordPress.
Gdy już tam będziesz, kliknij przycisk „Use Snippet” pod opcją „Add Your Custom Code (New Snippet)”.
Spowoduje to przejście do strony „Create Custom Snippet”, gdzie możesz zacząć od wpisania nazwy niestandardowego bloku, który zamierzasz utworzyć.
Gdy już to zrobisz, wybierz opcję „Blocks Snippet” z rozwijanego menu „Code Type” w prawym rogu ekranu.
Spowoduje to wyświetlenie przycisku „Edytuj za pomocą edytora bloków” w polu „Podgląd kodu”.
Wystarczy kliknąć ten przycisk, aby uruchomić edytor bloków.
Teraz na ekranie pojawi się monit z prośbą o zapisanie fragmentu kodu w celu załadowania go do edytora bloków. Wystarczy kliknąć przycisk „Tak”, aby przejść dalej.
Teraz, gdy jesteś w edytorze bloków, możesz łatwo utworzyć niestandardowy blok, korzystając z gotowych bloków dostępnych w menu bloków.
W tym samouczku będziemy tworzyć niestandardowy blok do dodawania referencji na swojej stronie.
Najpierw należy kliknąć przycisk „+” w lewym górnym rogu ekranu, aby otworzyć menu bloków.
Następnie przeciągnij i upuść blok Heading do interfejsu edytora bloków i nadaj mu nazwę „Testimonials”.
Następnie możesz użyć bloków akapitu, cytatu lub cytatu, aby dodać referencje od różnych klientów na swojej stronie internetowej.
Możesz nawet użyć bloków obrazu, logo witryny, ikon społecznościowych lub sloganu witryny, aby jeszcze bardziej dostosować blok Opinie.
Możesz także dostosować rozmiar, kolor tekstu lub kolor tła swoich referencji w panelu bloków po prawej stronie ekranu.
Po zakończeniu nie zapomnij kliknąć przycisku „Aktualizuj” u góry, aby zapisać niestandardowe ustawienia bloku.
Następnie kliknij przycisk „Return to WPCode Snippet” u góry, aby zostać przekierowanym na stronę „Edit Snippet”.
Gdy już się tam znajdziesz, przewiń w dół do sekcji „Wstawianie” i wybierz tryb „Automatyczne wstawianie”.
Po aktywacji fragmentu kodu niestandardowy blok zostanie automatycznie dodany do miejsca, w którym chcesz go wstawić na swojej stronie internetowej.
Następnie należy skonfigurować lokalizację utworzonego bloku niestandardowego.
Aby to zrobić, wystarczy kliknąć menu rozwijane „Lokalizacja” w sekcji „Wstawianie” i przejść do zakładki „Specyficzne dla strony”. W tym miejscu możesz teraz wybrać opcję „Wstaw po poście”, jeśli chcesz wyświetlić blok z testymonialami po zakończeniu postu.
Gdy to zrobisz, możesz również skonfigurować liczbę postów, po których powinien pojawić się blok opinii. Na przykład, jeśli wpiszesz liczbę 3, blok opinii będzie pojawiał się w co trzecim poście.
Możesz także wyświetlać blok między różnymi akapitami, po fragmentach postów i nie tylko.
Jeśli jednak nie znajdziesz lokalizacji bloku, której szukasz, możesz również utworzyć własną regułę logiki warunkowej, aby dodać niestandardowy blok do preferowanego miejsca.
Aby to zrobić, przewiń w dół do sekcji „Inteligentna logika warunkowa” i włącz przełącznik „Włącz logikę”.
Następnie należy kliknąć przycisk „Dodaj nową grupę”, aby rozpocząć tworzenie reguły logiki warunkowej.
Na przykład, jeśli chcesz wyświetlać utworzony blok tylko na określonej stronie lub w określonym poście, musisz wybrać opcję „Adres URL strony” z menu rozwijanego po prawej stronie.
Następnie możesz pozostawić menu rozwijane na środku bez zmian, a następnie dodać adres URL wybranej strony/postu WordPress w polu po lewej stronie.
Możesz także skonfigurować regułę logiki warunkowej, aby wyświetlać niestandardowy blok tylko na określonej stronie, zalogowanym użytkownikom, na stronach sklepu WooCommerce, stronach łatwego pobierania cyfrowego, określonych datach i nie tylko.
Po zakończeniu przewiń z powrotem do góry strony i przełącz przełącznik „Nieaktywny” na „Aktywny”. Następnie kliknij przycisk „Aktualizuj”, aby zapisać ustawienia.
Twój niestandardowy blok zostanie teraz automatycznie dodany do wszystkich lokalizacji, które wybrałeś dla fragmentu bloku.
Należy pamiętać, że utworzony blok niestandardowy nie będzie wyświetlany jako opcja w menu bloków edytora Gutenberg.
Będziesz musiał skonfigurować ustawienia bloku, odwiedzając stronę Code Snippets z pulpitu nawigacyjnego WordPress i klikając link „Edytuj” pod fragmentem blokuzwierzę domowe.
Spowoduje to otwarcie strony „Edytuj fragment”, na której można łatwo dostosować blok lub zmienić jego lokalizację i reguły logiki warunkowej.
Teraz odwiedź swoją witrynę, aby zobaczyć niestandardowy blok, który utworzyłeś w akcji.
Oto nasz niestandardowy blok Testimonials na naszej stronie demonstracyjnej.
Metoda 2: Tworzenie niestandardowych bloków dla WordPress za pomocą wtyczki Genesis Custom Code (bezpłatnie)
Jeśli jesteś średnio zaawansowanym użytkownikiem i szukasz darmowego rozwiązania, to ta metoda jest dla Ciebie. Pamiętaj, że będziesz musiał znać HTML i CSS, aby postępować zgodnie z instrukcjami zawartymi w tej metodzie.
Najpierw musisz zainstalować i aktywować wtyczkę Genesis Custom Blocks. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Stworzona przez ludzi stojących za hostingiem WP Engine, wtyczka ta zapewnia programistom łatwe narzędzia do szybkiego tworzenia niestandardowych bloków dla ich projektów.
Na potrzeby tego samouczka zbudujemy blok Testimonials.
Krok 1: Utwórz niestandardowy blok dla WordPress
Najpierw musisz przejść do Custom Blocks ” Add New page z lewego paska bocznego panelu administracyjnego.
Spowoduje to przejście do strony edytora bloków, na której zostanie utworzony niestandardowy blok dla witryny WordPress.
W tym miejscu możesz zacząć od nadania nazwy swojemu blokowi.
Po prawej stronie znajdują się właściwości bloku, które można skonfigurować.
Tutaj możesz wybrać ikonę dla swojego bloku, dodać kategorię i dodać słowa kluczowe.
Slug zostanie automatycznie wypełniony na podstawie nazwy bloku, więc nie musisz go zmieniać. Możesz jednak wpisać do 3 słów kluczowych w polu tekstowym „Słowa kluczowe”, aby łatwo znaleźć swój blok.
Teraz nadszedł czas, aby dodać kilka pól do bloku. Możesz dodać różne typy pól, takie jak tekst, liczby, adresy e-mail, adresy URL, kolory, obrazy, pola wyboru, przyciski opcji i inne.
Dodamy 3 pola do naszego niestandardowego bloku opinii: pole obrazu na zdjęcie recenzenta, pole tekstowe na imię i nazwisko recenzenta oraz pole tekstowe na tekst opinii.
Wystarczy kliknąć przycisk „+”, aby wstawić pierwsze pole.
Spowoduje to otwarcie kilku opcji dla pola w prawej kolumnie. Przyjrzyjmy się każdej z nich.
- Etykieta pola: Możesz użyć dowolnej nazwy dla etykiety pola. Nazwijmy nasze pierwsze pole „Reviewer Image”.
- Nazwa pola: Nazwa pola zostanie wygenerowana automatycznie na podstawie etykiety pola. Będziemy używać tej nazwy w następnym kroku, więc upewnij się, że jest unikalna dla każdego pola.
- Typ pola: Tutaj możesz wybrać typ pola. Chcemy, aby nasze pierwsze pole było obrazem, więc wybierzemy „Obraz” z menu rozwijanego.
- Lokalizacja pola: Możesz zdecydować, czy chcesz dodać pole do edytora czy inspektora.
- Tekst pomocy: Możesz dodać tekst opisujący pole. Nie jest to wymagane, jeśli tworzysz ten blok na własny użytek, ale może być pomocne w przypadku blogów z wieloma autorami.
Możesz także zobaczyć dodatkowe opcje w zależności od wybranego typu pola. Na przykład, jeśli wybierzesz pole tekstowe, otrzymasz dodatkowe opcje, takie jak tekst zastępczy i limit znaków.
Postępując zgodnie z powyższym procesem, dodajmy 2 inne pola do naszego bloku Testimonials, klikając przycisk „+”.</p>
Jeśli chcesz zmienić kolejność pól, możesz to zrobić, przeciągając je za pomocą uchwytu po lewej stronie każdej etykiety pola. Aby edytować lub usunąć określone pole, należy kliknąć jego etykietę i edytować opcje w prawej kolumnie.
Po zakończeniu kliknij przycisk „Opublikuj” po prawej stronie strony, aby zapisać niestandardowy blok Gutenberg.
Krok 2: Tworzenie niestandardowego szablonu bloku
Pomimo utworzenia niestandardowego bloku WordPress w ostatnim kroku, nie będzie on działał, dopóki nie utworzysz szablonu bloku.
Szablon bloku określa dokładnie, w jaki sposób informacje wprowadzone do bloku są wyświetlane w witrynie. Możesz zdecydować, jak to wygląda, używając HTML i CSS, a nawet kodu PHP, jeśli chcesz uruchomić funkcje lub zrobić inne zaawansowane rzeczy z danymi.
Szablon bloku można utworzyć na dwa sposoby. Jeśli dane wyjściowe bloku są w HTML/CSS, można użyć wbudowanego edytora szablonów.
Z drugiej strony, jeśli dane wyjściowe bloku wymagają uruchomienia PHP w tle, konieczne będzie ręczne utworzenie pliku szablonu bloku i przesłanie go do folderu motywu.
Metoda 1: Korzystanie z wbudowanego edytora szablonów
Na ekranie edycji bloku niestandardowego wystarczy przejść do zakładki „Edytor szablonów” i wprowadzić kod HTML w zakładce znaczników.
Możesz napisać kod HTML i użyć podwójnych nawiasów klamrowych, aby wstawić wartości pól bloku.
Na przykład, użyliśmy następującego kodu HTML dla przykładowego bloku, który utworzyliśmy powyżej:
{{reviewer-name}}
{{testimonial-text}}
Następnie wystarczy przejść do zakładki „CSS”, aby nadać styl znacznikom wyjściowym bloku.
Oto przykładowy CSS, którego użyliśmy dla naszego niestandardowego bloku:
.reviewer-name { font-size:14px; font-weight:bold; text-transform:uppercase; } .reviewer-image { float: left; padding: 0px; border: 5px solid #eee; max-width: 100px; max-height: 100px; border-radius: 50%; margin: 10px; } .testimonial-text { font-size:14px; } .testimonial-item { margin:10px; border-bottom:1px solid #eee; padding:10px; }
Metoda 2: Ręczne przesyłanie niestandardowych szablonów bloków
Ta metoda jest zalecana, jeśli chcesz używać PHP do interakcji z niestandardowymi polami bloków. Zasadniczo konieczne będzie przesłanie szablonu edytora bezpośrednio do motywu.
Najpierw należy utworzyć folder na komputerze i nazwać go przy użyciu slugu nazwy bloku niestandardowego.
Na przykład nasz blok demonstracyjny nosi nazwę Testimonials, więc utworzymy folder testimonials.
Następnie należy utworzyć plik o nazwie block.php za pomocą zwykłego edytora tekstu. Jest to miejsce, w którym zostanie umieszczona część HTML / PHP szablonu bloku.
Oto przykładowy szablon, którego użyliśmy w naszym przykładzie:
Być może zauważyłeś, że użyliśmy funkcji block_field() do pobrania danych z pola bloku.
Zawinęliśmy nasze pola blokowe w HTML, którego chcemy użyć do wyświetlenia bloku. Dodaliśmy również klasy CSS, abyśmy mogli odpowiednio stylizować blok.
Don’nie zapomnij zapisać pliku w utworzonym wcześniej folderze.
Następnie należy utworzyć kolejny plik za pomocą edytora tekstu na komputerze i zapisać go jako block.css w utworzonym folderze.
Użyjemy tego pliku do dodania CSS potrzebnego do stylizacji naszego wyświetlanego bloku. Oto przykładowy CSS, którego użyliśmy w tym przykładzie:
.reviewer-name { font-size:14px; font-weight:bold; text-transform:uppercase; } .reviewer-image { float: left; padding: 0px; border: 5px solid #eee; max-width: 100px; max-height: 100px; border-radius: 50%; margin: 10px; } .testimonial-text { font-size:14px; } .testimonial-item { margin:10px; border-bottom:1px solid #eee; padding:10px; }
Nie zapomnij zapisać zmian.
Folder szablonów bloków będzie teraz zawierał dwa pliki szablonów.
Następnie należy przesłać folder bloków do witryny za pomocą klienta FTP lub aplikacji Menedżer plików w panelu sterowania konta hostingowego WordPress.
Po połączeniu przejdź do folderu /wp-content/themes/your-current-theme/.
Jeśli folder motywu nie zawiera folderu o nazwie „bloki”, utwórz nowy katalog i nazwij go bloki.
Następnie musisz przesłać folder utworzony na komputerze do folderu blocks.
To wszystko! Pomyślnie utworzono ręczne pliki szablonów dla niestandardowego bloku.
Krok 3: Podgląd niestandardowego bloku
Przed wyświetleniem podglądu kodu HTML/CSS konieczne będzie dostarczenie pewnych danych testowych, które można wykorzystać do wyświetlenia przykładowych danych wyjściowych.
W obszarze administracyjnym WordPress edytuj swój blok i przejdź do zakładki „Podgląd edytora”. Tutaj musisz wprowadzić kilka fikcyjnych danych.
Dane te nie będą częścią niestandardowego bloku i będą używane tylko do podglądu zmian wprowadzonych za pomocą HTML i CSS.
Po dodaniu danych nie zapomnij kliknąć przycisku „Aktualizuj”, aby zapisać zmiany.
Jeśli nie klikniesz przycisku „Aktualizuj”, nie będziesz mógł zobaczyć podglądu swojego niestandardowego bloku.
Możesz teraz przejść do zakładki „Front-end Preview”, aby zobaczyć, jak Twój blok będzie wyglądał na froncie Twojej witryny WordPress.
Jeśli wszystko wygląda dobrze, możesz ponownie zaktualizować blok, aby zapisać wszelkie niezapisane zmiany.
Krok 4: Korzystanie z niestandardowego bloku w WordPress
Możesz teraz używać swojego niestandardowego bloku w WordPress tak, jak każdego innego bloku.
Wystarczy edytować dowolny post lub stronę, na której chcesz użyć tego bloku. Następnie kliknij przycisk „+” w lewym górnym rogu, aby otworzyć menu bloków.
Z tego miejsca znajdź swój blok, wpisując jego nazwę lub słowa kluczowe, a następnie dodaj go do strony/postu.
Po wstawieniu niestandardowego bloku do obszaru treści zobaczysz utworzone wcześniej pola bloku.
Możesz wypełnić pola bloku według potrzeb.
Gdy przejdziesz z niestandardowego bloku WordPress do innego, edytor automatycznie wyświetli podgląd bloku na żywo.
Możesz teraz zapisać swój post i stronę oraz wyświetlić ich podgląd, aby zobaczyć swój niestandardowy blok w akcji na swojej stronie internetowej.
Oto jak wygląda blok Testimonials na naszej stronie testowej.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo tworzyć niestandardowe bloki Gutenberg dla swojej witryny WordPress. Możesz również chcieć zobaczyćZapoznaj się z naszym przewodnikiem na temat tworzenia niestandardowego motywu WordPress od podstaw lub zobacz nasze wybory ekspertów dotyczące najlepszych motywów blokowych do pełnej edycji witryny.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć samouczki wideo WordPress. Można nas również znaleźć na Twitterze i Facebooku.
