7 Hal yang Tidak Anda Ketahui Dapat Anda Lakukan Dengan Bidang Kustom Lanjutan

Advanced Custom Fields (ACF) hampir identik dengan pengembangan WordPress. Memberdayakan lebih dari 4,5 juta situs, plugin ini telah membantu WordPress berkembang ke ketinggian baru. Anda tahu pluginnya. Anda mungkin telah membangun dengan plugin. Tetapi apakah Anda memanfaatkannya sepenuhnya?

Dalam sesi ini, kita akan melihat dengan cepat beberapa cara yang kurang dikenal untuk memanfaatkan ACF untuk membangun pengalaman WordPress Anda yang paling dinamis, kuat, dan menarik.

Pembicara:

• Iain Poulson, Manajer Produk Senior di WP Engine
• Rob Stinson, Manajer Pemasaran Produk di WP Engine

Slide Sesi:

Salinan:

Iain Poulson: Halo, dan selamat datang di sesi kami di plugin Advanced Custom Fields. Saya Iain Poulson, Manajer Produk untuk ACF di WP Engine, dan di sini saya bergabung dengan Rob Stinson, yang merupakan Manajer Pemasaran Produk kami. Hari ini, kami akan membawa Anda melalui sesi yang cukup cepat dari tujuh hal yang Anda tidak tahu dapat Anda lakukan dengan plug-in Bidang Kustom Lanjutan, beberapa hal yang cukup baru, dan beberapa hal yang kurang dikenal. Dan fungsionalitas yang akan kami pusatkan di sekitar situs fiktif yang telah dirancang oleh Rob, jadi pada dasarnya kami adalah penggemar contoh nyata daripada hal-hal abstrak, tetapi kami juga penggemar berat film.

Jadi situs ini adalah perayaan periode sinema terbaik, mungkin, bisa dibilang, film-film tahun 90-an, jadi situs ini didasarkan pada pengakuan dan pemberian penghargaan untuk film-film paling populer dan paling dicintai di tahun 90-an. Situs perlu menampilkan film dan memungkinkan pengguna untuk memilih favorit mereka, dan dengan gaya Rob yang sebenarnya, situs ini tampak hebat. Jadi mari kita mulai, dan mulai dari awal, dan instal ACF. Katakan padaku caranya, Rob.

ROB Stinson: Keren, terima kasih, Iain. Ya, terima kasih. Kelihatannya cukup bagus, bukan? Sudah cukup banyak waktu mendesainnya, bersenang-senang. Jadi kami telah memenangkan kontrak. Kami memiliki proyek dan kami memulai, dan hal pertama yang kami lakukan adalah jika teridentifikasi, ini masuk akal pertama, untuk ACF. Kita perlu menyiapkan banyak bidang khusus untuk beberapa jenis kiriman khusus, dan melakukan beberapa pembuatan templat yang menarik dan hal-hal seperti itu. ACF adalah alat untuk pekerjaan di sini. Jadi tentu saja, kita perlu menginstal ACF terlebih dahulu, dan itu yang nomor satu di sini. Biasanya kami tahu bahwa Anda dapat mengambil plug-in sebagai file zip, dan mengunggahnya ke admin WordPress, bagus dan sederhana.

Itu adalah cara standar untuk menginstal plug-in, tetapi kami juga tahu bahwa pengembang saat ini suka mengelola dependensi mereka sedikit berbeda. Saya biasanya suka mengelolanya di dalam kode, dan di dalam dunia PHP, yang biasanya dilakukan dengan Komposer. Sekarang Anda dapat menginstal plugin WordPress dari repo WordPress.org untuk beberapa waktu dengan cukup mudah menggunakan Composer, tetapi agak sulit melakukannya dengan plugin premium seperti ACF Pro.

Tapi rilis terbaru beberapa minggu yang lalu, sebenarnya, sekitar sebulan yang lalu, kami sebenarnya mengaktifkan kemampuan untuk menginstal ACL Pro sekarang melalui Composer, yang luar biasa, jadi kami akan melakukannya sekarang. Jadi bagaimana melakukannya, langkah nomor satu, Anda perlu menambahkan URL Repo Komposer ACF Pro ke file composer.JSON Anda. Langkah nomor dua adalah, Anda akan membuat file auth.JSON untuk kredensial Anda, dan Anda akan menempatkannya di root proyek Anda, baik secara lokal maupun dalam perjalanan ke tempat kami menerapkan dan kredensial yang Anda perlukan untuk file itu sekarang tersedia di area akun Anda di advancedcustomfields.com.

