Membuat widget pencarian menggunakan WordPress REST API

Diterbitkan: 2016-03-28

Pengembang WordPress akan menyadari bahwa REST API telah ada selama beberapa waktu, tetapi pada akhir tahun lalu itu diintegrasikan ke dalam inti, yang berarti sekarang dapat dimanfaatkan dalam widget dan plugin.

Pada artikel ini kita akan membuat widget pencarian sederhana dengan perbedaan. Menggunakan REST API WordPress, widget ini akan mencari situs web WordPress eksternal dan menampilkan hasilnya di widget.

Posting ini melanjutkan dari yang terakhir tentang Apa yang perlu Anda ketahui tentang WordPress REST API

Buat Basis Pengetahuan - Cara Mudah!

Bangun basis pengetahuan yang dapat dicari dan bantu pelanggan Anda membantu diri mereka sendiri.

Dapatkan Plugin

Membangun plugin widget

Seperti artikel sebelumnya, beberapa pengetahuan dasar tentang membangun plugin dan widget diasumsikan. Jika Anda tidak yakin, ada beberapa bacaan yang disarankan untuk Anda di akhir artikel ini.

Mari kita lihat plugin yang ada yang kita buat di artikel terakhir. Kode Anda akan terlihat seperti ini:


/**
* Plugin Name: KB - REST API Widget
* Author: Kirsty Burgoine
*/

class REST_API_Widget extends WP_Widget {

/**
* Sets up the widgets name etc
*/
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 ) {
    // outputs the content of the widget

    $response = wp_remote_get( 'http://website-with-api.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 Here
    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
}
}//end class
add_action( 'widgets_init', function(){
register_widget( 'REST_API_Widget' );
});

Pada dasarnya, kami membuat plugin baru. Di plugin itu kami membuat widget yang menampilkan daftar posting khusus dari basis Pengetahuan Heroik dari situs web yang berbeda.

Apa yang akan kita lakukan sekarang adalah mengubah ini untuk membuat fitur pencarian juga.

Langkah 1: Mengubah kueri dasar untuk mendapatkan hasil yang berbeda

Pada artikel terakhir Anda akan ingat bahwa kami membahas cara MENDAPATKAN daftar posting dan kemudian bagaimana mengubah parameter sehingga kami bisa mendapatkan jenis posting kustom basis pengetahuan sebagai gantinya.

Yah, mungkin tidak terlalu mengejutkan untuk dipelajari, tidak hanya itu yang bisa kita lakukan dengan metode GET. Dengan menggunakan parameter pemfilteran, kita sebenarnya dapat menggunakan argumen apa pun yang tersedia saat memanggil WP_Query. Misalnya, jika kami ingin mengubah jumlah posting yang ditampilkan, Anda dapat menambahkan:


/posts?filter[posts_per_page]=5

Membuat panggilan jarak jauh seperti ini:


$response = wp_remote_get( 'http://website-with -api.com.com/wp-json/wp/v2/posts?filter[posts_per_page]=5' );

Atau, jika kita hanya ingin menampilkan satu posting acak, kita dapat menambahkan:


/posts?filter[orderby]=rand&filter[posts_per_page]=1

Dan ini sama untuk parameter pencarian. Dalam WP Query standar, parameternya akan terlihat seperti ini:


's' => 'keyword'

Oleh karena itu, panggilan jarak jauh kami perlu terlihat seperti ini:


$response = wp_remote_get( 'http://website-with -api.com.com/wp-json/wp/v2/posts?filter[s]=keyword');

Ini cukup sederhana setelah Anda mulai mengubah parameter dari WP_Query menjadi string url API.

Untuk detail lengkap tentang parameter apa yang tersedia, lihat panduan codex WP_Query.

Kami sebenarnya tidak ingin mencari posting standar, kami ingin mencari jenis posting kustom basis pengetahuan. Namun, seperti yang kita lihat di artikel sebelumnya, ini mudah dilakukan karena kami membuat jenis kiriman khusus kami tersedia untuk umum dengan menambahkan filter. Oleh karena itu, yang perlu kita lakukan di sini adalah menanyakan jenis posting kustom basis pengetahuan dengan menukar /posts/ dengan nama jenis posting kustom. Dalam hal ini /ht_kb/ . Panggilan jarak jauh sekarang akan terlihat seperti ini:


$response = wp_remote_get( 'http://website-with-api.com/wp-json/wp/v2/ht_kb?filter[s]=keyword' );

Langkah 2: Kotak pencarian dan hasil penyesuaian

Jadi sekarang kita telah melihat perubahan kueri untuk memfilter menurut istilah penelusuran tertentu, langkah selanjutnya adalah membuat cara untuk mendapatkan istilah penelusuran tersebut.

