Przebudowanie tabeli cen Flywheel jako bloku niestandardowego (w około 10 minut)

Edytor bloków (Gutenberg) jest niewątpliwie centrum współczesnego WordPressa. Z pełną edycją witryny w drodze do WordPress Core, bloki i wszystko, co obiecują, zostaną na zawsze.

Jednak klocki nie zawsze robią to, co chcemy lub wyglądają tak, jak lubimy. Jeśli projektujesz i budujesz witryny, aby żyć, wiesz, że rzeczy do wycinania ciastek zachodzą w sieci tylko tak daleko. W pewnym momencie potrzebujemy tego „bloku” na stronie, aby wyglądał lub zachowywał się w naprawdę szczególny sposób.

Rozwiązaniem są bloki niestandardowe! Ale niestandardowe bloki wymagają od wielu osób, które od jakiegoś czasu korzystają z WordPressa, zupełnie innego podejścia do tworzenia.

Różne? Tak!

Trudny? Nie!

Pokażę Ci, jak łatwo zbudować całkowicie niestandardowy blok. I zajmie to około 10 minut. Dla każdego freelancera lub ekipy agencji, która chce podszkolić się w edytorze bloków, myślę, że spodoba ci się to!

Blok

Wyobraźmy sobie, że pracujemy nad projektem, a projektant wręcza nam ładny projekt witryny eCommerce. Wykorzystuje to, co najlepsze w WordPress + WooCommerce, ale jest kilka elementów, które po prostu nie działają z półki. Jednym z nich jest to tutaj:

Holup ! To wygląda znajomo!

Tak, przebudujemy tabelę cen Flywheel jako blok niestandardowy. ? Istnieją bloki tabeli cen typu plug-n-play, ale nasza tutaj jest dość wyjątkowa, więc zamierzamy rzucić własne.

Ustawić

Bohaterem tej historii jest wtyczka Genesis Custom Blocks. Jest bezpłatny na wordpress.org i istnieje wersja Pro, która oferuje kilka fajnych zaawansowanych funkcji, w tym:

• Świeża instalacja WordPressa – komplementy dla Local
• Zainstalowane i aktywne bloki Genesis Custom Blocks (bezpłatne)
• Motyw potomny dla motywu Genesis Block

Ważna uwaga: Genesis Custom Blocks nie jest zależny od Genesis Framework, powyższego Genesis Block Theme ani żadnych innych wtyczek lub motywów.

Rejestracja i konfiguracja bloku

Piękno tej wtyczki polega na tym, że możemy tak wiele zrobić w administratorze WordPress.

W panelu administracyjnym WordPressa, w menu po lewej stronie, przejdź do Bloki niestandardowe > Dodaj nowy

Ekran, który teraz widzimy, to Konstruktor bloków, w którym zamierzamy skonfigurować kilka rzeczy dla naszego bloku, w tym dodawanie pól.

Sposób działania tej wtyczki polega na tym, że tworzy niestandardowe bloki, w których użytkownik pracujący w Edytorze bloków wprowadza zawartość i dane za pomocą pól w interfejsie przypominającym formularz. Ten uproszczony/opiniowany interfejs jest jedną z rzeczy, które przyspieszają proces tworzenia niestandardowych bloków. Nie musisz wymyślać interfejsu wejściowego.

Dodawane przez nas szczegóły bloku to:

• Nazwa: Cennik
• Ślimak: cennik
• Ikona: Planeta Genesis

Pola, które dodajemy to:

Dodawanie pól do naszego niestandardowego bloku wygląda tak:

Po dodaniu wszystkich naszych pól wygląda to tak:

Kiedy klikamy publikację, otrzymujemy podpowiedź , co robić dalej.

To prowadzi nas do następnego kroku:

Szablonowanie bloku

Blok jest aktualnie zarejestrowany i dostępny w edytorze bloków. Możesz przeskoczyć do nowego posta/strony i dodać blok, tak jak każdy inny. Jednak (jeszcze) niczego nie wyświetla. Tu właśnie pojawia się szablonowanie.

Genesis Custom Blocks pozwala twórcom WordPressa na wykorzystanie wielu praktyk tworzenia szablonów, które doskonaliliśmy w ciągu ostatniej dekady. To bardzo proste i będzie bardzo znajome.

W naszym motywie potomnym dodajemy kilka nowych folderów i plików, takich jak:

/genesis-block-child-theme
    /blocks
        /pricing-table
            block.php
            block.css

Rzeczy, na które należy zwrócić uwagę:

• Dodajemy folder blocks w naszym motywie (motyw potomny).
• Dodajemy folder specyficzny dla bloku, nad którym aktualnie pracujemy, i nazywamy go niezależnie od tego, jaki jest slug bloków, czyli w tym przypadku jest to pricing-table .
• Dodajemy plik PHP i plik CSS. Tutaj dodamy nasz kod szablonu.

Zaczynając od naszego pliku PHP, zacznijmy od naszych podstawowych znaczników HTML i klas CSS.

Będzie to wyglądać tak:

<div class="fw-pricing-table">
    <img src="">
    <h3 class="fw-pricing-table__name"></h3>
    <p class="fw-pricing-table__description"></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><span> monthly visits</span></p>
			<progress value="" max="400000"></progress>
		</div>
		<div>
			<p><span>GB Disk</span></p>
			<progress value="" max="50"></progress>
		</div>
		<div>
			<p><<span>GB bandwidth</span></p>
			<progress value="" max="500"></progress>
		</div>
	</div>
</div>

Rzeczy, na które należy zwrócić uwagę:

• Mamy kilka klas CSS gotowych do pracy. Uwaga: możesz poradzić sobie z CSS, ale ma to dla ciebie sens.
• Użyjemy tagu HTML <progress> do obsługi naszych pasków zasobów.

Teraz będziemy pracować z prostą funkcją PHP, którą udostępnia nam wtyczka. Dostępnych jest kilka, ale prawdopodobnie większość czasu spędzisz, korzystając z tych dwóch poniższych. Używamy wyłącznie pierwszego w tym bloku.

Dzięki tym funkcjom nasz plik szablonu PHP wygląda teraz tak:

<div class="fw-pricing-table">
    <img src="<?php block_field( 'icon' ); ?>">
    <h3 class="fw-pricing-table__name"><?php block_field( 'name' ); ?></h3>
    <p class="fw-pricing-table__description"><?php block_field( 'description' ); ?></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span><?php block_field( 'price' ); ?></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="<?php block_field( 'url' ); ?>">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span><?php block_field( 'site-count' ); ?></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><?php block_field( 'monthly-visits' ); ?><span> monthly visits</span></p>
			<progress value="<?php block_field( 'monthly-visits' ); ?>" max="400000"></progress>
		</div>
		<div>
			<p><?php block_field( 'disk-space' ); ?><span>GB Disk</span></p>
			<progress value="<?php block_field( 'disk-space' ); ?>" max="50"></progress>
		</div>
		<div>
			<p><?php block_field( 'bandwidth' ); ?><span>GB bandwidth</span></p>
			<progress value="<?php block_field( 'bandwidth' ); ?>" max="500"></progress>
		</div>
	</div>
</div>

Możesz zobaczyć, gdzie użyliśmy tej funkcji block_field() do pobrania i wyprowadzenia danych. Po prostu używamy slug pola jako argumentu w funkcji. Np block_field( 'icon' ) . To, będąc typem pola obrazu, zwraca adres URL tego obrazu.

W przypadku naszego CSS umieszczamy to w pliku szablonu block.css. Po raz kolejny CSS można obracać w dowolny sposób, a konkretny kod, który napisałem, nie jest szczególnie istotny dla tego samouczka, ale zostawię to tutaj, abyś mógł to sprawdzić.

.fw-pricing-table {
    border-radius: 4px;
    transition: box-shadow .3s ease-in-out;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 2rem 2em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fw-pricing-table:hover {
    box-shadow: 0 5px 22px 0 rgb(0 0 0 / 10%);
}

.fw-pricing-table img {
    max-height: 100px;
    width: auto;
}

.fw-pricing-table__name {
    margin-top: 20px;
    font-weight: 400;
}

.fw-pricing-table__description {
    font-size: 16px;
    font-style: italic;
    font-family: serif;
    max-width: 160px;
}

.fw-pricing-table__price {
    color: #50c6db;
    display: flex;
    align-items: flex-start;
    font-size: 46px;
    font-weight: 500;
}

.fw-pricing-table__price span:last-child {
    font-size: 24px;
    margin-top: 6px;
}

.fw-pricing-table__btn {
    display: block;
    background-color: #338199;
    color: #fff;
    padding: 6px 20px;
    border-radius: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 10px;
}

.fw-pricing-table__btn:hover {
    background-color: #01516e;
    color: #fff;
}

.fw-pricing-table__site-count {
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #50c6db;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.fw-pricing-table__resources {
    margin-top: 8px;
}

.fw-pricing-table__resources>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fw-pricing-table__resources p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 18px;
}