Jadi jika Anda masuk, Anda akan melihat area lisensi, dan ada beberapa tab tambahan dan hal-hal seperti itu, Anda benar-benar dapat mengambil seluruh potongan kode, menyalin dan menempelkan semuanya, atau Anda dapat mengambil nama pengguna individual dan kata sandi, dan bawa ke file yang telah Anda buat, file auth.JSON.

Dan langkah ketiga, kami menjalankan perintah Komposer, jadi itu bagus dan mudah, proses 3 langkah, tetapi fantastis karena itu berarti, seperti yang saya katakan, pengembang yang suka semacam memiliki kontrol yang lebih baik atas bagaimana mereka mengelola ketergantungan proyek mereka, Anda sekarang dapat melakukannya dengan ACF Pro, yang luar biasa. Tentu saja ada lebih banyak dokumentasi di dalamnya, jadi untuk lebih dalam dan hanya untuk melihat bagaimana semuanya dibongkar, lompat ke dokumen di situs web, dan Anda sebaiknya melakukannya. Keren, saya akan muntah ke Iain untuk nomor dua.

Iain Poulson: Benar, sekarang mari kita bicara tentang menyiapkan data untuk situs tersebut. Jadi jenis posting khusus, mereka sangat mendasar di WordPress dalam cara Anda membangun situs yang bukan hanya tentang posting atau halaman. Ini adalah fitur jenis posting khusus yang datang dalam versi WordPress apa pun yang mengubahnya menjadi CMS yang tepat, dan biasanya ini adalah langkah pertama yang dilakukan pengembang saat mereka membangun situs. Dan itu selalu menjadi sesuatu yang terjadi di luar ACF. Secara historis, Anda mendaftarkan jenis posting dengan kode, atau menggunakan plugin lain untuk melakukan itu, tetapi itu adalah bagian dari perjalanan yang terhubung dengan baik dengan ACF. Jadi sebagai bagian dari ACF 6.1, fungsionalitas tersebut hadir di plugin, jadi ini adalah titik awal alami dari perjalanan.

Anda ingin membangun situs dengan data struktur data, Anda akan membuat tipe posting. Anda akan menambahkan bidang ke dalamnya, dan kemudian Anda mungkin menambahkan beberapa taksonomi, dan kemudian Anda mulai mengedit data itu. Jadi ya, itu adalah sesuatu yang telah kami masukkan ke dalam 6.1, dan cukup menarik untuk memiliki aliran bangunan yang lengkap di CMS. Jadi mari kita cari situs penghargaan VHS. Kita perlu menyusun data kita dan membuat WordPress melakukan apa yang kita perlukan, jadi dalam hal jenis kiriman, karena kita tidak ingin menggunakan kiriman dan halaman, kita akan membuat kiriman khusus ketik untuk film, untuk menyimpan data film, objek data atau model data, tetapi jelas dalam istilah WordPress, itu adalah jenis posting khusus.

Kami ingin mengklasifikasikan film dengan taksonomi sehingga kami dapat memungkinkan pengguna untuk dengan mudah melihat film dari jenis genre, dan kemudian Anda akan mendapatkan tampilan front-end yang mudah, URL sederhana yang memungkinkan Anda mengakses film tertentu genre. Dan kita akan memerlukan beberapa bidang tambahan untuk menyimpan data terstruktur di sekitar film, jadi kita ingin, misalnya, sutradaranya adalah bidang teks. Kami akan membutuhkan tahun film keluar sebagai angka, dan kami akan memerlukan beberapa bentuk hubungan untuk menghubungkan film satu sama lain, dan tentu saja, kami perlu menyimpan jumlah suara yang akan didapat, dan itulah bidang angka.

Jadi mari kita lihat sekilas di ACF 6.1 bagaimana kita akan melakukannya. Jadi ini adalah layar ACF 6.1, dan Anda akan melihat sedikit berbeda, kami memiliki menu di sidebar. Ini ACF sekarang, bukan hanya bidang khusus, dan ini adalah layar jenis posting. Jadi ini hanya saya yang mengatur jenis posting film. Ini adalah alur kerja yang paling sederhana di sini, dengan hanya menambahkan label tunggal untuk jenis kiriman, yaitu film, label jamak, dan secara otomatis menghasilkan kunci jenis kiriman. Pengaturan publik disetel sebagai default karena saya ingin terlihat di front-end, jenis posting, dan saya ingin dapat mengeditnya di admin.

