Bằng cách WP_AJAX_ hook tạo danh sách thả xuống trạng thái của một quốc gia đã chọn trong Biểu mẫu tìm kiếm danh sách Agentpress của chủ đề Agentpress PRO.
Bước 1: Điều hướng Danh sách> Đăng ký phân loại và tạo phân loại quốc gia. Bây giờ bạn sẽ nhận được liên kết menu mới “Quốc gia” trong menu Danh sách ở phía bên trái. Một lần nữa điều hướng Danh sách> Quốc gia và thêm tên Quốc gia lần lượt.
Bước 2: Điều hướng Danh sách> Đăng ký Phân loại và tạo một đơn vị phân loại mới khác “Bang”.
Bước 3: Tạo mối quan hệ giữa nhà nước và quốc gia. Thêm hộp tổ hợp trường mới “Quốc gia” tại trang Điều khoản của tiểu bang. Vì vậy, khi bạn thêm một Bang, bạn có thể gán tên Quốc gia của Bang đó. Bằng cách này, bạn có thể tạo mối quan hệ giữa Nhà nước và Quốc gia.
Thêm mã sau vào tệp functions.php của bạn và nó sẽ tạo ra một trường tùy chỉnh ở biểu mẫu Trạng thái:
// Add a field in the form
add_action( 'state_add_form_fields', 'add_country_fields' );
add_action( 'state_edit_form_fields', 'edit_country_fields', 10, 2 );
add_action( 'created_term', 'save_country_name', 10, 3 );
add_action( 'edit_term', 'save_country_name', 10, 3 );
function add_country_fields(){
$countries = get_terms( 'country', 'hide_empty=0' );
if( $countries ):
?>
<div class="form-field">
<label for="country_id"><?php _e( 'Country', 'agentpress' ); ?></label>
<select id="country_id" name="country_id" class="postform">
<option value=""><?php _e( 'Select Country', 'agentpress' ); ?></option>
<?php
foreach( $countries as $c){
echo '<option value="' . $c->term_id . '">' . $c->name . '</option>' . "\n";
}
?>
</select>
</div>
<?php
endif;
}
function edit_country_fields( $term, $taxonomy ){
$country_name = get_post_meta( $term->term_id, 'country_id', true );
$countries = get_terms( 'country', 'hide_empty=0' );
if( $countries ):
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="country_id"><?php _e( 'Country', 'agentpress' ); ?></label></th>
<td><select id="country_id" name="country_id" class="postform">
<option value=""><?php _e( 'Select Country', 'agentpress' ); ?></option>
<?php
foreach( $countries as $c){
$selected = ( $country_name == $c->term_id) ? "selected" : '';
echo '<option value="' . $c->term_id . '" ' . $selected . '>' . $c->name . '</option>' . "\n";
}
?>
</select>
</td>
</tr>
<?php
endif;
}
function save_country_name( $term_id, $tt_id, $taxonomy ){
if( isset( $_POST['country_id'] ) )
update_post_meta( $term_id, 'country_id', $_POST['country_id'] );
}
Bây giờ, thêm cột “Quốc gia” trong phần Danh sách các tiểu bang
// Add columns
add_filter( 'manage_edit-state_columns', 'state_country_columns' );
add_filter( 'manage_state_custom_column', 'state_country_column', 10, 3 );
function state_country_columns( $columns ){
$new_columns = array();
$new_columns['cb'] = $columns['cb'];
$new_columns['name'] = $columns['name'];
$new_columns['country'] = __( 'Country', 'agentpress' );
unset( $columns['cb'] );
unset( $columns['name'] );
return array_merge( $new_columns, $columns );
}
function state_country_column( $columns, $column, $id ) {
if ( $column == 'country' ) {
$country = get_term( get_post_meta( $id, 'country_id', true ), 'country' );
if( $country )
$columns .= $country->name;
else
$columns .= "---";
}
return $columns;
}
Bước 4: Tạo tệp JS “search-list.js” và nó sẽ xử lý phần AJAX. Khi bạn chọn tên quốc gia từ danh sách thả xuống, nó sẽ gọi một hành động “find_states” và tạo danh sách thả xuống mới dựa trên tên quốc gia đã chọn. Đặt tệp js vào thư mục “js” . Đây là mã của tệp js:
jQuery(document).ready( function($){
$('#country').on('change', function(){
var data = {
action: 'find_states',
country_name: $('#country').val()
}
$.post(ajax_object.ajax_url, data, function( response ){
$('#state').html( response );
});
});
});
Bây giờ đăng ký tệp JS. Tìm kiếm hàm này “agentpress_google_fonts” trên functions.php và thêm thay thế mã hiện tại bằng mã sau:
function agentpress_google_fonts() {
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato:300,700|Roboto:700,300,400', array(), CHILD_THEME_VERSION );
wp_enqueue_script( 'search-listing', get_bloginfo( 'stylesheet_directory' ) . '/js/search-listing.js', array('jquery'), CHILD_THEME_VERSION );
wp_localize_script( 'search-listing', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
Viết một Hook của hành động “find_states”. Một lần nữa mã này sẽ thêm vào tệp functions.php:
function find_states(){
global $wpdb;
if ( isset($_POST['country_name']) ) {
$get_country_details = get_term_by('slug', $_POST['country_name'], 'country');
$res = $wpdb->get_results( $wpdb->prepare( "SELECT t.name, t.slug FROM $wpdb->terms t
JOIN $wpdb->term_taxonomy tt on tt.term_id = t.term_id
JOIN $wpdb->postmeta pm on pm.post_id = t.term_id
WHERE 1
AND tt.taxonomy = 'state'
AND pm.meta_key = 'country_id'
AND pm.meta_value='%s'
ORDER BY t.name ASC", $get_country_details->term_id
), OBJECT );
if( $res ){
$html = 'Select State' . "\n";
foreach( $res as $state ){
$html .= '' . $state->name . '' . "\n";
}
echo $html;
}
}
wp_die();
}
add_action( 'wp_ajax_find_states', 'find_states' );
add_action( 'wp_ajax_nopriv_find_states', 'find_states' );
** Để có kiến thức tốt hơn, bạn có thể xem CODEX của hook WP_AJAX_.
Bước 5: Điều hướng đến Giao diện> Tiện ích và thêm tiện ích Tìm kiếm Danh sách Agentpress tại Trang chủ - Khu vực tiện ích nổi bật . Thiết lập tiện ích và lưu cài đặt.
Bây giờ bạn làm mới trang chủ. Lần đầu tiên nếu bạn thấy danh sách thả xuống của tiểu bang, bạn sẽ nhận được tất cả danh sách tiểu bang. Bây giờ chọn tên quốc gia từ dưới lên và bạn sẽ chỉ nhận được các tiểu bang của quốc gia đó. tức là tôi được chọn “Hoa Kỳ” từ danh sách thả xuống và chỉ có các tiểu bang của Hoa Kỳ.