Jak stworzyć niestandardowy blok WordPress (łatwy sposób)

Domyślne bloki WordPress są świetne do prostych treści — ale szybko mogą okazać się niewystarczające, gdy potrzebujesz niestandardowych układów, interaktywnych elementów lub dopasowanych projektów.

W tym właśnie pomagają niestandardowe bloki. Dają Ci pełną kontrolę nad wyglądem i działaniem Twoich treści, bez polegania na przeładowanych wtyczkach lub obejściach.

Najlepsze? Tworzenie niestandardowych bloków jest bardziej dostępne, niż większość ludzi myśli. Dzięki odpowiednim narzędziom i jasnemu procesowi nie musisz być programistą, aby tworzyć bloki pasujące do unikalnych potrzeb Twojej witryny.

Przez lata wykorzystywaliśmy niestandardowe bloki do usprawniania przepływów pracy i dostarczania w pełni dopasowanych stron WordPress dla klientów — a teraz pokażemy Ci, jak zrobić to samo.

W tym przewodniku nauczysz się krok po kroku tworzyć niestandardowe bloki WordPress, nawet jeśli nie jesteś ekspertem w kodowaniu.

Dlaczego tworzyć niestandardowy blok WordPress?

WordPress posiada intuicyjny edytor bloków, który pozwala łatwo tworzyć posty i strony poprzez dodawanie elementów treści i układu jako bloków.

Domyślnie WordPress zawiera kilka powszechnie używanych bloków. Wtyczki WordPress mogą również dodawać własne bloki, których możesz używać.

Czasami jednak możesz chcieć utworzyć niestandardowy blok, aby zrobić coś konkretnego na swojej stronie WordPress, ponieważ nie możesz znaleźć wtyczki bloku, która Ci odpowiada.

Dzięki niestandardowym blokom możesz dodawać unikalne funkcje i możliwości do swojej witryny, które mogą nie być dostępne w gotowych blokach. Może to pomóc w automatyzacji procesów lub uczynić tworzenie treści dla Twojego bloga WordPress bardziej wydajnym.

Na przykład, możesz utworzyć niestandardowy blok do wyświetlania referencji, a następnie łatwo wstawiać i zarządzać tym blokiem bez żadnej wiedzy programistycznej.

Mając to na uwadze, zobaczmy, jak łatwo stworzyć całkowicie niestandardowy blok w WordPressie.

W tym samouczku pokażemy Ci dwie metody tworzenia niestandardowego bloku. Możesz użyć poniższych szybkich linków, aby przejść do wybranej metody:

• Metoda 1: Tworzenie niestandardowych bloków dla WordPressa za pomocą WPCode (zalecane)
• Metoda 2: Tworzenie niestandardowych bloków dla WordPress za pomocą wtyczki Genesis Custom Code Plugin (bezpłatna)
• Bonus: Twórz niestandardowe szablony dla swoich wpisów

Metoda 1: Tworzenie niestandardowych bloków dla WordPressa za pomocą WPCode (zalecane)

Jeśli jesteś nowy w WordPress, a kodowanie wydaje się zniechęcające, WPCode jest dla Ciebie fantastycznym wyborem.

Jako część naszego zestawu narzędzi, uznaliśmy WPCode za najbardziej przyjazny dla początkujących i najbezpieczniejszy sposób dodawania niestandardowych fragmentów kodu.

Mamy również szczegółową recenzję WPCode, która może być pomocna w zrozumieniu jego pełnego potencjału.

Jedną z jego wyróżniających się funkcji są fragmenty bloków, które pozwalają bez wysiłku tworzyć niestandardowe bloki.

Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Szczegółowe instrukcje znajdziesz w naszym przewodniku dla początkujących na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony Fragmenty kodu » + Dodaj fragment z paska bocznego administratora WordPress.

Gdy już tam będziesz, kliknij przycisk „Użyj fragmentu” w opcji „Dodaj własny kod (nowy fragment)”.

