Apa yang perlu Anda ketahui tentang REST API WordPress baru

Diterbitkan: 2018-01-25

WordPress 4.4 menjadikan WordPress REST API sebagai bagian dari intinya.

Dalam artikel ini saya akan menjelaskan mengapa pengembangan ini sangat besar untuk WordPress (dan pembuat tema dan plugin pada umumnya) dan menunjukkan kepada Anda bagaimana menggunakannya untuk menyederhanakan proses komunikasi antara WordPress dan aplikasi lain.

WordPress Rest API juga memungkinkan situs web WordPress untuk menyingkirkan antarmuka admin WordPress default untuk menawarkan pengalaman admin atau konten yang sepenuhnya dipersonalisasi menggunakan tumpukan teknologi yang beragam.

Calypso – aplikasi desktop WordPress – adalah contoh yang bagus untuk ini. Calypso dibangun menggunakan aplikasi Javascript tunggal yang menggunakan REST API WordPress untuk berkomunikasi antara WordPress.com dan intinya.

Karena REST API WordPress sekarang merupakan bagian integral dari inti WordPress, penting bagi pengembang untuk memahami cara kerjanya dan kemungkinan baru yang terbuka untuk berinteraksi dengan WordPress.

Jadi dalam ikhtisar dan tutorial WordPress REST API ini, saya akan memandu Anda melalui dasar-dasar WP REST API serta menunjukkan kepada Anda bagaimana Anda dapat menggunakannya untuk membuat widget (plugin) yang menampilkan posting terbaru dari Heroic Knowledge Jenis pos kustom dasar.

Primer di WordPress REST API

Sebelum kita melihat cara menggunakan REST API WordPress untuk membuat widget (plugin), mari kita pahami dulu istilahnya sedikit lebih baik.

Jadi apa singkatan dari API?

API adalah singkatan dari Application Program Interface .

Dalam istilah yang paling sederhana, ini adalah sarana komunikasi antara dua aplikasi yang berbeda.

Contoh umum dari aksi API adalah Tweet Deck yang ditampilkan banyak situs web. Menampilkan Tweet Deck ini menjadi mungkin melalui API di mana situs web hanya mengambil data dari Twitter dan menampilkannya.

Bagaimana dengan REST?

REST adalah singkatan dari Representational State Transfer .

REST adalah gaya arsitektur bangunan API berbasis HTML. Arsitektur RESTful menggunakan permintaan HTTP untuk memposting, membaca, memperbarui, dan menghapus data antara dua sumber.

Jadi ketika kita berbicara tentang REST API, pada dasarnya yang kita maksud adalah API yang menggunakan metode HTML untuk berkomunikasi.

Dan bagaimana dengan JSON?

WordPress REST API memiliki format yang sama dengan WordPress JSON REST API.

JSON (atau Javascript Object Notation ) adalah format pertukaran data berbasis teks minimal yang digunakan untuk bertukar data secara mulus antara platform yang berbeda (bahkan jika platform menggunakan bahasa yang berbeda).

JSON adalah alternatif ringan untuk solusi berbasis XML, menjadikannya sempurna untuk aplikasi seluler dengan batasan bandwidth.

Mengapa menggunakan WordPress REST API

Anda mungkin bertanya-tanya tentang apa yang istimewa dari REST API WordPress dan mengapa Anda harus mempedulikannya.

Yah … WordPress REST API memberdayakan Anda untuk berbuat lebih banyak dengan WordPress.

Sebagai contoh:

  1. Tulis aplikasi dalam bahasa apa pun yang Anda ketahui dan buat itu berinteraksi dengan situs WordPress (satu-satunya 2 persyaratan adalah bahwa bahasa aplikasi Anda harus menggunakan metode HTML dan dapat menginterpretasikan JSON)
  2. Rancang pengalaman admin dan konten yang sepenuhnya dipersonalisasi
  3. Kembangkan Aplikasi Satu Halaman di atas WordPress

Dan banyak lagi.

Hampir tidak mungkin untuk membuat daftar semua aplikasi/antarmuka/pengalaman potensial yang dapat dibuat dengan REST API. Buku pegangan REST API WordPress dengan benar mengatakan:

Imajinasi kami adalah satu-satunya batasan untuk apa yang dapat dilakukan dengan REST API WordPress. Intinya adalah, jika Anda menginginkan cara yang terstruktur, dapat diperluas, dan sederhana untuk mendapatkan data masuk dan keluar dari WordPress melalui HTTP, Anda mungkin ingin menggunakan REST API.

Tapi saya tahu implementasi selalu jauh lebih sulit daripada memahami teori.

Jadi mari kita lihat tutorial singkat tentang bagaimana Anda dapat menggunakan REST API WordPress untuk membuat widget (plugin) kustom.

Tutorial singkat tentang cara menggunakan WordPress REST API

Jika Anda memiliki salah satu produk basis pengetahuan kami, seperti tema pusat bantuan KnowAll kami atau tema Anda sendiri dengan plugin Basis Pengetahuan Heroic, Anda akan memiliki situs dengan basis pengetahuan artikel dukungan. Menggunakan produk ini tidak perlu mengikuti prinsip-prinsip tutorial ini, namun, perhatikan bahwa Anda harus menyesuaikan kode apa pun dengan pengaturan Anda sendiri.