Jadi setelah itu disimpan dan ditambahkan, hal yang menyenangkan tentang koneksi di sini dengan ACF adalah kenyataan bahwa langkah selanjutnya dalam perjalanan ini adalah kita telah membuat jenis kiriman, apakah kita ingin menambahkan bidang ke jenis kiriman, atau apakah kita ingin untuk menautkan bidang yang ada ke jenis posting, atau membuat taksonomi? Jadi kita bisa melakukan itu semua dari titik itu di sini, jadi dan tentu saja kita perlu pergi dan menambahkan bidang tersebut. OK, jadi mengklik pemberitahuan itu untuk menambahkan bidang baru ke jenis posting film, kita mendapatkan Editor Grup Bidang, dan sudah terisi sebelumnya di bagian bawah Metabox pengaturan.

Jadi aturan lokasi sudah diatur untuk mengatakan, tampilkan bidang ini, saat Anda mengedit jenis posting film, lalu Anda dapat melanjutkan dan menambahkan bidang Anda, yang sudah saya lakukan di sini di tangkapan layar. Jadi kita punya sutradara, tahun, dan suara, dan film terkait. Kemudian tentu saja, kita dapat mendaftarkan taksonomi khusus yang kita bicarakan, menambahkan genre, dan menghubungkan taksonomi genre ke jenis posting film. Tapi ini adalah bidang yang telah kami tambahkan yang dilampirkan ke objek film, tapi bagaimana dengan bidang yang kita perlukan untuk menyimpan data yang mungkin lebih global atau di seluruh situs? Rob, apa yang kita punya untuk itu?

Rob Stinson: Keren, terima kasih untuk itu, Iain, terlihat bagus. Model konten kami berjalan dengan baik, tetapi kami belum selesai. Sekarang kita telah membahas penginstalan ACF Pro melalui Composer, dan kita baru saja melihat jenis kiriman khusus, dan taksonomi khusus di ACF. Sekarang dua hal itu sangat, sangat segar, tapi hal ketiga yang ingin saya bahas sekarang, ini adalah barang lama, tapi barang bagus. Dan itu sudah ada di plugin selama beberapa tahun sekarang, tetapi tidak semua orang mengetahuinya, dan tidak semua orang sepenuhnya memahami nilainya, jadi sekarang kita akan melihat bidang global dengan halaman opsi.

Sekarang biasanya, Anda berpikir tentang bidang khusus dan bagaimana bidang itu menyimpan data untuk kiriman tertentu, atau halaman, atau jenis kiriman khusus. Namun terkadang kami memiliki kebutuhan untuk menyimpan data yang terkait dengan seluruh situs, dan contoh yang bagus di situs penghargaan VHS kami yang luar biasa adalah bilah pemberitahuan teratas, atau promosi. Dan ini adalah bilah yang ingin kami pertahankan di setiap halaman dari halaman Beranda situs, Anda pergi ke halaman film, itu ada di sana. Anda pergi ke halaman Tentang, atau halaman Kontak, atau halaman Blog, bilah kecil ini berada di seluruh situs ke mana pun pengguna menavigasi, jadi ini tidak masuk akal untuk mengaitkan data yang relevan dengan posting atau a film.

Itu adalah sesuatu yang harus dikaitkan dengan situs. Jadi kami ingin dapat mengaktifkan dan menonaktifkan bilah ini karena kami ingin mengatur semuanya, tetapi mungkin kami ingin mengaktifkannya pada waktu-waktu tertentu dalam setahun. Kami mungkin memiliki promosi atau kampanye tertentu, jadi kami ingin kemampuan untuk memiliki bidang Boolean, sehingga kami dapat mengaktifkan dan menonaktifkan hal ini. Juga, kami ingin dapat memperbarui teks dari tindakan yang dipanggil itu sendiri, atau di tombol, jadi tentu saja, bidang khusus sangat masuk akal untuk itu.

Sekarang untuk menyiapkan halaman opsi, yang merupakan fitur di dalam ACF yang memungkinkan kita melakukan ini, langkah pertama adalah, biasanya di fungsi Anda, file .PHP, atau Anda dapat, tentu saja, mendaftarkannya di tempat lain, mungkin a plug-in yang sedang Anda kembangkan. Tetapi Anda akan mendaftarkan halaman opsi itu sendiri, dan ada beberapa konfigurasi kecil di dalam pengaturan di sana yang dapat Anda lakukan. Anda dapat memiliki satu halaman opsi, tetapi Anda juga dapat memiliki beberapa, dan Anda memilikinya semacam bersarang, jadi halaman anak, atau halaman induk dan hal-hal seperti itu, sehingga Anda dapat melakukan hal-hal menarik.

