สิ่งที่คุณต้องรู้เกี่ยวกับ WordPress REST API . ใหม่
เผยแพร่แล้ว: 2018-01-25WordPress 4.4 ทำให้ WordPress REST API เป็นส่วนหนึ่งของแกนหลัก
ในบทความนี้ ผมจะอธิบายว่าทำไมการพัฒนานี้จึงเป็นเรื่องใหญ่สำหรับ WordPress (และผู้เขียนธีมและปลั๊กอินโดยทั่วไป) และแสดงวิธีใช้งานเพื่อทำให้กระบวนการสื่อสารระหว่าง WordPress และแอปอื่นๆ ง่ายขึ้น
WordPress Rest API ยังช่วยให้เว็บไซต์ WordPress สามารถกำจัดอินเทอร์เฟซผู้ดูแลระบบ WordPress เริ่มต้นเพื่อมอบประสบการณ์การดูแลระบบหรือเนื้อหาที่เป็นส่วนตัวอย่างสมบูรณ์โดยใช้กองเทคโนโลยีที่หลากหลาย
Calypso – แอพเดสก์ท็อปของ WordPress – เป็นตัวอย่างที่สวยงามของสิ่งนี้ Calypso สร้างขึ้นโดยใช้แอปพลิเคชัน Javascript เดียวที่ใช้ WordPress REST API เพื่อสื่อสารระหว่าง WordPress.com และแกนกลาง
เนื่องจากตอนนี้ WordPress REST API เป็นส่วนสำคัญของแกนหลักของ WordPress นักพัฒนาจึงควรได้รับการดูแลอย่างดีเกี่ยวกับวิธีการทำงานและความเป็นไปได้ใหม่ๆ ที่เปิดให้มีปฏิสัมพันธ์กับ WordPress
ดังนั้นในภาพรวมและบทช่วยสอนของ WordPress REST API ฉันจะแนะนำคุณเกี่ยวกับพื้นฐานของ WP REST API และแสดงให้คุณเห็นว่าคุณสามารถใช้เพื่อสร้างวิดเจ็ต (ปลั๊กอิน) ที่แสดงโพสต์ล่าสุดจาก Heroic Knowledge ได้อย่างไร ประเภทโพสต์ที่กำหนดเองพื้นฐาน
ไพรเมอร์บน WordPress REST API
ก่อนที่เราจะมาดูวิธีใช้ WordPress REST API เพื่อสร้างวิดเจ็ต (ปลั๊กอิน) เรามาทำความเข้าใจคำศัพท์กันก่อนดีกว่า
API ย่อมาจากอะไร?
API ย่อมาจาก Application Program Interface
ในแง่ที่ง่ายที่สุด มันคือวิธีการสื่อสารระหว่างสองแอปพลิเคชันที่แตกต่างกัน
ตัวอย่างทั่วไปของการใช้งาน API คือ Tweet Deck ที่แสดงเว็บไซต์จำนวนมาก การแสดง Tweet Deck นี้สามารถทำได้ผ่าน API ซึ่งเว็บไซต์เพียงแค่ดึงข้อมูลจาก Twitter และแสดง
แล้ว REST ล่ะ?
REST ย่อมาจาก REpresentational State Transfer
REST คือ รูปแบบสถาปัตยกรรม ที่ใช้ HTML ของการสร้าง API สถาปัตยกรรม RESTful ใช้คำขอ HTTP เพื่อโพสต์ อ่าน อัปเดต และลบข้อมูลระหว่างสองแหล่งที่มา
ดังนั้นเมื่อเราพูดถึง REST API เราหมายถึง API ที่ใช้เมธอด HTML ในการสื่อสารเป็นหลัก
แล้ว JSON ล่ะ?
WordPress REST API เป็นรูปแบบเดียวกับ WordPress JSON REST API
JSON (หรือ Javascript Object Notation ) เป็นรูปแบบการแลกเปลี่ยนข้อมูลแบบข้อความขั้นต่ำที่ใช้ในการแลกเปลี่ยนข้อมูลระหว่างแพลตฟอร์มต่างๆ อย่างราบรื่น (แม้ว่าแพลตฟอร์มจะใช้ภาษาต่างกันก็ตาม)
JSON เป็นทางเลือกที่มีน้ำหนักเบาสำหรับโซลูชันที่ใช้ XML ทำให้เหมาะสำหรับแอปบนอุปกรณ์เคลื่อนที่ที่มีข้อจำกัดด้านแบนด์วิดท์
ทำไมต้องใช้ WordPress REST API
คุณอาจสงสัยว่า WordPress REST API มีความพิเศษอย่างไร และเหตุใดคุณจึงควรใส่ใจ
… WordPress REST API ช่วยให้คุณทำอะไรกับ WordPress ได้มากขึ้น
ตัวอย่างเช่น:
- เขียนแอปพลิเคชันในภาษาใดก็ได้ที่คุณรู้จักและทำให้โต้ตอบกับไซต์ WordPress (ข้อกำหนดเพียง 2 ข้อเท่านั้นคือภาษาของแอปของคุณควรใช้วิธีการ HTML และสามารถตีความ JSON ได้)
- ออกแบบประสบการณ์ผู้ดูแลระบบและเนื้อหาที่เป็นส่วนตัวอย่างสมบูรณ์
- พัฒนาแอปพลิเคชั่นหน้าเดียวบน WordPress
และอีกมากมาย
แทบเป็นไปไม่ได้เลยที่จะแสดงรายการแอปพลิเคชัน/อินเทอร์เฟซ/ประสบการณ์ที่เป็นไปได้ทั้งหมดที่สามารถสร้างด้วย REST API คู่มือ REST API ของ WordPress พูดว่า:
จินตนาการของเราคือข้อจำกัดเพียงอย่างเดียวที่สามารถทำได้ด้วย WordPress REST API สิ่งสำคัญที่สุดคือ หากคุณต้องการวิธีที่มีโครงสร้าง ขยายได้ และง่ายในการรับข้อมูลเข้าและออกจาก WordPress ผ่าน HTTP คุณอาจต้องการใช้ REST API
แต่ฉันรู้ว่าการนำไปปฏิบัตินั้นยากกว่าการเข้าใจทฤษฎีเสมอ
มาดูบทแนะนำสั้นๆ เกี่ยวกับวิธีที่คุณสามารถใช้ WordPress REST API เพื่อสร้างวิดเจ็ตที่กำหนดเอง (ปลั๊กอิน)
บทแนะนำสั้นๆ เกี่ยวกับวิธีใช้ WordPress REST API
หากคุณมีหนึ่งในผลิตภัณฑ์ฐานความรู้ของเรา เช่น ธีมศูนย์ช่วยเหลือ KnowAll หรือธีมของคุณเองด้วยปลั๊กอิน Heroic Knowledge Base คุณจะมีไซต์ที่มีฐานความรู้ของบทความสนับสนุน การใช้ผลิตภัณฑ์เหล่านี้ไม่จำเป็นที่จะต้องปฏิบัติตามหลักการของบทช่วยสอนนี้ แต่ให้จำไว้ว่าคุณจะต้องปรับแต่งโค้ดให้เข้ากับการตั้งค่าของคุณเอง
พร้อม หรือยังกับ การตั้งค่าในพื้นที่ของคุณ
ยอดเยี่ยม!
ตอนนี้สิ่งที่เราจะทำคือสร้างเว็บไซต์อื่นบนเซิร์ฟเวอร์อื่น
เหตุใดเราจึงสร้างเว็บไซต์ที่สองนี้
เรากำลังทำเช่นนั้นเพราะเราต้องการใช้ WordPress REST API เพื่อสื่อสารกับเว็บไซต์ที่สองนี้ และอย่างที่คุณทราบแล้ว WordPress REST API นั้นเกี่ยวกับการทำให้การสนทนาเกิดขึ้น
ดังนั้น เราจะใช้ WordPress REST API เพื่อให้ทั้งสองเว็บไซต์คุยกันและแลกเปลี่ยนข้อมูลกัน
และเป้าหมายสุดท้ายของบทช่วยสอนคือ:
เลือกบทความฐานความรู้ที่เผยแพร่ล่าสุดจากเว็บไซต์ศูนย์ช่วยเหลือและแสดงในวิดเจ็ตในแถบด้านข้างของเว็บไซต์ใหม่
เพื่อประโยชน์ของบทความนี้ เว็บไซต์ศูนย์ช่วยเหลือที่มีบทความฐานความรู้ทั้งหมดจะเรียกว่าเว็บไซต์ ' ท้องถิ่น ' และเว็บไซต์ใหม่ที่คุณจะแสดงวิดเจ็ตจะเป็นเว็บไซต์ ' ภายนอก '
ณ จุดนี้ ฉันคิดว่าคุณมี 1) เว็บไซต์ศูนย์ช่วยเหลือ 'ในพื้นที่' และ 2) เว็บไซต์ 'ภายนอก' ใหม่ที่ติดตั้งบนเซิร์ฟเวอร์อื่น
และในตอนท้ายของบทช่วยสอน เราจะแสดงรายการบทความฐานความรู้ได้สำเร็จจากเว็บไซต์ 'ท้องถิ่น' บนเว็บไซต์ 'ภายนอก' ใหม่ (ผ่าน WordPress REST API) โดยใช้วิดเจ็ต (ปลั๊กอิน) แบบกำหนดเอง
เท่านี้เราก็พร้อมแล้วที่จะเริ่มต้น:
ขั้นตอนที่ #1: เริ่มต้นด้วยการคัดลอกโค้ดสำเร็จรูปต่อไปนี้ลงในไฟล์ .php ใหม่และบันทึกลงในโฟลเดอร์ปลั๊กอินของเว็บไซต์ "ภายนอก"
ดูโค้ดที่สมบูรณ์สำหรับบทช่วยสอน WordPress REST API ที่นี่
/**
* HeroThemes Example Widget
*/
class My_Widget extends WP_Widget {
//set up widget
public function __construct() {
$widget_ops = array(
'classname' => 'rest-api-test-widget',
'description' => 'This example provides a framework for how we will build our widget'
);
parent::__construct( 'my_widget', 'My Widget', $widget_ops );
}
/**
* Outputs the content of the widget
* @param array $args
* @param array $instance
*/
public function widget( $args, $instance ) {
//outputs the content of the widget
echo $args['before_widget'];
if( !empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'], $instance, $this->id_base ) . $args['after_title'];
}
// Main Widget Content Goes Here
echo $args['after_widget'];
}
/**
* Outputs the options form on admin
* @param array $instance The widget options
*/
public function form( $instance ) {
//outputs the options form on admin
$title = ( !empty( $instance['title'] ) ) ? $instance['title'] : ''; ?>
<label for="<?php echo $this->get_field_name( 'title' ); ?>">Title: </label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>"
name="<?php echo $this->get_field_name( 'title' ); ?>"
type="text" value="<?php echo esc_attr( $title ); ?>" />
<?php
}
}
add_action( 'widgets_init', function(){ register_widget( 'My_Widget' ); } ); รหัสนี้สร้างวิดเจ็ตที่เรียบง่ายซึ่งจะแสดงชื่อที่คุณเลือก
โดยการเพิ่มโค้ดที่ด้านบนของเทมเพลตและบันทึกลงในไดเร็กทอรีปลั๊กอิน เราได้สร้างโค้ดดังกล่าวเป็นปลั๊กอิน (แทนที่จะเพิ่มโค้ดลงในไฟล์ฟังก์ชันของธีม)
เป็นเรื่องเล็กน้อยแต่การสร้างวิดเจ็ตเป็นปลั๊กอินในสไตล์นี้ทำให้คุณสามารถเปิดและปิดและนำกลับมาใช้ใหม่ในธีมอื่นๆ ในภายหลังได้หากต้องการ โดยไม่ต้องคัดลอกและวาง
เมื่อติดตั้งและเปิดใช้งาน คุณจะมีวิดเจ็ตใหม่ในพื้นที่วิดเจ็ตของแดชบอร์ด:

