كيفية إنشاء سلايدر ووردبريس

إنشاء WordPress Slider


المقــدمــة: كيفية إنشاء سلايدر ووردبريس

لا شك أنك رأيتَ السلايدر ” Slider ” في مواقع الويب التي تملأ الشبكة العنكبوتية ، وحاولتَ فَهْمَ كيفية تركيب هاته العناصر الجميلة في موقعك لكنك لم تُوَفَّق، أو قد تكون قد ركبتها لكنك لم تستوف حقها. اليوم سنتعرف على سلايدر ووردبريس .إنها سهلة التنفيذ وهي في حقيقة الأمر تزيد الموقع رونقاً وجمالاً، خصوصاً إذا استخدمتَ صوراً جذابة و مقنعة. وليس هذا فحسب، بل يمكنك استخدام سلايدر ووردبريس « WordPress Slider » للقيام بأشياء ممتعة كإضافة تأثيرات الانتقال.

Slider  = سلايدر = شريط التمرير

كيف يتم إدراج سلايدر بموقع ووردبريس؟


 

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

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

 إعداد WordPress Slider وإضافة الوسائط التي يجب استخدامها.
 إنشاء سلايدر ووردبريس الخاص بموقعك.
 وضع السلايدر  في أي مكان تريده بموقعك.

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

إذن على بركة الله نبدأ

متى يمكنك استخدام شريط تمرير WordPress؟


 

هذه صورة تقريبية لعرض ووردبريس بموقعك

قبل الاستمرار في الشرح لا بد أن أعطي لمحة ولو بسيطة عن التعريف بالسلايدر:

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

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

مع شريط التمرير ( Slider ) يمكنك أن تفعل أشياءً كثيرة لجلب الزوار نحو موقعك:

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

وعليه، فإن استخدام السلايدرات ” Sliders ” ، مرهون بما سيقدمه موقعك من منتجات ورسائل كأهداف معتمدة. 

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

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

كيفية إنشاء شريط تمرير ووردبريس «Slider »


شرح المكون الإضافي Master Slider


 

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

اخترت لكم المكون الاضافي «  Master Slider »  كنموذج، لأنه سهل الاستخدام ، ويوفر العديد من الميزات الترفيهية ويسمح لك بتكوين العديد من السلايدرات التي تناسبك. وهو دائم التحديث ويتناسب مع آخر إصدار لووردبريس.

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

إذن، قم بتثبيت المكون الاضافي لنبدأ في تركيبه وضبط إعداداته.

الخطوة 1: قم بإعداد WordPress Slider وأضف الوسائط التي تريد استخدامها

 أولاً: إعداد السلايدر  وإضافة الوسائط


هذا الرابط قد يهمك: كيفية تثبيت إضافات ووردبريس بطرق صحيحة

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

إذن علينا البدأ بإنشاء سلايدر جديد . أنقر على زر “إنشاء سلايدر جديد” « create new slider » كما في الصورة:

 

انشاء سلايدر في ووردبريس

كيفية إنشاء سلايدر ووردبريس

بالضغط على زر « create new slider » ستدخل على صفحة بها عدة صور لإنشاء اسلايدر . أنقر على زر CREATE  في الأسفل.

 

ستدخل على صفحة :

اختر الصور من الوسائط بالضغط على Add Slide . وعند الدخول إلى صفحة الوسائط قم بتحميل الصور التي ترغب في إنشاء اسلايدر بها. فأنا اخترت في المثال تحميل مجموعة صور للطيور:

بعد استكمال التحميل انقر على زر«إدراج في المقالة» لتظهر علامة تبويب SLIDES على هذا الشكل داخل برنامج Master Slider:

 

كيفية إنشاء سلايدر ووردبريس

بهذه المجموعة من الصور سنقوم بتكوين شريط تمرير « Slider »  مخصص بسيط لنرى نتيجة عملنا وكيف تعمل.

إذن سنُبْـقي على علامة التويب SLIDES مفتوحة  لأنها هي من  تحتوي على جميع  الصور التي نريد تضمينها في شريط التمرير Slider وننتقل إلى الخطوة التالية.

 ثانياً: القيام بإنشاء سلايدر ووردبريس WordPress Slider


في هذه الخطوة سنعمل على إعداد كيفية عمل  WordPress Slider :