Bagi kami, milik kami cukup sederhana. Kami hanya menyiapkan bilah notifikasi di sini, jadi kami hanya memerlukan satu halaman, jadi langkah pertama adalah mendaftarkan halaman Opsi itu. Langkah kedua, seperti biasanya, kami akan membuat grup lapangan. Kami akan menyebutnya bidang bilah promo, atau sesuatu seperti itu, atau bidang bilah notifikasi, dan Anda dapat melihat di sana saya memiliki bidang Boolean saya di atas, jadi benar atau salah adalah bilah promo aktif. Dan kemudian saya memiliki bidang teks untuk pesan, bidang teks untuk teks tombol, bidang URL untuk tautan tombol, dan kemudian kami mungkin memiliki jenis pemberitahuan juga, tetapi mungkin kami ingin memiliki lansiran atau gaya promosi pemberitahuan, dan mungkin kami melakukan beberapa gaya bersyarat yang menarik berdasarkan mana yang dipilih di sana.

Jadi kami menambahkan grup bidang kami, dan kami menambahkan bidang kami, dan langkah ketiga tepat di bawahnya. Seperti yang Anda ketahui, di aturan lokasi, sekarang kita dapat memilih halaman Opsi sama dengan– dan Anda melihat pengaturan situs yang saya dapatkan di sana– itu adalah halaman Opsi yang saya daftarkan di langkah nomor satu. Jadi dengan semua itu selesai, di admin WordPress sekarang kita lihat di sisi kiri, di bilah admin kita punya Pengaturan Situs, dan kita klik itu, dan kita melihat semua bidang, seperti yang kita harapkan.

Dan kita dapat mengaktifkan atau menonaktifkan bilah notifikasi. Kami dapat memperbarui teks, memperbarui tombol, dan kemudian data itu akan tersedia untuk pembuatan templat kami, sehingga pengalaman pembuatan templat dengan bidang data dalam halaman opsi secara umum sama dengan apa yang akan Anda lakukan sebaliknya. Ada beberapa nuansa kecil seputar bagaimana Anda secara khusus menargetkan fakta bahwa ini adalah halaman Opsi dan bukan kiriman, tetapi lompat ke dokumentasi di advancedcustomfields.com, dan memandu Anda tentang cara menanganinya. Nomor empat, aku akan melemparkannya kembali padamu, Iain.

Iain Poulson: Terima kasih, Rob, ya. Sekarang saya hanya ingin berbicara tentang bagaimana kami secara terprogram mendaftarkan bidang dengan ACF. Jadi membuat bidang di ACF sangat mudah dengan antarmuka pengguna Editor Bidang, hal yang kita ketahui dan sukai, telah kita lihat sebelumnya, tetapi ada cara lain untuk menentukan bidang. ACF memungkinkan kita untuk mengekspor file JSON dan PHP dengan definisi bidang, dan itu dapat digunakan untuk membuat bidang.

Tapi tahukah Anda bahwa, sebenarnya, ada di komunitas ACF, sebuah paket yang disebut pembuat ACF yang memungkinkan Anda membuat bidang menggunakan jenis API yang fasih dengan kode PHP? Ini sebenarnya adalah paket pihak ketiga, dan disebut Paket Pembuat ACF dari StoutLogic. Ya, tautan GitHub ada di sana. Pada dasarnya, ini memungkinkan Anda membuat bidang langsung dari kode tanpa mengetahui seluk-beluk bagaimana ACF membutuhkan data bidang di PHP. Ini menggunakan cara yang sangat ekspresif untuk melakukan itu. Itu membuatnya dapat digunakan kembali dan portabel.

Anda dapat mengkomit definisi bidang karena dengan file PHP ke kontrol versi Anda, kolaborasi menjadi mudah. Sangat mudah untuk mengirim ke mekanisme penerapan Anda, dan Anda juga menghilangkan UI editor Grup Lapangan, jadi Anda menentukan bidang tersebut dalam kode yang kemudian menghentikan klien dari keharusan menyentuh UI, jadi mari kita lihat sekilas bagaimana kita lakukan. Untuk menginstalnya, karena ini adalah sebuah paket– kita telah membahas mengenai Composer sebelumnya. Ini adalah paket Komposer yang dapat Anda instal dengan perintah berikut, Komposer memperoleh StartLogic, vendor, ACF Builder, dan seperti inilah tampilan kodenya.

Anda sedang membuat instance dari Fields Builder, dan Anda memberinya slug dari apa yang akan menjadi grup lapangan. Dan kemudian Anda berkata, di grup bidang ini, mari tambahkan bidang teks yang disebut Direktur. Mari tambahkan bidang angka yang disebut Tahun, dan yang terpenting, kita akan mengatur lokasi grup bidang untuk muncul di jenis posting film.

