كيفية إضافة واجهات برمجة تطبيقات الطرف الثالث إلى WordPress (البرنامج المساعد وليس المكون الإضافي)

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

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

ما هي واجهة برمجة التطبيقات ولماذا تضيف واحدة إلى WordPress؟

API تعني "واجهة برمجة التطبيق". في الحوسبة ، الواجهة هي شيء يربط مكونين أو أكثر ببعضهما البعض. في هذه الحالة ، تكون المكونات أنظمة أو تطبيقات مختلفة.

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

في WordPress ، يمكنك استخدام واجهات برمجة التطبيقات لسحب المعلومات من الخدمات الخارجية إلى موقع WordPress الخاص بك - أو إرسال البيانات. على سبيل المثال ، يمكنك استخدامها إلى:

• إظهار الطقس الحي أو أسعار الصرف أو تحديثات سوق الأوراق المالية على موقعك.

• عرض خلاصات الوسائط الاجتماعية.

• قم بنشر المحتوى الخاص بك تلقائيًا على الشبكات الاجتماعية.

• دمج موقعك مع بوابة دفع مثل Stripe أو PayPal.

• إظهار أسعار الشحن في الوقت الفعلي في متجرك عبر الإنترنت.

• سحب معلومات المنتج من نظام المستودعات.

• إرسال بيانات المشترك من نموذج ويب إلى خدمة تسويق البريد الإلكتروني.

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

مكونات API مهمة

لاستخدام أي واجهة برمجة تطبيقات ، عادة ما تحتاج إلى بعض الأجزاء الأساسية:

• عنوان URL لنقطة النهاية : عنوان URL الذي ترسل طلبك إلى. هذا يخبر واجهة برمجة التطبيقات بما تطلبه (على سبيل المثال ، الطقس الحالي ، قائمة منشورات المدونة ، إلخ).

• المعلمات: هذه قيم اختيارية تقوم بتمريرها لتخصيص الطلب ، مثل الموقع أو المعرف أو مصطلحات البحث أو نطاق التاريخ. تساعد المعلمات في تحسين ما يعيدك API.

• تنسيق البيانات: هذا هو التنسيق الذي يتم به إرسال البيانات. التنسيق الأكثر شيوعًا هو JSON لأنه خفيف الوزن وسهل الاستخدام في كل من JavaScript و PHP. XML أو النص العادي هي أيضًا خيارات.

• المصادقة: تتطلب العديد من واجهات برمجة التطبيقات مفتاح API أو الرمز المميز للتحقق من أنه يُسمح لك بالوصول إلى البيانات. تحتاج إلى إرسالها على طولها لإضفاء الشرعية على طلبك.

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

WordPress Rest API

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

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

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

كيفية إضافة واجهة برمجة تطبيقات إلى WordPress مع مكون إضافي

هناك طريقتان رئيسيتان يمكنك دمج واجهات برمجة التطبيقات في موقع WordPress الخاص بك:

• الرمز: إذا كان لديك المهارات أو استئجار شخص يفعل ذلك ، فيمكنك توصيل موقعك بآبار واجهة برمجة التطبيقات باستخدام رمز مخصص ، وعادة ما يكون PHP أو JavaScript.

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

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

الوصول إلى واجهة برمجة تطبيقات خرائط Google

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

أول شيء تحتاجه هو إنشاء حساب Google Cloud مجاني مع تمكين الفواتير. بمجرد الحصول على ذلك ، قم بتسجيل الدخول وإنشاء مشروع جديد في الأعلى.

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

انقر على المكتبة ، ثم ابحث عن خرائط JavaScript API .

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

بعد ذلك ، قم بتثبيت وتنشيط البرنامج المساعد WP Go Maps من قائمة WordPress Plugins. بمجرد الاستعداد ، انتقل إلى Maps> Settings> الإعدادات المتقدمة ، والصق في مفتاح API لـ Google Maps ، وحفظ الإعدادات.

بعد ذلك ، يمكنك إنشاء خريطة جديدة باستخدام واجهة البرنامج المساعد.

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

تهانينا ، لقد أضفت للتو واجهة برمجة تطبيقات إلى موقع WordPress الخاص بك.

استخدم wpgetapi لأي واجهة برمجة تطبيقات تقريبًا

المثال أعلاه يعمل فقط لواجهة برمجة تطبيقات معينة. إذا كنت تريد حل مكون إضافي أكثر عمومية لدمج واجهات برمجة التطبيقات في موقعك ، فإن أحد أكثرها شعبية هو WPGetApi.

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

جميع المعلومات الخاصة باستخدام واجهة برمجة تطبيقات الموقع متوفرة في الوثائق.

قم بإعداد مكالمة API