أولا قم باختيار أحد الصور من المجموعة ( رقم1)  ثم مَـرِّرْ الصفحة  لأسفل واختر قسم “Background” في علامة التبويب كما هو مبين في الصورة ( رقم2 ) . سترى الصورة المحددة ( رقم3 ) . ثانياً سنبدأ بتكوين خلفية فريدة  باستخدام صورة تم اختيارها ، وكذلك الألوان والنص الذي تريده:

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

عند الانتهاء ، ستحتاج إلى الانتقال إلى علامة التبويب SLIDER CONTROLS. هنا يمكنك اختيار نوع الأوامر التي تريد أن يستخدمها المؤشر الخاص بك. يسمى الإختيار الافتراضي« الأسهم » “Arrows” ، ومن خلالها اختر ما تريد:

وأيضاً مثل هاته:

كيفية إنشاء سلايدر ووردبريس

بالطبع ، أنت حر في اختيار نظام التحكم الذي تفضله.

الآن إلى علامة التبويب لإعدادات شريط التمرير « SLIDERS SETTINGS »،لأنه ما يزال بإمكانك تعديل WordPress Slider.

هناك خيارات مهمة تنتظرك للتعرف عليها، ستجد على سبيل المثال خيارات لتحسين العرض و الإرتفاع لشريط التمرير ، كما يمكنك إعطاء إسم مناسب لهذا اسلايدر  والذي سيظهر في علامة تبويب Master Slider بشكل جميل يجعلك تدخل للمشروع الذي تريد دون مضيعة للوقت:

 

ليس هذا فقط، بل قم  بتمرير  الصفحة قليلاً نحو الأسفل ، لأنه ما زالت هناك تأثيرات انتقال بسيطة لاسلايدر « Slider Transition ».

ضع في اعتبارك أن الإصدار المجاني من Master Slider له تأثيران فقط: Normal و Fade. أنصح باستخدام الخيار الأول  ( Normal ) لأنه يوفر انتقالًا محدداً لشريط النشر لووردبريس:

 

 

ما زالت بعض الخصائص تدعونا إلى النزول للأسفل حيث يمكنك استخدام Skins في  قسم المظهر « Appearance »

إنها نماذج اسلايدر التي تسمح لك بتغيير مظهرها.

حتى الآن تمكنا في أمثلتنا من إظهار الشكل الافتراضي ، ولكن هناك خيارات رائعة أخرى يمكنك استخدامها.

 

 

بمجرد الانتهاء من اختيار استايل  اسلايدر  ووردبريس وتركيب كل ما يلزم  ، اضغط على الزر “حفظ التغييرات”  « Save Changes » ثم انتقل إلى الخطوة الأخيرة.

الخطوة 3: ضع شريط التمرير الجديد الخاص بك أينما تريد

 ثالثاً: ضع اسلايدر في المكان الذي تـريــد


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

للعثور على هذه الرموز المختصرة ، انتقل إلى علامة تبويب Master Slider بلوحة القيادة واستشر عمود Shortcode:

 

 

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

 

 

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

تَذَكَّــرْ:

يجب أن تعلم  أنه يمكنك إنشاء أكبر عدد تريده من Sliders باستخدام المكون الإضافي Master Slider. ويمكنك أيضاً حتى حذف العناصر التي لم تعد ترغب في استخدامها من علامة تبويب Master Slider من خلال النقر على  زر Delete  الموجود بجانب العنصر الذي تود حذفه.

إضغط على delete لحدف أحد عناصر Master Slider

الآن وقد تَبَيَّنَتْ لك وظيفة اسلايدر، يمكنك البدء في إنشاء أفضل شرائط التمرير لموقعك! ومن الآن ستبدأ بتدقيق الملاحظة في المواقع التي تستعمل اسلايدر، ومنها ستستلهم تصاميمك في هذا المكون، وفي بدائل أخرى التي سنلقي عليها نظرة عابرة لنلاحظ الفرق وكيفية اختيار الأفضل لاستخدامه.

لا تنسى أن تطلع على المزيد من المكونات الاضافية التي تقوم بنفس المهام مع اختلافات في المميزات وكيفية استخدامها من هنا👇 :

ما هي أفضل ملحقات WordPress Sliders ؟


الخاتمــة:

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

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 445 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

428 عدد المشاهدات لهذا المحتوى
Scroll to Top