كيفية إضافة أداة تحميل مسبق إلى ووردبريس 2021

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

في هذه المقالة ، سنوضح لك كيفية إضافة أداة تحميل مسبق بسهولة إلى ووردبريس .

ما هو التحميل المسبق ومتى يجب استخدامه؟

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

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

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

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

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

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

الطريقة الأولى: إضافة أداة التحميل المسبق في ووردبريس باستخدام WP Smart Preloader

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

أول شيء عليك القيام به هو تثبيت وتفعيل إضافة WP Smart Preloader. عند التنشيط ، تحتاج إلى زيارة الإعدادات » WP Smart Preloader لتكوين إعدادات الاضافة.

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

بعد ذلك ، يمكنك جعل أداة التحميل المسبق تظهر فقط على الصفحة الرئيسية عن طريق تحديد الخيار “عرض فقط على الصفحة الرئيسية”.

بعد ذلك ، تحتاج إلى التمرير لأسفل إلى قسم “Duration to show Loader”. تحتاج إلى تحديد مدة أداة التحميل المسبق. الخيار الافتراضي هو 1500 مللي ثانية (1.5 ثانية) والذي يجب أن يعمل مع معظم المواقع ، ولكن يمكنك تغيير ذلك إذا أردت.

يمكنك أيضًا ضبط الوقت الذي تستغرقه أداة التحميل لتتلاشى تمامًا. الخيار الافتراضي 2500 ثانية أو 2.5 ثانية.

أخيرًا ، لا تنس النقر على الزر “حفظ التغييرات” لتخزين إعداداتك ، يمكنك الآن زيارة موقع الويب الخاص بك لمشاهدة أداة التحميل المسبق قيد التشغيل.

الطريقة الثانية: إضافة أداة التحميل المسبق في ووردبريس باستخدام Preloader

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

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

أولاً ، تحتاج إلى إدخال رمز Hex للون الخلفية الذي تريد استخدامه لشاشة التحميل. الخيار الافتراضي هو #FFFFFF (أبيض). يمكنك استخدام أداة منتقي الألوان عبر الإنترنت للعثور على رمز HEX للون الذي تريد استخدامه.

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

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

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

أخيرًا ، سترى التعليمات لإضافة الكود التالي إلى ملف header.php الخاص بقالب ووردبريس.

<div id=”wptime-plugin-preloader”></div>

قبل مغادرة الصفحة ، لا تنس النقر على الزر “حفظ التغييرات” لتخزين إعداداتك.

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

قد يكون الحل الأفضل هو إضافة هذا الرمز باستخدام إضافة منفصلة لـ Code Snippets ، أو في إضافة خاصة بالموقع.

إليك الرمز الذي ستحتاج إلى إضافته:

function wpb_add_preloader() {
echo ‘<div id=”wptime-plugin-preloader”></div>’;
}
add_action( ‘wp_body_open’, ‘wpb_add_preloader’ );

ملاحظة: ستعمل طريقة إضافة التعليمات البرمجية هذه فقط على قوالب ووردبريس المتوافقة مع وظيفة wp_body_open () المضافة في WordPress 5.2.

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