Dan semua ini sangat bermanfaat bagi Anda tanpa Anda harus memikirkannya, jadi Anda memberinya nama direktur untuk label bidang, dan itu akan berlanjut dan, tentu saja, membuat slug atau kunci untuk bidang tanpa Anda harus untuk menambahkan itu, sehingga membutuhkan banyak pengetikan, banyak pemikiran, dan banyak pembuatan rawan kesalahan. Dan kemudian bagian kedua adalah di mana Anda memuat definisi bidang itu ke ACF, dan itu akan membangun grup bidang untuk Anda.

Rob Stinson: Baiklah, jadi nomor 5 di sini, hubungan dua arah. Sekarang, ini menarik. Saya pikir saya ingat proyek khusus yang saya kerjakan di masa agensi saya di mana saya benar-benar menemukan jawabannya, dan itu adalah semacam pengubah permainan. Jadi jika ini bukan sesuatu yang pernah Anda lakukan dengan ACF sebelumnya, perhatikan, karena ini adalah hal yang sangat berguna, jadi mari kita lihat contohnya. Melihat, tentu saja, situs penghargaan VHS kami, kami memiliki daftar, katakanlah 100 film, dan tentu saja ada berbagai cara untuk menghubungkan hal-hal ini.

Kami memiliki taksonomi khusus genre kami sebelumnya. Kami mungkin memiliki beberapa bidang berbeda yang menangani hal-hal seperti tag atau pengelompokan, jadi hubungan dua arah berguna saat Anda ingin membuat jenis koneksi dua arah tertentu antara dua pos, atau dalam kasus kami, dua film. Jadi untuk contoh kita, anggap saja kita memiliki tiga film ini di database kita, dan semuanya dianimasikan, jadi kita ingin membuat hubungan dua arah dengan mereka.

Artinya, katakanlah kami memiliki film pertama kami di sini, "Toy Story," film hebat, dan kami mengidentifikasi bahwa ada dua film terkait lainnya yang ingin kami kaitkan dengan itu. Jadi kita dapat membuat Bidang Hubungan untuk jenis kiriman khusus kita, yaitu film, dan kita akan memiliki Bidang Hubungan di sana, dan kita akan memilih film, "The Lion King," dan Princes Monon– Maafkan saya. Aku terus tersandung kata ini. Saya membantainya, tapi filmnya berjudul "Princess Mononoke". Ha ha ha. Tolong jangan membenciku. Aku hanya berjuang untuk mengucapkan kata itu untuk beberapa alasan.

Dan kami mengidentifikasi bahwa kedua film ini terkait, jadi kami memilihnya dari Bidang Hubungan. Sekarang dalam contoh ini, masuk akal bahwa, ya, "The Lion King", misalnya, terkait dengan "Toy Story", dan karena itu "Toy Story" terkait dengan "The Lion King". Jadi mungkin biasanya kami akan membuka layar edit "Lion King", lalu kami akan menemukan "Toy Story", dan kami akan menambahkannya di sana, tetapi kami menggandakan pekerjaan kami di sana. Jadi apa yang dilakukan oleh hubungan dua arah adalah secara otomatis membuat hubungan itu untuk kita, yang benar-benar berguna.

Jadi begitu kita menambahkan, misalnya, "The Lion King" ke "Toy Story", "Toy Story" secara otomatis ditambahkan ke "Lion King", dan itu sangat, sangat berguna. Ini menghemat banyak waktu bagi pembuat konten dan pengelola konten. Ini mengurangi risiko lupa, atau mungkin Anda menghapus satu dari satu posting, dan kemudian lupa menghapusnya dari yang lain. Ini benar-benar menyederhanakan pengalaman pengeditan konten, jadi hal yang sangat berguna yang dapat digunakan, terutama di situs menarik seperti ini. Jadi bagaimana kita melakukannya? Nah, ada dua cara untuk melakukan ini saat ini, dan saya akan berbicara tentang hal ketiga, mungkin, yang akan diluncurkan akhir tahun ini.

Jadi cara melakukannya adalah, yang pertama adalah, Anda dapat melakukannya dalam kode. Jadi cukup dengan menginstal ACF Pro plug-in, Anda dapat menulis kode untuk melakukan ini. Dan Anda dapat menulis fungsi yang menghubungkan ke Filter Nilai Pembaruan ACF, dan filter ini berjalan sebelum nilai disimpan dan pada dasarnya apa yang dilakukannya adalah, mengambil posting saat ini yang sedang Anda edit, dan mengidentifikasi ID posting dari posting tersebut yang telah ditambahkan, lalu perbarui pos lainnya, dan lakukan pencocokan semacam itu di latar belakang untuk Anda, jadi cukup berguna.

