Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Cara Membuat Plugin Kalender Google untuk WordPress

Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Terlepas dari niche, menambahkan plugin kalender ke situs WordPress Anda adalah cara yang bagus untuk meningkatkan keterlibatan dan retensi pengguna. Membuat plugin semacam itu tidak membutuhkan banyak usaha karena ada banyak paket kalender berbasis cloud yang tersedia saat ini. Google Kalender adalah yang paling populer dari semuanya, dan ia menawarkan API yang bebas untuk digunakan.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana menggunakan API Kalender Google untuk membuat plugin kalender WordPress dengan cepat yang dapat menampilkan acara dari kalender Google yang dapat diakses publik.

Prasyarat

Untuk dapat memanfaatkan tutorial ini sebaik-baiknya, Anda harus:

  • PHP 7.0.32 atau lebih tinggi
  • WordPress 4.4.2 atau lebih tinggi
  • Composer 1.8.0 atau lebih tinggi
  • Akun Google

1. Membuat Proyek Google

Anda dapat menggunakan API Kalender Google hanya setelah Anda membuat proyek yang dikonfigurasi dengan tepat di console Google Cloud Platform. Jadi masuk ke console dan, di dashboard, tekan tombol Create.

Dashboard of the Google Cloud Platform console

Pada formulir yang ditunjukkan berikutnya, beri nama untuk proyek Anda, ubah ID-nya jika Anda mau, dan tekan tombol Create.

Project creation form

Setelah proyek siap, buka library API, pilih kartu Google Calendar API, dan tekan tombol Enable untuk mengaktifkan API.

Calendar API home

2. Membuat Akun Service

Tidak seperti kebanyakan Google API lainnya, Google Calendar API tidak memungkinkan Anda untuk mengautentikasi permintaan Anda menggunakan API key. Sebagai gantinya, ia mengharapkan token otorisasi OAuth 2.0.

Untuk dapat menghasilkan token seperti itu dari server tempat Anda menjalankan WordPress, Anda memerlukan akun service Google. Jadi buka bagian Credentials, tekan tombol Create Credentials, dan pilih opsi Service account key.

Credentials creation page

Di layar berikutnya, pilih opsi New service account dan ketik nama untuk akun service. Di field Role, pilih opsi Role Viewer. Ini akan memberikan akses read-only akun service ke semua kalender Google Anda.

Service account creation form

Setelah Anda menekan tombol Create, Anda akan menerima file JSON yang berisi private key dan ID client. Simpan file karena Anda akan membutuhkannya nanti.

3. Membuat Plugin WordPress

Untuk mulai membuat plugin WordPress, buat direktori baru bernama my-gcal-plugin di dalam direktori wp-content/plugins/ dari instalasi WordPress Anda. Anda bebas menggunakan nama lain untuk direktori. Namun, jika Anda berencana untuk membagikan plugin di masa mendatang, pastikan nama itu unik untuk menghindari konflik dengan plugin lain.

Di dalam direktori, buat file PHP bernama my-gcal-plugin.php dan buka menggunakan text editor.

Agar WordPress dapat mengenali plugin Anda, file ini perlu memiliki komentar header yang valid. Paling tidak, komentar harus menentukan nama plugin Anda. Namun, saya sarankan menyertakan deskripsi singkat dan nomor versi juga. Jadi tambahkan kode berikut di dalam file:

Jika Anda menyimpan file sekarang dan membuka layar Plugins di panel admin WordPress Anda, Anda akan dapat melihat plugin baru Anda tercantum di sana. Klik tautan Activate di bawahnya sebelum Anda melanjutkan.

Admin panel plugins section

4. Membuat Widget

Agar dapat menampilkan output plugin Anda di situs WordPress Anda, Anda memerlukan widget khusus. Jadi, di dalam file PHP, buat kelas baru yang memperluas kelas WP_Widget. Anda dapat menyebutnya My_GCal_Widget.

Dengan menggunakan konstruktor dari kelas induknya, Anda dapat menentukan nama widget Anda dan kelas CSS yang harus digunakan dan, secara opsional, memberikan deskripsi.

Dengan mengganti metode widget(), Anda dapat menentukan apa yang ditampilkan widget. Biarkan metode ini kosong untuk saat ini.

Terakhir, jangan lupa untuk mendaftar widget dengan memanggil fungsi register_widget(). Tempat terbaik untuk melakukannya adalah di dalam callback widgets_init hook. Jadi tambahkan kode berikut di akhir file PHP:

Jika Anda menyimpan file dan membuka layar Appearance>Widgets dari panel admin, Anda sekarang dapat melihat widget baru yang terdaftar di sana.

