WP Offload Media

Jestem fanem Advanced Custom Fields (ACF) od dłuższego czasu. Jest on używany na prawie każdej stronie, którą zbudowałem lub nad którą pracowałem przez ostatnie kilka lat.

Dla nieświadomych, ACF jest wtyczką, która daje ci większą kontrolę nad twoją treścią. Używa niestandardowych meta postów, aby wzbogacić swoją zawartość o dane strukturalne. Pozwala również budować i konfigurować pola danych w meta boxach podczas aktualizacji postów, stron, niestandardowych typów postów i wielu innych.

W przeszłości korzystałem z wtyczki jako części projektu na stronie Delicious Brains. Jednak ten wpis na blogu pokazał mi, jak istotne jest rozwiązanie innej firmy dla rozwoju WordPress. Pozwól mi wyjaśnić…

Jak działa ACF

Zajęło mi trochę czasu, aby zrozumieć, co robi ACF, więc oto szybki przykład. Używam go na stronie organizacji charytatywnej zajmującej się ratowaniem psów, gdzie użytkownicy dodają nowe psy do odnalezienia jako niestandardowy typ postu. Jednak wraz z imieniem psa, opisem, tytułem postu i treścią, użytkownicy chcą również przechowywać rasę i płeć psa, link do filmu wideo i kilka zdjęć.

Aby to zrobić, stworzyłem grupę pól dla tych danych z Custom Fields > Grupy pól > Dodaj nowe menu:

Możesz dodawać pola różnych typów. Tutaj użyłem selektorów, pól tekstowych, prostego boolean checkboxa oraz pola galerii. To ostatnie jest opcją ACF Pro i omówię to trochę później.

Oto jak skonfigurowałbyś pole wyboru, wraz z opcjami użytkownika:

Następnie, powiedziałem, że ta grupa powinna pojawić się tylko na ekranach edycji dla Dog niestandardowego typu postu. Istnieje wiele rodzajów logiki, której możesz użyć tutaj, takich jak typy postów, szablony, kategorie i role użytkowników:

Jednakże prawdziwa moc ACF jest wtedy, gdy dodajesz dane.

Dodawanie danych do pól ACF

Ekran edycji wygląda inaczej, gdy pracujesz nad postem Dog. Pokazuje on niestandardowe meta pole uzupełnione o zdefiniowane pola:

To sprawia, że dodawanie wszystkich dodatkowych danych jest łatwe dla edytorów treści. Pozwala również dokładnie określić, gdzie chcesz, aby dane były renderowane w motywie, używając kodu funkcji get_field:

<div class="columns small-12 medium-9"> <a href="<?php get_permalink(); ?>"> <h2 class="icon paw"><?php get_the_title(); ?> <span class="dog-data"> <?php printf( ‘%s %s, get_field( 'gender' ), get_field( 'breed' ) ); ?> </span> </h2> </a></div>

Bez wtyczki musiałbym albo użyć domyślnych niestandardowych pól meta WordPress, zakodować własne bogatsze pola meta od zera, albo wkuć rasę i płeć psa do niestandardowych taksonomii. Mógłbym nawet użyć natywnej galerii osadzonej wewnątrz treści postu. Shudders.

ACF Elevates WordPress

ACF jest dokładnie tym, czego brakowało WordPressowi jako systemowi zarządzania treścią (CMS), jeśli chodzi o posiadanie większej kontroli nad treścią. Z ponad milionem aktywnych instalacji, pomógł uczynić platformę WordPress bardziej potężną, a może nawet przyczynił się do jej wzrostu.

Co więcej, programiści i agencje wykorzystały go, aby dać klientom kontrolę nad ich treścią bez potrzeby stosowania shortcodes, page builderów, a nawet post_content w ogóle. Programiści mają pełną kontrolę nad tym, gdzie dane pojawiają się na frontendzie witryny, unikając nieuniknionych edycji klienta, które niszczą wizualizacje.

W rzeczywistości ACF jest tak popularny wśród naszych klientów, że musieliśmy dodać integrację z WP Offload Media. Teraz obrazy i kadrowanie działają z mediami przeładowanymi do Amazon S3, DigitalOcean Spaces lub Google Cloud Storage.

Dodanie dodatkowych opcji pól do ACF

Darmowa wersja wtyczki ma wiele funkcji. Jednak wersja premium jest niezbędna, aby uzyskać dostęp do pól takich jak repeatery, elastyczne układy i galerie.

Na przykład używamy pola Repeater, aby umożliwić użytkownikom wyświetlanie wybranych referencji w suwaku na stronach produktów. Pole Repeater zawiera zagnieżdżone pole obiektu post:

Pojawia się ono podczas edycji strony, dzięki czemu możemy kontrolować, które referencje zostaną wyświetlone:

Dzięki akcjom i filtrom rozsianym po całej bazie kodu, ACF zawsze był narzędziem niezwykle przyjaznym dla deweloperów i podatnym na rozbudowę. Nadaje również priorytety ulepszeniom, które są ważne dla jego użytkowników.

Używanie lokalnej funkcji JSON

Jednym z niewielu problemów, które znalazłem w przeszłości, było przechowywanie konfiguracji pól w bazie danych, a konkretnie niestandardowych typów postów dla grup pól i pól.

To oznaczało, że jeśli zmieniłeś definicję pola w witrynie deweloperskiej, nie mogłeś przepchnąć swojej bazy danych za pomocą rozwiązania takiego jak WP Migrate DB Pro z powrotem na żywo. Przekonałbyś się, że tabela postów zmieni się i stracisz nowe dane.

Jest to odwieczny problem scalania bazy danych (nie każ mi zaczynać…). Zwykle obchodziłem to, dokonując zmian pól na stronie na żywo jako pierwszy. Następnie przeciągnęłabym bazę danych do mojej lokalnej witryny, aby kontynuować rozwój. Nie jest to idealne rozwiązanie.

Na szczęście, ACF wprowadził funkcję Local JSON. Pozwala ona na zapisywanie konfiguracji pól jako pliki JSON, które mogą być synchronizowane z bazą danych.

Ta wspaniała funkcja rozwiązuje problem łączenia baz danych dla danych ACF. Oznacza to również, że możesz zachować pliki JSON pod kontrolą wersji i sprawić, że konfiguracja będzie częścią typowego procesu wdrażania plików. Podczas pracy z wtyczką w naszej witrynie dodałem kilka poprawek, aby jeszcze bardziej zintegrować ją z naszą konfiguracją Git i wieloma środowiskami:

• Zdefiniowałem katalog JSON do naszego app/data katalogu poza motywem (ponieważ może się on zmienić).
• Pozycja menu „Custom Fields” będzie wyświetlana tylko w środowiskach programistycznych.
• Pliki JSON z nieaktualną konfiguracją bazy danych na admin_init będą automatycznie synchronizowane.

Nawet jeśli mamy teraz Edytor bloków WordPress (wcześniej znany jako Gutenberg), twierdziłbym, że ACF jest nadal niezbędny do stworzenia wspaniałego doświadczenia edycji.

Używanie edytora bloków obok ACF

Edytor bloków oferuje inny kierunek edycji treści niż ACF. Tworzysz zawartość za pomocą bloków, zamiast przechowywać ją jako dane meta postu, co daje ci pewną elastyczność w projektowaniu.

Na początku Edytor bloków nie obsługiwał meta boxów. Zostały one nawet usunięte z ekranu „Edytuj post”, wywołując wiele oburzenia. Teraz wsparcie zostało dodane dla meta-boksów. Pojawiają się one poniżej edytora bloków z minimalnym, mniej wyrafinowanym interfejsem użytkownika (UI).

Używając bloków zamiast pól dla niestandardowych danych, nowy edytor ma potencjał, aby mieć ogromny wpływ na przyszłość ACF. Co więcej, nowe strony będą znacznie mniej skłonne do instalowania narzędzi firm trzecich, teraz, gdy istnieje natywne rozwiązanie.

Jednakże, nie jest to pierwszy raz, gdy proponowane zmiany w rdzeniu zagrażają przyszłości ACF. Kilka lat temu, nowy zespół został stworzony dla Post Meta. Na początku brzmiało to tak, jakby miało to zabić różne rozwiązania pól niestandardowych firm trzecich:

Było wiele bibliotek/frameworków/wtyczek (CMB, SCB, WPAlchemy, ACF, Pods), które wypełniały tę rolę na razie. Będziemy na nie patrzeć jak na duchowe prequele do nowego core-worthy plugin.

W tym czasie pisałem o tym, jak ta decyzja o wprowadzeniu nowych konkurencyjnych funkcji może sprawić, że niektóre wtyczki staną się zbędne. Ostatecznie projekt Post Meta nigdzie się nie udał, pojawił się nowy edytor, a ACF przetrwało burzę.

ACF nie tylko odbiło się od dna, oni się dostosowali. W rezultacie powstało coś, co łączy w sobie moc ACF i elastyczność niestandardowych bloków. Porozmawiajmy o tym teraz.

Jak zbudować Bloki używając ACF

Oczywiście, niestandardowe Bloki mogą być korzystne. Jednakże, techniczny proces ich tworzenia jest skomplikowany. Bloki ACF wypełniają tę lukę.

Bloki ACF integrują się z twoimi obecnymi niestandardowymi polami, są dynamiczne i konfigurowalne, i pozwalają ci osiągnąć dwie rzeczy:

