إنشاء أداة بحث باستخدام واجهة برمجة تطبيقات WordPress REST

يدرك مطورو WordPress أن واجهة برمجة تطبيقات REST كانت موجودة منذ بعض الوقت ، ولكن اعتبارًا من أواخر العام الماضي تم دمجها في النواة ، مما يعني أنه يمكن الآن الاستفادة منها في الأدوات والمكونات الإضافية.

في هذه المقالة سنقوم ببناء أداة بحث بسيطة مع اختلاف. باستخدام WordPress REST API ، ستقوم هذه الأداة بالبحث في موقع ويب WordPress خارجي وعرض النتائج في الأداة.

يستمر هذا المنشور من آخر مشاركة لي حول ما تحتاج إلى معرفته حول WordPress REST API

إنشاء قاعدة معرفية - الطريق السهل!

قم ببناء قاعدة معرفية قابلة للبحث وساعد عملائك على مساعدة أنفسهم.

احصل على البرنامج المساعد

بناء البرنامج المساعد القطعة

كما المقالة السابقة ، تم افتراض بعض المعرفة الأساسية لبناء المكونات الإضافية والأدوات. إذا لم تكن متأكدًا ، فهناك بعض القراءة المقترحة لك في نهاية هذه المقالة.

دعنا نلقي نظرة على المكون الإضافي الحالي الذي أنشأناه في المقالة الأخيرة. يجب أن تبدو التعليمات البرمجية الخاصة بك كما يلي:

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

بشكل أساسي ، أنشأنا مكونًا إضافيًا جديدًا. في هذا المكون الإضافي ، أنشأنا أداة تعرض قائمة بالمنشورات المخصصة من قاعدة المعرفة البطولية من موقع ويب مختلف.

ما سنفعله الآن هو تعديل هذا لإنشاء ميزة بحث أيضًا.

الخطوة الأولى: تعديل الاستعلام الأساسي للحصول على نتائج مختلفة

ستتذكر في المقالة الأخيرة أننا ناقشنا كيفية الحصول على قائمة بالمشاركات ثم كيفية تغيير المعلمات حتى نتمكن من الحصول على نوع المنشور المخصص لقاعدة المعرفة بدلاً من ذلك.

حسنًا ، قد لا يكون من المدهش أن نتعلم ، هذا ليس كل ما يمكننا فعله باستخدام طريقة GET. باستخدام معلمات التصفية ، يمكننا بالفعل استخدام أي من الوسائط المتاحة عند استدعاء WP_Query. على سبيل المثال ، إذا أردنا تغيير عدد المشاركات المعروضة ، يمكنك إضافة:

/posts?filter[posts_per_page]=5

جعل الاتصال عن بعد مثل هذا:

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

أو ، إذا أردنا عرض منشور عشوائي واحد فقط ، فيمكننا إضافة:

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

وهذا هو نفسه بالنسبة لمعامل البحث. في استعلام WP القياسي ، ستبدو المعلمة كما يلي:

's' => 'keyword'

لذلك ، يجب أن تبدو مكالمتنا عن بُعد كما يلي:

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

الأمر بسيط للغاية بمجرد أن تفكر في تحويل المعلمات من WP_Query إلى سلسلة عنوان URL الخاصة بواجهة برمجة التطبيقات.

للحصول على تفاصيل كاملة حول المعلمات المتوفرة ، راجع دليل مجلد WP_Query.

لا نريد في الواقع البحث في المنشورات القياسية ، ولكننا نريد البحث في نوع المنشور المخصص لقاعدة المعرفة. ومع ذلك ، كما رأينا في المقالة السابقة ، من السهل القيام بذلك لأننا جعلنا نوع المنشور المخصص متاحًا للجمهور من خلال إضافة عامل تصفية. لذلك ، كل ما نحتاج إلى القيام به هنا هو الاستعلام عن نوع المنشور المخصص لقاعدة المعرفة عن طريق التبديل / المنشورات / مع اسم نوع المنشور المخصص. في هذه الحالة / ht_kb / . ستبدو المكالمة البعيدة الآن كما يلي:

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

