() translation by (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:
1 |
function wptuts_review_box_add_meta() { |
2 |
add_meta_box( 'review-box', 'The Review Box', 'wptuts_review_box_meta', 'post', 'normal', 'high' ); |
3 |
}
|
4 |
add_action( 'add_meta_boxes', 'wptuts_review_box_add_meta' ); |
5 |
|
6 |
function wptuts_review_box_meta() { |
7 |
// Hi there!
|
8 |
}
|
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:
1 |
<?php
|
2 |
function wptuts_review_box_meta($post) { |
3 |
global $post; |
4 |
// get the custom field values (if they exist) as an array
|
5 |
$values = get_post_custom( $post->ID ); |
6 |
// extract the members of the $values array to their own variables (which you can see below, in the HTML code)
|
7 |
extract( $values, EXTR_SKIP ); |
8 |
wp_nonce_field( 'review_box_meta_action', 'review_box_meta_nonce' ); |
9 |
?>
|
10 |
<p>
|
11 |
<label for="review_name">Movie Name:</label> |
12 |
<input type="text" name="_wptuts_review_name" id="review_name" value="<?php echo $_wptuts_review_name[0]; ?>" /> |
13 |
</p>
|
14 |
<p>
|
15 |
<label for="review_year">Year:</label> |
16 |
<input type="text" name="_wptuts_review_year" id="review_year" value="<?php echo $_wptuts_review_year[0]; ?>" /> |
17 |
</p>
|
18 |
<p>
|
19 |
<label for="review_director">Director:</label> |
20 |
<input type="text" name="_wptuts_review_director" id="review_director" value="<?php echo $_wptuts_review_director[0]; ?>" /> |
21 |
</p>
|
22 |
<p>
|
23 |
<label for="review_writer">Writer:</label> |
24 |
<input type="text" name="_wptuts_review_writer" id="review_writer" value="<?php echo $_wptuts_review_writer[0]; ?>" /> |
25 |
</p>
|
26 |
<p>
|
27 |
<label for="review_stars">Stars:</label> |
28 |
<input type="text" name="_wptuts_review_stars" id="review_stars" value="<?php echo $_wptuts_review_stars[0]; ?>" /> |
29 |
</p>
|
30 |
<p>
|
31 |
<label for="review_genre">Genre:</label> |
32 |
<input type="text" name="_wptuts_review_genre" id="review_genre" value="<?php echo $_wptuts_review_genre[0]; ?>" /> |
33 |
</p>
|
34 |
<p>
|
35 |
<label for="review_runtime">Runtime:</label> |
36 |
<input type="text" name="_wptuts_review_runtime" id="review_runtime" value="<?php echo $_wptuts_review_runtime[0]; ?>" /> |
37 |
</p>
|
38 |
<p>
|
39 |
<label for="review_image">Image:</label> |
40 |
<input type="text" name="_wptuts_review_image" id="review_image" value="<?php echo $_wptuts_review_image[0]; ?>" /> |
41 |
</p>
|
42 |
<p>
|
43 |
<label for="review_storyline">Storyline:</label> |
44 |
<textarea name="_wptuts_review_storyline" id="review_storyline" cols="30" rows="10"><?php echo $_wptuts_review_storyline[0]; ?></textarea> |
45 |
</p>
|
46 |
<?php
|
47 |
}
|
48 |
?>
|
Kemudian, kita perlu membuat fungsi untuk membuat WordPress menyimpan nilai input sebagai bidang khusus:
1 |
function wptuts_review_box_save_meta( $post_id ) { |
2 |
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; |
3 |
if( !isset( $_POST['review_box_meta_nonce'] ) || !wp_verify_nonce( $_POST['review_box_meta_nonce'], 'review_box_meta_action' ) ) return; |
4 |
if( !current_user_can( 'edit_post' ) ) return; |
5 |
// create an array of our custom fields
|
6 |
$review_array = array( |
7 |
'_wptuts_review_name', |
8 |
'_wptuts_review_year', |
9 |
'_wptuts_review_director', |
10 |
'_wptuts_review_writer', |
11 |
'_wptuts_review_stars', |
12 |
'_wptuts_review_genre', |
13 |
'_wptuts_review_runtime', |
14 |
'_wptuts_review_image', |
15 |
'_wptuts_review_storyline'
|
16 |
);
|
17 |
// create the "default" values for the array
|
18 |
$review_array_defaults = array( |
19 |
'_wptuts_review_name' => 'None', |
20 |
'_wptuts_review_year' => 'None', |
21 |
'_wptuts_review_director' => 'None', |
22 |
'_wptuts_review_writer' => 'None', |
23 |
'_wptuts_review_stars' => 'None', |
24 |
'_wptuts_review_genre' => 'None', |
25 |
'_wptuts_review_runtime' => 'None', |
26 |
'_wptuts_review_image' => 'None', |
27 |
'_wptuts_review_storyline' => 'None' |
28 |
);
|
29 |
// parse 'em!
|
30 |
$review_array = wp_parse_args($review_array, $review_array_defaults); |
31 |
// HTML elements that are allowed inside the fields
|
32 |
$allowed_html = array( |
33 |
'a' => array( |
34 |
'href' => array(), |
35 |
'title' => array() |
36 |
),
|
37 |
'em' => array(), |
38 |
'strong' => array() |
39 |
);
|
40 |
// update the post meta fields with input fields (if they're set)
|
41 |
foreach($review_array as $item) { |
42 |
if( isset( $_POST[$item] ) ) |
43 |
update_post_meta( $post_id, $item, wp_kses($_POST[$item], $allowed_html) ); |
44 |
}
|
45 |
}
|
46 |
add_action( 'save_post', 'wptuts_review_box_save_meta' ); |
Selesai!
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:
1 |
$meta_values = get_post_meta($post_id, $key, $single); |
Kita perlu memuat nilai bidang khusus ke dalam beberapa kode HTML, jadi sebaiknya pikirkan HTML sekarang. Saya sedang memikirkan sesuatu seperti ini:
1 |
<div class="review-box"> |
2 |
<img src="http://ourwebsite.com/uploads/the-pursuit-of-happyness.jpg" alt="The Pursuit of Happyness (2006)" class="review-box-image" /> |
3 |
<ul class="review-box-list"> |
4 |
<li><strong>Name:</strong> The Pursuit of Happyness</li> |
5 |
<li><strong>Year:</strong> 2006</li> |
6 |
<li><strong>Director:</strong> Gabriele Muccino</li> |
7 |
<li><strong>Writer:</strong> Steve Conrad</li> |
8 |
<li><strong>Stars:</strong> Will Smith, Jaden Smith, Thandie Newton</li> |
9 |
<li><strong>Genre:</strong> Biography, Drama</li> |
10 |
<li><strong>Runtime:</strong> 117 minutes</li> |
11 |
<li><strong>Storyline:</strong> Based on a true story about a man named Christopher Gardner. Gardner has invested heavily in a device known as a "Bone Density scanner". He feels like he has made these devices. However, they do not sell as they are marginally better than the current technology at a much higher price. As Gardner tries to figure out how to sell them, his wife leaves him, he loses his house, his bank account, and credit cards. Forced to live out in the streets with his son, Gardner is now desperate to find a steady job; he takes on a job as a stockbroker, but before he can receive pay, he needs to go through 6 months of training, and to sell his devices.</li> |
12 |
</ul>
|
13 |
</div>
|
Dan jika kita menyatukannya, kita akan memiliki fungsi kita siap!
1 |
function wptuts_review_box() { |
2 |
global $post; |
3 |
// get the custom field values as an array
|
4 |
$values = get_post_custom( $post->ID ); |
5 |
// extract the members of the $values array to their own variables (which you can see below, in the HTML code)
|
6 |
extract( $values, EXTR_SKIP ); |
7 |
// if there's no image link in the "review_image" custom field, try to get the featured image
|
8 |
if($_wptuts_review_image == '') { |
9 |
if(has_post_thumbnail()) { |
10 |
$get_wptuts_review_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); |
11 |
$_wptuts_review_image = $get_wptuts_review_image[0]; |
12 |
} else { |
13 |
$_wptuts_review_image = 'http://placehold.it/150x200&text=No+Image'; |
14 |
}
|
15 |
}
|
16 |
// escape the output, just in case
|
17 |
$allowed_html = array( |
18 |
'a' => array( |
19 |
'href' => array(), |
20 |
'title' => array() |
21 |
),
|
22 |
'em' => array(), |
23 |
'strong' => array() |
24 |
);
|
25 |
$_wptuts_review_name_output = wp_kses($_wptuts_review_name[0], $allowed_html); |
26 |
$_wptuts_review_year_output = wp_kses($_wptuts_review_year[0], $allowed_html); |
27 |
$_wptuts_review_director_output = wp_kses($_wptuts_review_director[0], $allowed_html); |
28 |
$_wptuts_review_writer_output = wp_kses($_wptuts_review_writer[0], $allowed_html); |
29 |
$_wptuts_review_stars_output = wp_kses($_wptuts_review_stars[0], $allowed_html); |
30 |
$_wptuts_review_genre_output = wp_kses($_wptuts_review_genre[0], $allowed_html); |
31 |
$_wptuts_review_runtime_output = wp_kses($_wptuts_review_runtime[0], $allowed_html); |
32 |
$_wptuts_review_storyline_output = wp_kses($_wptuts_review_storyline[0], $allowed_html); |
33 |
$_wptuts_review_image_output = wp_kses($_wptuts_review_image[0], $allowed_html); |
34 |
$output = '<div class="review-box"> |
35 |
<img src="'.$_wptuts_review_image_output.'" alt="'.$_wptuts_review_name_output.' ('.$_wptuts_review_year_output.')" class="review-box-image" /> |
36 |
<ul class="review-box-list">
|
37 |
<li><strong>Name:</strong> '.$_wptuts_review_name_output.'</li> |
38 |
<li><strong>Year:</strong> '.$_wptuts_review_year_output.'</li> |
39 |
<li><strong>Director:</strong> '.$_wptuts_review_director_output.'</li> |
40 |
<li><strong>Writer:</strong> '.$_wptuts_review_writer_output.'</li> |
41 |
<li><strong>Stars:</strong> '.$_wptuts_review_stars_output.'</li> |
42 |
<li><strong>Genre:</strong> '.$_wptuts_review_genre_output.'</li> |
43 |
<li><strong>Runtime:</strong> '.$_wptuts_review_runtime_output.'</li> |
44 |
<li><strong>Storyline:</strong> '.$_wptuts_review_storyline_output.'</li> |
45 |
</ul>
|
46 |
</div>'; |
47 |
return $output; |
48 |
}
|
CSS
Tentu saja, anda dapat menata kotak ulasan sesuka anda. Jika anda tidak menyukainya, anda dapat menggunakan kami:
1 |
.review-box {width:550px;border:1px solid #DDD;border-radius:5px;margin:10px;} |
2 |
.review-box-image {float:right;width:150px;border:10px solid #fff;border-width:0 0 10px 10px;margin:10px 10px 0 0;} |
3 |
.review-box-list {margin:10px;padding:0;list-style:none;} |
4 |
.review-box-list li {margin-bottom:5px;padding-top:5px;border-top:1px solid #EEE;} |
5 |
.review-box-list li:first-child {border-top:0;} |
6 |
.review-box-list li strong {display:inline-block;width:75px;} |
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:
1 |
function wptuts_review_box_add($content) { |
2 |
$review_box = wptuts_review_box(); |
3 |
// show the box at the end of the post:
|
4 |
return $content.$review_box; |
5 |
// show the box at the beginning of the post:
|
6 |
// return $review_box.$content;
|
7 |
} add_action('the_content','wptuts_review_box_add'); |
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:
1 |
add_shortcode('reviewbox','wptuts_review_box'); |
Inilah yang akan anda miliki jika anda mengikuti langkah-langkah di atas persis seperti yang tertulis:
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:
- Cara Membuat WordPress Custom/Meta Boxes (Anda harus membaca artikel ini jika anda ingin mempelajari konsep kotak meta khusus.)
- Cara Mengintegrasikan Pengunggah WordPress Media di Opsi Tema dan Plugin (Ini bisa berguna jika anda ingin mengizinkan penulis anda mengunggah gambar ulasan secara langsung.)
- Sanitasi dan Validasi Data Dengan WordPress (Artikel hebat tentang sanitasi data. Ingat: Anda bahkan tidak bisa mempercayai diri sendiri tentang ini!)
Adakah yang ingin anda tingkatkan atau anda punya ide? Bagikan pemikiran anda dengan kami dengan berkomentar di bawah ini.