• Możesz przenieść swoje obecne niestandardowe pola do ekosystemu Edytora Bloków.
• Jesteś w stanie tworzyć niestandardowe rozwiązania inline.

Są one renderowane za pomocą pliku szablonu PHP lub funkcji callback – więc jest to tak samo jak tworzenie motywu. Zachowują one również kompatybilność z rdzeniem WordPressa, więc można nawet tworzyć bloki wielokrotnego użytku za pomocą frameworka.

Choć Bloki ACF nie są kulą u nogi, powiedziałbym, że jeśli twoje umiejętności React są wciąż pobieżne, na pewno będziesz chciał je dokładniej zbadać. Pozwolą ci one wykorzystać możliwości edytora bloków, pozostając jednocześnie w znanym pliku functions.php.

Budowanie bloku ACF

Pokażemy ci, jak zbudować blok ACF. Wersja Pro narzędzia zawiera tą funkcjonalność od ACF 5.8, więc jest ona z nami już od około dwóch lat. Oto super prosty przykładowy kod rejestracji bloku:

add_action('acf/init', 'my_acf_init');function my_acf_init() { // check function exists if( function_exists('acf_register_block_type') ) { // register a testimonial block acf_register_block_type(array( 'name' => 'testimonial', 'title' => __('Testimonial'), 'description' => __('A custom testimonial block.'), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'render_callback' => 'my_acf_bock_render_callback', 'category' => 'formatting', 'icon' => 'admin-comments', 'keywords' => array( 'testimonial', 'quote' ), )); }}

Z tego miejsca będziesz chciał utworzyć grupę pól i renderować blok. W przypadku tego pierwszego zrobisz to z poziomu ekranu Custom Fields > Field Groups w obrębie WordPress:

Tutaj dodaj swoją grupę pól i wypełnij ją jak zwykle. Jednakże, w polu meta „Lokalizacja”, będziesz chciał użyć reguły „Blok”, aby wybrać (w tym przypadku) Blok Świadectwa.

Na koniec, będziesz musiał wyrenderować Blok. Jest to ten sam proces, do którego możesz być już przyzwyczajony z polami niestandardowymi:

• Utwórz plik szablonu dla swojego motywu w oparciu o parametr podany w ustawieniu render_template podczas początkowej rejestracji Bloku.
• Choose the right method for rendering the Block.
• Enqueue your styles and scripts.

Note that the acf_register_block_type() function offers enqueue_styleenqueue_script and enqueue_assets settings.

On the whole, Blocks shouldn’t replace every custom field meta box where they’re needed, but they will let you take advantage of crafting content in the editor.

’InnerBlocks’ Support

The Block Editor also has functionality that helps you work with ACF Blocks. InnerBlocks essentially let you insert any new Block into your ACF Block.

They can be custom or core Blocks, and you’re able to use the current „Title”, „Content”, and „Button” fields in your own ACF Blocks.

Here’s a quick tutorial to get up and running. Aby rozpocząć korzystanie z InnerBlocks, dołączamy 'jsx' => true do tablicy supports:

acf_register_block_type( array( 'name' => 'testimonial', 'title' => __( 'Testimonial' ), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'mode' => 'preview', 'supports' => ));

Będziesz następnie potrzebował echo znacznika <InnerBlocks /> HTML w swoim szablonie Block:

 echo '<div class="block-about__content">'; echo '<InnerBlocks />';

To tylko prosty przykład, ale z InnerBlocks możesz zrobić o wiele więcej.

Alternatywy dla Bloków ACF

Oczywiście, ACF nie będzie jedynym rozwiązaniem do tworzenia Bloków. W związku z tym, twoim pierwszym odruchem będzie prawdopodobnie budowa niestandardowa.

W przeszłości opisaliśmy, jak stworzyć „waniliowy” Blok, ale zanim zaczniesz, będziesz potrzebował wiedzy na temat React.

Istnieją również wtyczki WordPress, które pozwalają składać Bloki z różnych komponentów, ale powiedziałbym, że nie są one przeznaczone dla programistów, ale dla „majsterkowiczów”. Lazy Blocks jest regularnie aktualizowany, więc jest to dobra opcja, jeśli chcesz poeksperymentować z tym, co oferuje.

Przyszłość ACF

Od momentu wydania, ACF jest istotną wtyczką uzupełniającą dla WordPressa. Rozszerza, wzbogaca i czyni platformę bardziej użyteczną. Nie sądzę, że mógłbym budować strony bez niego.

Jednakże połączenie edytora bloków i bloków ACF jest wisienką na torcie – jest to doskonała inwestycja w przyszłość CMS. Pomoże obniżyć barierę wejścia dla programistów, aby rozszerzyć Block Editor bez rozpoczynania stromej krzywej uczenia się React. Na dłuższą metę ci, którzy tak mocno naciskają na ewolucję edytora blokowego, mogą uznać to za wygraną.