Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)
Cukup sering, banyak stasiun radio dibangun menggunakan WordPress, tetapi banyak yang tidak memanen potensi sesungguhnya untuk membuat stasiun radio online yang sebenarnya. Tutorial ini akan menunjukkan bagaimana Anda dapat mengubah situs web radio menjadi daftar DJ stasiun radio yang berfungsi penuh dengan jadwal radio yang bagus untuk acara unggulan.
Perkenalan
Untuk situs web radio online kita, kita akan menampilkan beberapa DJ/host yang sedang mengudara. Kita akan membuat jenis posting kustom untuk mereka, di mana kita dapat menambahkan gambar, biografi dan informasi berguna lainnya. Kita juga akan membuat jadwal acara menggunakan jenis posting kustom WordPress lagi. Dicampur dengan beberapa metabox kustom, kita akan membuat administrasi acara yang mudah dikelola.
Langkah 1 Membuat Jenis Posting Kustom DJ/Host
Untuk menghindari file-file yang berantakan dengan kodenya, kita akan memisahkan cuplikan kita dan dengan menggunakan fungsi PHP include, kita akan memasukkannya ke file kita. Buka file functions.php Anda, yang terletak di folder tema Anda saat ini dan tambahkan potongan berikut:
1 |
include('schedule.php'); |
Setelah selesai, buat file baru bernama schedule.php, kemudian kita tambahkan fungsi-fungsi kita untuk mendaftarkan jenis posting baru kita.
Untuk informasi lebih lanjut tentang jenis posting kustom, coba jenis posting kustom halaman ini
1 |
// Register DJs Post Type
|
2 |
add_action( 'init', 'register_my_radios_djs' ); |
3 |
|
4 |
function register_my_radios_djs() { |
5 |
$labels = array( |
6 |
'name' => _x( 'Radio Djs', 'radios_djs' ), |
7 |
'singular_name' => _x( 'Radio Dj', 'radios_djs' ), |
8 |
'add_new' => _x( 'Add New', 'radios_djs' ), |
9 |
'add_new_item' => _x( 'Add New Dj', 'radios_djs' ), |
10 |
'edit_item' => _x( 'Edit Dj', 'radios_djs' ), |
11 |
'new_item' => _x( 'New Dj', 'radios_djs' ), |
12 |
'view_item' => _x( 'View Dj', 'radios_djs' ), |
13 |
'search_items' => _x( 'Search Dj', 'radios_djs' ), |
14 |
'not_found' => _x( 'No dj found', 'radios_djs' ), |
15 |
'not_found_in_trash' => _x( 'No dj found in Trash', 'radios_djs' ), |
16 |
'parent_item_colon' => _x( 'Parent Dj:', 'radios_djs' ), |
17 |
'menu_name' => _x( 'Radio Djs', 'radios_djs' ) |
18 |
);
|
19 |
$args = array( |
20 |
'labels' => $labels, |
21 |
'hierarchical' => true, |
22 |
'description' => 'WordPress Radio DJS', |
23 |
'supports' => array( 'title', 'editor', 'thumbnail' ), |
24 |
'taxonomies' => array( 'category', 'radios_djs' ), |
25 |
'public' => true, |
26 |
'show_ui' => true, |
27 |
'show_in_menu' => true, |
28 |
'show_in_nav_menus' => true, |
29 |
'publicly_queryable' => true, |
30 |
'exclude_from_search' => false, |
31 |
'has_archive' => true, |
32 |
'query_var' => true, |
33 |
'can_export' => true, |
34 |
'rewrite' => true, |
35 |
'capability_type' => 'post' |
36 |
);
|
37 |
|
38 |
register_post_type( 'radios_djs', $args ); |
39 |
}
|
Menambahkan Thumbnail Posting
Untuk tutorial ini, kita akan menggunakan gambar yang diformat untuk jadwal. Oleh karena itu, kita akan menambahkan fungsi thumbnail posting WordPress.
1 |
if ( function_exists( 'add_theme_support' ) ) { |
2 |
add_theme_support( 'post-thumbnails' ); |
3 |
set_post_thumbnail_size( 150, 150, true ); |
4 |
add_image_size( 'dj-pic', 260, 160 ); |
5 |
}
|
Perhatikan bahwa kita telah menambahkan fungsi add_image_size dan beberapa parameter. Kita akan menggunakan ukuran thumbnail posting 260x160 untuk hasil akhir kita.
Langkah 2 Membuat Jenis Posting Kustom Schedule
Sama seperti langkah sebelumnya, kita akan membuat jenis posting selanjutnya menggunakan metode yang sama dan hanya mengubah beberapa nama dan variabel.
1 |
// Register Schedule Post Type
|
2 |
add_action( 'init', 'register_my_dj_schedule' ); |
3 |
|
4 |
function register_my_dj_schedule() { |
5 |
|
6 |
$labels = array( |
7 |
'name' => _x( 'Dj Schedule', 'dj_schedule' ), |
8 |
'singular_name' => _x( 'Dj Schedule', 'dj_schedule' ), |
9 |
'add_new' => _x( 'Add New', 'dj_schedule' ), |
10 |
'add_new_item' => _x( 'Add New Schedule', 'dj_schedule' ), |
11 |
'edit_item' => _x( 'Edit Dj Schedule', 'dj_schedule' ), |
12 |
'new_item' => _x( 'New Dj Schedule', 'dj_schedule' ), |
13 |
'view_item' => _x( 'View Dj Schedule', 'dj_schedule' ), |
14 |
'search_items' => _x( 'Search Dj Schedule', 'dj_schedule' ), |
15 |
'not_found' => _x( 'No dj schedule found', 'dj_schedule' ), |
16 |
'not_found_in_trash' => _x( 'No dj schedule found in Trash', 'dj_schedule' ), |
17 |
'parent_item_colon' => _x( 'Parent Dj Schedule:', 'dj_schedule' ), |
18 |
'menu_name' => _x( 'Dj Schedule', 'dj_schedule' ) |
19 |
);
|
20 |
|
21 |
$args = array( |
22 |
'labels' => $labels, |
23 |
'hierarchical' => true, |
24 |
'description' => 'WordPress DJ Schedule', |
25 |
'supports' => array( 'title', 'editor', 'thumbnail' ), |
26 |
'taxonomies' => array( 'category', 'dj_schedule' ), |
27 |
'public' => true, |
28 |
'show_ui' => true, |
29 |
'show_in_menu' => true, |
30 |
'show_in_nav_menus' => true, |
31 |
'publicly_queryable' => true, |
32 |
'exclude_from_search' => false, |
33 |
'has_archive' => true, |
34 |
'query_var' => true, |
35 |
'can_export' => true, |
36 |
'rewrite' => true, |
37 |
'capability_type' => 'post' |
38 |
);
|
39 |
|
40 |
register_post_type( 'dj_schedule', $args ); |
41 |
}
|
Langkah 3 Menambahkan Kotak Meta Kustom
Tutorial ini tidak akan menjelaskan setiap aspek pembuatan metabox kustom, tetapi kita akan menyoroti yang paling signifikan. Dengan begitu, kita akan mulai dengan memanggil dua hook add_action untuk metabox kita.
1 |
add_action( 'add_meta_boxes', 'rschedule_box' ); |
2 |
add_action( 'save_post', 'dj_schedule_save_postdata' ); |
Di Anda tertarik untuk mempelajari lebih lanjut tentang kotak meta kustom. Ini adalah bacaan yang bagus: Cara Membuat Kotak Write/Meta Kustom WordPress
Menambahkan Meta-Box
Fungsi rschedule_box yang sebelumnya disebutkan di hook, akan mendaftarkan sekelompok metabox ke layar edit posting kita. Kita akan menggunakan metabox ini pada halaman Edit Schedule Kita.
1 |
function rschedule_box() { |
2 |
add_meta_box( |
3 |
'time_slot_id', |
4 |
__( 'Time Slots', 'time_slot_text' ), |
5 |
'radio_time_slots', |
6 |
'dj_schedule'
|
7 |
);
|
8 |
add_meta_box( |
9 |
'dj_select_id', |
10 |
__( 'Select DJ', 'dj_select_text' ), |
11 |
'radio_get_dj_select_box', |
12 |
'dj_schedule', |
13 |
'side'
|
14 |
);
|
15 |
}
|
Membuat Daftar Pilih DJ
Pada langkah ini, kita membuat fungsi yang akan menghasilkan daftar pilih di layar kita. Daftar ini akan menampilkan semua DJ/Host yang ditambahkan ke jenis posting kustom kita, yang kita buat pada Langkah 1. Fungsi ini akan melakukan kueri jenis posting dan mengembalikan item sebagai array, maka kita akan mengulang array dan mencampurnya dengan beberapa HTML. Dengan cara ini, kita bisa mereferensikan ID posting DJ, yang akan kita butuhkan dalam menghasilkan keluaran kita nanti.
1 |
function radio_get_dj_select_box($post) { |
2 |
wp_nonce_field( 'radio_schedule', 'schedule_noncename' ); |
3 |
echo '<label for="dj_id">'; |
4 |
_e("DJ/Host", 'dj_id' ); |
5 |
echo '</label> '; |
6 |
$args = array( 'post_type' => 'radios_djs'); |
7 |
$loop = new WP_Query( $args ); |
8 |
echo '<select name="dj_id" id="dj_id">'; |
9 |
foreach ( $loop->posts as $dj ) { |
10 |
if ( $dj->ID == get_post_meta( $post->ID, 'dj_id', true ) ) { |
11 |
$select = 'selected'; |
12 |
}
|
13 |
else { |
14 |
$select = ''; |
15 |
}
|
16 |
echo '<option value="'.$dj->ID.'" '.$select.'>'.$dj->post_title.'</option>'; |
17 |
}
|
18 |
echo '</select>'; |
19 |
}
|
Membuat Slot Waktu
Fungsi selanjutnya adalah fungsi kita yang akan menampilkan hari-hari dalam seminggu dan opsi untuk memilih waktu ketika pertunjukan akan ditayangkan. Agar kita mendapatkan hari-hari dalam seminggu, kita akan membuat sebuah array.
1 |
$days = array( |
2 |
'sun' => 'Sunday', |
3 |
'mon' => 'Monday', |
4 |
'tue' => 'Tuesday', |
5 |
'wed' => 'Wednesday', |
6 |
'thu' => 'Thursday', |
7 |
'fri' => 'Friday', |
8 |
'sat' => 'Saturday' |
9 |
);
|
Setelah selesai, mari kita buat fungsi slot waktu kita. Tambahkan kode berikut ke file Anda.
1 |
/* Prints the box content */
|
2 |
function radio_time_slots($post) { |
3 |
|
4 |
global $days; |
5 |
// Use nonce for verification
|
6 |
wp_nonce_field( 'radio_schedule', 'schedule_noncename' ); |
7 |
|
8 |
foreach ( $days as $key => $value ) { |
9 |
$selected_start = get_post_meta( $post->ID, 'schdule_dj-start-'.$key, true ); //Start Time |
10 |
$selected_end = get_post_meta( $post->ID, 'schdule_dj-end-'.$key, true ); //End Time |
11 |
|
12 |
echo '<strong>'.$value.'</strong><br />'; |
13 |
echo '<label for="schdule_dj-start-'.$key.'">'; |
14 |
_e("Start", 'schdule_dj-start-'.$key ); |
15 |
echo '</label> '; |
16 |
echo '<select name="schdule_dj-start-'.$key.'" id="schdule_dj-start-'.$key.'">'; |
17 |
schedule_time_select($selected_start); |
18 |
echo '</select>'; |
19 |
echo '<label for="schdule_dj-end-'.$key.'">'; |
20 |
_e("End", 'schdule_dj-end-'.$key ); |
21 |
echo '</label> '; |
22 |
echo '<select name="schdule_dj-end-'.$key.'" id="schdule_dj-end-'.$key.'">'; |
23 |
schedule_time_select($selected_end); |
24 |
echo '</select>'; |
25 |
echo '<br />'; |
26 |
}
|
27 |
}
|
Seperti yang Anda lihat, kita mereferensi array hari kita dengan menggunakan global $days. Kita bisa menempatkannya di dalam fungsi tetapi kita akan merujuknya sesekali, jadi kita akan meninggalkannya di luar. Juga, lihat bagaimana array hari digunakan, kita telah memilih untuk mengulang beberapa bidang pemilihan menggunakan hari, jadi kita harus memiliki beberapa bidang pemilihan untuk 7 hari dalam seminggu. Variabel $selected_start dan $selected_end menggunakan fungsi WordPress get_post_meta, agar mendapatkan nilai yang saat ini dipilih untuk daftar kita. Kita juga secara strategis menggunakan key dari array kita di daftar kita untuk menamai bidang formulir, label, dan mendapatkan nilai yang kita pilih. Ketika PHP menafsirkan nama bidang, itu akan terlihat mirip dengan schdule_dj-start-sun ini di mana sun akan diubah sesuai dengan hari saat ini dalam perulangan. Ini akan sangat berguna bagi kita di bagian lain dari tutorial. Terakhir, Anda akan menyadari bahwa kita telah mereferensikan fungsi schedule_time_select, yang belum kita buat. Mari kita buat fungsi itu sekarang.
1 |
function schedule_time_select($selected) { |
2 |
$start = 8*60+0; |
3 |
$end = 24*60+0; |
4 |
echo '<option vlaue="0">N/A</option>'; //Default Value |
5 |
for($time = $start; $time<=$end; $time += 15) { |
6 |
$minute = $time%60; |
7 |
$hour = ($time-$minute)/60; |
8 |
if ( $selected == sprintf( '%02d:%02d', $hour, $minute ) ) { |
9 |
$select = 'selected'; |
10 |
}
|
11 |
else { |
12 |
$select = ''; |
13 |
}
|
14 |
echo '<option value='.sprintf('%02d:%02d', $hour, $minute).' '.$select.'>'.sprintf('%02d:%02d', $hour, $minute).'</option>'; |
15 |
}
|
16 |
}
|
Fungsi ini akan menghasilkan opsi untuk daftar pilihan kita. Setiap opsi akan bertambah selama 15 menit dan didasarkan pada sistem 24 jam. Untuk opsi pertama, kita menetapkan nilai 0 untuk hari-hari yang ingin kita abaikan. Dalam pengaturan, ada pernyataan if kecil yang memeriksa nilai yang dikirim dari fungsi slot waktu radio kami untuk menentukan apakah opsi harus ditetapkan menjadi selected.
Langkah 3 Menyimpan Kotak Meta
Akhirnya, sudah waktunya untuk menyimpan semua informasi metabox kita. WordPress memiliki cara yang sangat sederhana dan mudah untuk menyimpan opsi ini, tetapi kita akan membuatnya lebih dinamis. Tambahkan cuplikan berikut ke file Anda.
1 |
// Save Meta Data
|
2 |
function dj_schedule_save_postdata( $post_id ) { |
3 |
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) |
4 |
return; |
5 |
|
6 |
if ( !wp_verify_nonce( $_POST['schedule_noncename'], 'radio_schedule' ) ) |
7 |
return; |
8 |
|
9 |
if ( 'page' == $_POST['post_type'] ) { |
10 |
if ( !current_user_can( 'edit_page', $post_id ) ) |
11 |
return; |
12 |
}
|
13 |
else { |
14 |
if ( !current_user_can( 'edit_post', $post_id ) ) |
15 |
return; |
16 |
}
|
17 |
|
18 |
if( isset( $_POST['dj_id'] ) ) { |
19 |
update_post_meta( $post_id,'dj_id', esc_attr( $_POST['dj_id'] ) ); |
20 |
}
|
21 |
|
22 |
global $days; |
23 |
|
24 |
foreach($days as $key=>$value) { |
25 |
|
26 |
if( isset( $_POST['schdule_dj-start-'.$key] ) ) { |
27 |
update_post_meta( $post_id,'schdule_dj-start-'.$key, esc_attr( $_POST['schdule_dj-start-'.$key] ) ); |
28 |
}
|
29 |
|
30 |
if( isset( $_POST['schdule_dj-end-'.$key] ) ) { |
31 |
update_post_meta( $post_id,'schdule_dj-end-'.$key, esc_attr( $_POST['schdule_dj-end-'.$key] ) ); |
32 |
}
|
33 |
}
|
34 |
}
|
Sekali lagi, Anda melihat kegunaan variabel days global kita. Dalam fungsi ini, kita mengulang setiap hari dan kita menyimpan opsi dari bidang pilihan kita dengan mengubah nama saat perulangan hari-hari.
Langkah 3 Menyimpan Kotak Meta
Wow! Jika Anda masih bersama saya, mari kita jadikan semua kode ini bekerja, ya? Ok, bagus! Cuplikan di bawah ini menunjukkan bagaimana kita akan mengulang melalui setiap jadwal yang kita buat dan menempatkannya di div. Tambahkan sedikit kode itu dan mari kita rinci.
1 |
function show_schedule() { |
2 |
global $days; |
3 |
$html=''; |
4 |
$html.= '<div>'; |
5 |
$args = array( 'post_type' => 'dj_schedule'); |
6 |
$loop = new WP_Query( $args ); |
7 |
foreach ( $loop->posts as $item ): |
8 |
$html.= '<div class="scheduleBox">'; |
9 |
$html.= '<h3>'.$item->post_title.'</h3>'; |
10 |
$dj_id = get_post_meta($item->ID, 'dj_id', true); |
11 |
$dj = get_post($dj_id); |
12 |
$html.= '<div>'.$dj->post_title.'</div>'; |
13 |
$html.= '<div>'.get_the_post_thumbnail($dj->ID, 'dj-pic').'</div>'; |
14 |
foreach( $days as $key => $value ) { |
15 |
$start = get_post_meta($item->ID, 'schdule_dj-start-'.$key, true); |
16 |
$end = get_post_meta($item->ID, 'schdule_dj-end-'.$key, true); |
17 |
if ( $start <> 0 ) |
18 |
$html.= '<div id="time">'.$value.' '.$start.'-'.$end.'</div>'; |
19 |
}
|
20 |
$html.= '</div>'; |
21 |
endforeach; |
22 |
$html.= '<div style="clear:both;"></div>'; |
23 |
$html.='</div>'; |
24 |
return $html; |
25 |
}
|
Pertama-tama, kita membuat perulangan untuk jenis posting kustom dj_schedule kita, membuat div dan daftar judul. Saat berada di dalam div, kita mengambil ID DJ yang kita tambahkan di admin menggunakan fungsi get_post_meta. Kemudian kita menggunakan ID yang sama dan memanggil fungsi get_post WordPress untuk nilai posting itu dan menetapkan mereka ke variabel yang kemudian kita gunakan untuk mendapatkan nama dan foto DJ.
Mendapatkan Slot Waktu
Tepat di bawah DJ kita, kita memiliki perulangan hari kita yang melewati setiap hari sambil membuat pemeriksaan untuk melihat apakah ada waktu mulai untuk hari itu. Jika mereka memang ada, maka kita keluarkan awal dan akhir waktu menjadi sebuah div.
Menambahkan Jadwal Kita ke Halaman
Kita bisa melakukan banyak hal untuk menambah jadwal ke halaman, tetapi untuk tutorial ini, kita hanya akan menggunakan shortcode. Jadi, dengan hanya satu baris kode, kita akan membuat kode pendek yang dapat kita panggil dan tambahkan pada halaman apa pun dan voila! Kita memiliki jadwal radio yang berfungsi!
1 |
add_shortcode('show_schedule', 'show_schedule'); |
Kesimpulan
Ini adalah fase pertama dari menambahkan lebih banyak fitur hebat ke situs web radio WP Anda. Saya telah memilih beberapa gaya sederhana untuk tata letaknya, Anda dapat menambahkan gaya ini ke file style.css Anda. Dalam tutorial lain, saya akan menjelaskan cara membuat streaming langsung yang bagus dengan pertunjukan saat ini, DJ, dan pemutar radio.
1 |
.scheduleBox { background-color: #333333; border: #000000 1px solid; color: #fafafa; float: left; margin-left: 10px; height: 100%; } |
2 |
.scheduleBox h3 { font-size: 14px; } |
3 |
.scheduleBox #time { background: #666666; border-bottom: #000000 1px solid; } |
4 |
|
5 |
.scheduleBox:hover { background-color: #000; border: #000000 1px solid; color: #FFCC00; float: left; margin-left: 10px; } |
6 |
.scheduleBox h3:hover { color: #FF9900; } |
7 |
.scheduleBox #time:hover { background: #333333; border-bottom: #000000 1px solid; } |
Tanggapan Anda sangat dihargai. Biar saya tahu apa yang Anda pikirkan di komentar di bawah ini. Selamat mengkode!
