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

Membangun Front End Bertenaga WordPress: Pendahuluan dan Pengaturan

by
Read Time:10 minsLanguages:
This post is part of a series called Building a WordPress-Powered Front End With the WP REST API and AngularJS.
Building a WordPress-Powered Front End: Bootstrapping, Routing, and Services

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Dalam seri pendahuluan tentang WP REST API, kita belajar untuk menggunakan fungsi dasar yang disediakan oleh API dan fleksibilitas yang ditawarkan saat membuat aplikasi dengan bagian back end WordPress. kita melihat sumber daya, rute, dan metode yang didukung untuk melakukan operasi CRUD.

Dalam seri ini tentang membangun front end bertenaga WordPress dengan WP REST API dan AngularJS, kita akan menempatkan pengetahuan yang diperoleh dalam seri pendahuluan untuk digunakan. Kita akan belajar bagaimana kita dapat memanfaatkan pengetahuan ini untuk memisahkan model admin tema konvensional yang didukung oleh WordPress hingga sekarang. Kita akan merencanakan dan membangun aplikasi satu halaman (yang saya beri nama Quiescent) dengan back end WordPress yang akan menampilkan halaman posting, pengguna, dan daftar kategori. Kita akan mengonfigurasi perutean AngularJS dan membuat direktif dan pengontrol khusus untuk sumber daya yang disebutkan di atas.

Di bagian pertama dari seri, kita akan:

  • menilai persyaratan untuk membangun front end dengan bantuan wireframes
  • unduh dan instal paket HTML bare-bones untuk mulai bekerja
  • membangun plugin WordPress pengiring berdasarkan penilaian di atas

Jadi mari kita mulai dengan menilai persyaratan untuk membangun front-end.

Merencanakan Hal-Hal

Bagian awal ketika memulai proyek apa pun harus menilai persyaratan proyek dan merencanakan hal-hal yang sesuai. Ini meletakkan fondasi yang kuat untuk proyek dan membantu kita berpikir jernih dalam hal fungsi dan fitur dari aplikasi.

Seperti yang disebutkan sebelumnya, kita perlu mencantumkan laman dan satu laman untuk tiga sumber daya berikut:

  1. Pos
  2. Kategori
  3. Pengguna

Mari kita bicara tentang membuat template untuk sumber daya Posts. Kita akan membutuhkan dua template untuk sumber daya ini, yaitu templat daftar dan satu templat pos. Template daftar akan menampilkan jumlah posting tertentu dengan link pagination untuk pergi ke set posting berikutnya atau sebelumnya. Template posting tunggal akan menampilkan satu posting di halaman.

Di bawah ini adalah wireframe untuk halaman daftar posting:

Post listing templatePost listing templatePost listing template

Dan berikut adalah wireframe untuk template posting tunggal:

Single post templateSingle post templateSingle post template

Seperti yang bisa kita lihat di wireframes di atas, persyaratannya cukup sederhana, sama seperti template blog standar. Tetapi ketika kita membandingkan wireframes di atas dengan respons standar, WP REST API menyediakan untuk posting, kita menemukan kesimpulan bahwa item berikut ini hilang dari objek respon standar:

  • tautan gambar unggulan
  • nama penulis
  • nama kategori dan tautan

Oleh karena itu kita perlu memodifikasi respon untuk sumber daya Post untuk memasukkan barang-barang ini. Kita akan melakukannya nanti di tutorial ini dengan membuat plugin pendamping untuk WordPress.

Sekarang mari kita menganalisis persyaratan untuk sumber daya Categories dan Users dengan melihat dua wireframes berikut.

Di bawah ini adalah wireframe untuk template kategori:

Category templateCategory templateCategory template

Dan inilah wireframe untuk template pengguna:

Dengan melihat dua wireframes di atas, jelas bahwa mereka tidak perlu mendaftarkan bidang tambahan apa pun dalam tanggapan standar mereka. Tetapi jika kita melihat lebih dekat pada halaman profil penulis, kita perlu menambahkan ukuran gravatar tambahan untuk memperhitungkan ukuran gambar dalam HTML kita. Fungsi ini juga dapat dicapai di plugin pengiring.

Salah satu prinsip dasar dan yang paling dianjurkan dari rekayasa perangkat lunak adalah prinsip DRY (Don’t Repeat Yourself). Dengan menganalisis maket di atas, kita melihat bahwa daftar pos sedang diulang pada hampir semua templat daftar dalam satu bentuk atau lainnya. Jadi kita akan melanjutkan dan membuat arahan umum AngularJS untuk daftar posting untuk digunakan pada semua template di atas, dan direktif ini akan menyertakan fungsionalitas termasuk paginasi pos dan mengambil subkumpulan pos untuk parameter yang diberikan.

Sekarang kita telah menilai persyaratan umum untuk membangun aplikasi, kita dapat menyelidiki bagian pengkodean mulai dari bagian berikutnya.

