Czy chciałbyś stworzyć WordPress Plugin prosty blok Gutenberga?
Czy nie wszyscy kochamy WordPressa? Platforma odniosła ogromny sukces od samego początku, a programiści stale dodają nowe funkcje. Jedną z wyróżniających się funkcji ostatnich czasów jest edytor bloków WordPress, nazwa kodowa Gutenberg.
Gutenberg oferuje użytkownikom WordPressa nowy, ekscytujący sposób publikowania treści i dostosowywania swojej witryny. Jest niezwykle łatwy w użyciu, co jest świetną wiadomością zarówno dla początkujących, jak i programistów. Jeśli korzystasz z najnowszej wersji WordPressa, znasz już edytor bloków i koncepcję bloków.
Domyślnie edytor bloków WordPress zawiera kilka bloków, które umożliwiają dołączanie tekstu, obrazów, cytatów, audio, wideo, osadzania itp. Poza tym istnieje mnóstwo dodatków Gutenberga, które pozwalają rozszerzyć edytor bez łamania pot.
Jednak możesz mieć konkretną potrzebę, która skłoni Cię do utworzenia własnych niestandardowych bloków. W tym artykule pokażemy w kilku akapitach, jak tworzyć niestandardowe bloki Gutenberga, aby spełnić Twoje specyficzne potrzeby.
Bez zbędnych ceregieli zacznijmy, ponieważ jest wiele do nauczenia się.
Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu
Wróćmy do tego, dlaczego tu jesteśmy.
Czym właściwie są bloki?
Bloki traktują akapity, nagłówki, media i osadzania jako komponenty, które połączone razem tworzą treść przechowywaną w bazie danych WordPress, zastępując tradycyjne pojęcie tekstu mediami i osadzonymi.
W przeszłości użytkownicy WordPressa polegali na tekście i skrótach do dodawania treści. Gutenberg używa bloki. Nowy edytor pozwala używać jednostek bloków do tworzenia bogatych i elastycznych układów, które są łatwe w zarządzaniu. Obecnie możesz używać edytora bloków dla postów i stron, ale istnieją aktywne plany do podjęcia wspierać pełną edycję strony w przyszłości.
Praca z blokami sprawia, że tworzenie treści w WordPressie jest dość odświeżające. Ponadto wiele istniejących wtyczek obsługuje nowy edytor i zawiera gotowe do użycia bloki, które ułatwiają dodawanie treści z tych wtyczek. Edytor umożliwia przeciąganie i upuszczanie bloków na stronę, dzięki czemu możesz szybciej nacisnąć przycisk publikowania.
Podobnie jak kreator stron zintegrowany bezpośrednio z WordPress.
Jeśli znasz kreatory stron, takie jak Elementor, prawdopodobnie znasz koncepcję tworzenia stron metodą „przeciągnij i upuść”. Gutenberg to próba pełnej integracji tworzenia witryn internetowych metodą „przeciągnij i upuść” z rdzeniem WordPressa.
Przejdźmy więc do najlepszej części dzisiejszego artykułu. Nauczmy się tworzyć prosty blok. Możesz to zrobić ręcznie lub za pomocą wtyczek, takich jak Niestandardowe bloki Genesis (dawniej BlockLab), Leniwe bloki ou ACF. Tworzenie niestandardowych bloków jest trochę techniczne, więc na potrzeby dzisiejszego artykułu użyjemy wtyczki.
Jak stworzyć niestandardowy blok (za pomocą Genesis Custom Blocks)
Łatwiej jest przejść na ścieżkę wtyczek, ponieważ tworzenie niestandardowych bloków Gutenberga od podstaw wymaga dobrego zrozumienia HTML, CSS, PHP i, co najważniejsze, JavaScript. Musisz także zrozumieć React.
W następnej sekcji użyjemy Genesis Custom Blocks. Jego darmowa wersja jest dostępna w oficjalnym repozytorium WordPressa, co oznacza, że możemy ją zainstalować w panelu administratora WordPress.
Zainstaluj niestandardowe bloki Genesis
Zaloguj się do panelu administracyjnego WordPress i przejdź do Rozszerzenia> Dodaj, jak pokazano niżej.
Następnie wpisz „ Niestandardowe bloki Genesis w polu wyszukiwania słów kluczowych i kliknij na przycisku zainstalować teraz
Po tym, aktywować wtyczka na dobry początek
Następnie utwórzmy nowy blok niestandardowy. W celach ilustracyjnych utwórzmy niestandardowe wezwanie do działania (CTA), które dodamy na końcu każdego publikowanego artykułu. Najlepsze jest to, że możesz ponownie używać bloków, aby uniknąć ciągłego tworzenia tych samych bloków.
W menu administratora WordPressa przejdź do Bloki niestandardowe > Dodaj nowy, co podkreślamy poniżej.
Spowoduje to przejście do następnej strony, na której znajdziesz wszystkie opcje tworzenia niestandardowego bloku (w naszym przypadku CTA):
Oto kilka słów, aby wyjaśnić, co widzisz na powyższym zrzucie ekranu. Zaczynając od góry, masz to.
Główny obszar edycji:
- Budowniczy – Prawdopodobnie spędzisz tu dużo czasu projektując swój niestandardowy blok. ten Konstruktor pozwala dodać tytuł, pola, ślimak, słowa kluczowe, kategorię i podgląd własnego bloku. Dowiesz się, jak dodawać pola.
- Edytor szablonów – Po zaprojektowaniu własnego bloku (tj. dodaniu różnych pól), będziesz musiał stworzyć szablon bloku (przeczytać, dodać kod) w edytor modeli. Więcej dowiemy się, gdy zaprojektujemy CTA.
- Podgląd edytora – Umożliwia podgląd niestandardowego bloku w edytorze bloków WordPress.
- Podgląd frontonu – Tutaj możesz podejrzeć, jak niestandardowy blok będzie wyglądał w Twojej witrynie.
- Pole edytora – Pokaże pola w głównym obszarze edycji postu lub strony (wiesz, tak jak widzisz swoje zwykłe posty w edytorze WordPress)
- Pole inspektora – Wyświetla pole na prawym pasku bocznym poniżej Inspektora bloków.
Opcje paska bocznego
- Ślimak – Jest wypełniany automatycznie na podstawie tytułu, który nadałeś swojemu niestandardowemu blokowi. Jest to ważne podczas tworzenia modelu blokowego.
- Ikona – Ta opcja umożliwia dodanie ikony do własnego bloku.
- Kategoria – Pozwala przypisać kategorię do własnego bloku. Możesz skategoryzować swój niestandardowy blok za pomocą jednej z wbudowanych kategorii lub możesz utworzyć zupełnie nową kategorię.
- Słowa kluczowe – Dodaj maksymalnie trzy powiązane słowa kluczowe do niestandardowego bloku, aby ludzie mogli łatwo znaleźć go w selektorze bloków.
- Otwórz pola blokowe w trybie modalnym zamiast renderowania w miejscu – Włącz, jeśli chcesz otwierać pola w trybie modalnym. Jest to przydatne, jeśli masz niestandardowy blok z wieloma polami.
- Rodzaje Pocztowe – Zaznacz pola, aby umożliwić wyświetlanie niestandardowego bloku przy każdym typie postu. Na przykład, jeśli odznaczysz Posty, blok nie pojawi się na żadnych postach.
Utwórz niestandardowy blok
Teraz, gdy lepiej rozumiesz interfejs użytkownika i co robi każda część, zabierzmy się do pracy.
W Konstruktor-Budowniczy –, nadaj blokowi niestandardowemu odpowiedni tytuł. Zamierzamy wybrać CTA dla tego, jak pokazano poniżej.
Przed dodaniem nowych pól dodajmy ikonę, słowa kluczowe i wybierz kategorię dla bloku niestandardowego, jak pokazano poniżej.
Do tego dodajmy kilka pól do naszego niestandardowego bloku. W naszym przykładowym bloku CTA dodamy tylko trzy pola w następującej kolejności: obraz, tekst i pole pliku, które umożliwia pobranie e-booka.
Czytaj także: Wtyczki 5 WooCommerce do zbiorczego edytowania produktów
Dodawanie pól bloku
W sekcji Pola edytoraKliknij ikona plusa (+) aby dodać pierwsze pole, jak pokazano poniżej.
Następnie dodajmy pole obrazu. Na pasku bocznym ustaw Typ pola włączony Obraz i ustaw inne opcje. Weź również pod uwagę ślimak, ponieważ będziemy go używać podczas tworzenia modelu blokowego.
Następnie dodaj pola tekstowe i pola pliku w ten sam sposób.
Przełącz na Edytor szablonów > Znacznik.
Tutaj zaprojektujemy, jak nasz niestandardowy blok będzie wyglądał na Twojej stronie. Edytor modeli akceptuje HTML, CSS i slugi polowe (które należy umieścić w nawiasach kwadratowych). Jeśli potrzebujesz użyć języka PHP, możesz utworzyć szablon za pomocą Metoda modelowania PHP
Nie martw się, to proste.
Dans edytor modeli, pod zakładka znaczników, dodaj następujący kod:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>Podczas pisania kodu zauważysz, że edytor modeli Automatyczne uzupełnianie informacji o polu (np. {{image-field}} ) za Ciebie.
Następnie przejdź do sekcji CSS aby dodać proste style z następującym kodem:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
Możesz dostosować te style, jak chcesz,
Kliknij publikować :
Aby zobaczyć nowy niestandardowy blok w akcji, wróć do pulpitu administracyjnego WordPress i utwórz post w normalny sposób, kliknij przycisk Więcej (+) aby dodać nowy blok i wybrać nowy niestandardowy blok, jak podkreśliliśmy poniżej.
Następnie wypełnij swój niestandardowy blok zgodnie z potrzebami i opublikuj swoją wiadomość:
Teraz, jeśli sprawdzimy nasz nowy niestandardowy blok CTA na interfejsie, to właśnie widzimy.
Nasze niestandardowe CTA jest właśnie tam! Nie martw się o nasze możliwości projektowe – oczywiście w prawdziwym scenariuszu spędzisz trochę więcej czasu na dostosowywaniu swojego bloku. Ale mamy nadzieję, że czegoś się tutaj nauczyłeś.
Inne zalecane zasoby
Zapraszamy również do zapoznania się z Zasoby poniżej, aby przejąć większą własność i kontrolę nad swoją witryną i blogiem.
- 10 wtyczek afiliacyjnych WordPress do tworzenia programu
- Jak dodać wiele kolumn w WordPress
- Jak dodać wiele kolumn w WordPress
- Jak używać różnych środowisk na WordPressie
- Elementor: Jak stworzyć animację po najechaniu myszą
Wnioski
Budowanie niestandardowych bloków nie jest łatwym zadaniem. Ale z WordPress wtyczki takie jak Genesis Custom Blocks i Lazy Blocks, niezależnie od tego, czy jesteś początkującym, czy nie, uda ci się je stworzyć. Od najbardziej podstawowych do złożonych w zależności od Twoich potrzeb.
To wszystko w tym artykule, który pokazuje, jak dodawać niestandardowe czcionki do witryny WordPress. Zapraszamy do spróbowania. Jeśli masz jakiekolwiek wątpliwości lub sugestie, daj nam znać w ciągu commentaires.
Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Tymczasem udostępnij ten artykuł w różnych sieciach społecznościowych.
...