Sedikit kode, jadi selama Anda merasa nyaman dengan itu, itu tidak terlalu berat. Namun sekali lagi, ada tautan di sana, atau URL, yang dapat Anda lihat di dokumen Bidang Khusus Lanjutan untuk melihat bagaimana Anda dapat melakukannya. Opsi kedua, bagaimanapun, bukanlah kode, yang terkadang menyenangkan. Jadi ini sebenarnya adalah plug-in ekosistem yang disebut ACF Extended. Ini tersedia di WordPress.org, dan apa yang dilakukannya adalah membawa fitur itu ke UI ACF itu sendiri.

Jadi jika Anda telah menginstal ekstensi ini, ACF Extended, dan Anda telah menginstal ACF Pro, Anda akan melihat opsi bahwa saat Anda membuat Bidang Hubungan, ada sakelar dua arah yang dapat Anda aktifkan, lalu Anda dapat menetapkan itu ke koleksi di sana dari dalam UI, yang cukup berguna. Sekarang hal-hal berjalan dengan sangat menarik dengan proyek ini, tetapi jangan kehilangan akal sehat, atau haruskah kita? Iain, ke kamu.

Iain Poulson: Ya, terima kasih Rob. Layak disebut tanpa kepala ketika berbicara tentang ACF. ACF memiliki dukungan tanpa kepala, jadi ya, situs tanpa kepala yang mendasarinya, sifat situs yang dipisahkan. Ada banyak komunikasi API yang terjadi, dan ACF memiliki dukungan API. REST API yang kami tambahkan secara native ke ACF pada 5.11, atau 5.11, dan kami mendukung GraphQL dengan plugin WP GraphQL, yang memiliki add-on ACF untuk WP GraphQL, jadi ACF mendukung situs tanpa kepala. Ini memiliki integrasi dengan program WP Engine Atlas untuk situs WordPress tanpa kepala yang tepat, tetapi mari kita bicara tentang semacam contoh dunia nyata tentang bagaimana Anda akan mengambil data yang ada di situs WordPress VHS kami, dan menggunakannya dengan cara terpisah.

Jadi misalnya– dengarkan saya– orang-orang pada dasarnya memberikan suara di situs penghargaan VHS, dan mereka akan– menurut saya kita menetapkan tanggal yang sewenang-wenang– mereka harus memberikan suara hingga akhir tanggal tertentu, dan kita akan melihat apa yang paling populer. Kami memiliki bioskop lokal kami, dan melakukan tagihan ganda dari film tahun 90-an yang paling banyak dipilih. Jadi mereka punya, di bioskop, mereka punya papan reklame, dan itu online. Itu terhubung ke web, dan kami dapat secara dinamis memberi daya pada apa yang ditampilkan di papan reklame itu, jadi kami perlu terhubung ke situs WordPress kami.

Misalnya, billboard adalah aplikasi simpul sederhana, kita perlu mengambil data dari situs VHS, jadi mari kita lihat sekilas bagaimana kita bisa melakukannya dengan titik akhir API REST khusus, dan seperti yang saya katakan sebelumnya, kita telah mendapat dukungan GraphQL. Itu bisa dilakukan dengan dua cara, tetapi ini mungkin contoh yang lebih sederhana untuk ditunjukkan. Jadi pertama-tama, kita akan membuat fungsi yang pada dasarnya mendapatkan data yang kita butuhkan, jadi melalui ini saja, ini adalah kueri WP yang mengatakan, Saya ingin film, atau memposting jenis dari jenis film, tetapi saya hanya ingin dua. Tapi saya juga ingin mengurutkannya dengan Bidang ACF, yaitu nama bidang adalah suara, dan kami mengurutkannya dalam urutan menurun, jadi kami akan mendapatkan yang teratas, dan kami akan mendapatkan yang teratas dua.

Dan selanjutnya, kita akan membuat titik akhir REST khusus, yang menggunakan fungsi callback yang kita buat di slide sebelumnya, dan itu hanya akan memberi kita titik akhir yang bisa kita tekan untuk pergi dan mendapatkan dua film. Jadi seperti apa kenyataannya– dan ini hanya pengujian– jadi URL-nya adalah vhsawards.com, WP-JSON, lalu kami memberinya ruang nama VHS Versi 1 seandainya kami ingin mengubah API, dan kami baru saja mendapatkan struktur URL populer yang sangat sederhana.

Dan itu baru saja mengembalikan objek JSON dengan dua item, dua item pilihan teratas, yang kebetulan adalah "Fight Club" dan "Goodfellas", yang cukup bagus, jadi ya. Itu pasti bagus untuk menunjukkan bagaimana ACF memberdayakan situs yang dipisahkan dan tanpa kepala, tetapi cukup sulit untuk berbicara tentang WordPress saat ini tanpa menyebutkan blok. Saya tidak percaya kita sudah sampai sejauh ini tanpa menyebutkan blok. Apa yang Anda punya untuk kami, Rob, untuk mengubahnya?

