W artykule:
Czy chcesz utworzyć niestandardowy blok Gutenberga dla swojej witryny WordPress? Po aktualizacji WordPress 5.0 musisz użyć bloków, aby utworzyć zawartość w nowym edytorze bloków WordPress.
WordPress zawiera kilka przydatnych bloków, których możesz użyć podczas pisania treści. Wiele wtyczek WordPress ma również własne bloki, z których możesz korzystać.
Jednak czasami możesz chcieć stworzyć własny niestandardowy blok Gutenberga, aby zrobić coś konkretnego.
Jeśli szukasz łatwego rozwiązania do tworzenia niestandardowych bloków Gutenberga dla swojej witryny WordPress, jesteś we właściwym miejscu.
W tym samouczku krok po kroku pokażemy Ci łatwy sposób na stworzenie niestandardowego bloku WordPress dla Gutenberga.
Uwaga: Ten artykuł jest dla średniozaawansowanych użytkowników. Aby tworzyć niestandardowe bloki Gutenberga, musisz znać HTML i CSS.
Krok 1: Rozpocznij
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Block Lab.
Jest to wtyczka WordPress, która pozwala tworzyć niestandardowe bloki z panelu administracyjnego bez większych kłopotów.
Aby zainstalować wtyczkę, możesz postępować zgodnie z naszym Przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.
Po aktywowaniu wtyczki możesz przejść do następnego kroku tworzenia pierwszego niestandardowego bloku.
Krok 2: Utwórz nowy blok
Ze względu na ten samouczek zbudujemy blok „referencje”.
Najpierw udaj się do Block Lab ” Dodaj Nowy z lewego paska bocznego panelu administracyjnego.
Na tej stronie musisz podać nazwę swojego bloku. Możesz wpisać dowolną nazwę w polu tekstowym „wprowadź nazwę bloku tutaj”.
Nazwiemy nasz Niestandardowy blok: Referencje.
Po prawej stronie znajdziesz właściwości bloku. Tutaj możesz wybrać ikonę dla swojego bloku i wybrać kategorię bloku z rozwijanej kategorii.
Ślimak zostanie automatycznie wypełniony na podstawie nazwy Twojego bloku, więc nie musisz go zmieniać. Możesz jednak napisać do 3 słów kluczowych w polu tekstowym słowa kluczowe,aby łatwo znaleźć blok.
Teraz dodajmy kilka pól do naszego bloku. Możesz dodać różne typy pól, takie jak tekst, liczby, e-mail, adres URL, kolor, obraz, pole wyboru, przyciski opcji i wiele innych.
Dodamy 3 pola do naszego niestandardowego bloku referencji: pole obrazu dla obrazu recenzenta, pole tekstowe dla nazwy recenzenta i pole textarea dla tekstu referencji.
Kliknij na + Dodaj Pole przycisk do wstawienia pierwszego pola.
Otworzy to kilka opcji dla pola. Przyjrzyjmy się każdemu z nich.
- Etykieta Pola: Możesz użyć dowolnej nazwy wybranej dla etykiety pola. Nazwijmy nasze pierwsze pole obrazem recenzenta.
- Nazwa Pola: Nazwa pola zostanie wygenerowana automatycznie na podstawie etykiety pola. W następnym kroku użyjemy nazwy tego pola, więc upewnij się, że jest unikalne dla każdego pola.
- Typ Pola: Tutaj możesz wybrać rodzaj pola. Chcemy, aby nasze pierwsze pole było obrazkiem, więc wybierzemy Obraz z rozwijanego menu.
- Lokalizacja Pola: Możesz zdecydować, czy chcesz dodać pole do edytora, czy Inspektora.
- Tekst Pomocy: Możesz dodać tekst, aby opisać pole. Nie jest to wymagane, jeśli tworzysz ten blok na własny użytek.
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.
Możesz kliknąć na Close Field przycisk, gdy skończysz z polem obrazu.
Postępując zgodnie z powyższym procesem, dodajmy 2 inne pola dla naszego bloku referencji, klikając + Dodaj Pole guzik.
Jeśli chcesz zmienić kolejność pól, możesz to zrobić, przeciągając je za pomocą ikony hamburgera po lewej stronie każdej etykiety pola.
Aby edytować lub usuwać określone pole, należy najechać myszą na etykietę pola, aby uzyskać opcje edycji i usuwania.
Po zakończeniu kliknij na Publikuj przycisk, obecny po prawej stronie, aby zapisać swój własny blok Gutenberga.
Krok 3: Utwórz szablon bloku
Chociaż w ostatnim kroku utworzyłeś Niestandardowy blok WordPress, nie zadziała, dopóki nie utworzysz szablonu bloku o nazwie Block-testimonials.php i prześlij go do bieżącego folderu motywu.
Plik szablonu bloku powie wtyczce, jak wyświetlić pola bloków w edytorze. Wtyczka będzie szukać pliku szablonu, a następnie użyje go do wyświetlenia zawartości bloku.
Jeśli nie masz tego pliku, wyświetli się błąd ” Template file blocks / block-testimonials.PHP not found”.
Stwórzmy plik szablonu naszego bloku.
Najpierw Utwórz folder na pulpicie i nadaj mu nazwę bloki. Utworzysz plik szablonu bloku w tym folderze, a następnie prześlij go do bieżącego katalogu motywów WordPress.
Aby utworzyć plik szablonu, możesz użyć zwykłego edytora tekstu, takiego jak Notatnik.
Za każdym razem, gdy dodajesz nowe pole do niestandardowego bloku, musisz dodać następujący kod PHP do pliku szablonu bloku:
<?php block_field ('add-your-field-name-here');?>
Pamiętaj tylko o wymianie add-your-field-name-here z nazwą pola.
Na przykład, nazwa naszego pierwszego pola to reviewer-image, więc dodamy następujący wiersz do pliku szablonu:
<?php block_field ('reviewer-image');?>
Proste, prawda? Zróbmy to samo dla reszty naszych pól:
<?php block_field ('reviewer-image');?>
<?php block_field ('reviewer-name');?>
<?php block_field ('testimonial-text');?>
Następnie dodamy kilka znaczników HTML do powyższego kodu w celu stylizacji.
Na przykład obraz recenzenta można zawinąć do znacznika img, aby go wyświetlić. W przeciwnym razie WordPress wyświetli adres URL obrazu, który nie jest tym, czego chcesz, prawda?
Możesz także dodać nazwy klas do znaczników HTML i zawinąć kod do kontenera div, aby stylizować Zawartość bloku (co zrobimy w tym następnym kroku).
Oto nasz ostateczny kod dla naszego szablonu blokowego:
< div class = "testimonial-block clearfix">
< div class = "testimonial-image">
<img src="<?php block_field ('reviewer-image');?>">
< / div>
< div class = "testimonial-box">
<H4><?php block_field ('reviewer-name');?>< / H4>
<p><?php block_field ('testimonial-text');?>< / p>
< / div>
< / div>
Na koniec nazwij plik jako referencje blokowe.php i zapisać go wewnątrz bloki folder.
Krok 4: Wystylizuj Swój Niestandardowy Blok
Chcesz wystylizować swój niestandardowy blok? Możesz to zrobić za pomocą CSS.
Otwórz zwykły edytor tekstu, taki jak Notatnik i dodaj następujący kod:
.testimonial-block {
Szerokość: 100%;
margin-bottom: 25px;
}
.testimonial-image {
float: left;
szerokość: 25%;
padding-right: 15px;
}
.testimonial-box {
float: left;
szerokość: 75%;
}
.clearfix:: after {
treść: "";
clear: zarówno;
wyświetlacz: tabela;
}
Po zakończeniu nazwij plik jako referencje blokowe.css i zapisać go wewnątrz bloki folder.
Krok 5: Prześlij plik szablonu bloku do folderu motywu
Teraz załadujmy bloki folder zawierający nasz niestandardowy plik szablonu bloku do naszego folderu motywu WordPress.
Aby to zrobić, musisz połączyć się z witryną WordPress za pomocą klienta FTP. Aby uzyskać pomoc, możesz zapoznać się z naszym przewodnikiem, jak przesyłać pliki do witryny WordPress za pomocą FTP.
Po nawiązaniu połączenia przejdź do folderu/wp-content/ themes/. Stąd musisz otworzyć bieżący folder motywów.
Teraz wgraj bloki folder, zawierający plik szablonu blokowego i plik CSS, do katalogu motywu.
Po zakończeniu możesz przejść do ostatniego kroku, aby przetestować swój niestandardowy blok.
Uwaga: Block Lab plugin pozwala na tworzenie bloków tematycznych. Jeśli zmienisz swój motyw WordPress, musisz skopiować folder blocks do nowego katalogu motywów.
Krok 6: Przetestuj Swój Nowy Blok
Nadszedł czas, aby przetestować nasz Niestandardowy blok referencji. Możesz to zrobić, udając się do Strony » Dodaj Nowy aby utworzyć nową stronę.
Następnie kliknij na Dodaj Blok ( + ) ikona i wyszukaj blok referencji. Gdy go znajdziesz, Kliknij na niego, aby dodać niestandardowy blok do Edytora Stron.
Możesz teraz dodać referencje do tej strony za pomocą niestandardowego bloku. Aby dodać więcej referencji, zawsze możesz wstawić nowe bloki referencji.
Po zakończeniu możesz wyświetlić podgląd lub opublikować stronę, aby sprawdzić, czy działa poprawnie, czy nie.
To wszystko! Z powodzeniem stworzyłeś swój pierwszy Niestandardowy blok WordPress dla swojej witryny.
Czy wiesz, że możesz zaoszczędzić czas dzięki blokom wielokrotnego użytku w edytorze? Sprawdź nasz przewodnik, jak łatwo tworzyć bloki wielokrotnego użytku w edytorze bloków WordPress i używać ich na innych stronach internetowych.
Możesz również zobaczyć nasz przewodnik, Jak stworzyć niestandardowy motyw WordPress bez pisania kodu.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
