كيفية إضافة محمّل مسبق في WordPress: دليل خطوة بخطوة

جدول المحتويات

محدّث في مايو 2026.

TL;DR: يملأ المحمّل المسبق الفجوة أثناء تحميل الأصول الثقيلة. في عام 2026، الإضافة المناسبة هي WP Smart Preloader أو مقتطف كود خفيف — لكن تخطّه إذا كان موقعك سريعاً بالفعل، لأن المحمّل المسبق السيئ الضبط يضر بـ LCP فعلياً.

هل ينبغي لك إضافة محمّل مسبق في عام 2026؟

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

تقيس Google Core Web Vitals مقياس Largest Contentful Paint (LCP) — مدى سرعة ظهور المحتوى الأكثر وضوحاً. المحمّل المسبق يؤخر هذا الرسم حرفياً بتغطية الشاشة بالرسوم المتحركة. إذا كان المحمّل يعمل لمدة 1.5 ثانية فقط، فهذا يعني 1.5 ثانية من عقوبة LCP المضمونة على كل تحميل للصفحة.

متى يكون المحمّل المسبق منطقياً:

• موقعك ثقيل فعلاً — مقاطع فيديو بطولية ضخمة، خرائط تفاعلية، رسوم متحركة قائمة على Canvas — والحالة الخالية تبدو مكسورة بدونه.
• لديك شريط تحميل أو مؤشر تقدم يعطي المستخدمين تغذية راجعة حقيقية، لا مجرد دوّار للجماليات.

متى تتخطاه تماماً:

• لديك مدونة عادية، أو محفظة أعمال، أو متجر WooCommerce. سرّع الموقع بدلاً من ذلك — تحميل الصور الكسول، استخدام CDN، التحويل إلى استضافة أسرع.
• LCP لديك بالفعل أقل من 2.5 ثانية. إضافة محمّل مسبق ستجعله أسوأ فقط.

إذا أردت المتابعة رغم ذلك، إليك كيفية القيام بذلك بشكل صحيح في عصر Gutenberg / Full Site Editing.

ما هو المحمّل المسبق؟

المحمّل المسبق هو عنصر واجهة مستخدم — عادةً دوّار متحرك، أو شريط تقدم، أو رسوم متحركة لشعار العلامة التجارية — يُعرض أثناء قيام المتصفح بتنزيل موارد الصفحة وعرضها. النصوص وHTML تُحمَّل بسرعة؛ الصور والفيديو المُضمَّن يستغرق وقتاً أطول. المحمّل المسبق يملأ تلك الفجوة حتى يرى المستخدمون شيئاً بدلاً من تخطيط فارغ أو مُقدَّم جزئياً.

في WordPress القديم (أيام المحرر الكلاسيكي قبل الإصدار 5.0)، كان إضافة المحمّلات المسبقة يتم عادةً عن طريق تعديل header.php مباشرةً. في عام 2026، مع Gutenberg وثيمات FSE، تعديل ملفات الثيم مباشرةً غير مستحسن بشدة — تحديثات الثيم ستمحو تغييراتك. استخدم إضافة أو نهج Code Snippets بدلاً من ذلك.

كيفية إضافة محمّل مسبق في WordPress (طرق 2026)

الطريقة 1 — إضافة WP Smart Preloader

WP Smart Preloader إضافة مجانية في مستودع WordPress.org تعمل مع الثيمات الكلاسيكية وثيمات الكتل. تحقق من أنها لا تزال يتم صيانتها بنشاط وأنها متوافقة مع إصدار WordPress الحالي قبل التثبيت — حالة صيانة الإضافة يمكن أن تتغير؛ تحقق من تاريخ “آخر تحديث” في صفحة المستودع.

1. في لوحة تحكم WordPress الخاصة بك اذهب إلى الإضافات → إضافة جديد وابحث عن “WP Smart Preloader”.
2. ثبّتها وفعّلها.
3. اذهب إلى الإعدادات → WP Smart Preloader.
4. اختر نمط المحمّل المسبق من الخيارات المدمجة، أو الصق HTML/CSS المخصص.
5. تحت “عرض على الصفحة الرئيسية فقط” — فعّل هذا إذا أردت الرسوم المتحركة على الصفحة الرئيسية فقط. تشغيل المحمّل المسبق على كل صفحة يضاعف تكلفة LCP عبر موقعك بالكامل.
6. اضبط مدة عرض المحمّل. الافتراضي هو 1500 مللي ثانية. أوصي بخفضه — 800–1000 مللي ثانية كحد أقصى. كلما طال تشغيله، كان LCP أسوأ.
7. انقر حفظ التغييرات واختبر باستخدام PageSpeed Insights قبل وبعد. إذا ارتفع LCP، احذف الإضافة.

الطريقة 2 — كود مخصص عبر إضافة Code Snippets

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

الخطوة 1 — إضافة مقتطف HTML (PHP)

في Code Snippets، أنشئ مقتطفاً جديداً يُضبط للتشغيل على “الواجهة الأمامية فقط”:

