Đặt api WordPress
|
Một trong nhiều cách sử dụng tuyệt vời cho WordPress REST API là cải thiện màn hình cài đặt plugin hoặc chủ đề của bạn. Sau khi bạn thêm các điểm cuối API REST tùy chỉnh, việc nhận các cài đặt đã lưu qua AJAX và lưu nó qua AJAX — IE mà không cần tải trang bổ sung — sẽ đơn giản hơn Show
Sử dụng WordPress REST API thay vì admin-ajax không chỉ hiệu quả hơn mà còn cho phép lõi WordPress thực hiện hầu hết các công việc nặng nhọc về mặt vệ sinh và xác thực Trong bài viết này, chúng tôi sẽ hướng dẫn từng bước để tạo trang biểu mẫu cài đặt và xử lý biểu mẫu đó bằng WordPress REST API Thêm trang cài đặt của bạnTrước khi chúng tôi có thể bắt đầu thiết kế trang cài đặt của mình, chúng tôi sẽ cần thêm một menu hoặc mục menu con vào bảng điều khiển WordPress mà bạn có thể đặt biểu mẫu cài đặt trên đó. Trên trang này, bạn sẽ cần tải các tệp CSS và JavaScript Đây là một lớp học khởi đầu cho điều đó assets_url = $assets_url;
add_action( 'admin_menu', array( $this, 'add_page' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'register_assets' ) );
}
/**
* Add CF Popup submenu page
*
* @since 0.0.3
*
* @uses "admin_menu"
*/
public function add_page(){
add_menu_page(
__( 'Apex Page', 'text-domain' ),
__( 'Apex Page', 'text-domain' ),
'manage_options',
$this->slug,
array( $this, 'render_admin' ) );
}
/**
* Register CSS and JS for page
*
* @uses "admin_enqueue_scripts" action
*/
public function register_assets()
{
wp_register_script( $this->slug, $this->assets_url . '/js/admin.js', array( 'jquery' ) );
wp_register_style( $this->slug, $this->assets_url . '/css/admin.css' );
wp_localize_script( $this->slug, 'APEX', array(
'strings' => array(
'saved' => __( 'Settings Saved', 'text-domain' ),
'error' => __( 'Error', 'text-domain' )
),
'api' => array(
'url' => esc_url_raw( rest_url( 'apex-api/v1/settings' ) ),
'nonce' => wp_create_nonce( 'wp_rest' )
)
) );
}
/**
* Enqueue CSS and JS for page
*/
public function enqueue_assets(){
if( ! wp_script_is( $this->slug, 'registered' ) ){
$this->register_assets();
}
wp_enqueue_script( $this->slug );
wp_enqueue_style( $this->slug );
}
/**
* Render plugin admin page
*/
public function render_admin(){
$this->enqueue_assets();
echo 'Put your form here!';
}
}Trong lớp này, tôi đang sử dụng add_menu_page để tạo menu cấp cao nhất, nhưng bạn có thể muốn thay thế add_sub_menu, tùy thuộc vào nhu cầu của bạn. Có hai điều quan trọng khác cần lưu ý Đầu tiên là cách chúng tôi đang sử dụng wp_localize_script(). Hàm này cung cấp cho bạn cách tạo biến JavaScript phạm vi toàn cầu bằng PHP, bất cứ khi nào tập lệnh được chỉ định trong đối số đầu tiên của nó được tải. Điều này ban đầu được thiết kế để cung cấp các chuỗi đã dịch - được bản địa hóa - cho trình duyệt. Đó là một phần trong cách chúng tôi sử dụng nó — để cung cấp các thông báo lỗi và thành công có thể dịch được. Nhưng nó cũng có thể được sử dụng để chuyển các giá trị động, chẳng hạn như URL cho trang web hiện tại, trong trường hợp này là điểm cuối API REST và nonce. Chúng tôi sẽ cần tất cả những thứ đó trong JavaScript của mình, nhưng nó sẽ khác nhau đối với mọi trang web, vì vậy chúng tôi phải sử dụng PHP để tạo nó một cách nhanh chóng Ngoài ra, lưu ý rằng URL gốc cho tập lệnh được chuyển vào dưới dạng phụ thuộc vào lớp. Tôi muốn làm điều này vì URL đó có khả năng được sử dụng ở những nơi khác trong plugin hoặc chủ đề và tôi muốn một nơi duy nhất để thay đổi hoặc lọc nó cho toàn bộ plugin Chúng tôi sẽ cần chỉ định URL đó khi chúng tôi khởi tạo lớp. Một nơi tốt để làm điều đó là trong tệp plugin gốc, vì vậy plugin_dir_url() sẽ tạo đúng URL. Hãy xem tệp plugin chính sẽ thiết lập điều này
Tôi đảm bảo rằng mỗi trường có một ID. Điều này sẽ cho phép tôi nhắm mục tiêu từng mục tiêu với jQuery. val() để lấy giá trị của nó. Điều này cũng quan trọng để giữ ngữ nghĩa HTML của chúng ta, vì nhãn trường phải có thuộc tính for tương ứng với ID trường. Tôi cũng đã cung cấp cho biểu mẫu một ID và thêm một phần tử trống có ID là “phản hồi” để chúng tôi có thể tự động đặt các thông báo lỗi hoặc đã lưu ở đó Một lần nữa, biểu mẫu của bạn có thể sẽ phức tạp hơn nhiều, nhưng hãy bắt đầu đơn giản Thêm một tuyến API RESTTrước khi chúng tôi có thể viết bất kỳ JavaScript nào để gửi dữ liệu đến máy chủ thông qua AJAX, chúng tôi cần một tuyến API REST cho nó. Tôi đã viết rất nhiều về điều này, nhưng đáng để thử qua một lộ trình tùy chỉnh rất đơn giản với điểm cuối GET và POST Tách logic kinh doanhTôi thực sự tin rằng các lớp cho các tuyến API REST chỉ nên quan tâm đến các yêu cầu xử lý, chứ không phải logic nghiệp vụ cần thiết cho các yêu cầu đó. Trong trường hợp này, theo “logic nghiệp vụ”, ý tôi là đọc và viết các cài đặt thực tế. Vì vậy, trước tiên, hãy tạo một lớp có thể xử lý điều đó Lớp này sẽ là một trình bao bọc đơn giản xung quanh get_option() và update_option() với một số xác thực cơ bản. Lớp này có một phương thức get_settings() nhận giá trị đã lưu và sau đó sử dụng wp_parse_args() để điền vào bất kỳ chỉ mục nào còn thiếu của mảng đã lưu mà chúng tôi mong muốn nó có. Nó cũng có phương thức save_settings() để đảm bảo rằng chỉ các khóa trong danh sách trắng của mảng được lưu mới nằm trong mảng cuối cùng được lưu 'lumber',
'amount' => 42
);
/**
* Get saved settings
*
* @return array
*/
public static function get_settings(){
$saved = get_option( self::$option_key, array() );
if( ! is_array( $saved ) || ! empty( $saved )){
return self::$defaults;
}
return wp_parse_args( $saved, self::$defaults );
}
/**
* Save settings
*
* Array keys must be whitelisted (IE must be keys of self::$defaults
*
* @param array $settings
*/
public static function save_settings( array $settings ){
//remove any non-allowed indexes before save
foreach ( $settings as $i => $setting ){
if( ! array_key_exists( $setting, self::$defaults ) ){
unset( $settings[ $i ] );
}
}
update_option( self::$option_key, $settings );
}
}Lộ trình API RESTBây giờ chúng ta có một cách để đọc và ghi các cài đặt mà chúng ta có thể xử lý bằng bất kỳ phương tiện nào, hãy tạo một tuyến API REST hoạt động như một giao diện RESTful cho nó. Tuyến đường này sẽ có các điểm cuối GET và POST Nếu bạn chưa bao giờ tạo điểm cuối API REST tùy chỉnh, tôi khuyên bạn nên đọc tài liệu. Tôi cũng có một danh sách các liên kết được sắp xếp, bao gồm các bài viết về Mô-men xoắn và các cuộc nói chuyện trên TV WordPress về chủ đề này Đây là lớp lộ trình API REST 'POST',
'callback' => array( $this, 'update_settings' ),
'args' => array(
'industry' => array(
'type' => 'string',
'required' => false,
'sanitize_callback' => 'sanitize_text_field'
),
'amount' => array(
'type' => 'integer',
'required' => false,
'sanitize_callback' => 'absint'
)
),
'permissions_callback' => array( $this, 'permissions' )
)
);
register_rest_route( 'apex-api/v1', '/settings',
array(
'methods' => 'GET',
'callback' => array( $this, 'get_settings' ),
'args' => array(
),
'permissions_callback' => array( $this, 'permissions' )
)
);
}
/**
* Check request permissions
*
* @return bool
*/
public function permissions(){
return current_user_can( 'manage_options' );
}
/**
* Update settings
*
* @param WP_REST_Request $request
*/
public function update_settings( WP_REST_Request $request ){
$settings = array(
'industry' => $request->get_param( 'industry' ),
'amount' => $request->get_param( 'amount' )
);
Apex_Settings::save_settings( $settings );
return rest_ensure_response( Apex_Settings::get_settings())->set_status( 201 );
}
/**
* Get settings via API
*
* @param WP_REST_Request $request
*/
public function get_settings( WP_REST_Request $request ){
return rest_ensure_response( Apex_Settings::get_settings());
}
}Hãy xem, các chức năng gọi lại khá đơn giản, vì chúng chỉ bao bọc lớp cài đặt mà tôi đã tạo trong phần trước. Điều quan trọng là phải hiểu rằng theo thiết kế, lớp cài đặt đó không có quyền kiểm tra hoặc vệ sinh. Nhưng kiểm tra quyền và vệ sinh là rất quan trọng Các điểm cuối API REST này cung cấp rằng. Phương thức POST chỉ định đối số 'sanitize_callback' cho từng trường. Bằng cách đó, tôi có thể tin tưởng rằng dữ liệu được an toàn trước khi chuyển dữ liệu vào. Ngoài ra, cả hai tuyến đều sử dụng “permissions_callback” để chỉ có thể truy cập các tuyến này thông qua những tuyến có khả năng “manage_options”. Bỏ qua một trong hai bước này sẽ rất nguy hiểm Bây giờ chúng ta chỉ cần khởi tạo lớp này, tại hành động “rest_api_init” để tồn tại các điểm cuối. Đây lại là tệp plugin chính, được sửa đổi để làm điều đó
|
