WP Offload Media

Am fost un fan al Advanced Custom Fields (ACF) pentru o lungă perioadă de timp. Este folosit pe aproape fiecare site pe care l-am construit sau la care am lucrat în ultimii ani.

Pentru cei care nu știu, ACF este un plugin care vă oferă mai mult control asupra conținutului dvs. Folosește custom post meta pentru a vă îmbogăți conținutul cu date structurate. De asemenea, vă permite să construiți și să configurați câmpurile de date din casetele meta atunci când actualizați postări, pagini, tipuri de postări personalizate și multe altele.

În trecut, am folosit pluginul ca parte a unui proiect pe site-ul Delicious Brains. Cu toate acestea, această postare pe blog mi-a arătat cât de vitală este soluția terță parte pentru dezvoltarea WordPress. Permiteți-mi să vă explic…

Cum funcționează ACF

Mi-a luat ceva timp să-mi dau seama ce face ACF, așa că iată un exemplu rapid. L-am folosit pe un site caritabil de salvare a câinilor, unde utilizatorii adaugă noi câini pentru relocare ca un tip de post personalizat. Cu toate acestea, pe lângă numele, descrierea, titlul postului și conținutul câinelui, doresc să stocheze și rasa și sexul câinelui, un link către un videoclip și câteva fotografii.

Pentru a face acest lucru, am creat un grup de câmpuri pentru aceste date din Câmpuri personalizate > Grupuri de câmpuri > Meniul Adaugă nou:

Puteți adăuga câmpuri de diferite tipuri. Aici am folosit selecturi, căsuțe de text, o casetă de verificare booleană simplă și un câmp de galerie. Acesta din urmă este o opțiune ACF Pro, despre care voi discuta mai mult mai târziu.

Iată cum ați configura o casetă de selectare, completată cu opțiunile utilizatorului:

În continuare, am spus că acest grup ar trebui să apară doar pe ecranele de editare pentru tipul de post personalizat Dog. Există tot felul de logică pe care o puteți folosi aici, cum ar fi tipurile de post, șabloanele, categoriile și rolurile utilizatorilor:

Cu toate acestea, adevărata putere a ACF este atunci când adăugați date.

Adaugarea de date la câmpurile ACF

Ecranul de editare arată diferit atunci când lucrați pe un Dog post. Acesta arată o casetă meta personalizată completată cu câmpurile definite:

Acest lucru face ca adăugarea tuturor datelor suplimentare să fie ușoară pentru editorii de conținut. De asemenea, vă permite să specificați exact unde doriți ca datele să fie redate în temă, folosind codul funcției 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>

Fără plugin, ar trebui fie să folosesc căsuțele meta predefinite WordPress personalizate, fie să îmi codific propriile căsuțe meta mai bogate de la zero, fie să introduc cu pantofii rasa și sexul câinelui în taxonomii personalizate. S-ar putea chiar să trebuiască să folosesc galeria nativă încorporată în conținutul postării. Shudders.

ACF Elevates WordPress

ACF este exact ceea ce îi lipsește lui WordPress ca sistem de gestionare a conținutului (CMS) atunci când vine vorba de a avea mai mult control asupra conținutului tău. Cu peste un milion de instalări active, a ajutat să facă platforma WordPress mai puternică și este posibil să fi contribuit chiar la creșterea acesteia.

În plus, dezvoltatorii și agențiile l-au folosit pentru a le oferi clienților controlul asupra conținutului lor fără a avea nevoie de shortcodes, constructori de pagini sau chiar post_content deloc. Dezvoltatorii au control complet asupra locului în care apar datele în partea frontală a site-ului, evitând inevitabilele editări ale clienților care distrug elementele vizuale.

De fapt, ACF este atât de popular în rândul clienților noștri, încât a trebuit să adăugăm o integrare cu WP Offload Media. Acum, imaginile și decuparea funcționează cu mediile descărcate pe Amazon S3, DigitalOcean Spaces sau Google Cloud Storage.

Adaugarea de opțiuni de câmp suplimentare pentru ACF

Versiunea gratuită a pluginului are o mulțime de funcționalități. Cu toate acestea, versiunea premium este esențială pentru a avea acces la câmpuri precum repetori, layout-uri flexibile și galerii.