الخطوة 2: مربع البحث ونتائج التخصيص

لذلك نظرنا الآن في تعديل الاستعلام للتصفية حسب مصطلح بحث معين ، والخطوة التالية هي إنشاء طريقة للحصول على مصطلح البحث هذا.

أولاً ، نحتاج إلى إضافة مربع بحث إلى المكون الإضافي. نظرًا لأن هذا لن يكون سوى نموذج بحث بسيط ، يمكننا استخدام وظيفة get_search_form () التي تم إعدادها بالفعل بواسطة WordPress بدلاً من إنشاء نموذج بحث منفصل.

في ملف البرنامج المساعد ، ابحث عن السطر الذي يحتوي على التعليق // Main Widget Content هنا داخل وظيفة عنصر واجهة المستخدم وأضف get_search_form () ؛ وتحرير أسفله مباشرة بحيث يبدو كالتالي:

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

الآن عندما نعرض الأداة على الصفحة ، سترى نموذج البحث القياسي وقائمة المنشورات من قاعدة المعارف تحتها.

نعلم من استخدام get_search_form () ؛ أنه عندما نبحث عن شيء ما ، تظهر معلمة البحث في عنوان url مثل هذا:

/?s=test

كون المعلمة $ _GET و "test" هو مصطلح البحث الخاص بك. لذلك ، كل ما تبقى هو الحصول على مصطلح البحث من عنوان URL واستخدامه في الاستجابة كما يلي:

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

ما يفعله هذا الرمز هو التحقق لمعرفة ما إذا كان قد تم تعيين $ _GET ['s'] وليس فارغًا. إذا كان قد تم تضمينه في إجابتك. إذا لم يكن الأمر كذلك ، فلن يتم إجراء بحث وتريد إظهار جميع منشورات قاعدة المعارف كالمعتاد.

يمكن العثور على مزيد من التفاصيل حول وظيفة get_search_form () هنا.

هذا هو المكان الذي نتوقع أن تنتهي فيه هذه المقالة ، أليس كذلك؟ بعد كل شيء ، قمنا بإعداد نموذج بحث يقوم بالاستعلام عن المنشورات على موقع ويب خارجي باستخدام WordPress REST API ثم إرجاع هذه النتائج بناءً على معلمة البحث. ومع ذلك…

الخطوة الثالثة: تعديل النتائج المعروضة

إذا اختبرنا أداة البحث الجديدة ، يمكننا أن نرى الأداة تعمل كما هو متوقع ، ومع ذلك ، فإنها ستعرض أيضًا نتائج من موقع الويب الحالي في محتوى الصفحة الرئيسية.

هذا بسبب نظام قوالب WordPress. يستخدم WordPress سلسلة الاستعلام لتحديد القالب أو مجموعة القوالب المراد استخدامها. نظرًا لأنه عند تقديم نموذج البحث ، فإنه يضيف المعلمات إلى عنوان URL ، فإنه يطلب من WordPress إجراء بحث وإعادة التوجيه إلى صفحة نتائج البحث. والذي في موضوع TwentySixteen هو search.php.

لمزيد من المعلومات ، راجع وثائق التسلسل الهرمي للقالب.

يعد هذا أمرًا رائعًا إذا أردنا إجراء البحث على موقع ويب محلي وموقع ويب خارجي باستخدام واجهة برمجة التطبيقات في نفس الوقت لأنه يتم عرض نتائج كليهما. ومع ذلك ، في هذه الحالة لا نريد أن نفعل ذلك. نريد فقط عرض النتائج التي تم إرجاعها باستخدام واجهة برمجة التطبيقات في الأداة. يجب أن تظل الصفحة الرئيسية غير متأثرة.

هنالك عدة طرق لعمل هذا. في هذا المثال ، سننظر في كيفية تعديل get_search_form () ؛ تعمل على عدم استخدام 's' كمعلمة بحث لها. وبدلاً من ذلك سيتم تغييره إلى "أ" لتجاوز المشكلة.

الخطوة الأولى هي تعديل النموذج فعليًا عن طريق إنشاء وظيفة جديدة.

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 );