Admin panel widgets page

Seret dan lepas widget di mana saja di dalam bagian Sidebar. Dengan cara ini, ketika widget sudah siap, itu akan dapat menampilkan data kalender di sidebar blog Anda.

5. Instalasi Google API Client

Sekarang Anda memiliki widget yang siap untuk menambahkan konten ke situs WordPress Anda, saatnya untuk mulai mengintegrasikannya dengan platform Google Cloud. Ada official API client library yang tersedia untuk aplikasi PHP, dan ia menawarkan banyak metode praktis yang memungkinkan Anda berinteraksi dengan API Kalender Google.

Karena library tersedia di repositori Packagist, cara termudah untuk menginstalnya adalah dengan menggunakan composer.

Jalankan perintah berikut di dalam direktori plugin Anda untuk menginstal versi terbaru dari klien Google API:

Library akan membutuhkan file JSON yang Anda unduh di langkah sebelumnya. Oleh karena itu, salin file ke direktori plugin Anda sekarang.

Setelah library dan semua dependensinya diinstal, kembali ke file PHP Anda dan muat dengan menambahkan kode berikut tepat di bawah komentar header:

6. Inisialisasi Google Client

Sebelum Anda mencoba menggunakan client, Anda harus mengonfigurasinya menggunakan file JSON. Mulailah dengan membuat variabel member yang disebut $client di dalam kelas My_GCal_Widget.

Di dalam konstruktor kelas, inisialisasi itu sebagai objek Google_Client. Kemudian panggil metode setAuthConfig() dan berikan lokasi file JSON ke sana. Kode berikut menunjukkan caranya:

Selain itu, Anda harus meminta ruang lingkup OAuth 2.0 tertentu. Untuk saat ini, karena kita hanya tertarik membaca konten kalender, request scope readonly.

7. Membaca Data Kalender

Menggunakan Google API client generik, Anda harus membuat klien khusus untuk layanan Google Calendar. Jadi tambahkan kode berikut di dalam metode widget() kelas Anda.

Pada titik ini, Anda perlu menentukan Google Calendar publik mana yang ingin Anda gunakan. Untuk saat ini, mari gunakan kalender liburan Amerika Serikat. Jadi buat variabel untuk menyimpan ID-nya.

Jangan ragu untuk mengunjungi Google Calendar untuk menemukan kalender publik lain yang menarik. Anda bisa mendapatkan ID dari kalender semacam itu dengan membuka halaman pengaturannya.

Untuk mengambil daftar acara dari kalender yang Anda pilih, Anda bisa memanggil metode listEvents() yang ditawarkan oleh klien layanan kalender. Metode ini mengharapkan Anda untuk melewati ID kalender sebagai argumen pertama.

Secara default, metode ini mengembalikan semua acara yang ada di kalender. Untuk memastikan itu hanya mengembalikan acara mendatang, Anda dapat menggunakan opsi timeMin dan meneruskan tanggal saat ini untuk itu, diformat sebagai timestamp RFC3339. Secara opsional, Anda dapat menggunakan opsi maxResults untuk membatasi jumlah hasil yang dikembalikan.

Kode berikut menunjukkan kepada Anda cara mengambil empat acara mendatang:

Setiap acara memiliki ringkasan, yang tidak lain adalah judul acara, deskripsi, tanggal dan waktu mulai, tanggal dan waktu akhir, lokasi, dan beberapa properti bermanfaat lainnya. Untuk mempermudah, dalam tutorial ini, kita hanya akan bekerja dengan ringkasan dan tanggal mulai dari setiap acara.

Apa pun yang Anda echo dari metode widget() akan secara otomatis ditampilkan oleh widget. Jadi yang perlu Anda lakukan sekarang adalah mengulangi dua properti untuk setiap acara. Kode berikut menunjukkan kepada Anda:

Jika Anda merefresh blog WordPress Anda sekarang, Anda seharusnya dapat melihat acara dari kalender di sidebar.

Widget showing events from the calendar

Kesimpulan

Anda sekarang tahu cara menggunakan API Google Calendar untuk membuat plugin kalender untuk WordPress. Jangan ragu untuk menggunakan plugin untuk membagikan jadwal bisnis atau pribadi Anda dengan pengguna Anda, beri tahu mereka tentang penawaran dan diskon mendatang, dan bahkan menarik mereka ke pertemuan lokal yang Anda selenggarakan.

Untuk mempelajari lebih lanjut tentang API Google Calendar, lihat dokumentasi resmi.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.