ما تحتاج لمعرفته حول واجهة برمجة تطبيقات WordPress REST الجديدة

جعل WordPress 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

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

إذن ما الذي ترمز إليه API؟

API لتقف على واجهة برنامج التطبيق .

بعبارات أبسط ، إنها وسيلة اتصال بين تطبيقين مختلفين.

من الأمثلة الشائعة لواجهة برمجة التطبيقات قيد التشغيل مجموعة التغريدات التي تعرضها الكثير من مواقع الويب. يصبح عرض مجموعة التغريدات هذه ممكنًا عبر واجهة برمجة التطبيقات حيث يسحب موقع الويب البيانات من Twitter ويعرضها.

ماذا عن REST؟

REST هي اختصار لـ REpresentational State Transfer .

REST هو أسلوب معماري قائم على HTML لبناء واجهات برمجة التطبيقات. تستخدم بنية RESTful طلبات HTTP لنشر وقراءة وتحديث وحذف البيانات بين مصدرين.

لذلك عندما نتحدث عن واجهة برمجة تطبيقات REST ، فإننا نعني بشكل أساسي واجهة برمجة تطبيقات تستخدم أساليب HTML للتواصل.

وماذا عن JSON؟

واجهة برمجة تطبيقات WordPress REST هي نفس تنسيق واجهة برمجة تطبيقات WordPress JSON REST.

JSON (أو Javascript Object Notation ) هو تنسيق تبادل بيانات نصي بسيط يستخدم لتبادل البيانات بسلاسة بين الأنظمة الأساسية المختلفة (حتى إذا كانت الأنظمة الأساسية تستخدم لغات مختلفة).

JSON هو بديل خفيف الوزن للحلول المستندة إلى XML ، مما يجعله مثاليًا لتطبيقات الأجهزة المحمولة ذات قيود النطاق الترددي.

لماذا استخدام WordPress REST API

قد تتساءل عما هو استثنائي للغاية حول WordPress REST API ولماذا يجب أن تهتم به.

حسنًا ... تتيح لك واجهة برمجة تطبيقات WordPress REST فعل المزيد باستخدام WordPress.

فمثلا:

1. اكتب التطبيقات بأي لغة تعرفها واجعلها تتفاعل مع موقع WordPress (المتطلبان الوحيدان هما أن لغة تطبيقك يجب أن تستخدم أساليب HTML وأن تكون قادرة على تفسير JSON)
2. صمم تجارب إدارة ومحتوى مخصصة بالكامل
3. قم بتطوير تطبيقات صفحة واحدة أعلى WordPress

وأكثر بكثير.

يكاد يكون من المستحيل سرد جميع التطبيقات / الواجهات / التجارب المحتملة التي يمكن إنشاؤها باستخدام واجهة برمجة تطبيقات REST. يقول كتيب WordPress REST API بحق:

خيالنا هو الحد الوحيد لما يمكن القيام به باستخدام WordPress REST API. خلاصة القول هي ، إذا كنت تريد طريقة منظمة وقابلة للتوسيع وبسيطة لإدخال البيانات وإخراجها من WordPress عبر HTTP ، فمن المحتمل أنك تريد استخدام واجهة برمجة تطبيقات REST.

لكنني أعلم أن التنفيذ دائمًا ما يكون أصعب بكثير من فهم النظرية.

لذلك دعونا نرى برنامجًا تعليميًا سريعًا حول كيفية استخدام 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' ); } ); 

يقوم هذا الرمز بإنشاء عنصر واجهة مستخدم بسيط للغاية يعرض عنوانًا من اختيارك.

من خلال إضافة الكود في الجزء العلوي من القالب وحفظه في دليل الإضافات ، قمنا بإنشائه كمكوِّن إضافي (بدلاً من إضافة الكود إلى ملف وظائف القالب).

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

بمجرد التثبيت والتفعيل ، سيكون لديك عنصر واجهة مستخدم جديد في منطقة Widgets بلوحة القيادة:

الخطوة # 2: استخدم WordPress REST API لجلب مقالات قاعدة المعارف الحديثة

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

من أجل "الحصول" على قائمة بمقالات قاعدة المعارف الحديثة من موقع الويب "المحلي" ، هناك بعض الأشياء التي نحتاج إلى معرفتها:

• المسار الأساسي لواجهة برمجة التطبيقات (API التي يجب استخدامها على موقعك ، في حالتنا أحدث واجهة برمجة تطبيقات WP)
• المسار المستخدم (تحتوي WP API على مسارات متعددة لمجموعات البيانات والعمليات المختلفة المتاحة)
• نقطة النهاية المستخدمة (ما هو الإجراء الذي يتعين القيام به)
• المعلمات (البيانات المرتبطة بالطلب)