De exemplu, folosim câmpul Repetor pentru a le permite utilizatorilor să afișeze mărturii selectate într-un slider pe paginile de produs. Repeater conține un câmp post object imbricate:

Apare apoi la editarea paginii, astfel încât putem controla ce mărturii vor fi afișate:

Cu acțiuni și filtre presărate în jurul bazei de cod, ACF a fost întotdeauna un instrument extrem de ușor de dezvoltat și extensibil. De asemenea, acordă prioritate îmbunătățirilor care sunt importante pentru utilizatorii săi.

Utilizarea caracteristicii JSON locale

Cu toate acestea, una dintre puținele probleme pe care le-am găsit în trecut a fost stocarea configurațiilor de câmp în baza de date, în special a tipurilor de postări personalizate pentru grupuri de câmpuri și câmpuri.

Acest lucru însemna că, dacă ați schimbat definiția câmpului pe un site de dezvoltare, nu ați putut împinge baza de date folosind o soluție precum WP Migrate DB Pro înapoi în live. Ați fi constatat că tabelul de postări s-ar fi schimbat și ați fi pierdut noile date.

Aceasta este vechea problemă de fuziune a bazelor de date (nu mă faceți să încep…). Obișnuiam să ocolesc acest lucru făcând mai întâi modificări de câmpuri pe site-ul live. Apoi, aș trage baza de date pe site-ul meu local pentru a continua dezvoltarea. Nu este ideal.

Din fericire, ACF a introdus caracteristica Local JSON. Ceea ce face aceasta este să permită ca configurările câmpurilor să fie salvate ca fișiere JSON, care se pot sincroniza cu baza de date.

Această caracteristică minunată rezolvă problema fuzionării bazei de date pentru datele ACF. De asemenea, înseamnă că puteți păstra fișierele JSON sub controlul versiunii și puteți face ca configurația să facă parte din procesul obișnuit de implementare a fișierelor. În timp ce lucram cu pluginul pe site-ul nostru, am adăugat câteva modificări pentru a-l integra și mai mult în configurația noastră Git și multi-mediu:

• Am definit directorul JSON în directorul nostru app/data în afara temei (deoarece s-ar putea schimba).
• Elementul de meniu „Custom Fields” se va afișa numai în mediile de dezvoltare.
• Filele JSON cu o configurație a bazei de date neactualizată pe admin_init se vor sincroniza automat.

Chiar dacă acum avem editorul de blocuri WordPress (cunoscut anterior sub numele de Gutenberg), aș spune că ACF este încă vital pentru a crea o experiență de editare excelentă.

Utilizarea editorului de blocuri alături de ACF

Editorul de blocuri oferă o direcție diferită pentru editarea conținutului față de ACF. Creați conținut folosind Blocuri în loc să îl stocați ca meta date ale postării, ceea ce vă oferă o anumită flexibilitate de proiectare.

La început, Editorul de blocuri nu suporta meta casetele. Acestea au fost chiar eliminate din ecranul „Edit Post”, provocând multă indignare. Acum, a fost adăugat suport pentru căsuțele meta. Acestea apar sub editorul de blocuri, cu o interfață utilizator (UI) minimă și mai puțin rafinată.

Utilizând blocuri în loc de câmpuri pentru date personalizate, noul editor are potențialul de a avea un impact uriaș asupra viitorului ACF. Mai mult, este mult mai puțin probabil ca site-urile noi să instaleze un instrument terț acum că există o soluție nativă.

Cu toate acestea, nu este prima dată când modificările de bază propuse au amenințat viitorul ACF. În urmă cu câțiva ani, a fost creată o nouă echipă pentru Post Meta. La început, acest lucru părea că va ucide diversele soluții de câmpuri personalizate de la terți:

Au existat o mulțime de biblioteci/frameworks/plugins (CMB, SCB, WPAlchemy, ACF, Pods), care au îndeplinit acest rol pentru moment. Le vom privi ca pe niște prelungiri spirituale ale unui nou plugin demn de nucleu.

La momentul respectiv, am scris despre faptul că această decizie de a introduce noi caracteristici concurente ar putea face unele plugin-uri redundante. În cele din urmă, proiectul Post Meta nu a ajuns nicăieri, noul editor a sosit, iar ACF a rezistat furtunii.