.fw-pricing-table__resources progress[value] {
    margin-top: 6px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-bar {
    background-color: #e7e7e7;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-value {
    background-color: #50c6db;
    border-radius: 3px;
}

Najbardziej interesującą częścią CSS jest tutaj stylizacja tagu <progress> . Trochę kłopotliwe, ale tak właśnie jest. Możesz przełączyć się na zagnieżdżone ustawienia div dla tych i obliczyć ustawione szerokości, jeśli chcesz uniknąć <progress> .

I to wszystko! ?

Podsumowanie:

1. Dodaliśmy i skonfigurowaliśmy blok w WP Admin
2. Stworzyliśmy plik szablonu PHP z marnymi 29 wierszami podstawowego kodu HTML i jedną funkcją PHP
3. Wrzuciliśmy trochę CSS do block.css dla naszych stylów.

Korzystanie z naszego niestandardowego bloku

Więc teraz możemy przeskoczyć i utworzyć nowy post lub stronę i dodać blok. Aby zachować ten 4-kolumnowy styl opcji cenowych, najpierw dodajemy blok kolumn, a następnie wstawiamy blok niestandardowej tabeli cenowej do każdej kolumny.

Klikając przycisk „Dodaj blok” , możesz zobaczyć tutaj nasz blok tabeli cenowej jest gotowy do użycia.

Poniżej pokazano, jak mam cztery kolumny i cztery razy dodałem niestandardowy blok. Gdy wybieram pojedynczy blok, możesz zobaczyć, jak przełącza się na interfejs formularza, który daje nam pola do wpisywania treści. Kliknięcie poza widok formularza daje nam podgląd.

Wygląda pięknie w edytorze bloków i wygląda równie dobrze na froncie. Ponieważ wykorzystujemy również blok kolumn, wszystko jest przyjemne i responsywne.

Dzięki naszym projektom wykonanym dla nas do pracy i możliwości oparcia się na responsywnym bloku kolumn Gutenberga, całkowity czas budowy tego bloku wyniósł dla mnie mniej niż 10 minut.

Jest kilka rzeczy, które możesz zrobić, aby jeszcze bardziej ulepszyć blok:

• Istnieje kilka ciągów, które muszą być w liczbie mnogiej. Tj. „Witryna WordPress” powinna być „Witrynami WordPress” w przypadku planów z więcej niż 1 limitem witryn. Pewna podstawowa logika w pliku szablonu PHP może rozwiązać ten problem.
• Możesz pominąć blok kolumn i zamiast tego użyć pola Repeater (funkcja Pro) i zawrzeć wszystkie plany w jednym bloku.
• Dodaj przecinki do większych liczb.
• Paski postępu pokazują dokładną wartość do max relacji. To wygląda trochę dziwnie. Możesz przejść do czegoś bardziej konceptualnego od wartości.

Zawijanie rzeczy

Jeśli chcesz pobrać i zainstalować ten blok, możesz pobrać pliki tutaj. Dokumentację dotyczącą importowania bloków niestandardowych można znaleźć tutaj.

Inne ważne linki:

• Wtyczka
• Witryna z Dokumentami
• Społeczność Genesis Slack

Jeśli chcesz zobaczyć nieco więcej niestandardowych bloków Genesis w akcji, podczas ostatniej sesji na DE{CODE} zbudowałem i zademonstrowałem cztery oddzielne niestandardowe bloki (o rosnącej złożoności) w około 15 minut. Sprawdź nagrywanie na żądanie tutaj.

Mam nadzieję, że uznałeś to za przydatne i zrozumiałeś, w jaki sposób wykorzystanie mocy Edytora bloków do niestandardowych projektów i kompilacji jest naprawdę bardzo łatwe.

Dzięki!

Uzyskaj bezpłatny dostęp do stworzonych przez Genesis motywów StudioPress z kołem zamachowym!

Ważne jest, aby Twój dostawca usług hostingowych robił dla Ciebie jak najwięcej, a to wykracza poza wydajność i bezpieczeństwo! Dzięki dostępowi do ponad 35 motywów StudioPress stworzonych przez Genesis bez dodatkowych kosztów, Flywheel zapewnia piękną bibliotekę motywów, dzięki czemu możesz budować lub rekonfigurować swoje witryny w sposób pasujący do celów Twojej witryny! Dowiedz się więcej o kole zamachowym tutaj.