كيفية إضافة شريط تمرير قبل وبعد في ووردبريس

هل أنت مصمم أزياء، أو مصمم ديكور، أو منسق صور، أو أي محترف آخر يحتاج إلى عرض النتائج المرئية لعمله؟ يعد شريط التمرير “قبل وبعد” المعروض على موقعك الإلكتروني سهل الاستخدام وينقل القيمة التي تقدمها على الفور. لسوء الحظ بالنسبة لمستخدمي ووردبريس (WordPress)، لا تحتوي المنصة على ميزة شريط التمرير الأصلية.

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

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

Watch on youtube

How to Add a Before and After Slider in WordPress

الخيار 1: تثبيت إضافة شريط تمرير في ووردبريس 

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

تضيف بعض الإضافات ملفات CSS وJavaScript إضافية عبر موقعك، مما يزيد من أوقات تحميل الصفحة. بالإضافة إلى ذلك، فإن أدوات بناء الصفحات “الثقيلة”، مثل Elementor، تجبرك على إدارة شريط التمرير عبر أكواد قصيرة (Shortcodes) معقدة (أكواد نصية خاصة بووردبريس)، وهو ما قد يكون كابوساً للمستخدمين المبتدئين. إذا قمت بحذف جزء من الكود عن طريق الخطأ، سيتعطل شريط التمرير على الفور. علاوة على ذلك، تعتمد بعض الإضافات على نموذج عمل مجاني (Freemium)، حيث يتم قفل الميزات المتقدمة وراء جدار الدفع.

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

1. تثبيت الإضافة: انتقل إلى لوحة تحكم ووردبريس وانقر على إضافات (Plugins). أدخل “before-and-after slider” في شريط البحث، وحدد الإضافة التي تريد استخدامها من نتائج البحث. (يوجد العشرات منها. اطلع على قائمة أفضل إضافات ووردبريس لمهام من أنواع أخرى.)

اتبع التعليمات لتثبيت الإضافة. (تعتمد تعليمات التثبيت الدقيقة على الإضافة المحددة.)

لاحظ أنه بينما العديد من الإضافات مجانية، إلا أن البعض الآخر له تكلفة تُدفع لمرة واحدة. وفي معظم الحالات، يمكنك استخدامها فقط مع خطة ووردبريس مدفوعة.

2. إنشاء شريط التمرير قبل وبعد: افتح الإضافة من لوحة تحكم ووردبريس. حدد خيار إنشاء شريط تمرير قبل وبعد جديد. قم بتحميل صورك (قبل وبعد). لاتباع أفضل الممارسات، استخدم صوراً لها نفس الإطار والأبعاد.
3. تخصيص شريط التمرير قبل وبعد: تتيح لك معظم الإضافات ضبط إعدادات مثل تسميات الصور، وموضع البداية، ومظهر المقبض، واتجاه شريط التمرير. اضبط إعداداتك واحفظها.
4. إضافة شريط التمرير قبل وبعد إلى موقع ووردبريس الخاص بك: افتح صفحة ووردبريس التي تريد أن يظهر فيها شريط التمرير. بناءً على الإضافة، يمكنك إضافته عن طريق إنشاء مكون ووردبريس (Block) مخصص أو عن طريق إضافة كود قصير (Shortcode) إلى الصفحة.

الخيار 2: استخدام أداة شريط تمرير مجانية وبدون كود (موصى به) 

إذا كنت لا ترغب في التعامل مع الأكواد القصيرة (Shortcodes) المملة أو الإضافات الثقيلة التي تجعل موقع ووردبريس الخاص بك بطيئاً في التحميل، فإن خيارك الأفضل هو استخدام أداة شريط تمرير (Widget) بدون كود. تعد أداة Jotform Before and After Slider مجانية تماماً وسهلة الاستخدام. ونظراً لأن الأداة تعمل بدون خادم (serverless)، فلن تؤثر على سرعة موقعك على الإطلاق. وتعمل بشكل مثالي على أجهزة الكمبيوتر المكتبية والهواتف الذكية.

تقدم أداة Jotform Before and After Slider واجهة مرئية دون الحاجة إلى برمجة. ما عليك سوى تحميل صورتين في منشئ الأداة، وتخصيص ألوان مقبض السحب، وتعيين موضع البداية الافتراضي. ثم انسخ الكود والصقه في ووردبريس.