Jadi, siap dengan pengaturan lokal Anda?

Besar!

Sekarang yang akan kita lakukan adalah membuat situs web lain di server yang berbeda.

Jadi mengapa kami membuat situs web kedua ini?

Kami melakukannya karena kami ingin menerapkan API REST WordPress untuk berkomunikasi dengan situs web kedua ini, dan seperti yang Anda ketahui sekarang, API REST WordPress adalah tentang membuat percakapan terjadi.

Jadi kita akan menggunakan REST API WordPress untuk membuat kedua situs web saling berbicara dan bertukar data.

Dan tujuan akhir dari tutorial ini adalah untuk:

Pilih artikel basis pengetahuan terbaru yang diterbitkan dari situs web pusat bantuan dan tampilkan dalam widget di bilah sisi situs web baru.

Demi artikel ini, situs web pusat bantuan yang memiliki semua artikel basis pengetahuan akan disebut sebagai situs web ' lokal ' dan situs web baru tempat Anda akan menampilkan widget adalah situs web ' eksternal '.

Pada titik ini, saya berasumsi bahwa Anda memiliki 1) situs web pusat bantuan 'lokal' Anda, dan 2) situs web 'eksternal' baru yang disiapkan di server yang berbeda.

Dan di akhir tutorial, kita akan berhasil menampilkan daftar artikel basis pengetahuan dari situs web 'lokal' di situs web 'eksternal' yang baru (melalui REST API WordPress) menggunakan widget (plugin) khusus.

Dengan itu, kami siap untuk memulai:

Langkah #1: Mulailah dengan menyalin kode boilerplate berikut ke file .php baru dan simpan di folder plugin situs web 'eksternal' Anda.

Lihat kode lengkap untuk tutorial WordPress REST API ini di sini. 