دائمًا ما يكون المسار الأساسي لواجهة برمجة التطبيقات هو:

 json/wp/v2/ 

وهكذا يصبح مسار API المطلق:

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

(http://example.com هو موقع الويب "المحلي" الخاص بك)

الطريق المستخدم هو:

 json/wp/v2/posts/ 

حول نقاط النهاية: يحتوي هذا المسار في الواقع على ثلاث نقاط نهاية يتم تمييزها بواسطة طرق HTTP. نقاط النهاية هذه هي:

• احصل على
• وضع
• حذف

في هذا المثال ، ستختار نقطة نهاية GET بحيث يمكنك استرداد (أو "الحصول") على قائمة بأحدث المنشورات من موقع الويب "المحلي".

لذا فإن أول سطر من التعليمات البرمجية يتفاعل مع واجهة برمجة تطبيقات REST سيكون:

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

استجابة $ عبارة عن سلسلة JSON مشفرة مع بيانات Post. لذلك كل ما تفعله هنا هو فك تشفيره بحيث يمكن إخراجه.

مرة أخرى ، أضف فحصًا إضافيًا للتأكد من أن $ posts ليس فارغًا. إذا كان الأمر كذلك ، فلن يتم إرجاع أي شيء.

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

المرحلة التالية هي عرضها فعليًا في عنصر واجهة المستخدم الخاص بك على موقع الويب "الخارجي".

الخطوة # 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' ); } ); 

بعد الانتهاء من الخطوة أعلاه ، عندما تحاول الآن عرض موقع الويب "الخارجي" الخاص بك ، سترى قائمة بمنشوراتك من موقع الويب "المحلي" في الشريط الجانبي الخاص بك.

هذا كله عظيم.

ومع ذلك ، إذا كنت تتذكر ، فهذه ليست المنشورات الصحيحة لأننا نريد فقط عرض أحدث المقالات من Knowledge Base.

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

استخدام واجهة برمجة تطبيقات REST مع أنواع المنشورات المخصصة

لإتاحة أنواع المنشورات المخصصة لواجهة برمجة تطبيقات REST ، تحتاج إلى حل بديل.

لذلك ، عند إنشاء نوع منشور مخصص ، تحتاج إلى إضافة معلمة جديدة إلى سجل نوع المنشور args لجعله متاحًا للجمهور:

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

ولكن نظرًا لأننا في حالتنا ، نستخدم مكونًا إضافيًا لتشغيل نوع مقالة قاعدة المعارف ، فلن نقوم بتحرير ملف المكون الإضافي مباشرةً لإتاحة أنواع المنشورات المخصصة لواجهة برمجة تطبيقات REST. (لا يعد تحرير ملف مكون إضافي مباشرة فكرة جيدة أبدًا!)

ما سنفعله بدلاً من ذلك هو إضافة الكود التالي إلى ملف function.php في القالب الفرعي لموقع الويب "المحلي":

/**
* 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 ، نحتاج الآن إلى إصلاح عنصر واجهة المستخدم الخاص بنا لعرض المنشورات بنوع المنشور هذا. لذلك ، سنعود إلى رمز الاستجابة $ من الخطوة رقم 2 ونقوم بتحديثه إلى:

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

نقوم بشكل أساسي بتغيير / posts / إلى / ht_kb / في مسار واجهة برمجة التطبيقات لأن "ht_kb" هو اسم نوع المنشور المخصص للمكوِّن الإضافي.

بمجرد تحديث عنصر واجهة المستخدم ومعاينة موقع الويب "الخارجي" ، يجب أن تشاهد الآن أحدث المقالات من Knowledge Base.

افكار اخيرة

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

يمكنك تعديل المكون الإضافي الذي أنشأناه للتو لإنشاء مربع بحث يستخدم WP REST API للبحث في مقالات قاعدة المعارف وإرجاع النتائج في عنصر واجهة المستخدم.

أو يمكنك استخدام المصادقة للتحكم في من يرى النتائج (مفيد إذا قمت بإنشاء محتوى مقيد).

هناك الكثير الذي يمكنك تجربته! فقط احصل على الأساسيات بشكل صحيح ، وستكون جاهزًا تمامًا.

قراءة متعمقة

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

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

• كتيب REST API
• الأسئلة الشائعة حول REST API
• WP REST API: هل هذا ما نتجه إليه؟

إذا كان لديك أي أسئلة حول تطبيق WordPress REST API ، فقم بإسقاطها في التعليقات أدناه!