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

Czy chcesz utworzyć niestandardowy blok Gutenberga dla swojej witryny WordPress?

Chociaż WordPress zawiera wiele podstawowych bloków do tworzenia treści, możesz potrzebować czegoś bardziej niestandardowego dla swojej witryny.

W tym artykule pokażemy Ci prosty sposób na tworzenie niestandardowych bloków Gutenberga dla Twojej witryny WordPress.

Po co tworzyć niestandardowy blok 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żesz korzystać.

Czasami jednak możesz chcieć utworzyć własny niestandardowy blok, aby zrobić coś konkretnego, i nie możesz znaleźć wtyczki bloków, która działa dla Ciebie.

W tym samouczku pokażemy, jak stworzyć całkowicie niestandardowy blok.

Uwaga : ten artykuł jest przeznaczony dla średniozaawansowanych użytkowników. Aby tworzyć niestandardowe bloki Gutenberga, musisz znać HTML i CSS.

Krok 1: Zacznij od swojego pierwszego niestandardowego bloku

Najpierw musisz zainstalować i aktywować wtyczkę Genesis Custom Blocks. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Ta wtyczka, stworzona przez ludzi stojących za popularnym Genesis Theme Framework i StudioPress, zapewnia programistom łatwe narzędzia do szybkiego tworzenia niestandardowych bloków dla ich projektów.

Na potrzeby tego samouczka zbudujemy blok „referencje”.

Najpierw przejdź do Bloków niestandardowych »Dodaj nową stronę z lewego paska bocznego panelu administracyjnego.

Spowoduje to przejście do strony Edytor bloku.

Stąd musisz nadać nazwę swojemu blokowi.

Po prawej stronie znajdziesz właściwości bloku.

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

Ślimak 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 mógł być łatwo odnaleziony.

Dodajmy teraz kilka pól do naszego bloku.

Możesz dodać różne typy pól, takie jak tekst, liczby, adres e-mail, adres URL, kolor, obraz, pole wyboru, przyciski radiowe i wiele innych.

Dodamy 3 pola do naszego niestandardowego bloku referencji: pole obrazu na obraz recenzenta, pole tekstowe na imię i nazwisko recenzenta oraz pole tekstowe na tekst referencji.

Kliknij przycisk [+] Dodaj pole , aby wstawić pierwsze pole.

To otworzy kilka opcji dla pola. Przyjrzyjmy się każdemu 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 użytku osobistego, ale może być przydatne w przypadku blogów z wieloma autorami.

Możesz również uzyskać 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.

Zgodnie z powyższym procesem dodajmy 2 inne pola do naszego bloku referencji, klikając przycisk [+] Dodaj pole .

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ąć określone pole, musisz kliknąć etykietę pola i edytować opcje w prawej kolumnie.

Gdy skończysz, kliknij przycisk Opublikuj , znajdujący się po prawej stronie strony, aby zapisać niestandardowy blok Gutenberga.

Krok 2: Utwórz niestandardowy szablon bloku

Chociaż w ostatnim kroku utworzyłeś niestandardowy blok WordPress, 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 na Twojej stronie internetowej. Możesz zdecydować, jak to wygląda, używając HTML i CSS, a nawet kodu PHP, jeśli potrzebujesz uruchamiać funkcje lub robić inne zaawansowane rzeczy z danymi.

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

Z drugiej strony, jeśli twoje wyjście blokowe wymaga trochę PHP do działania 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 bloku niestandardowego po prostu przejdź do zakładki Edytor szablonów i wprowadź swój kod HTML pod zakładką znaczników.

Możesz napisać swój 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.

<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 przejdź do zakładki CSS, aby wystylizować znaczniki wyjściowe 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żywać PHP do interakcji z niestandardowymi polami blokowymi.

Zasadniczo musisz przesłać szablon edytora bezpośrednio do swojego motywu.

Najpierw musisz utworzyć folder na swoim komputerze, nazwij go swoją niestandardową nazwą bloku. Na przykład nasz blok demonstracyjny nazywa się Testimonials, więc utworzymy folder referencje.

Następnie musisz utworzyć plik o nazwie block.php za pomocą zwykłego edytora tekstu. W tym miejscu umieścisz część HTML / PHP swojego 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>

Zwróć uwagę, jak użyliśmy funkcji block_field() do pobrania danych z pola blokowego.

Opakowaliśmy nasze pola blokowe w kodzie HTML, którego chcemy użyć do wyświetlenia bloku. Dodaliśmy również klasy CSS, dzięki czemu możemy odpowiednio ostylować blok.

Nie zapomnij zapisać pliku w utworzonym wcześniej folderze.

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

Wykorzystamy ten plik, aby dodać CSS potrzebny do stylizacji naszego wyświetlania blokowego. Oto przykładowy kod 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 blokowy do swojej witryny za pomocą klienta FTP lub aplikacji File Manager w panelu sterowania konta hostingowego WordPress.

Po połączeniu przejdź do folderu /wp-content/themes/your-current-theme/ .

Jeśli folder motywu nie ma bloków nazw folderów, utwórz nowy katalog i nazwij go blocks .

Teraz wejdź do folderu bloków i prześlij folder, który utworzyłeś na swoim komputerze do folderu bloków.

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

Krok 3. Wyświetl podgląd własnego bloku

Teraz, zanim będziesz mógł wyświetlić podgląd HTML/CSS, musisz podać dane testowe, które można wykorzystać do wyświetlenia przykładowego wyniku.

W obszarze administracyjnym WordPress edytuj swój blok i przejdź do zakładki Podgląd edytora. Tutaj musisz wprowadzić jakieś fikcyjne dane.

Nie zapomnij kliknąć przycisku Aktualizuj, aby zapisać zmiany, zanim będzie można wyświetlić podgląd.

Możesz teraz przejść do zakładki Podgląd frontonu, aby zobaczyć, jak Twój blok będzie wyglądał w interfejsie (obszar publiczny Twojej witryny WordPress).

Jeśli wszystko wygląda dobrze, możesz zaktualizować swój blok, aby zapisać niezapisane zmiany.

Krok 4. Korzystanie z niestandardowego bloku w WordPress

Możesz teraz używać swojego niestandardowego bloku w WordPressie, tak jakbyś używał innych bloków.

Po prostu edytuj dowolny post lub stronę, na której chcesz użyć tego bloku.

Kliknij przycisk dodawania nowego bloku i wyszukaj swój blok, wpisując jego nazwę lub słowa kluczowe.

Po wstawieniu bloku do obszaru zawartości zobaczysz pola bloku utworzone dla tego bloku niestandardowego.

W razie potrzeby możesz wypełnić pola blokowe.

Gdy odejdziesz od bloku do innego bloku, edytor automatycznie wyświetli podgląd Twojego 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 w swojej witrynie.

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

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo tworzyć niestandardowe bloki Gutenberga dla Twojej witryny WordPress.

Możesz również zapoznać się z naszym przewodnikiem, jak utworzyć niestandardowy motyw WordPress od podstaw, lub zapoznać się z wyborem przez eksperta niezbędnych wtyczek WordPress dla Twojej witryny.

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