Spowoduje to przejście do strony „Utwórz niestandardowy fragment”, gdzie możesz zacząć od wpisania nazwy nowego bloku, który zamierzasz utworzyć.

Gdy to zrobisz, po prostu wybierz opcję „Fragmenty kodu” z menu rozwijanego „Typ kodu” w prawym rogu ekranu.

Spowoduje to wyświetlenie przycisku „Edytuj za pomocą edytora bloków” w polu „Podgląd kodu”.

Po prostu kliknij 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 w edytorze bloków. Kliknij przycisk „Tak”, aby przejść dalej.

Teraz, gdy jesteś w edytorze bloków, możesz łatwo stworzyć niestandardowy blok, używając gotowych bloków dostępnych w menu bloków.

W tym poradniku stworzymy niestandardowy blok do dodawania opinii o Twojej witrynie.

Najpierw kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu ekranu, aby otworzyć menu bloków.

Stąd przeciągnij i upuść blok nagłówka do interfejsu edytora bloków i nazwij go „Referencje”.

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 dalej dostosowywać swój blok opinii, używając bloków obrazu, logo witryny, ikon społecznościowych lub nagłówka witryny.

Możesz również skonfigurować rozmiar, kolor tekstu lub kolor tła swoich referencji z panelu bloków po prawej stronie ekranu.

Po zakończeniu nie zapomnij kliknąć przycisku „Zaktualizuj” na górze, aby zapisać ustawienia niestandardowego bloku.

Następnie po prostu kliknij przycisk „Powrót do fragmentu WPCode” na górze, aby zostać przekierowanym na stronę edytora kodu.

Gdy już tam będziesz, przewiń w dół do sekcji „Wstawianie” i wybierz tryb „Automatyczne wstawianie”.

Po aktywacji fragmentu kodu, Twój niestandardowy blok zostanie automatycznie dodany do lokalizacji, którą wybierzesz do wstawienia na swojej stronie internetowej.

Następnie musisz skonfigurować lokalizację utworzonego niestandardowego bloku.

Aby to zrobić, po prostu kliknij menu rozwijane „Lokalizacja” w sekcji „Wstawianie” i przełącz się na zakładkę „Specyficzne dla strony”. Stąd możesz teraz wybrać opcję „Wstaw po poście”, jeśli chcesz wyświetlić swój blok Opinii po zakończeniu posta.

Po wykonaniu tej czynności możesz również skonfigurować liczbę postów, po których powinien pojawić się blok referencji. Na przykład, jeśli wpiszesz liczbę 3, blok Referencje pojawi się w co trzecim poście.

Możesz również wyświetlić blok pomiędzy różnymi akapitami, po fragmentach postów i nie tylko.

Jednakże, jeśli nie znajdziesz lokalizacji bloku, której szukasz, możesz również utworzyć własną regułę logiki warunkowej, aby osadzić niestandardowy blok w preferowanym miejscu.

Aby to zrobić, przewiń w dół do sekcji „Inteligentna logika warunkowa” i włącz przełącznik „Włącz logikę”.

Następnie musisz kliknąć przycisk „Dodaj nową grupę”, aby rozpocząć tworzenie reguły logiki warunkowej.

Na przykład, jeśli chcesz wyświetlić utworzony niestandardowy blok tylko na określonej stronie lub w poście, musisz wybrać opcję „URL strony” z menu rozwijanego po prawej stronie.

Następnie możesz pozostawić menu rozwijane pośrodku bez zmian, a następnie dodać adres URL wybranej strony/wpisu WordPress do pola po lewej stronie.

Możesz również skonfigurować swoją regułę logiki warunkowej, aby niestandardowy blok wyświetlał się tylko na określonej stronie, dla zalogowanych użytkowników, na stronach sklepu WooCommerce, stronach Easy Digital Downloads, w określonych datach i nie tylko.

