كيفية إضافة الترقيم (Pagination) إلى مدونتك في ووردبريس

كيفية إضافة الترقيم (Pagination) إلى مدونتك في ووردبريس
يناير 17, 2025
19 مشاهدة

كيفية إضافة الترقيم (Pagination) إلى مدونتك في ووردبريس

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


الخطوة الأولى: فهم آلية الترقيم في ووردبريس

قبل الشروع في إضافة الترقيم، دعنا نتعرف على طريقتين رئيستين متاحتين في ووردبريس:

  • الدوال المضمنة: يمتلك ووردبريس دوالًا جاهزة تُسهل علينا عرض الترقيم؛ مثل the_posts_pagination() و paginate_links().
  • الدوال المخصصة: يمكنك إنشاء دوال خاصة بك، وإدراج الأكواد بشكل يدوي لتخصيص مظهر الترقيم.

سنشرح كلتا الطريقتين خطوة بخطوة، مع أمثلة عملية في ملف functions.php أو داخل القالب الفرعي (Child Theme).


الخطوة الثانية: استخدام دالة the_posts_pagination() المضمنة

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

  1. افتح ملف الأرشيف أو الصفحة التي تعرض المقالات، غالبًا index.php أو archive.php أو home.php داخل مجلد القالب.
  2. ابحث عن حلقة عرض المقالات (The Loop)، وستجد في نهايتها دالة مثل the_posts_navigation() أو posts_nav_link(). استبدلها بـ:

<?php
the_posts_pagination( array(
    'mid_size'  => 2,
    'prev_text' => '< رجوع',
    'next_text' => 'تقدم >',
) );
?>

شرح المعاملات:

  • mid_size: يحدد عدد الأرقام التي تظهر على جانبي الصفحة الحالية.
  • prev_text / next_text: لتخصيص نص أو أيقونة أزرار الرجوع والتقدم.

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


الخطوة الثالثة: تخصيص الترقيم عبر paginate_links()

في حال أردت تحكمًا أكبر بتصميم الترقيم أو وضعه في صفحة مخصصة، يمكنك استخدام دالة paginate_links(). هذه الطريقة تُستخدم عادةً مع استعلام WP_Query مخصص.

لنفرض أنك تعرض تدويناتك في صفحة custom-blog.php على النحو التالي:


<?php
// إنشاء استعلام مخصص لجلب التدوينات
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array(
    'post_type'      => 'post',
    'posts_per_page' => 5,
    'paged'          => $paged,
);

$my_query = new WP_Query($args);

if( $my_query->have_posts() ):
    while( $my_query->have_posts() ): $my_query->the_post();
        // عرض عنوان المقالة ومحتواها
        the_title('<h2>','</h2>');
        the_excerpt();
    endwhile;
    
    // إضافة الترقيم
    $big = 999999999; // رقم عشوائي للاستبدال لاحقًا
    $pagination_links = paginate_links( array(
        'base'      => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format'    => '?paged=%#%',
        'current'   => max( 1, get_query_var('paged') ),
        'total'     => $my_query->max_num_pages,
        'prev_text' => '< السابق',
        'next_text' => 'التالي >',
        'mid_size'  => 2
    ) );

    if ( $pagination_links ) {
        echo '<div class="custom-pagination">' . $pagination_links . '</div>';
    }

else:
    echo 'لا توجد تدوينات متاحة.';
endif;

// إعادة ضبط الاستعلام
wp_reset_postdata();
?>

شرح المعاملات:

  • base: تُعرِّف الهيكلية الأساسية للرابط. نستخدم str_replace() لاستبدال الرقم العشوائي $big برقم الصفحة.
  • format: تحدد تنسيق الرابط لاستقبال رقم الصفحة، هنا استخدمنا ?paged=%#%.
  • current: تحدد رقم الصفحة الحالية عن طريق get_query_var('paged').
  • total: تحدد إجمالي عدد الصفحات، وهو مأخوذ من $my_query->max_num_pages.
  • prev_text / next_text: لتخصيص زر السابق والتالي.
  • mid_size: تحدد عدد الأرقام الوسطى الظاهرة بجانب الصفحة الحالية.

الخطوة الرابعة: تنسيق الترقيم عبر CSS

من المهم أن تضيف لمسة جمالية لأزرار الترقيم أو أرقامه؛ حتى لا تبدو بشكل عشوائي. يمكنك إضافة الأكواد التالية في ملف style.css بالقالب الفرعي أو عبر مظهر > تخصيص > CSS إضافي:


.custom-pagination {
    text-align: center;
    margin: 20px 0;
}

.custom-pagination .page-numbers {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 12px;
    background: #f2f2f2;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
}

.custom-pagination .page-numbers:hover {
    background: #e2e2e2;
}

.custom-pagination .current {
    background: #0073aa;
    color: #fff;
}

في هذا المثال:

  • .custom-pagination: التصنيف الذي يضم روابط الترقيم.
  • .page-numbers: التصنيف الافتراضي الذي يولده ووردبريس للروابط.
  • .current: يُطبق على زر الصفحة الحالية.

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

  • تقليل عدد المقالات في الصفحة: من خلال تعيين 'posts_per_page' => 5 (أو أي قيمة أخرى)، تضمن عدم تراكم عدد ضخم من المقالات في صفحة واحدة.
  • استخدام أزرار أو نص واضح: حرص على توضيح أزرار “التالي” و”السابق” أو استبدالها بأيقونات واضحة.
  • اختبار على مختلف الأجهزة: تأكد من ظهور الترقيم بشكل جيد على الشاشات الصغيرة والهواتف، وعدِّل الأكواد عند الحاجة (باستخدام Media Queries).

الخطوة السادسة: حلول للمشاكل الشائعة في الترقيم

  • ظهور نفس الروابط لجميع الصفحات: تأكد من تعيين paged بطريقة صحيحة وتمريره إلى الاستعلام ($args)، وكذلك إعداد base وformat في paginate_links().
  • الروابط تؤدي إلى صفحة 404: تأكد من تحديث البنية العامة للروابط الدائمة من الإعدادات > الروابط الدائمة واحفظ التغييرات لتجنب أي خطأ في إعادة الكتابة (Rewrite Rules).
  • التداخل مع إضافات أخرى: إذا كنت تستخدم إضافات خاصة بالترقيم أو أدوات تحرير الصفحات (Page Builders)، قد تحدث تضاربات. جرّب تعطيل الإضافات مؤقتًا للتأكد من مكان الخطأ.

أهمية امتلاك موقع احترافي مع إتقان

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

هنا يأتي دور إتقان الذي يقدم خبرة واسعة في تصميم وتطوير مواقع ووردبريس العربية بمعايير عصرية. نساعدك على:

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

تواصل معنا الآن!

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

تواصل مع إتقان

لا تدع الفرصة تفوتك! استثمر في جودة موقعك وارتقِ بتجربة زوارك إلى المستوى التالي. فريقنا في إتقان بانتظارك لتقديم الاستشارة والخدمات التي تليق بمشروعك الرقمي.

هل تحتاج إلى موقع إلكتروني مميز لمشروعك؟

نحن هنا لمساعدتك في بناء موقع يتناسب مع رؤيتك التجارية. تواصل معنا الآن للحصول على تكلفة تقديرية وجدول زمني في أقل من 24 ساعة. مع فريقنا المتخصص. لدينا الحل الأمثل.

أطلب مشروعك الآن