Rob Stinson: Kita pasti perlu membicarakan tentang blok. Sebelum saya melakukannya, saya menyadari bahwa sebelumnya ketika kita melihat nomor lima seputar hubungan dua arah, saya mengisyaratkan cara ketiga untuk melakukannya. Saya tidak membahasnya, jadi yang ingin saya katakan adalah perhatikan ruang ini karena kami sedang merencanakan, kami memiliki peta jalan, untuk melihat penambahan dukungan hubungan dua arah yang lebih baik secara asli ke dalam plugin itu sendiri, sehingga Anda dapat memfasilitasi hal-hal itu saja dalam plug-in ACF tanpa memerlukan barang pihak ketiga, jadi perhatikan saja ruang ini, tidak ada komitmen waktu. Itu adalah sesuatu yang sedang kita lihat.

Jadi nomor tujuh, ya. Mari kita lihat pembuatan blok khusus dengan ACF. Sekarang kebanyakan orang tahu bahwa Anda dapat melakukan ini di ACF sekarang, tetapi belum tentu semua orang mencobanya. Jadi jika Anda berada di kamp itu dan Anda adalah pengguna ACF lama, dan Anda belum menggunakan fungsi blok khusus sekarang, tonton ini, karena ini mungkin hanya meminta Anda untuk melihat nilai dalam fitur ini. Tapi bagaimana kita akan menggunakan ini untuk Penghargaan VHS? Mungkin kami ingin memiliki komponen blok untuk situs kami yang dapat kami tambahkan di berbagai tempat, dan itulah keindahan dari blok khusus, atau blok apa pun, adalah dapat digunakan dan ditempatkan pada halaman dan posting di seluruh situs, dan kami ingin untuk membuat blok ajakan bertindak khusus.

Sekarang ini adalah blok yang cukup sederhana, dan Anda pasti dapat melakukan lebih banyak hal menarik dengan blok khusus. Kami akan tetap sederhana sekarang. Tapi spanduk biru ini, serukan Blokir Tindakan, kami ingin dapat ditempatkan di halaman Beranda, atau mungkin di beberapa kiriman blog dan hal-hal seperti itu, mendorong pembaca dan pengunjung situs untuk mengeklik tombol itu, dan masuk, dan pilih film tahun 90-an favorit mereka. Jadi bagaimana kita membangun blok khusus ini dengan ACF? Dan alasan kami melakukannya sebagai blok khusus adalah karena memiliki desain yang unik.

Gradien latar belakang yang menarik terjadi untuk pola titik berulang ini, dan kami menyadari bahwa lebih mudah bagi kami untuk membuat ini sebagai blok khusus dengan kontrol yang disetel dengan baik yang memberi kami, dibandingkan dengan apa yang mungkin dapat kami lakukan dengan blok yang tidak aktif rak dengan inti WordPress. Jadi bagaimana kita melakukan ini? Langkah nomor satu adalah mendaftarkan blok kustom kami, biasanya di functions.PHP, atau di mana pun Anda menulis kode semacam ini. Bagus dan sederhana, dan kami menunjuk ke direktori di mana file template pada akhirnya akan menjadi blok kustom kami, jadi itu langkah nomor satu.

Langkah nomor dua, kami membuat grup bidang kami, dan kami menambahkan bidang kami. Jadi untuk blok Called Action kita, kita juga ingin memiliki teks, teks tombol, tautan tombol, dan warna latar belakang. Mungkin kami ingin memberikan opsi untuk beberapa variasi gaya untuk ini. Nomor tiga adalah kita akan, dalam aturan lokasi, kita akan memilih blok, dan kita akan mengatakan sama dengan, dan kita telah mendaftarkan blok CTA sebelumnya, dan itulah mengapa itu tersedia untuk kami di sana di dropdown itu. Sekarang kita pindah ke file template kita, jadi semua field dan semuanya sudah diatur, dan sekarang kita akan melakukan beberapa template kita. Sekarang, pembuatan templat berbeda dalam beberapa hal dengan cara Anda, mungkin, membuat templat secara tradisional dengan ACF.

Tetapi dalam banyak hal lain, ini sangat, sangat mirip, jadi banyak pola yang biasanya Anda gunakan untuk pengembangan Anda, akan Anda gunakan saat Anda membangun blok kustom Anda, yang luar biasa. Jadi kami akan, dalam proyek kami, kami akan mengatakan itu adalah tema khusus kami. Kami memiliki direktori blok, kemudian kami memiliki direktori CTA, yang cocok dengan blok yang telah kami daftarkan, dan biasanya Anda akan memiliki tiga file template, block.JSONsomething.PHP, yang merupakan markup HTML kami, dan kemudian dot CSS untuk kami gaya.