Po zakończeniu przewiń z powrotem na górę strony i przełącz przełącznik „Nieaktywny” na „Aktywny”. Następnie kliknij przycisk „Aktualizuj”, aby zapisać swoje ustawienia.

Twój niestandardowy blok zostanie teraz automatycznie dodany do wszystkich lokalizacji wybranych dla fragmentu bloku.

Pamiętaj, że utworzony przez Ciebie niestandardowy blok nie będzie wyświetlany jako opcja w menu bloków edytora WordPress Gutenberg.

Musisz skonfigurować ustawienia bloku, odwiedzając stronę Fragmenty kodu z panelu administracyjnego WordPress i klikając link „Edytuj” pod fragmentem bloku.

Spowoduje to otwarcie strony „Edytuj fragment”, gdzie możesz łatwo dostosować blok lub zmienić jego lokalizację i zasady logiki warunkowej.

Teraz odwiedź swoją stronę internetową, aby zobaczyć utworzony niestandardowy blok w akcji.

Oto nasz niestandardowy blok Referencje na naszej stronie demonstracyjnej.

Metoda 2: Tworzenie niestandardowych bloków dla WordPress za pomocą wtyczki Genesis Custom Code Plugin (bezpłatna)

Jeśli jesteś użytkownikiem średniozaawansowanym i szukasz darmowego rozwiązania, ta metoda jest dla Ciebie. Pamiętaj, że będziesz musiał znać HTML i CSS, aby postępować zgodnie z instrukcjami w tej metodzie.

Najpierw musisz zainstalować i aktywować wtyczkę Genesis Custom Blocks. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Na potrzeby tego samouczka zbudujemy blok Opinii.

Krok 1: Utwórz niestandardowy blok dla WordPressa

Najpierw przejdź do strony Niestandardowe Bloki » Dodaj Nowy z paska bocznego administracji WordPress.

Spowoduje to przejście do strony Edytora bloków, gdzie będziesz tworzyć niestandardowy blok dla swojej witryny WordPress.

Stąd możesz zacząć od nadania nazwy swojemu blokowi.

Teraz, po prawej stronie strony, znajdziesz właściwości bloku, które możesz skonfigurować.

Tutaj możesz wybrać ikonę dla swojego bloku, dodać kategorię i słowa kluczowe.

Slug zostanie automatycznie wypełniony na podstawie nazwy Twojego bloku, więc nie musisz go zmieniać. Możesz jednak wpisać do 3 słów kluczowych w polu tekstowym „Słowa kluczowe”, aby Twój blok był łatwo odnajdywany.

Teraz nadszedł czas, aby dodać pola do swojego bloku. Możesz dodawać różne typy pól, takie jak tekst, liczby, adresy e-mail, adresy URL, kolory, obrazy, pola wyboru, przyciski radiowe i inne.

Dodamy trzy pola do naszego niestandardowego bloku Opinii: pole obrazu dla zdjęcia recenzenta, pole tekstowe dla imienia recenzenta i pole obszaru tekstowego dla tekstu 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 „Obraz recenzenta”.
• Nazwa pola: Nazwa pola zostanie wygenerowana automatycznie na podstawie etykiety pola. Użyjemy tej nazwy pola w następnym kroku, więc upewnij się, że jest ona 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 do inspektora.
• Tekst pomocy: Możesz dodać tekst opisujący pole. Nie jest to wymagane, jeśli tworzysz ten blok do własnego użytku, ale może być pomocne w przypadku blogów dla wielu autorów.

Możesz również 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 „Referencje”, klikając przycisk „+”.

Jeśli chcesz zmienić kolejność pól, możesz to zrobić, przeciągając je za pomocą uchwytu po lewej stronie etykiety każdego pola. Aby edytować lub usunąć konkretne pole, musisz kliknąć etykietę pola i edytować opcje w prawej kolumnie.

Po zakończeniu kliknij przycisk „Opublikuj” po prawej stronie strony, aby zapisać swój niestandardowy blok Gutenberg.

Krok 2: Utwórz niestandardowy szablon bloku

