كيفية إضافة رسوم متحركة لتحميل الصفحة (أداة التحميل المسبق) في WordPress

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

تساعد الرسوم المتحركة لتحميل الصفحة ، أو "الرسوم المتحركة للتحميل المسبق" ، في إعلام الزائرين بأن الصفحة يتم تحميلها (ليست عالقة) ، وتزيد من احتمال بقائهم على الموقع. بهذه الطريقة ، يمكنه تحسين تجربة المستخدم (UX) وتقليل معدلات الارتداد.

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

ما هي الرسوم المتحركة المحمل المسبق؟

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

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

متى يجب علي استخدام أداة التحميل المسبق؟

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

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

2 خيارات لإضافة الرسوم المتحركة لتحميل الصفحة إلى WordPress

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

الخيار 1: إضافة الرسوم المتحركة للتحميل المسبق باستخدام البرنامج المساعد

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

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

الخطوة 1: قم بتنزيل WP Smart Preloader

يمكنك تنزيل المكون الإضافي WP Smart Preloader عبر دليل WordPress Plugin. ثم يمكنك تحميل ملف .zip إلى موقع WordPress الخاص بك ، بالانتقال إلى الإضافات> إضافة جديد> تحميل البرنامج المساعد في لوحة تحكم المسؤول:

خيار آخر هو البحث عن المكون الإضافي عبر شريط البحث في البرنامج المساعد> إضافة شاشة جديدة :

في كلتا الحالتين ، بمجرد تثبيت المكون الإضافي ، انقر فوق الزر تنشيط . يمكنك بعد ذلك تحديد موقع خياراته ضمن الإعدادات> WP Smart Preloader .

الخطوة 2: اختر طريقتك

في صفحة إعدادات WP Smart Preloader ، فإن أول ما يجب فعله هو تحديد نمط لأداة التحميل المسبق. ضمن قسم Select Preloader ، ستكون هناك قائمة منسدلة تتيح لك الاختيار من بين ستة خيارات نمط ، بالإضافة إلى خيار للرسوم المتحركة المخصصة:

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

في نهاية هذه الشاشة ، يمكنك تعيين مدة المحمل نفسه وتأثير "fade out":

إذا تركت هذه الحقول فارغة ، فسيتم تعيين الإعدادات الافتراضية على 1500 مللي ثانية (1.5 ثانية) و 2500 مللي ثانية (2.5 ثانية) على التوالي. عند الانتهاء ، انقر فوق الزر حفظ التغييرات .

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

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

الخيار 2: إضافة الرسوم المتحركة لأداة التحميل المسبق يدويًا

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

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

الخطوة 1: العصف الذهني للرسوم المتحركة الخاصة بك

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

الخطوة 2: تطوير أو تنزيل الرسوم المتحركة الخاصة بك

لتطوير الرسوم المتحركة الخاصة بك ، يمكنك استخدام أداة مثل Photoshop لإنشاء GIF أو رسوم متحركة دوارة للتحميل المسبق. يمكنك أيضًا الرجوع إلى مواردنا الخاصة بإنشاء رسوم متحركة لـ WordPress باستخدام CSS.

نوصي بالنهج الأخير ، حيث من الأفضل أن تتم إضافة أداة التحميل المسبق بتنسيق GIF إلى موقع WordPress الخاص بك باستخدام مكون إضافي. بالإضافة إلى Codepen (المذكور أعلاه) ، يمكنك أيضًا تنزيل رسم متحرك من مواقع مثل Spinkit و LoadLab.

في هذا البرنامج التعليمي ، سنستخدم الرسوم المتحركة للتحميل المسبق من Spinkit. بغض النظر عن المكان الذي تحصل منه على الرسوم المتحركة ، ستحتاج إلى كود مصدر CSS الخاص به لإضافته يدويًا إلى موقع WordPress الخاص بك:

ستتضمن معظم الرسوم المتحركة المجانية لأداة التحميل المسبق رابط مصدر ، حيث يمكنك العثور على كل من HTML و CSS:

ضع في اعتبارك أنه يمكنك أيضًا استخدام شفرة مصدر CSS من الرسوم المتحركة لأداة التحميل المسبق ، ثم تخصيصها لاحقًا حسب رغبتك.

الخطوة 3: إنشاء موضوع الطفل

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

الخطوة 4: أضف كود HTML إلى ملف header.php الخاص بالقالب

الخطوة التالية هي تحديد موقع ملف header.php لموضوع WordPress الخاص بك. يمكنك القيام بذلك عبر شاشة WordPress Theme Editor :

يمكنك أيضًا تحرير الملفات باستخدام عميل FTP مثل FileZilla. سيكون الملف موجودًا في wp-content> مجلد السمات في الدليل الجذر لموقعك.

بمجرد تحديد موقع الملف وفتحه ، أدخل رمز HTML التالي أسفل علامة النص الأساسي:

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

اضبط أو أضف أي كود HTML ضروري للرسوم المتحركة الخاصة بالتحميل المسبق في WordPress ، واحفظ الملف.

الخطوة 5: أضف كود CSS إلى ورقة الأنماط الخاصة بك

حان الوقت الآن لإضافة CSS لتصميم الرسوم المتحركة الخاصة بك. حدد موقع ورقة أنماط CSS ( style.css ) لموضوع WordPress الخاص بك ، ثم انسخ والصق كود مصدر CSS للرسوم المتحركة الخاصة بك. في حالتنا ، سنضيف ما يلي:

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

قبل حفظ التغييرات ، قم بإزالة هذا الجزء: "margin: 100px auto؛". في مكانه ، انسخ والصق ما يلي:

 position: absolute; top: 48%; left: 48%;

ثم يمكنك حفظ الملف.

الخطوة 6: أضف كود jQuey لجعل الرسوم المتحركة تعمل

من أجل جعل الرسوم المتحركة لأداة التحميل المسبق تعمل ، ستحتاج إلى إضافة القليل من jQuery. للقيام بذلك ، يمكنك العودة إلى ملف header.php ، وإدراج ما يلي قبل إغلاق علامة النص الأساسي:

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

ثم احفظ ملفك ، وقم بمعاينة موقعك للتأكد من أن الرسوم المتحركة لأداة التحميل المسبق في WordPress تعمل على النحو المنشود.

ابحث عن المزيد من النصائح والأدلة من WP Engine

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

في WP Engine ، تتمثل مهمتنا في تقديم النصائح والحيل والموارد للمطورين ، لمساعدتك على ضمان ظهور موقع الويب الخاص بك دائمًا في أفضل حالاته. تعلم المزيد عن خططنا اليوم!