للبدء ، قم بتثبيت وتنشيط WPGETAPI ، ثم انتقل إلى إعداد WPGETAPI> في لوحة القيادة الخاصة بك.

املأ المعلومات على الشاشة الأولى على النحو التالي:

• اسم API: حتى تعرف ما هو كل API من أجل.

• معرف فريد: اسم WordPress-Interntern من واجهة برمجة التطبيقات لعرضه. فقط استخدم الأحرف الصغيرة والرسومات السفلية ، على سبيل المثال "open_weather_map."

• عنوان URL الأساسي: العنوان العام لواجهة برمجة التطبيقات ، بدون نقطة نهاية. في هذا المثال ، هذا https://api.openweathermap.org .

مرة واحدة جاهزة ، حفظ للمتابعة.

قم بتكوين نقطة النهاية والمعلمات

بعد ذلك ، انقر فوق علامة تبويب API في الأعلى لتكوين بقية مكالمة API.

إليك كيفية القيام بذلك:

• معرف فريد: اسم نقطة النهاية التي ستستخدمها.

• نقطة النهاية: يتم إلحاق هذا العنوان الأساسي (هنا ، "بيانات/3.0/OneCall").

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

• تنسيق النتائج: سواء كنت ترغب في تلقي البيانات بتنسيق PHP أو JSON من واجهة برمجة التطبيقات ، فإننا نستخدم JSON هنا.

• المهلة: كم من الوقت يجب أن يظل الاتصال مفتوحًا.

أدناه ، اضبط المعلمات. تتطلب واجهة برمجة تطبيقات خريطة الطقس المفتوحة ثلاثة:

• LAT: خط عرض الموقع الذي تريد معلومات الطقس ل.

• LON: كما يمكنك أن تخمن ، هذا هو خط الطول في موقعك المستهدف.

• AppId: مفتاح API الخاص بك ، والذي يمكنك العثور عليه في حسابك.

يقبل API OpenWeathermap أيضًا معلمات اختيارية:

• استبعاد: يتيح لك حذف بعض أجزاء بيانات الطقس ، مثل التنبؤات اليومية أو بالساعة.

• الوحدات: اضبط وحدات القياس المفضلة لديك.

• لانغ: اختر لغة الإخراج الخاصة بك.

قم بتعيين المعلمات في قسم سلسلة الاستعلام في أزواج القيمة الرئيسية ، على سبيل المثال "LAT" على اليسار و "48.8542" على اليمين.

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

عرض الإخراج

إذا كان كل شيء على ما يرام ، فيمكنك استخدام علامة القالب أو الرمز القصير الذي توفره WpgetApi لعرضه على موقعك.

عندما تقوم الآن بمعاينة الصفحة أو النشر ، ترى أن البيانات تظهر.

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

الوصول إلى واجهات برمجة التطبيقات في WordPress يدويًا

إذا كنت لا ترغب في الذهاب إلى مسار البرنامج المساعد ، فيمكنك إنشاء مكالمات API باليد. يمنحك هذا المزيد من التحكم لأنه يمكنك تخصيص البيانات التي تطلبها وإخراجها على الفور.

باستخدام PHP