إليك المزيد من التفاصيل:

1. إضافة أزواج الصور: توجه إلى صفحة أداة Jotform Before and After Slider، وقم بتحميل صورك (قبل وبعد) في مربع إعدادات الأداة. قم بتعديل عنوان الأداة الخاصة بك، وحدد نوع التفاعل الذي تريد تقديمه (السحب والنقر مقابل التمرير). انقر أو اضغط على متابعة.

2. تخصيص إعدادات شريط التمرير: يمكنك ضبط الإعدادات، مثل نسبة الصورة، ونصف قطر الزاوية (corner radius)، وسمك الفاصل، وألوان شريط التمرير. قم بالتمرير لأسفل لتحديد جميع مواصفاتك.

3. الحصول على كود التضمين لأداة شريط التمرير: انقر أو اضغط على جربه على موقعك مجاناً (Try It on Your Website for Free). ستوفر Jotform كود تضمين لأداة شريط التمرير. انقر أو اضغط على نسخ (Copy). ستطالبك Jotform بالتسجيل أو تسجيل الدخول للحصول على الكود.

4. لصق كود تضمين شريط التمرير في ووردبريس: انتقل إلى موقع ووردبريس الخاص بك، وأضف مكون HTML مخصص (Custom HTML) من أداة إدراج المكونات (Block Inserter). الصق كود التضمين في مكون HTML. انقر أو اضغط على تحديث (Update). سيقوم ووردبريس تلقائياً بإدراج أداة شريط التمرير قبل وبعد في موقع ووردبريس الخاص بك.

الخيار 3: برمجة شريط تمرير مخصص باستخدام HTML/CSS 

إذا كنت من مستخدمي ووردبريس الذين يفضلون تجنب الإضافات الخارجية أو الأدوات من جهات خارجية، فيمكنك بناء شريط تمرير من الصفر باستخدام كود برمجي أساسي.

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

إليك كيفية إضافة شريط تمرير قبل وبعد في ووردبريس باستخدام كود مخصص:

1. تحميل صور قبل وبعد: أضف كلتا الصورتين إلى مكتبة وسائط ووردبريس (WordPress Media Library).
2. إنشاء كود HTML/CSS مخصص لشريط التمرير: اكتب كود HTML/CSS لهيكلة وتنسيق شريط التمرير. قد تحتاج أيضاً إلى JavaScript لإضافة تفاعل السحب والتمرير.

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

انسخ الكود.

3. إضافة الكود إلى موقع ووردبريس الخاص بك: في موقع ووردبريس الخاص بك، أضف مكون HTML مخصص (Custom HTML) ، والصق الكود الخاص بك في المكون. أضف CSS وJavaScript حسب الحاجة من خلال قالب ووردبريس أو إعداد الموقع.

عزز موقع ووردبريس الخاص بك بأدوات ذكية وبدون كود 

إذا كنت ترغب في إعطاء الأولوية لسرعة الموقع وأمانه، وإبقاء التكاليف منخفضة، وتجنب الأكواد المعقدة، فإن أداة Jotform Before and After Slider تعد طريقة ممتازة لإضافة وسائط تفاعلية غنية إلى موقعك الإلكتروني. إنها مجانية تماماً للاستخدام، ومثالية للمبتدئين والمحترفين، ولا تتضمن كتابة أي كود.

ولكن هذا ليس كل ما تقدمه Jotform!

في دليل أدوات موقع Jotform، ستجد أكثر من 150 أداة مجانية للموقع الإلكتروني يمكنها تحسين موقع ووردبريس الخاص بك. على سبيل المثال، تعد أداة عداد الزوار (Visitor Counter) طريقة رائعة لعرض مدى شعبية موقعك، بينما تساعد أداة مؤقت العد التنازلي (Countdown Timer) في بناء شعور بالإلحاح حول الأحداث والحملات المهمة.

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

توفر Jotform خطة مجانية. جربها للبدء في استكشاف الأدوات (widgets) ومعرفة مدى سهولة تحسين وظائف موقع ووردبريس الخاص بك دون التضحية بالأداء أو كتابة أي كود.