القائمة الرئيسية

الصفحات

كيفية إنشاء شريط تمرير ديناميكي في WordPress

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


كيفية إنشاء شريط تمرير ديناميكي في WordPress


ما هو المحتوى الديناميكي


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

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

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

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

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


يوجد أدناه مدونة WPExplorer. في كل مرة ينشر فيها WPExplorer منشورات مدونة جديدة ، فإنه يظهر تلقائيًا على أنه أحدث منشور في أعلى اليسار.

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

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


أفضل حل هو إنشاء قالب لعرض مشاركاتك المخصصة . في هذا القالب ، يمكنك إضافة محتوى ديناميكي لعنوان المنشور والصور والسعر وغير ذلك الكثير. هذا يعني أنه عند النقر الآن على كل مشاركة مختلفة للجولة ، سيتغير المحتوى. على سبيل المثال ، سيحتوي منشور جولة حول Semuc Champey على محتوى عن Semuc Champey في حين أن منشور جولة حول The Valley of the Kings سوف ... حسنًا تحصل على الفكرة.


ما نوع المتزلجون الديناميكي الموجودون


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


1. منزلق الصورة الديناميكي


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

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

أسهل طريقة للقيام بذلك هي عن طريق إنشاء شريط تمرير صورة ديناميكي. بينما يعرض شريط تمرير الصورة الثابتة نفس الصور سواء نقرت على "Downtown Fitness Center" أو "Balance Gym" ، فإن شريط تمرير الصورة الديناميكي يعرض الصور التي أضفتها إلى كل من تلك المنشورات في النهاية الخلفية.


2. شريط تمرير محتوى المنشور الديناميكي


كيفية إنشاء شريط تمرير ديناميكي في WordPress


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

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

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

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


ما هي أفضل الإضافات لإنشاء منزلقات ديناميكية


هناك عدد من الإضافات المنزلق الرائعة التي تضمن أنه يمكنك تضمين كلا النوعين من أشرطة التمرير الديناميكية بغض النظر عن قدرتك على الترميز.


1. مجموعة الأدوات


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

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


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


2. ثورة المنزلق


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

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


تقدم Slider Revolution أكثر من 200 نموذج حتى تتمكن على الفور من إنشاء مواقع ويب تحتوي على منزلقات.


3. سمارت سلايدر 3


يسمح لك Smart Slider 3 بإنشاء منزلقات ديناميكية بمحتوى تم إنشاؤه من مجموعة من المصادر بما في ذلك منشورات وصفحات WordPress ومنتجات WooCommerce وقنوات التواصل الاجتماعي بما في ذلك Facebook.

باستخدام الإصدار الاحترافي من Smart Slider 3 ، يمكنك استيراد أمثلة شريط التمرير المحددة مسبقًا ويمكنك أيضًا السحب من 20 مصدرًا في WordPress.


كيفية إنشاء شريط تمرير صورة ديناميكي


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


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

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


1. قم بإنشاء نوع منشور مخصص بحقول مخصصة


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

نحتاج إلى إنشاء جزأين من المحتوى المخصص - نوع المنشور المخصص والحقول المخصصة.

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

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

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

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

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

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


2. إضافة الوسائط إلى المشاركات


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


ما عليك سوى النقر فوق الزر "+" لتحميل الصور.

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


3. أضف شريط تمرير


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

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


سيعرض شريط التمرير الصور التي تقوم بتحميلها إلى الحقل المخصص.

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


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


كيفية إنشاء شريط تمرير بمحتوى المنشور الديناميكي


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


1. قم بإنشاء نوع منشور مخصص بحقول مخصصة


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


2. إضافة مصادر ديناميكية إلى شريط التمرير


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

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

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

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

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


3. استخدم شريط التمرير


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

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


ابدأ في بناء منزلقات ديناميكية اليوم!

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

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

تعليقات