Pertama, kita perlu menambahkan kotak pencarian ke plugin. Karena ini hanya akan menjadi formulir pencarian sederhana, kita dapat menggunakan fungsi get_search_form() yang sudah disiapkan oleh WordPress alih-alih membuat formulir pencarian terpisah.

Di file plugin, cari baris dengan komentar // Konten Widget Utama Di sini di dalam fungsi widget Anda dan tambahkan get_search_form(); dan edit langsung di bawahnya sehingga terlihat seperti ini:


// Main Widget Content Here
get_search_form();

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

Sekarang ketika kami melihat widget di halaman Anda akan melihat formulir pencarian standar dan daftar posting dari Basis Pengetahuan di bawahnya.

widget pencarian standar

Kita tahu dari menggunakan get_search_form(); bahwa ketika kita mencari sesuatu, parameter pencarian muncul di url seperti ini:


/?s=test

's' menjadi parameter $_GET dan 'test' menjadi istilah pencarian Anda. Oleh karena itu, yang tersisa hanyalah mengambil istilah pencarian dari URL dan menggunakannya dalam respons seperti:


if ( isset ( $_GET['s'] ) && !empty( $_GET['s'] ) ) {
    $response = wp_remote_get( 'http://website-with-api.com/wp-json/wp/v2/ht_kb?filter[s]='.$_GET['s'] );
}
else {
    $response = wp_remote_get( 'http://website-with-api.com/wp-json/wp/v2/ht_kb/' );
}

Apa yang dilakukan kode ini adalah memeriksa apakah $_GET['s'] telah disetel dan tidak kosong. Jika ada, maka Anda memasukkannya ke dalam tanggapan Anda. Jika tidak, maka pencarian tidak dilakukan dan Anda ingin menampilkan semua posting basis pengetahuan seperti biasa.

Detail lebih lanjut tentang fungsi get_search_form() dapat ditemukan di sini.

Di sinilah kita berharap artikel ini berakhir bukan? Setelah semua, kami telah menyiapkan formulir pencarian yang menanyakan posting di situs web eksternal menggunakan WordPress REST API dan kemudian mengembalikan hasil tersebut berdasarkan parameter pencarian. Namun…

Langkah 3: Mengubah hasil yang ditampilkan

Jika kami menguji widget pencarian baru, kami dapat melihat widget berfungsi seperti yang diharapkan, namun, itu juga akan mengembalikan hasil dari situs web saat ini di konten halaman utama.

hasil-templat-pencarian
Widget pencarian yang menampilkan hasil untuk 'test' dan halaman yang dialihkan ke template hasil pencarian

Ini karena sistem templating WordPress. WordPress menggunakan string kueri untuk menentukan templat atau kumpulan templat mana yang akan digunakan. Karena, ketika formulir pencarian dikirimkan, ia menambahkan parameter 's' ke URL, itu memberitahu WordPress untuk melakukan pencarian dan mengarahkan ulang ke halaman hasil pencarian. Yang mana, dalam tema TwentySixteen adalah search.php.

Untuk informasi selengkapnya, lihat dokumentasi hierarki template.

Itu bagus jika kita ingin melakukan pencarian di situs web lokal dan situs web eksternal menggunakan API secara bersamaan karena hasil keduanya ditampilkan. Namun, dalam hal ini kami tidak ingin melakukan itu. Kami hanya ingin hasil yang dikembalikan menggunakan API untuk ditampilkan di widget. Halaman utama harus tetap tidak terpengaruh.

Ada beberapa cara untuk melakukan ini. Untuk contoh ini, kita akan melihat bagaimana mengubah get_search_form(); berfungsi untuk tidak lagi menggunakan 's' sebagai parameter pencariannya. Sebaliknya itu akan diubah menjadi 'a' untuk melewati masalah.

Langkah pertama adalah benar-benar memodifikasi formulir dengan membuat fungsi baru.


function api_search_form( $form ) {

 $form = '<form role="search" method="get" class="search-form" action="' . home_url( '/' ) . '">
         <label>
             <span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
             <input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search …', 'placeholder' ) .'" value="' . get_search_query() . '" name="a" title="' . esc_attr_x( 'Search for:', 'label' ) .'" />
         </label>
         <button type="submit" class="search-submit"><span class="screen-reader-text">Search</span></button>
         </form>';

 return $form;
}

 add_filter( 'get_search_form', 'api_search_form', 100 );

Fungsinya sendiri cukup sederhana, pada dasarnya ini adalah formulir baru untuk digunakan daripada formulir default. Jika kami melihat referensi tema TwentySixteen dan memeriksa formulir pencarian yang ada, kami mencatat bahwa satu-satunya perbedaan dalam kode adalah nama input pencarian. Awalnya adalah 'name=s' dan sekarang menjadi 'name=a'. Ini menghapus parameter 's' dari URL.

