() translation by (you can also view the original English article)
Pricing Table (tabel harga) merupakan komponen penting dari bisnis yang mempromosikan produk anda dan membantu pengguna memilih antara layanan yang berbeda yang anda miliki. Kebanyakan tema WordPress komersial yang modern telah menyediakan pricing table di dalamnya. Ada juga banyak plugin pricing table gratis dan komersial untuk WordPress. Tutorial ini dimaksudkan untuk memberikan pengetahuan kepada para pengembang WordPress untuk membuat plugin dari dasar yang memungkinkan untuk disesuaikan dalam berbagai proyek.
Setiap desain web mencoba untuk mencapai fitur responsif yang memungkinkan tampilan dan rasa yang lebih baik pada perangkat apa pun. Pricing table yang dibuat dengan plugin ini akan bekerja pada semua jenis perangkat seperti ponsel dan juga tablet. Jadi, mari kita mulai.
Anda dapat melihat desain akhir pricing table pada tampilan berikut.
Merencanakan Plugin Pricing Table
Perencanaan merupakan bagian yang sulit dalam proyek apa pun. Kita akan lebih baik merencanakan bagaimana mengembangkan pricing table dan teknik apa yang akan kita gunakan sebelum melakukan proses pembuatan kode. Pada dasarnya pricing table akan memiliki komponen-komponen berikut:
- Tabel Harga - adalah kumpulan berbagai jenis paket yang tersedia untuk produk atau layanan Anda. Karena kami berencana membuat beberapa pricing tabel, akan lebih baik memilih Custom Post Type yang bernama
pricing_tables. - Paket Harga - adalah kumpulan fitur dalam produk Anda yang bervariasi di berbagai paket. Karena pricing table dapat berisi beberapa paket, Custom Post Type yang akan digunakan adalah
pricing_packages. - Fitur Paket - adalah kumpulan elemen unik dari produk atau layanan Anda. Fitur akan ditambahkan secara dinamis menggunakan custom field dalam proses pembuatan paket harga.
- Desain Pricing Table - Kita dapat memilih page template atau shortcode untuk menampilkan pricing table. Kita akan menggunakan shortcode pada plugin ini.
Membuat Paket Harga
Kami akan menggunakan Custom Post Type yang bernama pricing_packages. Anda secara sederhana dapat menghasilkan kode untuk membuat custom post type menggunakan generator kode online. Kode berikut membuat custom post type untuk paket harga menggunakan konfigurasi default:
1 |
|
2 |
add_action( 'init', 'wppt_register_cpt_pricing_packages' ); |
3 |
|
4 |
function wppt_register_cpt_pricing_packages() { |
5 |
|
6 |
$labels = array( |
7 |
'name' => _x( 'Pricing Packages', 'pricing_packages' ), |
8 |
'singular_name' => _x( 'Pricing Package', 'pricing_packages' ), |
9 |
'add_new' => _x( 'Add New', 'pricing_packages' ), |
10 |
'add_new_item' => _x( 'Add New Pricing Package', 'pricing_packages' ), |
11 |
'edit_item' => _x( 'Edit Pricing Package', 'pricing_packages' ), |
12 |
'new_item' => _x( 'New Pricing Package', 'pricing_packages' ), |
13 |
'view_item' => _x( 'View Pricing Package', 'pricing_packages' ), |
14 |
'search_items' => _x( 'Search Pricing Packages', 'pricing_packages' ), |
15 |
'not_found' => _x( 'No Pricing Packages found', 'pricing_packages' ), |
16 |
'not_found_in_trash' => _x( 'No Pricing Packages found in Trash', 'pricing_packages' ), |
17 |
'parent_item_colon' => _x( 'Parent Pricing Package:', 'pricing_packages' ), |
18 |
'menu_name' => _x( 'Pricing Packages', 'pricing_packages' ), |
19 |
);
|
20 |
|
21 |
$args = array( |
22 |
'labels' => $labels, |
23 |
'hierarchical' => false, |
24 |
'description' => 'Pricing Packages', |
25 |
'supports' => array( 'title', 'editor' ), |
26 |
'public' => true, |
27 |
'show_ui' => true, |
28 |
'show_in_menu' => true, |
29 |
'show_in_nav_menus' => true, |
30 |
'publicly_queryable' => true, |
31 |
'exclude_from_search' => false, |
32 |
'has_archive' => true, |
33 |
'query_var' => true, |
34 |
'can_export' => true, |
35 |
'rewrite' => true, |
36 |
'capability_type' => 'post' |
37 |
);
|
38 |
|
39 |
register_post_type( 'pricing_packages', $args ); |
40 |
}
|
Menggunakan Custom Fields untuk Informasi Paket
Nama paket, harga, dan tautan untuk pembelian adalah komponen yang paling penting dalam paket harga. Jadi kita akan menggunakan meta box untuk menambahkan field ini. Kita juga membutuhkan banyak fitur untuk paket. Kita akan menggunakan meta box lainnya untuk menambah dan menghapus fitur secara dinamis seperti yang ditunjukkan pada kode di bawah ini.
1 |
|
2 |
add_action( 'add_meta_boxes', 'wppt_pricing_packages_meta_boxes' ); |
3 |
|
4 |
function wppt_pricing_packages_meta_boxes() { |
5 |
|
6 |
add_meta_box( "pricing-package-info", "Pricing Package Info", 'wppt_generate_pricing_package_info', "pricing_packages", "normal", "high" ); |
7 |
add_meta_box( "pricing-features-info", "Pricing Features", 'wppt_generate_pricing_features_info', "pricing_packages", "normal", "high" ); |
8 |
|
9 |
}
|
Meta Box untuk field paket ditambahkan menggunakan action add_meta_boxes. Anda dapat menggunakan satu meta box atau bahkan dua. Saya telah menggunakan dua meta box untuk membuat semuanya menjadi jelas.
1 |
|
2 |
function wppt_generate_pricing_package_info() { |
3 |
global $post; |
4 |
|
5 |
$package_price = get_post_meta( $post->ID, "_package_price", true ); |
6 |
$package_buy_link = get_post_meta( $post->ID, "_package_buy_link", true ); |
7 |
|
8 |
$html = '<input type="hidden" name="pricing_package_box_nonce" value="' . wp_create_nonce( basename( __FILE__ ) ) . '" />'; |
9 |
|
10 |
$html .= '<table class="form-table">'; |
11 |
|
12 |
$html .= '<tr>'; |
13 |
$html .= ' <th><label for="Price">Package Price *</label></th>'; |
14 |
$html .= ' <td>'; |
15 |
$html .= ' <input name="package_price" id="package_price" type="text" value="' . $package_price . '" />'; |
16 |
$html .= ' </td>'; |
17 |
$html .= '</tr>'; |
18 |
|
19 |
$html .= '<tr>'; |
20 |
$html .= ' <th><label for="Buy Now">Buy Now Link *</label></th>'; |
21 |
$html .= ' <td>'; |
22 |
$html .= ' <input name="package_buy_link" id="package_buy_link" type="text" value="' . $package_buy_link . '" />'; |
23 |
$html .= ' </td>'; |
24 |
$html .= '</tr>'; |
25 |
|
26 |
$html .= '</tr>'; |
27 |
$html .= '</table>'; |
28 |
|
29 |
echo $html; |
30 |
}
|
Meta box pertama akan berisi field untuk harga dan tautan pembelian. Ke 2 field tersebut akan disimpan dalam tabel post_meta masing-masing menggunakan kata kunci _package_price dan _package_buy_link.
1 |
|
2 |
function wppt_generate_pricing_features_info() { |
3 |
|
4 |
global $post; |
5 |
|
6 |
$package_features = get_post_meta( $post->ID, "_package_features", true ); |
7 |
$package_features = ( $package_features == '' ) ? array() : json_decode( $package_features ); |
8 |
|
9 |
|
10 |
|
11 |
$html .= '<table class="form-table">'; |
12 |
|
13 |
$html .= '<tr><th><label for="Price">Add Package Features</label></th>'; |
14 |
$html .= ' <td> |
15 |
$html .= ' <input name="package_feature" id="package_feature" type="text" />'; |
16 |
$html .= ' <input type="button" id="add_features" value="Add Features" />'; |
17 |
$html .= ' </td></tr>'; |
18 |
|
19 |
$html .= '<tr><td>'; |
20 |
$html .= ' <ul id="package_features_box" name="package_features_box" >'; |
21 |
foreach ($package_features as $package_feature) {
|
22 |
$html .= '<li><input type="hidden" name="package_features[]" value="' . $package_feature . '" />' . $package_feature . ''; |
23 |
$html .= '<a href="javascript:void(0);">Delete</a></li>'; |
24 |
}
|
25 |
$html .= '</ul></td></tr>'; |
26 |
|
27 |
$html .= '</table>'; |
28 |
|
29 |
echo $html; |
30 |
}
|
Kode di atas berisi HTML untuk field fitur paket. Satu paket akan berisi banyak fitur, sehingga fitur akan ditambahkan secara dinamis ke daftar yang tidak diurutkan dengan field yang tersembunyi menggunakan jQuery. Fitur akan disimpan dalam tabel post_meta dengan kata kunci _package_features. Membentuk sebuah JSON bertipe string yang akan digunakan untuk menyimpan beberapa fitur.
Memvalidasi Pembuatan Paket
Harga paket dan tautan pembelian merupakan hal wajib untuk setiap paket. Jadi kita perlu beberapa kode validasi sebelum membuat paket. Kami akan menggunakan jQuery untuk validasi seperti yang ditunjukkan di bawah ini.
1 |
|
2 |
jQuery(document).ready(function($) { |
3 |
|
4 |
$("#post-body-content").prepend('<div id="pricing_error" class="error" style="display:none" ></div>'); |
5 |
|
6 |
$('#post').submit(function() { |
7 |
|
8 |
if ( $("#post_type").val() =='pricing_packages' ) { |
9 |
return wppt_validate_pricing_packages(); |
10 |
}
|
11 |
else if ( $("#post_type").val() =='pricing_tables' ) { |
12 |
return wppt_validate_pricing_tables(); |
13 |
}
|
14 |
|
15 |
});
|
16 |
|
17 |
});
|
Kita perlu menambahkan elemen div pada tampilan proses pembuatan postingan untuk menampilkan kesalahan. Tampilan proses pembuatan postingan tersebut berisi form dengan post ID. Hal tersebut tidak mengubah tiap custom post type. Jadi saya menggunakan event submit pada form dengan atribut id #post untuk proses validasi.
Karena Kita menggunakan custom post type yang berbeda, Anda perlu melakukan filter untuk custom post type menggunakan kode di bawah ini. Form pada proses pembuatan postingan berisi field yang tersembunyi dengan ID post_type.
1 |
|
2 |
if ( $("#post_type").val() =='pricing_packages') { |
3 |
return wppt_validate_pricing_packages(); |
4 |
}
|
5 |
else if ( $("#post_type").val() =='pricing_tables' ) { |
6 |
return wppt_validate_pricing_tables(); |
7 |
}
|
Setelah proses filter selesai, kita memanggil fungsi validasi yang spesifik sesuai dengan jenis posting seperti yang ditunjukkan di bawah ini.
1 |
|
2 |
var wppt_validate_pricing_packages = function() { |
3 |
var err = 0; |
4 |
$("#pricing_error").html(""); |
5 |
$("#pricing_error").hide(); |
6 |
|
7 |
if ( $("#title").val() == '' ) { |
8 |
$("#pricing_error").append( "<p>Please enter Package Name.</p>" ); |
9 |
err++; |
10 |
}
|
11 |
if ( $("#package_price").val() == '' ) { |
12 |
$("#pricing_error").append( "<p>Please enter Package Price.</p>" ); |
13 |
err++; |
14 |
}
|
15 |
if ( $("#package_buy_link").val() == '' ) { |
16 |
$("#pricing_error").append( "<p>Please enter Package Buy Link.</p>" ); |
17 |
err++; |
18 |
}
|
19 |
|
20 |
if ( err > 0 ) { |
21 |
$("#publish").removeClass( "button-primary-disabled" ); |
22 |
$("#ajax-loading").hide(); |
23 |
$("#pricing_error").show(); |
24 |
return false; |
25 |
}
|
26 |
else { |
27 |
return true; |
28 |
}
|
29 |
};
|
Pertama kita menghapus semua kesalahan yang ada sebelumnya di dalam elemen pricing_error. Kemudian kita dapat memvalidasi setiap field dan menambahkan pesan kesalahan pada container pricing_error. Terakhir kita menampilkan kesalahan menggunakan fungsi $("#pricing_error").show().
$("#publish").removeClass("button-primary-disabled"). Juga kita bisa menghentikan gambar dari loading ajax menggunakan $("#ajax-loading").hide(). Menyimpan Informasi Paket
Sekarang kita telah menyelesaikan semua proses pembuatan field dan validasi untuk paket. Mari Kita lanjutkan untuk menyimpan informasi teresbut ke database. Kita akan menggunakan action save_post yang mengeksekusi tepat setelah postingan disimpan ke database.
1 |
|
2 |
add_action( 'save_post', 'wppt_save_pricing_packages' ); |
3 |
|
4 |
function wppt_save_pricing_packages( $post_id ) { |
5 |
|
6 |
if ( ! wp_verify_nonce( $_POST['pricing_package_box_nonce'], basename( __FILE__ ) ) ) { |
7 |
return $post_id; |
8 |
}
|
9 |
|
10 |
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) { |
11 |
return $post_id; |
12 |
}
|
13 |
|
14 |
if ( 'pricing_packages' == $_POST['post_type'] && current_user_can( 'edit_post', $post_id ) ) { |
15 |
$package_price = ( isset( $_POST['package_price'] ) ? $_POST['package_price'] : '' ); |
16 |
$package_buy_link = ( isset( $_POST['package_buy_link'] ) ? $_POST['package_buy_link'] : '' ); |
17 |
|
18 |
$package_features = ( isset( $_POST['package_features'] ) ? $_POST['package_features'] : array() ); |
19 |
$package_features = json_encode( $package_features ); |
20 |
|
21 |
update_post_meta( $post_id, "_package_price", $package_price ); |
22 |
update_post_meta( $post_id, "_package_buy_link", $package_buy_link ); |
23 |
update_post_meta( $post_id, "_package_features", $package_features ); |
24 |
}
|
25 |
else { |
26 |
return $post_id; |
27 |
}
|
28 |
}
|
Pertama kita melakukan beberapa validasi untuk memeriksa apakah nilai nonce yang dihasilkan dalam form sesuai dengan nilai nonce yang diterima oleh $_POST. Selanjutnya kita harus memastikan apakah itu menyimpan otomatis atau menyimpan secara manual. Selanjutnya Kita harus memeriksa jenis postingan tersebut sebelum proses menyimpan. Jika tidak, kode ini akan dieksekusi pada setiap jenis postingan. Paket harga dan tautan pembelian akan disimpan langsung dalam tabel post_meta menggunakan fungsi update_post_meta. Fitur akan disimpan sebagai JSON encoded bertipe string. Sekarang Kita telah selesai dengan proses membuat paket. Mari kita lanjutkan untuk membuat pricing table.
Membuat Pricing Table
Pricing table akan menjadi custom post type lainnya pada plugin Kami. Pembuatan Custom Post Type dan menyimpan ke database sangat mirip dengan kode yang dijelaskan sebelumnya. Jadi Saya tidak akan membuatnya menjadi membosankan dengan menjelaskan hal yang serupa. Anda dapat menemukan pembuatan custom post dan menyimpan kode untuk pricing table pada file plugin.
Pricing table berisi paket harga. Oleh karena itu, meta box yang digunakan untuk pricing table akan berbeda dari yang kami gunakan pada paket harga. Mari Kita lihat pembuatan meta box untuk pricing table.
1 |
|
2 |
add_action( 'add_meta_boxes', 'wppt_pricing_tables_meta_boxes' ); |
3 |
|
4 |
function wppt_pricing_tables_meta_boxes() { |
5 |
|
6 |
add_meta_box( "pricing-table-info", "Pricing Table Info", 'wppt_generate_pricing_table_info', "pricing_tables", "normal", "high" ); |
7 |
}
|
8 |
|
9 |
function wppt_generate_pricing_table_info() { |
10 |
global $post; |
11 |
|
12 |
$table_packages = get_post_meta( $post->ID, "_table_packages", true ); |
13 |
$table_packages = ( $table_packages == '' ) ? array() : json_decode( $table_packages ); |
14 |
|
15 |
$query = new WP_Query( array( |
16 |
'post_type' => 'pricing_packages', |
17 |
'post_status' => 'publish', |
18 |
'posts_per_page' => -1, |
19 |
'orderby' => 'post_date', |
20 |
'order' => 'ASC' |
21 |
) ); |
22 |
|
23 |
$html = '<input type="hidden" name="pricing_table_box_nonce" value="' . wp_create_nonce( basename( __FILE__ ) ) . '" />'; |
24 |
|
25 |
$html .= '<table class="form-table">'; |
26 |
$html .= '<tr><th>Package Status</th>'; |
27 |
$html .= ' <td>Package Name</td></tr>'; |
28 |
|
29 |
while ( $query->have_posts() ) : $query->the_post(); |
30 |
$checked_status = ( in_array( $query->post->ID, $table_packages ) ) ? "checked" : ""; |
31 |
|
32 |
$html .= '<tr><th><input type="checkbox" name="pricing_table_packages[]" ' . $checked_status . ' value="' . $query->post->ID . '" /></th>'; |
33 |
$html .= ' <td>' . $query->post->post_title . '</td></tr>'; |
34 |
|
35 |
endwhile; |
36 |
|
37 |
$html .= '</table>'; |
38 |
|
39 |
echo $html; |
40 |
}
|
Kita dapat menambahkan meta box khusus untuk pricing table menggunakan kode yang mirip dengan yang digunakan pada bagian sebelumnya. Paket tabel tertentu akan disimpan dalam tabel post_meta sebagai JSON encode bertipe string. Jadi kita mendapatkan paket untuk tabel saat ini menggunakan fungsi get_post_meta. Lalu mendapatkan semua paket harga yang dipublikasikan menggunakan query khusus seperti yang ditunjukkan di bawah ini.
1 |
|
2 |
$query = new WP_Query( array( |
3 |
'post_type' => 'pricing_packages', |
4 |
'post_status' => 'publish', |
5 |
'posts_per_page' => -1, |
6 |
'orderby' => 'post_date', |
7 |
'order' => 'ASC' |
8 |
) ); |
Kita dapat memilih paket menggunakan custom post type pricing_packages. Anda dapat memilih kondisi lain untuk query sesuai dengan preferensi Anda.
WP_Query akan mengembalikan jumlah data yang dihasilkan secara default jika posts_per_page tidak ditentukan. Anda bisa mendapatkan semua postingan tanpa batas dengan menggunakan -1 untuk kondisi tersebut pada posts_per_page. Kemudian Kita menggunakan hasil yang diperoleh dari WP_Query untuk menampilkan semua paket harga dengan checkbox di depannya. Saat perulangan, Kita memeriksa apakah paket sudah ditetapkan ke tabel dan menetapkan tanda centang ke checkbox. Anda dapat menambah atau menghapus paket secara dinamis dengan memilih / tidak memilih checkbox dan menekan tombol update.
Memvalidasi Pembuatan Pricing Table
Kami akan memvalidasi nama pricing table seperti yang kami lakukan sebelumnya pada paket harga. Kode jQuery berikut akan digunakan untuk proses validasi:
1 |
|
2 |
var wppt_validate_pricing_tables = function() { |
3 |
var err = 0; |
4 |
$("#pricing_error").html(""); |
5 |
$("#pricing_error").hide(); |
6 |
|
7 |
if ( $("#title").val() == '' ) { |
8 |
$("#pricing_error").append( "<p>Please enter Pricing Table Name.</p>" ); |
9 |
err++; |
10 |
}
|
11 |
if ( err > 0 ) { |
12 |
$("#publish").removeClass( "button-primary-disabled" ); |
13 |
$("#ajax-loading").hide(); |
14 |
$("#pricing_error").show(); |
15 |
return false; |
16 |
}
|
17 |
else { |
18 |
return true; |
19 |
}
|
20 |
};
|
Kode di atas disertakan dalam file pricing_admin.js di folder js dari plugin.
Menghasilkan ID dari Pricing Table
Kita memerlukan kata kunci yang unik untuk pricing table untuk memasukkannya ke dalam shortcode. Jadi kita akan menggunakan ID dari pricing table sebagai kata kuncinya. Setelah tabel dibuat, Kita dapat menunjukkan ID dari pricing table dalam daftar menggunakan kolom khusus. WordPress menyediakan teknik yang sederhana untuk menyertakan kolom khusus dalam daftar seperti yang ditunjukkan di bawah ini:
1 |
|
2 |
add_filter( 'manage_edit-pricing_tables_columns', 'wppt_edit_pricing_tables_columns' ); |
3 |
|
4 |
function wppt_edit_pricing_tables_columns( $columns ) { |
5 |
|
6 |
$columns = array( |
7 |
'cb' => '<input type="checkbox" />', |
8 |
'ID' => __( 'Pricing Table ID' ), |
9 |
'title' => __( 'Pricing Table Name' ), |
10 |
'date' => __( 'Date' ) |
11 |
);
|
12 |
|
13 |
return $columns; |
14 |
}
|
Kita bisa menggunakan filter manage_edit-{Custom Post Type}_columns untuk menyesuaikan kolom yang akan ditampilkan dalam daftar. Seperti yang Anda lihat, Saya telah menetapkan kolom khusus yang bernama Pricing Table ID untuk menggunakan ID sebuah postingan.
1 |
|
2 |
add_action( 'manage_pricing_tables_posts_custom_column', 'wppt_manage_pricing_tables_columns', 10, 2 ); |
3 |
|
4 |
function wppt_manage_pricing_tables_columns( $column, $post_id ) { |
5 |
global $post; |
6 |
|
7 |
switch ( $column ) { |
8 |
|
9 |
case 'ID' : |
10 |
|
11 |
$pricing_id = $post_id; |
12 |
|
13 |
if ( empty( $pricing_id ) ) |
14 |
echo __( 'Unknown' ); |
15 |
|
16 |
else
|
17 |
printf( $pricing_id ); |
18 |
|
19 |
break; |
20 |
|
21 |
default : |
22 |
break; |
23 |
}
|
24 |
}
|
25 |
|
26 |
add_filter( 'manage_edit-pricing_tables_sortable_columns', 'wppt_pricing_tables_sortable_columns' ); |
27 |
|
28 |
function wppt_pricing_tables_sortable_columns( $columns ) { |
29 |
|
30 |
$columns['ID'] = 'ID'; |
31 |
|
32 |
return $columns; |
33 |
}
|
Kemudian Kita dapat menetapkan nilai-nilai ke kolom tersebut menggunakan pernyataan switch pada action manage_{Custom Post Type}_posts_custom_column. Terakhir, Kita menggunakan filter manage_edit-{Custom Post Type}_sortable_columns untuk membuat kolom dapat diurutkan. Setelah membuat pricing table, Anda akan dapat melihat nomor tersebut dalam daftar.
Menyertakan Plugin Script dan Style
Kita menggunakan file JavaScript khusus untuk memvalidasi fungsi admin area. Jadi pertama-tama kita akan melihat bagaimana file-file script dimasukkan dalam area admin WordPress.
1 |
|
2 |
function wppt_pricing_admin_scripts() { |
3 |
|
4 |
wp_register_script( 'pricing-admin', plugins_url( 'js/pricing_admin.js', __FILE__ ), array( 'jquery' ) ); |
5 |
wp_enqueue_script( 'pricing-admin' ); |
6 |
}
|
7 |
|
8 |
add_action( 'admin_enqueue_scripts', 'wppt_pricing_admin_scripts' ); |
admin_enqueue_scripts merupakan hook yang dapat digunakan untuk memasukkan semua file CSS dan Script pada area Admin WordPress. Pertama kita harus mendaftarkan script menggunakan fungsi wp_register_script dengan kata kunci yang unik dan path direktori menuju file. Kemudian Kita bisa menggunakan fungsi wp_enqueue_script untuk memasukkan file.
Sekarang mari Kita lihat masuknya style front end dan script menggunakan kode di bawah ini:
1 |
|
2 |
function wppt_pricing_front_scripts() { |
3 |
|
4 |
wp_register_style( 'pricing-base', plugins_url( 'css/base.css', __FILE__ ) ); |
5 |
wp_enqueue_style( 'pricing-base' ); |
6 |
|
7 |
wp_register_style( 'pricing-layout', plugins_url( 'css/layout.css', __FILE__ ) ); |
8 |
wp_enqueue_style( 'pricing-layout' ); |
9 |
|
10 |
wp_register_style( 'pricing-fluid-skeleton', plugins_url( 'css/fluid_skeleton.css', __FILE__ ) ); |
11 |
wp_enqueue_style( 'pricing-fluid-skeleton' ); |
12 |
|
13 |
wp_register_style( 'pricing-table', plugins_url( 'css/pricing_table.css', __FILE__ ) ); |
14 |
wp_enqueue_style( 'pricing-table' ); |
15 |
}
|
16 |
|
17 |
add_action( 'wp_enqueue_scripts', 'wppt_pricing_front_scripts' ); |
Di awal tutorial Saya menyebutkan bahwa Kita akan membuat pricing table yang responsif. Lebih mudah untuk bekerja dengan CSS framework yang ada untuk menyediakan fungsionalitas yang responsif. Jadi Saya memilih Skeleton sebagai CSS Frameworknya. Tiga file CSS pertama akan menjadi file CSS dari framework tersebut, kemudian Kita telah menyertakan style khusus untuk pricing table pada file price_table.css.
Sekarang semua data yang diperlukan untuk pricing table sudah siap dan Kita dapat melanjutkan proses untuk membuat desain dari pricing table.
Mendesain Pricing Table
Mendesain sebuah pricing table yang responsif adalah tugas yang memakan waktu dan memerlukan pengetahuan lanjutan dalam HTML dan CSS. Oleh karena itu menjelaskan desain berada di luar cakupan dari tutorial ini. Saya akan menggunakan pricing table responsif yang telah Saya buat sebelumnya untuk Webdesigntuts+. Jika Anda tertarik, Anda dapat mempelajari tentang bagian dari mendesain dengan membaca tutorial Pricing Table yang Responsif menggunakan :target untuk Layar Kecil. Kode berikut berisi kode HTML untuk pricing table dengan dua paket:
1 |
|
2 |
<div class="container"> |
3 |
<div id='pricing_plan1' class="four columns"> |
4 |
<dl class='plans' > |
5 |
<dd class="plan_title"> |
6 |
Basic |
7 |
</dd>
|
8 |
<dd class="plan_price"> |
9 |
$9.99 |
10 |
</dd>
|
11 |
</dl>
|
12 |
<dl class='plan' id="one"> |
13 |
<dt class='plan_more'>View<a href="#one" class="more_icon"></a><a href="#" |
14 |
class="less_icon"></a></dt> |
15 |
<dd class="plan_features"> |
16 |
<div class="feature_desc"><span class="highlight">1GB</span> Storage</div> |
17 |
</dd>
|
18 |
<dd class="plan_features"> |
19 |
<div class="feature_desc"><span class="highlight">5GB</span> Bandwidth</div> |
20 |
</dd>
|
21 |
<dd class="plan_features"> |
22 |
<div class="feature_desc"><span class="highlight">2</span> Domains</div> |
23 |
</dd>
|
24 |
<dd class="plan_features"> |
25 |
<div class="feature_desc"><span class="highlight">3</span> Databases</div> |
26 |
</dd>
|
27 |
<dd class="plan_features"> |
28 |
<div class="feature_desc"><span class="highlight">1</span> FTP Account</div> |
29 |
</dd>
|
30 |
<dd class="plan_features"> |
31 |
<div class="feature_desc"><span class="highlight">25</span> Email Accounts</div> |
32 |
</dd>
|
33 |
<dd class="plan_buy"> |
34 |
<a href='' class='buy' >Buy Now</a> |
35 |
</dd>
|
36 |
</dl>
|
37 |
</div>
|
38 |
<div id='pricing_plan2' class="four columns"> |
39 |
<dl class='plans'> |
40 |
<dt class="plan_title"> |
41 |
Standard |
42 |
</dt>
|
43 |
<dd class="plan_price"> |
44 |
$19.99 |
45 |
</dd>
|
46 |
</dl>
|
47 |
<dl class='plan' id="two"> |
48 |
<dt class='plan_more'>View<a href="#two" class="more_icon"></a><a href="#" |
49 |
class="less_icon"></a></dt> |
50 |
<dd class="plan_features"> |
51 |
<div class="feature_desc"><span class="highlight">10GB</span> Storage</div> |
52 |
</dd>
|
53 |
<dd class="plan_features"> |
54 |
<div class="feature_desc"><span class="highlight">50GB</span> Bandwidth</div> |
55 |
</dd>
|
56 |
<dd class="plan_features"> |
57 |
<div class="feature_desc"><span class="highlight">10</span> Domains</div> |
58 |
</dd>
|
59 |
<dd class="plan_features"> |
60 |
<div class="feature_desc"><span class="highlight">25</span> Databases</div> |
61 |
</dd>
|
62 |
<dd class="plan_features"> |
63 |
<div class="feature_desc"><span class="highlight">10</span> FTP Account</div> |
64 |
</dd>
|
65 |
<dd class="plan_features"> |
66 |
<div class="feature_desc"><span class="highlight">100</span> Email Accounts</div> |
67 |
</dd>
|
68 |
<dd class="plan_buy"> |
69 |
<a href='' class="buy">Buy Now</a> |
70 |
</dd>
|
71 |
</dl>
|
72 |
</div>
|
73 |
</div>
|
Sekarang Kita harus memilih method untuk memasukkan kode pricing table ke WordPress. Kita dapat menyertakan kode ini dalam shortcode atau membuat page template tertentu. Saya akan menggunakan shortcode. Anda juga dapat mencoba metode menggunakan page template.
Membuat Shortocde Pricing Table
Shortcode adalah cara mudah menambahkan fungsi yang dinamis ke dalam postingan dan halaman Anda. Saya akan menggunakan shortcode yang bernama wppt_show_pricing untuk memasukkan pricing table. Kita harus melewati ID dari pricing table sebagai parameter shortcode menggunakan kata kunci pricing_id. Mari terapkan pada shortcode.
1 |
|
2 |
add_shortcode( "wppt_show_pricing", "wppt_generate_pricing_table" ); |
3 |
|
4 |
function wppt_generate_pricing_table( $atts ) { |
5 |
global $post; |
6 |
|
7 |
extract( shortcode_atts( array( |
8 |
'pricing_id' => '0', |
9 |
), $atts ) ); |
10 |
// Remaining Code
|
11 |
}
|
Saya telah mendefinisikan shortcode yang bernama wppt_show_pricing menggunakan fungsi add_shortcode WordPress. Atribut shortcode akan secara otomatis dilewatkan menuju fungsi. Pertama, Kita mengekstrak array shortcode dan ID dari pricing table yang akan ditetapkan menuju variabel pricing_id. Bagian dari kode akan dijelaskan pada bagian berikut.
1 |
|
2 |
global $post; |
3 |
$table_packages = get_post_meta( $pricing_id, "_table_packages", true ); |
4 |
$table_packages = ( $table_packages == '' ) ? array() : json_decode( $table_packages ); |
Lalu Kita mendapatkan ID dari pricing table yang ditetapkan untuk shortcode dan semua paket yang disertakan dalam pricing table dari table post_meta.
1 |
|
2 |
$html = '<div class="container">'; |
3 |
|
4 |
$pricing_index = 0; |
5 |
foreach ( $table_packages as $table_package ) { |
6 |
$pricing_index++; |
7 |
|
8 |
$plan_title = get_the_title( $table_package ); |
9 |
|
10 |
$package_price = get_post_meta( $table_package, "_package_price", true ); |
11 |
$package_buy_link = get_post_meta( $table_package, "_package_buy_link", true ); |
12 |
|
13 |
$package_features = get_post_meta( $table_package, "_package_features", true ); |
14 |
$package_features = ( $package_features == '' ) ? array() : json_decode( $package_features ); |
15 |
|
16 |
$html .= '<div id="pricing_plan' . $pricing_index . '" class="four columns">'; |
17 |
$html .= '<dl class="plans"> |
18 |
<dd class="plan_title">
|
19 |
' . $plan_title . ' |
20 |
</dd>
|
21 |
<dd class="plan_price">
|
22 |
$' . $package_price . ' |
23 |
</dd>
|
24 |
</dl>'; |
25 |
$html .= '<dl class="plan" id="pr' . $pricing_index . '"> |
26 |
<dt class="plan_more">View<a href="#pr' . $pricing_index . '" class="more_icon"></a> |
27 |
<a href="#" class="less_icon"></a>
|
28 |
</dt>'; |
29 |
|
30 |
foreach ( $package_features as $package_feature ) { |
31 |
|
32 |
$html .= '<dd class="plan_features"> |
33 |
<div class="feature_desc"><span class="highlight">' . $package_feature . '</span></div> |
34 |
</dd>'; |
35 |
}
|
36 |
|
37 |
$html .= '<dd class="plan_buy"> |
38 |
<a href="' . $package_price . '" class="buy" >Buy Now</a> |
39 |
</dd>
|
40 |
</dl>'; |
41 |
$html .= '</div>'; |
42 |
}
|
43 |
$html .= '</div>'; |
44 |
|
45 |
echo $html; |
Saat membahas setiap paket yang dibuat pada kode sebelumnya, Kita mendapatkan fitur dan detail paket tersebut menggunakan fungsi get_post_meta. Lalu Kita menyertakan kode HTML dengan data yang dinamis untuk menampilkan pricing table. Terakhir Kita mengembalikan kode HTML yang dihasilkan untuk ditampilkan ke dalam halaman yang berisi shortcode.
Sekarang Kita telah menyelesaikan proses pengembangan dari plugin pricing table untuk WordPress. Anda bisa memeriksa source code tersebut dan menambahkan fungsionalitas khusus Anda sendiri sesuai dengan preferensi Anda.
Panduan untuk Menggunakan Pricing Table
Siapapun yang memiliki pengetahuan dasar bekerja dengan WordPress akan dapat membuat pricing table menggunakan plugin ini. Saya akan memberikan langkah-langkah untuk memudahkan pengguna meskipun tanpa memiliki banyak pengalaman menggunakan WordPress.
- Klik bagian Pricing Table pada menu sebelah kiri dan buat paket dengan nama, harga, tautan pembelian, dan fitur. Lanjutkan proses ini sampai Anda membuat semua paket Anda.
- Kemudian klik pada Pricing Table di menu sebelah kiri untuk menambahkan pricing table yang baru. Daftar dari pricing table akan ditampilkan di bagian bawah layar. Pilih paket yang Anda inginkan dan simpan pricing table dengan nama tertentu.
- Buka daftar pricing table dan temukan ID pricing table dari tabel yang baru dibuat.
- Kemudian klik pada bagian Halaman untuk menambahkan halaman baru. Masukkan shortcode
[wppt_show_pricing pricing_id='ID' /]di dalam page editor. Ganti ID dengan ID pricing table yang sebenarnya. - Simpan halaman dan lihat melalui browser. Anda akan mendapatkan pricing table yang responsif.
Saya harap Anda belajar cara menggunakan Custom Post Type dan Meta Box untuk membuat pricing table. Beri tahu kami jika Anda memiliki cara sendiri untuk membuat plugin tersebut melalui kolom komentar di bawah ini.