Persyaratan Tutorial

Sebelum kami mulai bekerja untuk membangun aplikasi, Anda perlu menginstal aplikasi tertentu di sistem Anda. Aplikasi ini adalah:

  • instalasi WordPress dengan plugin WP REST API diaktifkan dan beberapa data demo
  • Git untuk kloning repositori HTML (tidak perlu, karena Anda juga dapat mengunduh repositori langsung dari situs GitHub melalui GUI)
  • Node.js untuk bekerja dengan perintah npm dan gulp
  • GulpJS untuk menjalankan tugas-tugas minifikasi dan optimasi dalam paket HTML

Jika Anda telah mengembangkan untuk web untuk sementara waktu, ada kemungkinan besar bahwa Anda sudah memiliki perangkat ini yang diinstal pada sistem Anda. Jika tidak, saya menyarankan Anda untuk melihat situs resmi dan dokumentasi mereka untuk mengaturnya.

Mengunduh dan Memasang Paket HTML

Agar lebih mudah bagi Anda untuk mengikuti, saya sudah membuat kerangka HTML dasar untuk wireframes yang kami analisis di atas.

Pertama-tama, Anda perlu mengkloning repositori paket HTML dari GitHub:

Setelah Anda mengkloning repositori, Anda perlu menavigasi ke direktori menggunakan perintah berikut:

Tidak masalah jika Anda menggunakan OS X, Windows atau Linux, karena perintah cd di atas akan bekerja pada hampir semua sistem operasi.

Sekarang Anda perlu menginstal modul Node.js menggunakan:

Perintah di atas akan memakan waktu untuk menyelesaikan, tergantung pada kecepatan koneksi internet Anda.

Setelah menginstal modul yang diperlukan, Anda akhirnya dapat mengkompilasi sumber menggunakan perintah gulp:

Ini menghasilkan folder baru bernama dist yang berisi sumber yang dikompilasi untuk HTML dan asetnya.

Perintah npm install yang kita jalankan di atas juga menginstal modul Node.js yang disebut http-server yang menyediakan cara cepat dan mudah untuk menyiapkan server HTTP dasar di dalam direktori mana pun. Anda dapat memeriksa sumber yang dikompilasi dengan menavigasi ke direktori dist dan menjalankan perintah berikut:

Ini akan echo beberapa alamat di layar untuk server yang dapat Anda masukkan di browser Anda untuk mulai melihat HTML.

Itu semua tentang mengunduh dan menyusun paket HTML dasar yang akan berfungsi sebagai tulang punggung bagi pengembangan masa depan kita.

Membangun Plugin Companion Quiescent

Setelah mengunduh dan menginstal modul yang diperlukan untuk paket HTML, kita sekarang siap untuk membangun fungsionalitas sisi server untuk mendukung front end.

Di bagian sebelumnya, kita menganalisis persyaratan untuk membangun bagian front end dengan WP REST API dan AngularJS. Mari kita lihat lagi barang-barang yang dibutuhkan yang kita butuhkan untuk membangun front end:

  1. Gambar utama untuk posting. Kita juga perlu mendaftarkan ukuran gambar baru di WordPress untuk memperhitungkan ukuran gambar dalam HTML kita.
  2. Nama pengarang pos. Ini dapat diambil dengan menggunakan ID penulis yang tersedia di objek respons standar.
  3. Daftar kategori yang terkait dengan pos. Ini dapat dicapai dengan menggunakan ID pos.
  4. Ukuran gambar baru untuk gravatar untuk memperhitungkan ukuran gambar profil penulis dalam HTML kami.

Jadi kita membutuhkan tiga bidang tambahan untuk sumber daya Posts dan juga perlu menambahkan ukuran gambar baru untuk gambar unggulan dan gravatar pengguna.

Mari mulai dengan membuat direktori baru untuk plugin kita di folder /wp-content/plugins dan memberi nama quiescent-companion. Di dalam direktori itu, buat file PHP baru bernama quiescent-companion.php dan tempelkan kode berikut untuk definisi plugin:

Jika Anda telah mengikuti saya sejak seri pengantar saya tentang WP REST API maka Anda telah belajar memodifikasi respons server untuk sumber daya tertentu menggunakan metode register_rest_field(). Jika Anda belum melihatnya, saya sarankan Anda melakukannya dengan melihat artikel tentang memodifikasi tanggapan server.

Metode register_rest_field() menerima tiga argumen untuk nama sumber daya yang akan dimodifikasi, nama bidang, dan larik argumen untuk bidang tersebut. Rangkaian argumen ini berisi panggilan balik, callback pembaruan, dan skema bidang.

Berikut adalah kode untuk menambahkan bidang khusus untuk gambar unggulan dari posting:

Metode register_rest_field() dipanggil dengan aksi rest_api_init.