Chociaż utworzyłeś niestandardowy blok WordPress w ostatnim kroku, nie zadziała on, dopóki nie utworzysz szablonu bloku.

Szablon bloku określa dokładnie, w jaki sposób informacje wprowadzone do bloku są wyświetlane na Twojej stronie internetowej. Ty decydujesz, jak to wygląda, używając kodu HTML i CSS, a nawet kodu PHP, jeśli potrzebujesz uruchomić funkcje lub wykonać inne zaawansowane operacje na danych.

Istnieją dwa sposoby tworzenia szablonu bloku. Jeśli wyjście bloku jest w formacie HTML/CSS, możesz użyć wbudowanego edytora szablonów.

Z drugiej strony, jeśli wyjście bloku wymaga uruchomienia kodu PHP w tle, będziesz musiał ręcznie utworzyć plik szablonu bloku i przesłać go do folderu motywu.

Metoda 1: Korzystanie z wbudowanego edytora szablonów

Na ekranie edycji niestandardowego bloku po prostu przełącz się na zakładkę „Edytor szablonów” i wprowadź swój HTML w zakładce znaczników.

Możesz napisać swój kod HTML i użyć podwójnych nawiasów klamrowych do wstawienia wartości pól bloków.

Na przykład użyliśmy następującego kodu HTML dla przykładowego bloku, który utworzyliśmy powyżej:

<div class="testimonial-item">
<img src="{{reviewer-image}}" class="reviewer-image">
<h4 class="reviewer-name">{{reviewer-name}}</h4>
<div class="testimonial-text">{{testimonial-text}}</div>
</div>

Następnie po prostu przełącz się na zakładkę „CSS”, aby stylizować znacznik wyjściowy bloku.

Oto przykładowy kod 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 potrzebujesz użyć PHP do interakcji z polami niestandardowych bloków. Będziesz musiał przesłać szablon edytora bezpośrednio do swojego motywu.

Najpierw musisz utworzyć folder na swoim komputerze i nazwać go używając nazwy swojego niestandardowego bloku.

Na przykład, nasz przykładowy blok nazywa się Testimonials, więc utworzymy folder testimonials.

Następnie musisz utworzyć plik o nazwie block.php za pomocą prostego edytora tekstu. Tutaj umieścisz część HTML / PHP szablonu bloku.

Oto przykładowy szablon, którego użyliśmy w naszym przykładzie:

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

Teraz mogłeś zauważyć, jak użyliśmy funkcji block_field() do pobrania danych z pola bloku.

Zapakowaliśmy nasze pola bloków w kod HTML, którego chcemy użyć do wyświetlenia bloku. Dodaliśmy również klasy CSS, abyśmy mogli odpowiednio stylizować blok.

Nie zapomnij zapisać pliku w folderze, który utworzyłeś wcześniej.

Następnie musisz utworzyć kolejny plik za pomocą edytora tekstu zwykłego na swoim komputerze i zapisać go jako block.css w folderze, który utworzyłeś.

Użyjemy tego pliku do dodania CSS potrzebnego do stylizacji wyświetlania naszego 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.

Twój folder szablonów bloków będzie teraz zawierał dwa pliki szablonów.

Następnie musisz przesłać folder bloków na swoją stronę internetową za pomocą klienta FTP lub aplikacji Menedżer plików w panelu kontrolnym Twojego hostingu WordPress.

Po połączeniu przejdź do folderu /wp-content/themes/twój-aktualny-motyw/.

Jeśli folder Twojego motywu nie zawiera folderu o nazwie „blocks”, utwórz nowy katalog i nazwij go blocks.

Następnie musisz przesłać folder, który utworzyłeś na swoim komputerze, do folderu blocks.

To wszystko! Pomyślnie utworzyłeś ręczne pliki szablonów dla swojego niestandardowego bloku.

Krok 3: Podgląd niestandardowego bloku