Jadi ini adalah tipe blok JSON, dan ini adalah semacam tempat kami mendaftarkan blok, tetapi ini adalah cara kami dapat memikirkan hal-hal sedikit lebih banyak, dan ada banyak hal yang dapat Anda lakukan di sini seputar konfigurasi dan berbagai fitur inti asli yang Anda dapat mengaktifkan, atau menonaktifkan, menyediakan blok kustom Anda. Jadi pasti periksa dokumentasi tentang ini dan pahami apa yang bisa dilakukan, karena ini benar-benar di mana Anda bisa, seperti yang saya katakan, mengonfigurasi bagaimana blok itu tersedia, dan menampilkan, dan fitur, fitur inti yang dapat Anda lewati ke blok kustom Anda.

Kami kemudian memiliki file template kami, file PHP kami, dan Anda dapat melihat di sini saya hanya menyiapkan variabel yang berinteraksi dengan bidang Get, berinteraksi dengan data bidang kami di sana, sedikit logika kondisional yang sangat sederhana pada gaya kami di sana, dan kemudian HTML kami untuk blok kami sendiri. Dan kemudian saya tidak akan menelusuri CSS. Anda tahu apa itu CSS, dan saya yakin Anda mungkin bisa menulis CSS yang lebih baik daripada yang saya tulis di sini, tetapi Anda mengerti. Anda memiliki file CSS untuk gaya blok Anda, dan Anda dapat melihat kami memiliki beberapa hal menarik seputar font, dan latar belakang gradien radial untuk latar belakang titik semacam itu, yang menyenangkan.

Tapi sekali lagi, alasan kami membuat blok khusus ini adalah karena kami ingin itu benar-benar menyesuaikan CSS kami, gaya kami, sehingga kami benar-benar dapat menerapkan desain yang sedang kami kerjakan. Dan hanya untuk menunjukkan kepada Anda seperti apa ini di Editor, Anda dapat melihat, kami dapat memilih blok Tindakan yang Dipanggil kami, Anda dapat menyalakan lebar. Kita dapat berinteraksi dengan bidang kita, menambahkan teks untuk teks dan tombol, dan menambahkan tautan untuk tombol, juga, dan itu adalah blok kustom yang terlihat sangat bagus yang dapat kita teruskan ke editor konten kita.

Iain Poulson: Ya, terima kasih, Rob. Sungguh pemandangan yang bagus. Kami benar-benar perlu menghidupkannya. Itu mengagumkan. Baiklah, mari kita bahas apa yang telah kita bicarakan hari ini. Jadi kami membahas cara menginstal ACF Pro, tetapi dengan Composer. Kami berbicara tentang cara mendaftarkan jenis pos dan taksonomi khusus di ACF. Kami melihat mendaftarkan bidang global, atau seluruh situs, dengan halaman opsi, dan kami telah melihat cara berbeda untuk mendaftarkan bidang secara terprogram dengan sebuah paket.

Rob menyelidiki hubungan dan cara membuat hubungan dua arah. Kami telah menyentuh tanpa kepala dengan ACF, dan Rob sekarang baru saja melakukan contoh yang bagus untuk membuat blok khusus dengan ACF dengan hampir tidak ada apa pun selain beberapa PHP, HTML, dan CSS, dan tidak ada reaksi sama sekali yang terjadi, jadi itu sangat bagus. Ini luar biasa, Rob. Apa suara? Kita keluar sebagai apa?

Rob Stinson: Lihat, bagi saya, intinya adalah ini– film terhebat tahun 90-an tidak diragukan lagi adalah "Hook" karya Robin Williams. Banyak nostalgia terbungkus bagi saya dalam hal itu, saya suka film itu. Bagaimana denganmu, Iain?

Iain Poulson: Bagi saya, itu pasti "Robin Hood, Prince of Thieves" dari Kevin Costner. Ini klasik. Lupakan rambut jelek, belanak, aksen Inggris yang cerdik yang bahkan bukan aksen Inggris. Ini adalah film Robin Hood terhebat sepanjang masa, dan itu adalah bukit yang membuat saya rela mati.

Rob Stinson: Ha, ha, tidak, cukup adil. Dengar, terima kasih, semuanya, untuk nongkrong. Saya harap Anda mempelajari sesuatu, dan kami sangat menantikan untuk melihat apa yang Anda buat dengan ACF, terima kasih.