7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Creative Coding

Memanfaatkan Bidang Kustom untuk Membuat Kotak Tinjauan

Scroll to top
Read Time: 8 mins

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

Ulasan mungkin merupakan salah satu kekuatan blogging terbesar dalam hal otoritas. Ketika dilakukan dengan benar (dengan kerja keras dan informasi yang konsisten), blog ulasan bisa dibilang kategori yang paling menguntungkan di blogosphere. Tetapi setiap blog harus menawarkan desain yang solid dalam posting mereka, termasuk ulasan. Dalam posting ini, kita akan berbicara tentang bagaimana membangun kotak ulasan yang sempurna, karena kotak ulasan mungkin adalah bagian pertama yang diperiksa pembaca sebelum membaca ulasan.


Apa yang Akan Kita Bangun

Sebagai contoh, kita akan membuat kotak ulasan untuk film.

Mari kita ambil salah satu film favorit saya sepanjang masa, The Pursuit of Happyness. Kami akan menampilkan informasi berikut tentang film:

  • Nama: Pursuit of Happyness
  • Tahun: 2006
  • Direktur: Gabriele Muccino
  • Penulis: Steve Conrad
  • Bintang: Will Smith, Jaden Smith, Thandie Newton
  • Genre: Biografi, Drama
  • Runtime: 26 menit
  • Storyline: Berdasarkan kisah nyata tentang seorang pria bernama Christopher Gardner. Gardner telah banyak berinvestasi dalam perangkat yang dikenal sebagai "pemindai Kepadatan Tulang". Dia merasa seperti telah membuat perangkat ini. Namun, mereka tidak menjual karena mereka sedikit lebih baik daripada teknologi saat ini dengan harga yang jauh lebih tinggi. Ketika Gardner mencoba mencari cara untuk menjualnya, istrinya meninggalkannya, ia kehilangan rumahnya, rekening banknya, dan kartu kredit. Terpaksa tinggal di jalanan bersama putranya, Gardner sekarang putus asa untuk mencari pekerjaan tetap; dia mengambil pekerjaan sebagai pialang saham, tetapi sebelum dia dapat menerima bayaran, dia harus menjalani 6 bulan pelatihan, dan menjual perangkatnya.
  • (Jangan lupa bahwa kita membutuhkan gambar.)

Penting: Informasi ini dipinjam dari The Internet Movie Database.


Langkah 1 Mempersiapkan Kotak Meta Kustom untuk Mengisi Data

Kami akan menyimpan data sebagai nilai bidang khusus, tetapi menambahkan bidang khusus secara manual untuk setiap ulasan bisa sangat merepotkan. Karena itu, kita akan membuat kotak meta khusus yang rapi untuk menyimpan data kita sebagai bidang khusus.

Pertama, kita perlu menggunakan fungsi add_meta_box() untuk membangun kotak meta dan membuat fungsi panggilan balik:

Fungsi panggilan balik akan membuat bidang input untuk menampung data kami. Saya pikir kita bisa menggunakan texarea untuk bidang "jalan cerita" dan bidang input teks untuk yang lainnya:

Kemudian, kita perlu membuat fungsi untuk membuat WordPress menyimpan nilai input sebagai bidang khusus:

Selesai!

Untuk menemukan informasi lebih lanjut tentang membuat kotak meta khusus (dan apa arti sebenarnya dari baris kode ini), anda dapat membaca artikel fantastis ini yang ditulis oleh Christopher Davis dan diterbitkan di Wptuts+.

Langkah 2 Membangun Fungsi untuk Menampilkan Kotak Ulasan

Sekarang kita membahas cara mengatur informasi, kita perlu belajar cara mendapatkan informasi. Jika anda bekerja dengan bidang khusus sebelumnya, ini akan mudah karena kami hanya akan mengambil nilai bidang khusus.

WordPress memiliki fungsi yang mudah digunakan untuk mendapatkan nilai bidang khusus:

Kita perlu memuat nilai bidang khusus ke dalam beberapa kode HTML, jadi sebaiknya pikirkan HTML sekarang. Saya sedang memikirkan sesuatu seperti ini:

Dan jika kita menyatukannya, kita akan memiliki fungsi kita siap!

CSS

Tentu saja, anda dapat menata kotak ulasan sesuka anda. Jika anda tidak menyukainya, anda dapat menggunakan kami:

Jika anda ingin mengapung kotak ulasan ke kiri atau kanan, jangan lupa menambahkan float:left; (atau float:right;) deklarasi untuk .review-box. Anda bahkan dapat memusatkannya dengan mengubah margin:10px; deklarasi menjadi margin:10px otomatis;.

Langkah 3 Membuat Shortcode untuk Menggema Fungsi

Kami tahu cara mengatur info, kami tahu cara mendapatkan info... Sekarang saatnya kami menampilkan info! :)

Kami selalu dapat menambahkan kotak secara otomatis di akhir (atau di awal) dari pos seperti ini:

Tetapi bagaimana jika kita ingin memasukkan kotak di dalam pos? Di situlah bagian favorit saya berguna: kode pendek!

Langkah ini akan lebih mudah daripada yang sebelumnya, karena kami benar-benar melakukan semua pekerjaan untuk memuat kotak ulasan. Yang harus kita lakukan adalah memanggil fungsi sebagai kode pendek seperti ini:

Inilah yang akan anda miliki jika anda mengikuti langkah-langkah di atas persis seperti yang tertulis:

A screenshot of our example review boxA screenshot of our example review boxA screenshot of our example review box

Membungkus

Kotak ulasan ini dapat digunakan untuk banyak ulasan berbeda seperti perangkat lunak, situs web, buku, acara TV, dan sebagainya. Atau, jika anda bisa menjadi kreatif, anda bahkan dapat menggunakannya di blog biasa hanya untuk bersenang-senang!

Beberapa Artikel untuk Diperiksa

Untuk sepenuhnya memahami kode dan bahkan memperbaikinya, anda harus membaca beberapa artikel Wptuts+ lainnya:

Adakah yang ingin anda tingkatkan atau anda punya ide? Bagikan pemikiran anda dengan kami dengan berkomentar di bawah ini.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.