Menerbitkan konten dinamis adalah salah satu nilai jual utama sistem manajemen konten (CMS) seperti WordPress. Konten dapat berubah berdasarkan masukan pengguna atau kondisi lainnya. Ini berguna untuk segala hal mulai dari situs e-niaga hingga publikasi online. Ada juga kasus penggunaan sederhana – bahkan untuk situs brosur.
Namun apa yang terjadi jika beberapa data penting Anda berada di tempat lain? Mungkin ada plugin yang terintegrasi dengan layanan pihak ketiga yang Anda gunakan. Atau, Anda dapat membuat solusi khusus dari awal.
Itu Blok Data Jarak Jauh plugin bertujuan untuk memudahkan pengambilan data dari sumber luar. Ini terintegrasi dengan layanan seperti Airtable, Google Sheets, dan Shopify secara langsung. Ada juga kerangka kerja untuk menghubungkan ke layanan lain melalui HTTP. Setelah terhubung, Anda dapat menampilkan data Anda melalui blok WordPress dan menyesuaikannya dengan sebuah pola.
Bagaimana cara kerjanya? Mari kita uji plugin tersebut dengan proyek contoh. Kami akan memandu Anda melalui setiap langkah dan melihat apa yang dapat kami capai bersama. Ini dia!
Contoh Proyek: Menampilkan Google Sheet di WordPress
Untuk menguji kemampuan Blok Data Jarak Jauh, kami akan menggunakan plugin untuk mengambil data dari Google Sheet. File tersebut berisi informasi kontak untuk direktori karyawan.
Prosesnya termasuk memasang plugin, menghubungkan ke Google Cloud Platform (bagian yang paling memakan waktu), dan menampilkan data di situs web kami menggunakan blok yang disertakan. Kita juga perlu membuat pola blok untuk mengatur gaya data kita.
Langkah 1: Instal Plugin Blok Data Jarak Jauh
Langkah pertama adalah menginstal Remote Data Blocks versi terbaru di situs WordPress Anda:
- Masuk ke situs WordPress Anda dan navigasikan ke Plugin > Tambahkan Plugin.
- Telusuri “Blok Data Jarak Jauh” dan temukan plugin di daftar yang disediakan.
- Memasang Dan mengaktifkan pluginnya.
Kami akan kembali ke pengaturan plugin nanti di tutorial kami.
Langkah 2: Konfigurasikan Google Cloud Platform
Ada beberapa pekerjaan yang harus kami lakukan sebelum kami dapat menghubungkan Google Sheet ke WordPress. Kami akan menunjukkan langkah-langkahnya di bawah ini. Tim Blok Data Jarak Jauh juga telah menyusun a panduan bermanfaat untuk proses ini.
2.1 Membuat Proyek di Google Cloud Platform
Untuk memulai, kunjungi Google Cloud Platform untuk membuat proyek baru.
Petunjuk: Jika Anda memerlukan bantuan, Google memiliki panduan pembuatan proyek bisa anda gunakan sebagai referensi. Google akan menanyakan nama proyek dan sumber daya induk. Kami akan menghubungi proyek kami Tes Blok Data Jarak Jauh dan biarkan sumber daya induk kosong.
2.2 Hubungkan ke Google Sheets dan Google Drive API
Setelah proyek dibuat, kita harus mengaktifkan keduanya Google Spreadsheet Dan Google Drive Lebah. Begini caranya:
- Menggunakan menu sebelah kiri, navigasikan ke API & Layanan yang Diaktifkan halaman.
- Klik pada Aktifkan API dan Layanan tombol.
- Satu per satu, cari dan tambahkan Google Spreadsheet Dan Google Drive Lebah.
2.3 Aktifkan API IAM
Proyek kami juga memerlukan akses ke IAM API, karena ini menangani otentikasi. Klik Aktifkan APInya tombol.
2.4 Membuat Akun Layanan Google Cloud Platform
Setelah itu, kami akan membuat akun layanan untuk proyek tersebut. Pergilah ke Konsol Google Cloud situs web.
- Menggunakan menu sebelah kiri, navigasikan ke Akun Layanan halaman.
- Klik pada Buat Akun Layanan tombol.
- Berikan akun layanan Anda a nama dan klik Melanjutkan.
- Di Izin layar, pilih Pemilik dan klik Melanjutkan tombol.
- Itu Kepala sekolah layar bisa dibiarkan kosong. Klik Selesai.
- Setelah selesai, Anda akan diarahkan ke Akun Layanan halaman, tempat akun baru Anda akan dicantumkan.
2.5 Menghasilkan Kredensial JSON
- Dalam akun layanan Anda, klik tombol opsi (⋮) dan pilih Kelola Kunci.
- Di Kunci halaman, klik Tambahkan Kunci tombol dan pilih JSON sebagai formatnya. Klik Membuat tombol.
- Platform Google Cloud akan melakukannya menghasilkan JSON bahwa kamu bisa unduh ke perangkat Anda.
Penting: Catat alamat email yang dihasilkan yang terkait dengan akun layanan Anda – Anda akan memerlukannya!
Ingat alamat email yang terkait dengan Akun Layanan Google Anda yang kami buat di atas? Kami akan membutuhkannya di sini.
Kami akan menuju ke Google Lembar kami ingin terhubung ke situs web kami dan membagikannya dengan alamat email.
Langkah 4: Salin ID Google Sheet
Selanjutnya, kami akan menemukan ID Google Sheet kami. Kami memerlukan detail ini untuk menghubungkannya ke situs web kami. ID terletak di URL Sheet, seperti:
https://docs.google.com/spreadsheets/d/test_spreadsheet_id/edit?gid=0#gid=0
Kami sedang melihat area yang dicetak tebal di atas (test_spreadsheet_id). Kami akan menyalin ID kami dan menyimpannya untuk langkah berikutnya.
Langkah 5: Buat Sumber Data di Blok Data Jarak Jauh
Kami sudah selesai dengan Google dan masuk ke situs web kami. Navigasi ke Pengaturan > Blok Data Jarak Jauh untuk menghubungkan Google Sheet kami.
- Pada halaman pengaturan, klik Hubungkan Baru tombol.
- Memilih Google Spreadsheet dari menu.
- Beri nama sumber data Anda (kami memilih Direktori Karyawan).
- Tempelkan konten file JSON dihasilkan pada Langkah 2.
- Klik Melanjutkan tombol.
Di Cakupan layar, kita diminta memilih spreadsheet dari menu. Milik kami ada dalam daftar. Kita akan memilihnya dan sheet yang ingin kita gunakan (Sheet1), lalu klik Melanjutkan tombol.
Pada layar Blok, kita akan memilih Blok pendaftaran otomatis pilihan dan klik Menyimpan tombol.
Langkah 6: Masukkan Blok Data Jarak Jauh ke dalam Halaman
Sekarang, saatnya menambahkan blok data jarak jauh ke halaman kita.
- Blok Data Jarak Jauh menggunakan nama sumber data yang kami berikan pada langkah terakhir. Jadi, kami akan mencari “direktori karyawan” dan tambahkan blok ke halaman. Ada beberapa opsi, tapi kami akan memilih Direktori Karyawan/Lembar1 Loop. Opsi ini akan secara otomatis memperbarui data ketika kita mengedit Google Sheet kita.
- Langkah selanjutnya adalah menempatkan data jarak jauh kita ke dalam pola blok. Jadi, kami akan memilih Pilih Pola dan klik satu-satunya pilihan yang tersedia.
Perhatikan bahwa pola yang disertakan tidak memformat data ke dalam tabel atau apa pun yang menyerupai spreadsheet. Tidak apa-apa, karena kita membuat sekumpulan kolom untuk menampung data kita.
Menyeret berbagai titik data (Nama Depan, Nama Belakang, Judul, Ekstensi) ke dalam Blok Kolom memberi kami tata letak yang lebih baik. Kita juga dapat menggunakan Block Editor untuk melakukan perbaikan lebih lanjut.
Semua Poin Data Mengarah ke WordPress
Mengambil data dari sumber pihak ketiga merupakan suatu tantangan. Ini juga penting, karena kita menyimpan barang-barang kita di mana-mana. Blok Data Jarak Jauh membantu dengan menyediakan kerangka kerja yang dapat kita gunakan untuk membangun.
Ada banyak potensi di sini, dan kita dapat membayangkan plugin ini akan berkembang di masa depan. Mungkin ini berfungsi dengan lebih banyak layanan di luar kotak. Ini mungkin juga menyertakan beberapa pola blok lagi untuk menata tipe data umum dengan mudah.
Plugin ini juga dapat memberdayakan pemilik situs non-teknis. Misalnya, bayangkan memperbarui halaman menu restoran dengan mengedit Google Doc atau file berbasis cloud lainnya. Mereka tidak perlu menyentuh WordPress sama sekali. Hal ini akan menghilangkan kurva pembelajaran mereka dan memudahkan persyaratan dukungan kami.
Namun, ini hanyalah permulaan. Sudah ada banyak kegunaan khusus untuk Blok Data Jarak Jauh dan masih banyak lagi yang akan datang. Jadi, unduh pluginnya dan bereksperimen!
Atas