Itu selalu merupakan praktik yang baik untuk mengawali nama bidang khusus sehingga tidak bertentangan dengan bidang lain di masa mendatang. Oleh karena itu kami menamai bidang adat kami quiescent_featured_image. Metode yang bertanggung jawab untuk mengambil gambar unggulan ini adalah quiescent_get_featured_image, dan kita mendefinisikannya sebagai berikut:

Metode ini dilewatkan tiga argumen untuk array pos, nama field, dan objek permintaan. Larik pos berisi informasi yang diperlukan tentang pos saat ini termasuk ID, judul, konten, dll. Dengan menggunakan informasi ini, kita dapat mengambil informasi arbitrer apa pun yang terkait dengan posting. Oleh karena itu kita menggunakan ID pos media unggulan untuk mengambil tautan dari gambar unggulan dari posting menggunakan metode wp_get_attachment_image_src().

Selain kode di atas untuk mendaftarkan bidang khusus untuk tautan gambar unggulan dari posting, kita juga perlu mendaftarkan ukuran gambar khusus yang sesuai:

Kode di atas menggunakan metode add_image_size() untuk mendaftarkan ukuran gambar baru 712 px dengan 348 px, dan kita menggunakan quiescent_post_thumbnail sebagai nama ukuran gambar baru.

Simpan kode dan pastikan plugin Quiescent Companion diaktifkan di admin WP Anda. Kirim permintaan pengujian ke rute /wp/v2/posts dan server akan mengembalikan tautan gambar unggulan di bidang quiescent_featured_image di objek respons:

Sekarang setelah kita berhasil menambahkan tautan gambar unggulan dalam tanggapan, dua kolom lainnya yang tersisa untuk ditambahkan adalah untuk nama penulis dan daftar nama kategori.

Untuk menambahkan nama tampilan penulis posting, kita memodifikasi fungsi quiescent_modify_post_response() untuk menyertakan panggilan lain ke metode register_rest_field() seperti yang berikut:

Kita menyebut bidang adat ini quiescent_author_name dan fungsi panggilan balik untuk mengambil nilai dari bidang ini adalah sebagai berikut:

Di sini kita menggunakan metode get_the_author_meta() untuk mengambil nama tampilan penulis posting.

Untuk bidang terakhir untuk nama kategori, panggilan ke metode register_rest_field() adalah sebagai berikut:

Panggilan di atas harus masuk ke dalam fungsi quiescent_modify_post_response(). Metode retrieval callback quiescent_get_categories() adalah:

Kode di atas menggunakan metode get_the_category() untuk mengambil kategori untuk posting saat ini. Metode ini mengembalikan larik objek, dengan setiap objek mewakili kategori yang termasuk dalam pos saat ini.

Sekarang setelah kita menulis semua kode di atas, tiga bidang baru sekarang ditambahkan ke objek respons standar untuk sumber daya Posts. Ketiga bidang baru ini adalah:

  1. quiescent_featured_image
  2. quiescent_author_name
  3. quiescent_categories

Secara default, respons standar untuk sumber daya Users berisi URL avatar untuk ukuran 24 px, 48 px, dan 96 px. Hal terakhir yang perlu kita lakukan sekarang adalah menambahkan URL untuk ukuran gravatar tambahan 207 px untuk sumber daya Users. Jadi buat fungsi baru bernama quiescent_modify_user_response() dan kaitkan ke aksi rest_api_init:

Di dalam fungsi ini, kita menambahkan panggilan ke metode register_rest_field() untuk menambahkan field bernama quiescent_avatar_url untuk objek user:

Metode callback quiescent_get_user_avatar() adalah sebagai berikut:

Metode ini menggunakan metode get_avatar_url() untuk mengembalikan URL untuk gravatar ukuran 207 px dengan 207 px.

Kirim permintaan GET ke rute /wp/v2/users dan server akan mengembalikan bidang tambahan bernama quiescent_avatar_url bersama dengan objek respons standar:

Itu semua tentang membangun plugin pengiring. Kode sumber yang sudah selesai dapat diambil dari Envato Tuts+ GitHub.

Setelah plugin selesai, kita sekarang siap untuk mulai bekerja dan mulai bekerja dengan AngularJS untuk membuat templat, rute, dan layanan untuk sumber daya, yang akan kita lakukan di bagian selanjutnya dari seri ini.

Apa Selanjutnya?

Dalam tutorial ini, kita meletakkan dasar untuk membuat front end bertenaga WordPress menggunakan WP REST API dan AngularJS. Kita menganalisis persyaratan proyek dengan wireframes dan membuat plugin pengiring untuk mendukung bagian front end.

Di bagian selanjutnya dari seri ini, kita akan mulai bekerja dengan paket HTML yang kita unduh sebelumnya dalam tutorial ini. Kita akan mem-bootstrap aplikasi AngularJS, mengkonfigurasi perutean, dan membuat layanan RESTful untuk sumber-sumber Posts, Users, and Categories, jadi tetaplah...

Advertisement
Did you find this post useful?
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.