إضافة CSS Animations إلى WordPress

نشرت: 2022-07-11

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

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

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

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

1. كيف تعمل رسوم CSS المتحركة؟ (ولماذا يجب عليك استخدامها)

2. إضافة الرسوم المتحركة CSS مع البرنامج المساعد

2.1. الخطوة 1: تثبيت وتفعيل البرنامج المساعد للرسوم المتحركة CSS

2.2. الخطوة 2: تصميم الرسوم المتحركة الخاصة بك

2.3 الخطوة 3: تخصيص التأخير والسرعة

2.4 الخطوة 4: حفظ ومعاينة الرسوم المتحركة الخاصة بك

3. إضافة الرسوم المتحركة CSS بدون البرنامج المساعد

3.1. الخطوة 1: فهم خصائص CSS ذات الصلة

3.2 الخطوة 2: قم بإنشاء ملف animate.css الخاص بك

3.3 الخطوة 3: قم بتحميل ملف animate.css إلى موقعك

3.4. الخطوة 4: استدعاء Animate Stylesheet عبر function.php

3.5 الخطوة 5: تطبيق الرسوم المتحركة باستخدام فئات CSS

4. حافظ على موقعك يبدو رائعًا مع WP Engine

كيف تعمل رسوم CSS المتحركة؟ (ولماذا يجب عليك استخدامها)

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

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

إضافة الرسوم المتحركة CSS مع البرنامج المساعد

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

الخطوة 1: تثبيت وتفعيل البرنامج المساعد للرسوم المتحركة CSS

للبدء ، ستحتاج إلى تثبيت مكون إضافي للرسوم المتحركة CSS. نحن نستخدم Blocks Animation: CSS Animations لـ Gutenberg Blocks ، وهي أداة جديدة نسبيًا تم تصميمها خصيصًا لمحرر Block.

يمكنك العثور على هذا المكون الإضافي بالانتقال إلى الإضافات> إضافة جديد في لوحة معلومات WordPress الخاصة بك. بمجرد تحديد موقعه ، انقر فوق التثبيت الآن ثم تنشيط :

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

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

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

يمكنك التلاعب بالعديد من خيارات الرسوم المتحركة التي تريدها للعثور على الخيار الذي يناسب محتواك.

الخطوة 3: تخصيص التأخير والسرعة

يأتي المكون الإضافي Blocks Animation أيضًا مزودًا بوظيفة توقيت لتخصيص تأخير وسرعة الرسوم المتحركة:

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

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

الخطوة 4: حفظ ومعاينة الرسوم المتحركة الخاصة بك

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

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

إذا وجدت أن الرسوم المتحركة الخاصة بك لا تتناسب مع بقية المحتوى الخاص بك أو كان لها التأثير الذي تريده ، يمكنك ببساطة الرجوع إلى Block Editor وتعديله. هذا هو جمال استخدام البرنامج المساعد للرسوم المتحركة CSS - إنه سريع وسهل.

إضافة رسوم متحركة CSS بدون مكون إضافي

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

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

الخطوة 1: فهم خصائص CSS ذات الصلة

قبل أن تقوم بأي تعديل فعليًا ، هناك ثماني خصائص مهمة يجب وضعها في الاعتبار عند إنشاء الرسوم المتحركة لـ CSS:

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

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

في الرسوم المتحركة لـ CSS ، يحدد الإطار الرئيسي ما يحدث ومتى. خذ هذا، على سبيل المثال:

 keyframes مثال {
 0٪ {لون الخلفية: أحمر ؛}
 25٪ {لون الخلفية: أصفر ؛}
 50٪ {لون الخلفية: أزرق ؛}
 100٪ {لون الخلفية: أخضر ؛}
 }

يوضح الإطار الرئيسي أعلاه أن 25 في المائة من الطريق عبر الرسم المتحرك ، سيتغير لون خلفية العنصر المحدد من الأحمر إلى الأصفر. تُستخدم النسب المئوية عادةً لتحديد توقيت الرسوم المتحركة. ومع ذلك ، يمكن استخدام from and to بدلاً من 0٪ و 100٪ على التوالي.

الخطوة 2: قم بإنشاء ملف animate.css الخاص بك

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

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

 keyframes slideInRight {
من {
-webkit- تحويل: translate3d (100٪ ، 0 ، 0) ؛
التحويل: translate3d (100٪، 0، 0) ؛
الرؤية: مرئي
}
إلى {
-webkit- تحويل: translate3d (0 ، 0 ، 0) ؛
التحويل: translate3d (0، 0، 0)؛
}
}

ثم يتعين علينا ربط هذا الإطار الرئيسي بفئة CSS. في هذه الحالة ، تمت تسميته slideInRight. سيتم وضع هذا الرمز مباشرة بعد الإطار الرئيسي أعلاه في الملف:

 .slideInRight {
 -webkit-animation-name: slideInRight ؛
 اسم الرسوم المتحركة: slideInRight ؛
 }

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

الخطوة 3: قم بتحميل ملف animate.css إلى موقعك

بمجرد اكتمال ملف animate.css ، ستحتاج إلى تحميله إلى دليل المظهر الخاص بك. للقيام بذلك ، قم بالوصول إلى موقعك باستخدام بروتوكول نقل الملفات (FTP) وعميل FTP مثل FileZilla. يمكنك العثور على بيانات الاعتماد اللازمة في حساب الاستضافة الخاص بك.

ستحتاج إلى إدخال دليل public_html الخاص بك ، والانتقال إلى wp-content> السمات ، والعثور على مجلد المظهر النشط (أو السمة الفرعية):

ابحث عن دليل فرعي يسمى css . إذا كان أحدهما موجودًا ، فقم بتحميل ملف animate.css (أو ملف animate.mini.css من Animate.css) إليه. في حالة عدم وجود هذا المجلد بالفعل ، يمكنك بسهولة إنشاء دليل فرعي جديد وتسميته وفقًا لذلك:

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

الخطوة 4: استدعاء Animate Stylesheet عبر function.php

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

 add_action ('wp_enqueue_scripts'، 'wpb_animate_styles') ؛
دالة wpb_animate_styles () {
 wp_enqueue_style ('animate-css'، get_stylesheet_directory_uri (). '/css/animate.css'، '3.5.0'، 'all') ؛
}

لاحظ أنه إذا قمت بتحميل ملف animate.min.css من Animate.css ، فستحتاج إلى استخدام animate.min.css في السطر الأخير بدلاً من animate.css.

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

الخطوة 5: تطبيق الرسوم المتحركة باستخدام فئات CSS

يمكنك الآن تطبيق أي فصل دراسي في ملف animate.css على العناصر الموجودة في مشاركاتك وصفحاتك. إذا كنت تستخدم ملف Animate.css ، فيمكنك الرجوع إلى قائمة كاملة بكل ما يتضمنه على GitHub.

انتقل إلى المنشور أو الصفحة التي تحتوي على العنصر الذي ترغب في تحريكه. في المحرر الكلاسيكي ، انتقل إلى محرر النصوص. إذا كنت تستخدم Block Editor ، فانقر على أيقونة ثلاثية النقاط من شريط أدوات الحظر وحدد Edit as HTML :

بعد ذلك ، أضف فئة الرسوم المتحركة وفئة الرسوم المتحركة الخاصة بك إلى علامة العنصر:

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

يمكنك تكييف هذه العملية لدمج أي رسوم متحركة في ملف animate.css الخاص بك.

حافظ على موقعك يبدو رائعًا مع WP Engine

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

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