Zanim będziesz mógł wyświetlić podgląd swojego HTML/CSS, musisz dostarczyć dane testowe, które mogą być użyte do wyświetlenia przykładowego wyniku.

W obszarze administracyjnym WordPress edytuj swój blok i przełącz się na zakładkę „Podgląd edytora”. Tutaj musisz wprowadzić przykładowe dane.

Te dane nie będą częścią Twojego niestandardowego bloku i posłużą jedynie do podglądu zmian wprowadzonych za pomocą HTML i CSS.

Po dodaniu danych pamiętaj, aby kliknąć przycisk „Zaktualizuj”, aby zapisać zmiany.

Jeśli nie klikniesz przycisku „Zaktualizuj”, nie będziesz mógł zobaczyć podglądu swojego niestandardowego bloku.

Możesz teraz przełączyć się na kartę „Podgląd front-endu”, 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ć swój blok, aby zapisać wszelkie niezapisane zmiany.

Krok 4: Używanie niestandardowego bloku w WordPressie

Teraz możesz używać swojego niestandardowego bloku w WordPress tak, jak każdy inny blok.

Po prostu edytuj dowolny post lub stronę, na której chcesz użyć tego bloku. Następnie kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu, aby otworzyć menu bloków.

Tutaj użyj funkcji wyszukiwania, aby znaleźć swój blok, wpisując jego nazwę lub słowa kluczowe. Następnie dodaj go do strony lub wpisu.

Po wstawieniu niestandardowego bloku do obszaru treści zobaczysz wcześniej utworzone pola bloku.

Możesz wypełnić pola bloku według potrzeb.

Gdy przejdziesz od niestandardowego bloku WordPress do innego, edytor automatycznie wyświetli podgląd na żywo Twojego bloku.

Możesz teraz zapisać swój wpis i stronę oraz wyświetlić podgląd, aby zobaczyć swój niestandardowy blok w akcji na swojej stronie internetowej.

Oto jak blok Referencje wygląda na naszej stronie testowej.

Bonus: Twórz niestandardowe szablony dla swoich wpisów

Oprócz tworzenia niestandardowych bloków, możesz dodawać niestandardowe szablony dla wpisów na blogu lub stron.

Szablon to układ, który możesz dodać do swojego wpisu, aby wyglądał inaczej niż inne strony i treści. Może to sprawić, że Twoje wpisy będą bardziej angażujące i atrakcyjne wizualnie, a także pomóc w generowaniu większej liczby potencjalnych klientów.

Możesz łatwo utworzyć szablon dla wszystkich swoich wpisów, tworząc blok Grupa, który można ponownie wykorzystać.

Najpierw musisz kliknąć przycisk „Dodaj blok” (+), aby dodać blok Grupa do wpisu. Następnie możesz dodać dowolne bloki w ramach grupy, w tym nagłówki, multimedia i tekst, obrazy przykładowe i inne.

Po utworzeniu szablonu posta kliknij menu z trzema kropkami na pasku narzędzi bloku u góry bloku. Następnie kliknij przycisk „Utwórz wzorzec”.

Następnie szablon Twojego wpisu zostanie zapisany jako blok wielokrotnego użytku. Możesz uzyskać do niego dostęp i dodać go do dowolnego wpisu, otwierając menu bloków (+) i przechodząc do zakładki „Wzorce”.

Pamiętaj jednak, że ta metoda tworzenia niestandardowych szablonów postów oferuje ograniczone funkcje. Aby stworzyć piękniejszy niestandardowy szablon bez kodowania, możesz użyć SeedProd, który jest najlepszym kreatorem stron na rynku.

Szczegółowe informacje znajdziesz w naszym poradniku jak tworzyć niestandardowe szablony pojedynczych wpisów w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo tworzyć niestandardowe bloki Gutenberga dla Twojej strony WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania listy kontrolnej wpisów na blogu w edytorze WordPress oraz zapoznać się z naszymi niezbędnymi wskazówkami dotyczącymi używania shortcode na Twojej stronie.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.