كيفية عرض صفحة API كصفحات متعددة في وردبريس

2 دقائق

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

جدول المحتوى

فهم واجهة برمجة التطبيقات (API)

عند استخدام واجهة برمجة التطبيقات، يمكنك الحصول على مجموعة من البيانات المصنفة في شكل صفحات. مثلاً، قد تحتوي واجهة برمجة التطبيقات التي تتعامل معها على معلمات مثل "page" و"posts_per_page" لتحديد الصفحات وعدد العناصر في كل صفحة. دعنا نفترض أن لديك API يرجع لك 500 عنصر، مما يعني أنه يمكنك تقسيم تلك البيانات إلى 5 صفحات، كل صفحة تحتوي على 100 عنصر كحد أقصى.

إعداد الاستعلام للبيانات

لإعداد الاستعلام، يجب أولاً إعداد قيم المتغيرات لجلب البيانات بشكل صحيح. يمكنك استخدام كود مشابه للآتي:

// أولاً، نسترجع رقم الصفحة من استعلام URL، الافتراض هو الصفحة 1 إذا لم يتم تحديد رقم
$page = isset($_GET['page']) ? (int) $_GET['page'] : 1;
$posts_per_page = isset($_GET['posts_per_page']) ? (int) $_GET['posts_per_page'] : 10; // الافتراضي هو 10 عناصر في الصفحة
// بناء الرابط الديناميكي للمسح باستخدام http_build_query
$api_url = "https://example.com/api/data?" . http_build_query([
    'page' => $page,
    'posts_per_page' => $posts_per_page
]);

تنفيذ الطلب باستخدام cURL

بعد إعداد API URL، يجب عليك تنفيذ الطلب لجلب البيانات. يستخدم الكود التالي وظيفة cURL لجلب البيانات من واجهة برمجة التطبيقات:

// تهيئة cURL
$curl = curl_init();
// إعداد خيارات cURL
curl_setopt_array($curl, array(
    CURLOPT_URL => $api_url,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_CUSTOMREQUEST => 'GET',
    CURLOPT_HTTPHEADER => array(
        'Authorization: {token}' // استبدل بـ توكنك الفعلي
    ),
));
// تنفيذ الطلب والحصول على الاستجابة
$response = curl_exec($curl);
curl_close($curl);
// فك تشفير الاستجابة
$data = json_decode($response, true);

معالجة البيانات وعرضها في الواجهة

بعد الحصول على البيانات، تأتي خطوة معالجتها وعرضها في الواجهة الأمامية:

if ($data) {
    $total_posts = isset($data['total']) ? $data['total'] : 0;
    $total_pages = isset($data['total_pages']) ? $data['total_pages'] : 0;
    $current_page = isset($data['current_page']) ? $data['current_page'] : 1;
    // عرض المشاركات هنا
    foreach ($data['posts'] as $post) {
        echo '<h3>' . $post['title'] . '</h3>';
        echo '<p>' . $post['content'] . '</p>';
    }
    // إضافة شريط التنقل للصفحات
    for ($i = 1; $i <= $total_pages; $i++) {
        echo '<a href="?page=' . $i . '&posts_per_page=' . $posts_per_page . '">' . $i . '</a> ';
    }
}

حل مشكلات التنقل بين الصفحات

إذا كنت تواجه مشكلة في بقاء الرابط على نفس الصفحة عند النقر على أزرار التصفح، تأكد من أن الرابط المنسوخ يتضمن كلاً من معلمة "page" ومعلمة "posts_per_page" بشكل صحيح. هذه الحقول ضرورية لاسترجاع البيانات من API. إذا كان الرابط يعرض فقط ?posts_per_page=10، فذلك يشير إلى عدم تحديث قيمة "page" في الرابط بشكل سليم.

الخلاصة

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

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