ACF nu numai că și-a revenit, dar s-a și adaptat. Rezultatul a fost ceva care a combinat puterea ACF și flexibilitatea blocurilor personalizate. Să vorbim despre acest lucru în continuare.

Cum să construiți Blocuri folosind ACF

Evident, Blocurile personalizate pot fi benefice. Cu toate acestea, procesul tehnic pentru a le crea este complex. Blocurile ACF acoperă acest gol.

Blocurile ACF se integrează cu câmpurile dvs. personalizate actuale, sunt dinamice și personalizabile și vă permit să realizați două lucruri:

• Puteți lua câmpurile dvs. personalizate actuale în ecosistemul Block Editor.
• Puteți crea soluții personalizate în linie.

Sunt redate folosind un fișier șablon PHP sau funcția callback – deci este ca și cum ați dezvolta o temă. Ele păstrează, de asemenea, compatibilitatea cu nucleul WordPress, astfel încât ați putea chiar să creați Blocuri reutilizabile prin intermediul cadrului.

În timp ce Blocurile ACF nu sunt o cârjă, aș spune că, dacă abilitățile dvs. de React sunt încă sumare, veți dori cu siguranță să le investigați mai departe. Ele vă vor permite să valorificați puterea editorului de blocuriîn timp ce rămâneți în cadrul fișierului familiar functions.php.

Construirea unui bloc ACF

Să vă arătăm cum să construiți un bloc ACF. Versiunea Pro a instrumentului a inclus această funcționalitate de la ACF 5.8, deci este cu noi de aproximativ doi ani. Iată codul super-simplu de înregistrare a blocului de exemplu:

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' ), )); }}

De aici, veți dori să creați un grup de câmpuri și să redați Blocul. Pentru primul, veți face acest lucru din cadrul ecranului Custom Fields > Field Groups (Grupuri de câmpuri personalizate) din WordPress:

Aici, adăugați grupul de câmpuri și populați-l în mod normal. Cu toate acestea, în caseta meta „Location” (Locație), veți dori să utilizați regula „Block” (Bloc) pentru a selecta (în acest caz) Blocul de mărturii.

În cele din urmă, va trebui să redați Blocul. Acesta urmează același proces cu care s-ar putea să fiți deja obișnuiți cu câmpurile personalizate:

• Crearea unui fișier șablon pentru tema dvs. pe baza parametrului dat în setarea render_template la înregistrarea inițială a Blocului.
• 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. Pentru a începe să utilizați InnerBlocks, includeți 'jsx' => true în matricea supports:

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

Apoi va trebui să echo tag-ul HTML <InnerBlocks /> în șablonul dvs. de blocuri:

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

Acesta este doar un exemplu simplu, dar puteți face mult mai multe cu InnerBlocks.

Alternative la ACF Blocks

Desigur, ACF nu va fi singura soluție pentru crearea de Blocuri. Ca atare, primul dvs. instinct va fi probabil o construcție personalizată.

Am acoperit în trecut cum să creăm un Bloc „vanilie”, dar înainte de a începe, veți avea nevoie de cunoștințe despre React.

Există, de asemenea, plugin-uri WordPress care vă permit să asamblați Blocuri din diverse componente, dar aș spune că acestea nu sunt cu adevărat pentru dezvoltatori, ci pentru „tinichigii utilizatori finali”. Lazy Blocks este actualizat în mod regulat, așa că aceasta este o opțiune bună dacă doriți să experimentați cu ceea ce oferă.

Viitorul ACF

De la lansarea sa, ACF a fost un plugin complementar vital pentru WordPress. Acesta extinde, îmbogățește și face ca platforma să fie mai ușor de utilizat. Nu cred că aș putea construi site-uri web fără el.

Cu toate acestea, combinarea Block Editor și ACF Blocks este cireașa de pe tort – este o investiție excelentă în viitorul CMS. Va ajuta la scăderea barierei de intrare pentru dezvoltatori pentru a extinde editorul de blocuri fără a începe pe curba de învățare abruptă a React. Pe termen lung, cei care insistă atât de mult pentru evoluția editorului de blocuri ar putea vedea acest lucru ca pe un câștig.

.