Catatan: Dengan pendekatan ini, kami memodifikasi formulir pencarian utama untuk mencari menggunakan API daripada mencari situs web host. Oleh karena itu, penting untuk mempertimbangkan bahwa jika kita menggunakan formulir pencarian utama di tempat lain di situs web, itu tidak akan lagi mengarahkan ke hasil pencarian dari situs web host. Untuk memiliki dua pencarian yang berbeda maka solusi termudah adalah dengan menambahkan kode untuk formulir baru ini langsung ke dalam widget alih-alih mengubah get_search_form();

Langkah terakhir adalah menambahkan filter. Ini memberitahu WordPress untuk mengganti formulir yang ada dengan yang ini. Kita dapat menempelkan seluruh blok kode ke dalam file plugin setelah kelas widget. Ini dapat dimasukkan ke functions.php tema sebagai gantinya, tetapi dengan memasukkannya ke dalam plugin, itu berarti bahwa perubahan pada formulir hanya dilakukan jika plugin diaktifkan.

Sekarang kita telah mengubah nama input menjadi 'a', kita juga harus mengubah parameter pencarian yang sebenarnya. Parameter sekarang akan muncul di url sebagai: /?a=test, alih-alih /?s=test dan karena itu menghapus bagian dari string kueri yang memberi tahu WordPress bahwa ini harus dialihkan ke template hasil pencarian.

Agar Anda dapat mencari menggunakan parameter baru, perbarui kode yang ditulis sebelumnya untuk panggilan jarak jauh untuk menggunakan parameter 'a' alih-alih 's'.

Sekarang seharusnya terlihat seperti ini:


if ( isset ( $_GET['a'] ) && !empty( $_GET['a'] ) ) {
    $response = wp_remote_get( 'http://website-with-api.com/wp-json/wp/v2/ht_kb?filter[s]='.$_GET['a'] );
} else {
    $response = wp_remote_get( 'http://website-with-api.com/wp-json/wp/v2/ht_kb/' );
}

Perhatikan bahwa meskipun parameter pencarian di $_GET telah berubah, ini tidak mengubah filter dalam kueri yang sebenarnya. Ini karena WP Query standar untuk pencarian masih 's'.

Sekarang ketika kami menguji widget, kami seharusnya dapat mencari artikel Basis Pengetahuan di situs web eksternal Anda dan mengembalikan hasilnya tanpa diarahkan ke halaman hasil pencarian.

Cari widget yang menampilkan hasil untuk 'test' tanpa pengalihan halaman
Cari widget yang menampilkan hasil untuk 'test' tanpa pengalihan halaman

Kode lengkap untuk widget terlihat seperti ini:


/**
 * Plugin Name: KB - REST API Widget
 * Author: Kirsty Burgoine
*/

class REST_API_Widget extends WP_Widget {

 /**
 * Sets up the widgets name etc
 */
 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 ) {
     // outputs the content of the widget
     if ( isset ( $_GET['a'] ) && !empty( $_GET['a'] ) ) {
         $response = wp_remote_get( 'http://website-with-api.com/wp-json/wp/v2/ht_kb?filter[s]='.$_GET['a'] );
     } else {
         $response = wp_remote_get( 'http://website-with-api.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 Here
     get_search_form();

     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
     }
}

function api_search_form( $form ) {

 $form = '<form role="search" method="get" class="search-form" action="' . home_url( '/' ) . '">
         <label>
             <span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
             <input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search …', 'placeholder' ) .'" value="' . get_search_query() . '" name="a" title="' . esc_attr_x( 'Search                 for:', 'label' ) .'" />
         </label>
         <button type="submit" class="search-submit"><span class="screen-reader-text">Search</span></button>
         </form>';

 return $form;
}
add_filter( 'get_search_form', 'api_search_form', 100 );


add_action( 'widgets_init', function(){
 register_widget( 'REST_API_Widget' );
});

Ini adalah implementasi yang sangat sederhana dari widget pencarian kustom menggunakan REST API. Seperti yang diilustrasikan sebelumnya, kita dapat menambahkan filter tambahan ke kueri untuk membatasi jumlah hasil pencarian atau urutan tampilannya. Anda dapat memilih untuk menampilkan informasi tambahan di widget seperti istilah pencarian dan jumlah hasil, atau, jika Anda tahu jQuery/Javascript, Anda dapat mengambil ini lebih jauh dan menambahkan efek AJAX yang bagus sehingga hasilnya dikembalikan tanpa perlu me-refresh halaman.

Bacaan lebih lanjut:

  • Widget API (WordPress Codex)
  • Pengantar untuk membuat widget WordPress pertama Anda (Tutsplus)
  • Cara membuat widget WordPress khusus (WP Pemula)
  • Cara membuat plugin widget untuk WordPress (WP Explorer)