الاستمرار في مثال خريطة الطقس المفتوحة ، إليك وظيفة PHP للحصول على نفس معلومات الطقس على النحو الوارد أعلاه:

 function get_weather_data() { $api_key = 'YOUR_API_KEY_HERE'; // Replace with your actual API key $endpoint = "https://api.openweathermap.org/data/3.0/onecall?" . http_build_query([ 'lat' => 48.8542, 'lon' => 2.3467, 'exclude' => 'minutely,hourly,daily,alerts', 'units' => 'metric', 'appid' => $api_key ]); $response = wp_remote_get($endpoint); if (is_wp_error($response)) { return '<div class="weather-widget error">Failed to fetch weather data.</div>'; } $body = wp_remote_retrieve_body($response); $data = json_decode($body, true); if (!empty($data) && isset($data['current']['temp'])) { $temp = esc_html($data['current']['temp']); return '<div class="weather-widget">Current temperature in Paris: <span class="weather-temp">' . $temp . '°C</span></div>'; } return '<div class="weather-widget error">Weather data not available.</div>'; } function weather_shortcode() { return get_weather_data(); } add_shortcode('weather', 'weather_shortcode');

هذا ما يفعله:

• إجراء دعوة لنفس الإحداثيات والمعلمات الأخرى.

• يستخدم WP_REMOTE_GET () لجعل طلب HTTP GET.

• يسحب درجة الحرارة الحالية فقط من استجابة JSON.

• يلف الإخراج في بعض HTML حتى تتمكن من تصميمه إذا لزم الأمر.

• يسجل رمز قصير يسمى "[الطقس]" لإخراج البيانات في WordPress.

ضع الوظيفة إما في ملف الوظائف . ثم ، استخدم الرمز القصير كما كان من قبل. هذا ما يبدو عليه في الصفحة:

جافا سكريبت

يمكنك أيضًا استخدام JavaScript للاتصال بآبار واجهات برمجة التطبيقات. هذا مفيد بشكل خاص لتحديثات المحتوى الديناميكي أو طلبات AJAX أو تطبيقات صفحة واحدة.

فيما يلي مثال بسيط للغاية باستخدام طريقة Fetch () لعرض معلومات عشوائية حول القطط من API Facts Cat:

 <div>Loading cat fact...</div> <div class="wp-block-buttons"> <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">New Cat Fact</a></div> </div> <script> function loadCatFact() { fetch('https://catfact.ninja/fact') .then(response => response.json()) .then(data => { document.getElementById('cat-fact').textContent = data.fact; }) .catch(error => { document.getElementById('cat-fact').textContent = 'Failed to load cat fact.'; console.error(error); }); } // Load the first fact when the page loads loadCatFact(); // Add button click handler for new facts document.getElementById('new-fact').addEventListener('click', loadCatFact); </script>

يمكنك إدخال هذا في كتلة HTML مخصصة لعرضها على الفور في WordPress.

واجهات برمجة تطبيقات الطرف الثالث وأداء موقع الويب

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

لتجنب هذه المشكلات ، من المهم استجابات Cache API حتى لا يتم جلبها في كل تحميل صفحة. تحتوي العديد من الإضافات API مثل WpgetApi على خيارات مدمجة لذلك. إذا كتبت مكالمات API باليد ، فيجب عليك إعداد آليات التخزين المؤقت الخاصة بك.

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

تحسين الأداء مع البرنامج المساعد

هناك خطوة فعالة أخرى لتقليل تأثير مكالمات API في أداء الموقع وهي استخدام Rocket WP.

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

إذا قمت بتحميل محتوى API عبر JavaScript ، يساعد WP Rocket على تحسين وقت تحميله بواسطة:

• إصلاح جافا سكريبت لجعل الملفات أصغر (ممكّن افتراضيًا)

• الجمع بين العديد من الملفات في واحد للتنزيلات الأسرع

• تأجيل ملفات التحميل بشكل غير متزامن

• تأخير تنفيذ جافا سكريبت

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

والأكثر من ذلك ، أن صاروخ WP يأتي مع مجموعة من تحسينات الأداء التلقائي في الخلفية ، مثل:

• ضغط GZIP

• التحميل المسبق لذاكرة التخزين المؤقت والروابط

• تحسين الصور الحرج (يستبعد الصور فوق الطي من التحميل الكسول) لتحسين أكبر طلاء محتوى

• التقديم التلقائي كسول لتحميل عناصر تظهر عالية على صفحات الويب الخاصة بك بشكل أسرع

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

• التحميل كسول للصور ، بما في ذلك خلفيات CSS ومقاطع الفيديو والإطارات

• التحميل المسبق للملفات والخطوط الخارجية

• خطوط Google استضافة الذات

• تحسين قاعدة البيانات

• خيارات للاتصال بسهولة بـ CDN ، بما في ذلك RocketCDN

دراسة حالة: تسريع مكالمات API مع صاروخ WP

لفهم بشكل أفضل كيف تؤثر إضافة واجهة برمجة تطبيقات خارجي على أداء الموقع - وكيف يمكن أن يساعد مكونات البرنامج المساعد مثل WP - قمنا بإعداد بيئة اختبار يتم التحكم فيها. لقد أنشأنا موقع ويب وورد التجريبي مع محتوى وهمية وأضفنا خريطة من خرائط Google باستخدام خرائط WP GO.

غير محسوبة تمامًا ، كانت نتائج PageSpeed Insights على النحو التالي:

ثم قمنا بتنشيط صاروخ WP والميزات التالية:

• Minify CSS و JavaScript

• إزالة CSS غير المستخدمة

• تحميل جافا سكريبت مؤجل

• تأخير تنفيذ JavaScript

هذا يدع التغييرات التالية:

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

أضف واجهات برمجة التطبيقات إلى WordPress دون السحب على الأداء

تفتح واجهات برمجة التطبيقات إمكانيات لا نهاية لها للمحتوى الديناميكي والوقت الفعلي والتكامل القوي. بفضل WordPress Plugins والتكاملات السهلة ، يمكنك حتى إضافتها إلى موقعك دون أن تكون مطورًا.

فقط ضع في اعتبارك أن كل مكالمة API يمكن أن تؤثر على أداء الصفحة. هل تشعر بالتعمق في تحسينه؟ WP Rocket هنا للمساعدة-جربها خالية من المخاطر لمدة 15 يومًا!