function ar_add_preloader() {
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

ملاحظة: wp_body_open يعمل فقط على الثيمات التي تستدعي wp_body_open() في قالبها. معظم ثيمات الكتل الحديثة والثيمات الكلاسيكية المُدارة تفعل هذا. إذا لم يظهر المحمّل المسبق، تحقق مما إذا كان ثيمك يدعم هذا الخطاف.

الخطوة 2 — إضافة CSS

أنشئ مقتطفاً ثانياً يُضبط على “الواجهة الأمامية فقط → CSS”:

#ar-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}
#ar-preloader.hidden {
    opacity: 0;
    pointer-events: none;
}
.ar-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: ar-spin 0.7s linear infinite;
}
@keyframes ar-spin {
    to { transform: rotate(360deg); }
}

الخطوة 3 — إضافة JavaScript للإخفاء

أنشئ مقتطفاً ثالثاً يُضبط على “الواجهة الأمامية فقط → JavaScript”:

(function () {
    var el = document.getElementById('ar-preloader');
    if (!el) return;
    window.addEventListener('load', function () {
        el.classList.add('hidden');
        setTimeout(function () { el.remove(); }, 350);
    });
})();

هذا يزيل المحمّل المسبق عند حدث window.load — بعد تحميل الصور والإطارات الفرعية — بدلاً من DOMContentLoaded الذي يُطلق مبكراً جداً.

الطريقة 3 — ثيم الكتل / FSE: استخدام كتلة أو إضافة تراكب التحميل

إذا كنت تستخدم ثيم Full Site Editing (Twenty Twenty-Four، Kadence، GeneratePress وضع الكتل، إلخ)، فبعض إضافات منشئ الصفحات (Elementor، Kadence Blocks، Spectra) لديها خيارات محمّل مسبق أو شاشة تحميل مدمجة في إعداداتها. تحقق أولاً من وثائق ثيمك أو منشئ الصفحات — مضاعفة المحمّل المسبق بإضافة مستقلة فوق المدمج ستسبب تراكباً مزدوجاً.

قائمة تحقق الأداء قبل الإطلاق

قبل نشر المحمّل المسبق، تحقق من كل ما يلي:

1. شغّل اختبار PageSpeed Insights على صفحة بدون المحمّل المسبق. لاحظ LCP.
2. فعّل المحمّل المسبق وشغّل نفس الاختبار. إذا كان LCP أسوأ بأكثر من ~100 مللي ثانية، أعد النظر.
3. اجعل مدة المحمّل المسبق 1000 مللي ثانية أو أقل. أي شيء أطول يُعدّ مسؤولية للتجربة والتصنيف.
4. اختبر على اتصال 4G محمول مُقيَّد (Chrome DevTools → الشبكة → Fast 4G). المحمّلات المسبقة تبدو أطول بكثير على الاتصالات الأبطأ.
5. تأكد أن المحمّل المسبق مخفي من قارئات الشاشة (aria-hidden="true") ولا يحبس تركيز لوحة المفاتيح.

الأسئلة الشائعة حول محمّل WordPress المسبق — 2026

هل يضر المحمّل المسبق بالسيو؟

نعم، يمكن أن يضر. Core Web Vitals من Google — تحديداً LCP — إشارة تصنيف مؤكدة. المحمّل المسبق الذي يجلس أمام محتواك يؤخر LCP. بالنسبة لمعظم مواقع WordPress القياسية، أوصي بتخطيه تماماً والاستثمار في تحسين الصور والتخزين المؤقت. إذا كان موقعك ثقيلاً بما يكفي لأن يحتاج فعلاً لمحمّل مسبق، اجعل المدة قصيرة وراقب CWV في Google Search Console.

هل تعمل إضافات المحمّل المسبق مع ثيمات Full Site Editing (Gutenberg)؟

معظمها يعمل، طالما أن الثيم يستدعي wp_body_open(). محرر كتل WordPress نفسه لا يغير كيفية عمل أحداث تحميل الصفحة في المتصفح. تحقق من إصدار “تم الاختبار حتى” للإضافة في مستودع WordPress.org لتأكيد التوافق مع إصدار WordPress المثبت — تحقق من هذا عند التثبيت، حيث تتغير حالة التوافق.

هل يمكنني إضافة محمّل مسبق بدون إضافة في 2026؟

نعم — طريقة Code Snippets أعلاه هي أنظف نهج بدون إضافة. تصمد أمام تحديثات الثيم، وسهلة التعطيل، وتمنحك تحكماً كاملاً في الترميز والتوقيت. تجنب تعديل header.php مباشرةً في ثيمك النشط أو ثيم الأطفال؛ فهذا يضيف ديون الصيانة ويكسر إذا غيّرت الثيمات.

المحمّل المسبق يظهر على كل صفحة. كيف أحدّه على الصفحة الرئيسية فقط؟

في WP Smart Preloader، تحقق من “عرض على الصفحة الرئيسية فقط” في الإعدادات. لنهج الكود المخصص، اُغلف استدعاء add_action بشرط:

function ar_add_preloader() {
    if ( ! is_front_page() ) return;
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

قراءة ذات صلة:

• كيفية تسريع موقع WordPress الخاص بك
• أفضل إضافات WordPress
• WordPress.com مقابل WordPress.org

هذا الدليل جزء من alejandrorioja.com — كتبه Alejandro Rioja، الذي يبني الآن أنظمة وكيل الذكاء الاصطناعي للمؤسسين. بما في ذلك الوكيل الذي يحافظ على تحديث هذا الموقع. كيف يعمل →

محدّث لمايو 2026

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