/**
* 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' ); } );

Kode ini membuat widget yang sangat sederhana yang akan menampilkan judul yang Anda pilih.

Dengan menambahkan kode di bagian atas template dan menyimpannya ke direktori plugins, kita telah membuatnya sebagai plugin (bukan menambahkan kode ke file fungsi tema).

Ini hal kecil tetapi membuat widget sebagai plugin dalam gaya ini memungkinkan Anda untuk dapat mengaktifkan dan menonaktifkannya dan juga menggunakannya kembali di tema lain nanti jika Anda mau, tanpa perlu menyalin dan menempel.

Setelah diinstal dan diaktifkan, Anda akan memiliki widget baru di area Widget di dasbor:

widget-admin

Langkah #2: Gunakan REST API WordPress untuk mengambil artikel basis pengetahuan terbaru

Karena Anda tidak ingin mengedit atau menghapus apa pun dalam pengembangan ini, kami hanya akan fokus pada fungsi widget(). Di sinilah konten dari widget dikeluarkan ke situs web 'eksternal'.

Untuk 'mendapatkan' daftar artikel basis pengetahuan terbaru dari situs web 'lokal', ada beberapa hal yang perlu kita ketahui:

  • Jalur dasar API (API apa yang digunakan di situs Anda, dalam kasus kami WP API terbaru)
  • Rute yang digunakan (WP API memiliki beberapa rute untuk kumpulan data yang berbeda dan operasi yang tersedia)
  • Titik akhir yang digunakan (Tindakan apa yang akan dilakukan)
  • Parameter (Data yang terkait dengan permintaan)

Jalur dasar API selalu:

 json/wp/v2/

Dan jalur API absolut menjadi:

 http://example.com/json/wp/v2/

(http://example.com adalah situs web 'lokal' Anda)

Rute yang digunakan adalah:

 json/wp/v2/posts/

Tentang titik akhir: Rute ini sebenarnya memiliki tiga titik akhir yang dibedakan oleh metode HTTP. Titik akhir ini adalah:

  • DAPATKAN
  • MELETAKKAN
  • MENGHAPUS

Dalam contoh ini, Anda akan memilih titik akhir GET sehingga Anda dapat mengambil (atau 'mendapatkan') daftar posting terbaru dari situs web 'lokal'.

Jadi baris kode pertama Anda yang berinteraksi dengan REST API adalah:

$response = wp_remote_get( 'http://products-website.com/wp-json/wp/v2/posts/' );

Selanjutnya, Anda perlu memeriksa apakah ada kesalahan yang dikembalikan:

if( is_wp_error( $response ) ) {
    return;
}

Yang dilakukan kode ini hanyalah memeriksa respons apa yang dikembalikan. Jika respons mengembalikan beberapa posting, maka tidak ada kesalahan.

Bagian terakhir dari bagian ini adalah:


$posts = json_decode( wp_remote_retrieve_body( $response ) );

if( empty( $posts ) ) {
   return;
}

$response adalah string yang disandikan JSON dengan data Postingan. Jadi semua yang Anda lakukan di sini adalah decoding sehingga dapat dikeluarkan.

Sekali lagi, tambahkan tanda centang tambahan untuk memastikan $posts tidak kosong. Jika ya, maka tidak ada yang dikembalikan.

Jadi, pada titik ini, Anda telah berhasil berkomunikasi dengan situs web 'lokal' Anda menggunakan API. Implementasi ini memberi Anda daftar posting untuk ditampilkan.

Tahap selanjutnya adalah benar-benar menampilkannya di widget Anda di situs web 'eksternal'.

Langkah #3: Tampilkan postingan terbaru di website 'eksternal' dengan menambahkan kode berikut:

		if( !empty( $posts ) ) {
		
			echo '<ul>';
			foreach( $posts as $post ) {
				echo '<li><a href="' . $post->link. '">' . $post->title->rendered . '</a></li>';
			}
			echo '</ul>';
			
		}

Kode untuk widget Anda yang sudah selesai akan terlihat seperti ini: 

/**
* 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' ); } );

Setelah langkah di atas selesai, saat Anda mencoba melihat situs web 'eksternal' Anda, Anda akan melihat daftar posting Anda dari situs web 'lokal' di sidebar Anda.

widget

Ini semua bagus.

Namun, jika Anda ingat, ini bukan postingan yang tepat karena kami hanya ingin menampilkan artikel terbaru dari Basis Pengetahuan.

Implementasi kami saat ini tidak melakukan ini karena plugin Basis Pengetahuan menggunakan jenis posting kustomnya sendiri. Dan karena jenis kiriman khusus tidak tersedia secara publik untuk API secara default, ini menyebabkan masalah. (Catatan: Versi terbaru dari basis pengetahuan tersedia untuk umum untuk REST API dan bagian berikutnya dapat dilewati)

Menggunakan REST API dengan jenis posting khusus

Untuk membuat jenis posting khusus tersedia untuk REST API, Anda memerlukan sedikit solusi.

Jadi, saat membuat jenis kiriman khusus, Anda perlu menambahkan parameter baru ke daftar argumen jenis kiriman agar tersedia untuk umum:


'show_in_rest' = true,
'rest_base' = 'ht_kb',
'rest_controller_class' = 'WP_REST_Posts_Controller',

Tetapi karena dalam kasus kami, kami menggunakan plugin untuk memberi daya pada jenis posting artikel basis pengetahuan, kami tidak akan langsung mengedit file plugin untuk membuat jenis posting khusus tersedia untuk REST API. (Mengedit file plugin secara langsung bukanlah ide yang bagus!)

Apa yang akan kita lakukan adalah menambahkan kode berikut ke file functions.php di tema anak untuk situs web 'lokal':

Versi terbaru dari KnowAll dan Heroic Knowledge Base telah mengaktifkan dukungan REST, ini dapat dinonaktifkan dengan filter ht_kb_show_in_rest , tetapi Anda dapat memodifikasi kode di bawah ini untuk jenis posting kustom Anda sendiri. 
/**
* 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';
    }
}

Sekarang, jenis posting khusus 'ht_kb' tersedia untuk umum ke WP REST API.

Setelah membuat jenis posting khusus tersedia untuk API REST WordPress, sekarang kita perlu memperbaiki widget kita untuk menampilkan posting dengan jenis posting itu. Untuk itu, kita akan kembali ke kode $response dari Langkah #2 dan memperbaruinya ke:

$response = wp_remote_get( 'http://example.com/wp-json/wp/v2/ht_kb/' );

Kami pada dasarnya mengubah /posts/ menjadi /ht_kb/ di rute API karena 'ht_kb' adalah nama jenis posting kustom plugin.

Setelah Anda memperbarui widget dan melihat pratinjau situs web 'eksternal', Anda sekarang akan melihat artikel terbaru dari Basis Pengetahuan.

widget-kb-konten

Pikiran terakhir

Seperti yang telah kita lihat, dengan menggunakan beberapa cuplikan sederhana PHP dan HTML, Anda dapat membuat fungsi, widget, dan plugin baru.

Anda dapat mengubah plugin yang baru saja kita buat untuk membuat kotak pencarian yang menggunakan WP REST API untuk mencari artikel Basis Pengetahuan dan mengembalikan hasilnya di widget.

Atau, Anda dapat menggunakan autentikasi untuk mengontrol siapa yang melihat hasilnya (berguna jika Anda telah membuat konten yang dibatasi).

Ada begitu banyak yang bisa Anda coba! Cukup lakukan dasar-dasarnya dengan benar, dan Anda akan siap.

Bacaan lebih lanjut

Ada banyak konten usang di sekitar API REST WordPress, jadi pastikan Anda baru saja membaca hal-hal yang diperbarui. Saya telah menautkan ke beberapa sumber yang berguna di seluruh pos, tetapi saya juga mencantumkan beberapa di sini.

Jadi, bacalah dan temukan berbagai cara kreatif yang dapat Anda gunakan untuk menggunakan REST API.

  • Buku Pegangan REST API
  • FAQ REST API
  • WP REST API: ini tujuan kita?

Jika Anda memiliki pertanyaan tentang penerapan REST API WordPress, tulis di komentar di bawah!