الوظيفة نفسها بسيطة جدًا ، وهي في الأساس نموذج جديد لاستخدامه بدلاً من النموذج الافتراضي. إذا نظرنا إلى موضوع TwentySixteen المرجعي وفحصنا نموذج البحث الحالي ، نلاحظ أن الاختلاف الوحيد في الكود هو اسم إدخال البحث. في الأصل كان 'name = s' والآن هو 'name = a'. يؤدي هذا إلى إزالة معلمة 's من عنوان URL.

ملاحظة: باستخدام هذا الأسلوب ، نقوم بتعديل نموذج البحث الرئيسي للبحث باستخدام واجهة برمجة التطبيقات بدلاً من البحث في موقع الويب المضيف. لذلك ، من المهم مراعاة أنه إذا استخدمنا نموذج البحث الرئيسي في أي مكان آخر على موقع الويب ، فلن نعيد التوجيه إلى نتائج البحث من موقع الويب المضيف. من أجل إجراء عمليتي بحث مختلفتين ، سيكون الحل الأسهل هو إضافة رمز هذا النموذج الجديد مباشرةً إلى عنصر واجهة المستخدم بدلاً من تعديل get_search_form () ؛

الخطوة الأخيرة هي إضافة عامل التصفية. هذا يخبر WordPress باستبدال النموذج الحالي بهذا النموذج بدلاً من ذلك. يمكننا لصق كتلة التعليمات البرمجية بأكملها في ملف البرنامج المساعد بعد فئة عنصر واجهة المستخدم. يمكن تضمين هذا في وظائف theme.php بدلاً من ذلك ، ولكن بإدراجها في المكون الإضافي ، فهذا يعني أن التغيير في النموذج يتم فقط في حالة تنشيط المكون الإضافي.

الآن بعد أن قمنا بتغيير اسم الإدخال إلى "a" ، علينا تغيير ما سيكون عليه معامل البحث الفعلي أيضًا. ستظهر المعلمة الآن في عنوان url على النحو التالي: /؟ a = test ، بدلاً من /؟ s = test وبالتالي إزالة جزء سلسلة الاستعلام التي تخبر WordPress أنه يجب إعادة التوجيه إلى قالب نتائج البحث.

حتى تتمكن من البحث باستخدام المعلمة الجديدة ، قم بتحديث الكود المكتوب مسبقًا للمكالمة عن بُعد لاستخدام المعلمة "a" بدلاً من "s".

يجب أن يبدو الآن كما يلي:

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

لاحظ أنه بالرغم من تغيير معامل البحث في $ _GET ، فإن هذا لا يغير عامل التصفية في الاستعلام الفعلي. هذا لأن استعلام WP القياسي للبحث لا يزال هو.

الآن عندما نختبر الأداة ، يجب أن نكون قادرين على البحث في مقالات قاعدة المعارف على موقع الويب الخارجي الخاص بك وإرجاع النتائج دون إعادة توجيهك إلى صفحة نتائج البحث.

يبدو الكود الكامل للأداة كما يلي:

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

يعد هذا تنفيذًا بسيطًا جدًا لعنصر واجهة مستخدم بحث مخصص باستخدام واجهة برمجة تطبيقات REST. كما هو موضح سابقًا ، يمكننا إضافة عوامل تصفية إضافية إلى الاستعلام للحد من عدد نتائج البحث أو ترتيب عرضها. يمكنك اختيار عرض معلومات إضافية في الأداة مثل مصطلح البحث وعدد النتائج ، أو ، إذا كنت تعرف jQuery / Javascript ، فيمكنك المضي قدمًا في هذا الأمر وإضافة تأثير AJAX لطيف بحيث يتم إرجاع النتائج دون الحاجة إلى تحديث الصفحة.

قراءة متعمقة:

• واجهة برمجة تطبيقات Widgets (مخطوطة WordPress)
• مقدمة لإنشاء أول عنصر واجهة مستخدم WordPress (Tutsplus)
• كيفية إنشاء عنصر واجهة مستخدم WordPress مخصص (WP Beginner)
• كيفية إنشاء عنصر إضافي لبرنامج WordPress (WP Explorer)