ขั้นตอนที่ #2: ใช้ WordPress REST API เพื่อดึงบทความฐานความรู้ล่าสุด
เนื่องจากคุณไม่ต้องการแก้ไขหรือลบสิ่งใด ๆ ในการพัฒนานี้ เราจะเน้นที่ฟังก์ชัน widget() เท่านั้น นี่คือที่ที่เนื้อหาจากวิดเจ็ตถูกส่งออกไปยังเว็บไซต์ 'ภายนอก'
เพื่อ 'รับ' รายชื่อบทความฐานความรู้ล่าสุดจากเว็บไซต์ 'ท้องถิ่น' มีบางสิ่งที่เราต้องรู้:
- เส้นทางพื้นฐานของ API (API ใดที่จะใช้ในเว็บไซต์ของคุณ ในกรณีของเราคือ WP API ล่าสุด)
- เส้นทางที่ใช้ (WP API มีหลายเส้นทางสำหรับชุดข้อมูลและการดำเนินการที่แตกต่างกัน)
- จุดสิ้นสุดที่ใช้ (สิ่งที่จะดำเนินการ)
- พารามิเตอร์ (ข้อมูลที่เกี่ยวข้องกับคำขอ)
เส้นทางพื้นฐานของ API อยู่เสมอ:
json/wp/v2/
ดังนั้นเส้นทาง API แบบสัมบูรณ์จึงกลายเป็น:
http://example.com/json/wp/v2/
(http://example.com คือเว็บไซต์ 'ท้องถิ่น' ของคุณ)

เส้นทางที่ใช้คือ:
json/wp/v2/posts/
เกี่ยวกับปลายทาง: เส้นทางนี้มีจุดปลายสามจุดที่แตกต่างกันโดยวิธี HTTP จุดสิ้นสุดเหล่านี้คือ:
- รับ
- ใส่
- ลบ
ในตัวอย่างนี้ คุณจะต้องเลือกปลายทาง GET เพื่อให้คุณสามารถดึง (หรือ 'รับ') รายการโพสต์ล่าสุดจากเว็บไซต์ 'ในเครื่อง'
ดังนั้นโค้ดบรรทัดแรกของคุณที่โต้ตอบกับ REST API จะเป็น:
$response = wp_remote_get( 'http://products-website.com/wp-json/wp/v2/posts/' );
ถัดไป คุณต้องตรวจสอบว่ามีข้อผิดพลาดเกิดขึ้นหรือไม่:
if( is_wp_error( $response ) ) {
return;
}
โค้ดทั้งหมดนี้ทำขึ้นเพื่อตรวจสอบว่ามีการตอบกลับอะไรกลับมาบ้าง หากการตอบกลับส่งคืนบางโพสต์ แสดงว่าไม่มีข้อผิดพลาด
ส่วนสุดท้ายของส่วนนี้คือ:
$posts = json_decode( wp_remote_retrieve_body( $response ) );
if( empty( $posts ) ) {
return;
}
$response เป็นสตริงที่เข้ารหัส JSON พร้อมข้อมูลโพสต์ สิ่งที่คุณทำที่นี่คือการถอดรหัสเพื่อให้สามารถส่งออกได้
อีกครั้ง เพิ่มการตรวจสอบเพิ่มเติมเพื่อให้แน่ใจว่า $posts ไม่ว่างเปล่า หากเป็นเช่นนั้นจะไม่มีอะไรคืน
ดังนั้น ณ จุดนี้ คุณได้สื่อสารกับเว็บไซต์ 'ท้องถิ่น' ของคุณสำเร็จโดยใช้ API การใช้งานนี้ทำให้คุณมีรายการโพสต์ที่จะแสดง
ขั้นต่อไปคือการแสดงจริงในวิดเจ็ตของคุณบนเว็บไซต์ 'ภายนอก'
ขั้นตอนที่ #3: แสดงโพสต์ล่าสุดบนเว็บไซต์ 'ภายนอก' โดยเพิ่มรหัสต่อไปนี้:
if( !empty( $posts ) ) {
echo '<ul>';
foreach( $posts as $post ) {
echo '<li><a href="' . $post->link. '">' . $post->title->rendered . '</a></li>';
}
echo '</ul>';
}รหัสสำหรับวิดเจ็ตที่เสร็จสมบูรณ์ของคุณควรมีลักษณะดังนี้:
/**
* HeroThemes REST API Widget
*/
class REST_API_Widget extends WP_Widget {
//set up widget
public function __construct() {
$widget_ops = array( 'classname' => 'rest-api-widget',
'description' => 'A REST API widget that pulls posts from a different website'
);
parent::__construct( 'rest_api_widget', 'REST API Widget', $widget_ops );
}
/**
* Outputs the content of the widget
*
* @param array $args
* @param array $instance
*/
public function widget( $args, $instance ) {
//change this url to the WP-API endpoint for your site!
$response = wp_remote_get( 'https://example.com/wp-json/wp/v2/ht-kb/' );
if( is_wp_error( $response ) ) {
return;
}
$posts = json_decode( wp_remote_retrieve_body( $response ) );
if( empty( $posts ) ) {
return;
}
echo $args['before_widget'];
if( !empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'], $instance, $this->id_base ) . $args['after_title'];
}
//main widget content
if( !empty( $posts ) ) {
echo '<ul>';
foreach( $posts as $post ) {
echo '<li><a href="' . $post->link. '">' . $post->title->rendered . '</a></li>';
}
echo '</ul>';
}
echo $args['after_widget'];
}
/**
* Outputs the options form on admin
*
* @param array $instance The widget options
*/
public function form( $instance ) {
// outputs the options form on admin
$title = ( !empty( $instance['title'] ) ) ? $instance['title'] : '';
?>
<label for="<?php echo $this->get_field_name( 'title' ); ?>">Title: </label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>"
name="<?php echo $this->get_field_name( 'title' ); ?>"
type="text" value="<?php echo esc_attr( $title ); ?>" />
<?php
}
}
add_action( 'widgets_init', function(){ register_widget( 'REST_API_Widget' ); } ); เมื่อทำตามขั้นตอนข้างต้นแล้ว เมื่อคุณพยายามดูเว็บไซต์ 'ภายนอก' ของคุณ คุณจะเห็นรายการโพสต์ของคุณจากเว็บไซต์ 'ท้องถิ่น' ในแถบด้านข้างของคุณ

ทั้งหมดนี้ยอดเยี่ยมมาก
อย่างไรก็ตาม หากคุณจำได้ โพสต์เหล่านี้ไม่ใช่โพสต์ที่ถูกต้อง เนื่องจากเราต้องการแสดงบทความล่าสุดจากฐานความรู้เท่านั้น
การใช้งานปัจจุบันของเราไม่สามารถทำได้เนื่องจากปลั๊กอินฐานความรู้ใช้ประเภทโพสต์ที่กำหนดเอง และเนื่องจากประเภทโพสต์ที่กำหนดเองนั้นไม่เปิดเผยต่อสาธารณะสำหรับ API โดยค่าเริ่มต้น สิ่งนี้ทำให้เกิดปัญหา (หมายเหตุ: เวอร์ชันล่าสุดของฐานความรู้มีให้สาธารณะใน REST API และสามารถข้ามส่วนถัดไปได้)
การใช้ REST API กับประเภทโพสต์ที่กำหนดเอง
หากต้องการให้ประเภทโพสต์แบบกำหนดเองพร้อมใช้งานใน REST API คุณต้องมีวิธีแก้ปัญหาเล็กน้อย
ดังนั้น เมื่อสร้างประเภทโพสต์ที่กำหนดเอง คุณต้องเพิ่มพารามิเตอร์ใหม่ลงในการลงทะเบียน args ประเภทโพสต์เพื่อให้เผยแพร่ต่อสาธารณะ:
'show_in_rest' = true, 'rest_base' = 'ht_kb', 'rest_controller_class' = 'WP_REST_Posts_Controller',
แต่เนื่องจากในกรณีของเรา เราใช้ปลั๊กอินเพื่อขับเคลื่อนประเภทโพสต์ของบทความฐานข้อมูลองค์ความรู้ เราจะไม่แก้ไขไฟล์ปลั๊กอินโดยตรงเพื่อให้ประเภทโพสต์ที่กำหนดเองพร้อมใช้งานใน REST API (การแก้ไขไฟล์ปลั๊กอินโดยตรงไม่ใช่ความคิดที่ดี!)
สิ่งที่เราจะทำคือเพิ่มโค้ดต่อไปนี้ลงในไฟล์ functions.php ในธีมย่อยสำหรับเว็บไซต์ 'local':
/**
* Add rest support to an existing post type
*/
add_action( 'init', 'my_custom_post_type_rest_support', 25 );
function my_custom_post_type_rest_support() {
global $wp_post_types;
//set this to the name of your post type!
$post_type_name = 'ht_kb';
if( isset( $wp_post_types[ $post_type_name ] ) ) {
$wp_post_types[$post_type_name]->show_in_rest = true;
$wp_post_types[$post_type_name]->rest_base = $post_type_name;
$wp_post_types[$post_type_name]->rest_controller_class = 'WP_REST_Posts_Controller';
}
}ตอนนี้ ประเภทโพสต์ที่กำหนดเอง 'ht_kb' เปิดให้ใช้งานแบบสาธารณะใน WP REST API
หลังจากทำให้ประเภทโพสต์แบบกำหนดเองพร้อมใช้งานใน WordPress REST API ตอนนี้เราจำเป็นต้องแก้ไขวิดเจ็ตของเราเพื่อแสดงโพสต์ด้วยประเภทโพสต์นั้น สำหรับสิ่งนั้น เราจะกลับไปที่โค้ด $response จากขั้นตอนที่ #2 และอัปเดตเป็น:
$response = wp_remote_get( 'http://example.com/wp-json/wp/v2/ht_kb/' );
โดยทั่วไป เรากำลังเปลี่ยน /posts/ เป็น /ht_kb/ ในเส้นทาง API เนื่องจาก 'ht_kb' เป็นชื่อของประเภทโพสต์ที่กำหนดเองของปลั๊กอิน
เมื่อคุณอัปเดตวิดเจ็ตและดูตัวอย่างเว็บไซต์ "ภายนอก" แล้ว คุณควรเห็นบทความล่าสุดจากฐานความรู้

ความคิดสุดท้าย
อย่างที่เราได้เห็นกันแล้วว่า การใช้ตัวอย่างง่ายๆ สองสามอย่างของ PHP และ HTML คุณสามารถสร้างฟังก์ชัน วิดเจ็ต และปลั๊กอินใหม่ได้
คุณสามารถแก้ไขปลั๊กอินที่เราเพิ่งสร้างเพื่อสร้างช่องค้นหาที่ใช้ WP REST API เพื่อค้นหาบทความในฐานข้อมูลองค์ความรู้และส่งคืนผลลัพธ์ในวิดเจ็ต
หรือคุณสามารถใช้การรับรองความถูกต้องเพื่อควบคุมผู้ที่เห็นผลลัพธ์ (มีประโยชน์หากคุณสร้างเนื้อหาที่จำกัด)
มีอะไรมากมายให้คุณลอง! เพียงแค่ทำพื้นฐานให้ถูกต้อง คุณก็จะพร้อม
อ่านเพิ่มเติม
มีเนื้อหาที่ล้าสมัยจำนวนมากใน WordPress REST API ดังนั้นตรวจสอบให้แน่ใจว่าคุณเพิ่งอ่านเนื้อหาที่อัปเดต ฉันได้ลิงก์ไปยังแหล่งข้อมูลที่มีประโยชน์บางส่วนในโพสต์นี้แล้ว แต่ฉันกำลังแสดงข้อมูลบางส่วนไว้ที่นี่ด้วย
ดังนั้น โปรดอ่านข้อมูลเหล่านี้และค้นหาวิธีสร้างสรรค์ต่างๆ ที่คุณสามารถใช้ REST API
- คู่มือ REST API
- คำถามที่พบบ่อยเกี่ยวกับ REST API
- WP REST API: นี่คือที่ที่เรากำลังมุ่งหน้าไป?
หากคุณมีคำถามเกี่ยวกับการนำ WordPress REST API ไปใช้งาน โปรดแสดงความคิดเห็นด้านล่าง!
