المقـدمـة: كيفية إضافة قائمة أو عنصر عائم في WordPress
مرحباً بك! يبدو أنك أنشأت موقعاً رائعاً على ووردبريس ! مبروك ومزيداً من التألق !
إن لم تكن قد أنشأت موقعك ووردبريس بعد، فيمكنك الاستئناس بهذا الموضوع لمعرفة ما هو ووردبريس ؟ ومن هنا يمكنك معرفة كيفية تثبيته . وأيضاً تثبيت القالب بطرق صحيحة . وحتماً ستحتاج إلى تثبيت المكونات الاضافية لأنها تختصر عليك الوقت وتزيّن موقعك بخصائص فنية مميزة ليظهر أكثر حُسْناً ومواكبةً للجديد في عالم الويب المتسارع ،
أنت تدرك أنَّ زوار موقعك ينقرون على ما يثير انتباههم ، لذلك، عليك أن تسلط الضوء على العرض الرائع الذي تُقدمه الآن. فهو إما أن يكون صفحة أو مقالة أو منتوجاً جديداً ، وينبغي تشجيع زوار موقعك على التوجه إليه بشكل يثير فضولهم.
تابع معي خطوة .. بخطوة « كيفية إضافة قائمة أو عنصر عائم في WordPress » والقادم أجمل ..
العنصر العائم يشجع الزوار للتحول إليه
كيفية إضافة قائمة أو عنصر عائم في WordPress
كيفية تسليط الضوء على أحد عروضك المميزة ، وتشجيع زوار موقعك للتحول إليها؟
هناك طريقة بسيطة وفعالة لجذب زوار موقعك إلى معروضاتك على صفحات موقعك ، فقط قم بإعداد لافتة عائمة في الشريط الجانبي! ولماذا لا تغتنم الفرصة لجعل قائمتك عائمة أيضاً ، لتمكين تنقل الزوار داخل محتواك بكل سهولة ويسر ..
صراحةً وبشكل ملموس ، بمجرد أن يصبح العنصر الذي اخترته عائماً ، سيظل ثابتاً أثناء التنقل في صفحتك. بمعنى أكثر وضوحاً ، عندما تقوم بالتمرير لصفحة نزولاً وصعوداً ، لن يكون هناك اختفاء للعنصر حتى وإن كانت صفحتك طويلة، إذ سيظل العنصر اللاصق عائماً وقابلاً للنقر عليه في جميع الأوقات.
ما الهدف من إضافة العنصر العائم لصفحتك؟
الهدف من إضافة العنصر العائم في صفحتك هو جذب انتباه المستخدم دون تشتيته عن القراءة. تقوم القائمة العائمة بتوجيه القارئ وتحويله إلى حيث تُريده أنت أن ينتقل.
لاحظ مثلاً ، الكيفية التي يعرض بها Jabism.com أخر عنصر في القائمة الجانبية، قد تكون إعلان أو قائمة. فهذا العنصر يبقى ثابتاً إلى نهاية تمرير الصفحة.
لتتمكن من تحقيق هذه الميزة بموقعك WordPress ، عليك ان تستخدم المكون الاضافي Sticky Menu & Sticky Header.
تثبيت القائمة أو أي عنصر خلال التمرير
Sticky Menu & Sticky Header
يسمح لك المكون الإضافي Sticky Menu بتثبيت أي عنصر في موقعك على الشاشة.
يكفي أن تكون مُبدعاً ، ليكون كل شيء مسموح به على وجه التقريب: قائمة التنقل ، وكذا عناصر واجهة المستخدم ( الودجات ) ، والاشتراك في رسالتك الإخبارية ، وزر المشاركة على الشبكات الاجتماعية …
كل هذا ممكن وأكثر ، كل ما عليك فعله هو اختيار أفضل مكان لعرض عنصرك العائم:
- في الجزء العلوي من صفحتك : يمكنك اختيار القائمة أو العنوان الرئيسي أو سلَّة العملاء لمتجر ؛
- في الشريط الجانبي : يمكنك عرض أشياء مختلفة في الودجات ؛
- في أسفل الشاشة : أشياء أخرى مثل أزرار المشاركة في مواقع التواصل الاجتماعي.
دعنا نعود إلى المكون الاضافي الذي رشحناه لموضوعنا هذا. فهو مجاني للتنزيل ويحتوي على أكثر من 100000 عملية تثبيت نشطة حتى الآن ، مع تصنيف 5/5 نجوم من مجتمع ووردبريس. وهو دائم التحديث، آخر تحديث كان قبل أسبوع واحد من كتابة هذا المقال. يعمل مع كل نسخ ووردبريس.
ماذا بعد تحميل المكون الاضافي؟
بعد تنزيل المكون الإضافي وتثبيته وتنشيطه ، انتقل إلى الشريط الجانبي للوحة تحكم ووردبريس ، ثم من قسم “الإعدادات” إختر « Sticky Menu (or Anything!) » . كما في لقطة الشاشة التالية : 
كيفية جعل عنصر يطفو على منشور ووردبريس (sticky)
الآن ، كن مستعداً وركز جيّداً : رغم أنَّ هذا المكون الإضافي يجعل عملك أسهل بكثير ، فلا يـزال يلزمك عمل أكثر مع شيئ من الشجاعة ، أؤكد لك أنه لن يكون الأمر صعباً، لتحديد العنصر الذي تريد تثبيته ، عليك أولاً تحديد ID أو فئته.
للقيام بذلك ، انتقل إلى الصفحة التي تختارها على موقعك ووردبريس ، ثم انقر بزر الماوس الأيمن على العنصر الذي تريده أن يطفو على الصفحة ثم اختر « فحص » أو « Inspecter » حسب لغة الويندوز .
بعد ذلك ستحتاج فقط إلى تمرير الماوس فوق العنصر المعني ! وبشكل مُلْفِت ، يتم تمييز سطور الشفرة المقابلة. وبعدها يلزمك فقط كتابة المعرف ID .
يبدو أن العملية سهلة جداً ، لا تحتاج إلى رياضيات وفهم كثير بالبرمجة ،
عليك فقط نسخ المعرف المعروض. بشكل افتراضي ، الذي سيبدو مثل هذا:
|
1 |
id="custom_html-27". |
كل ما عليك فعله هو لصق هذا المعرف في إعدادات الامتداد ، في مربع “Sticky Element: (required)“.
أضف علامة هشتاغ « # » في المقدمة مباشرةً ، كما هو موضح أدناه:
رغم أن طريقة العثور على المحدد الصحيح بسيطاً وسريعاً ، إلا أنَّ الأمر ليس صحيحاً بالنسبة لمستخدمي ووردبريس المبتدئين . إذا لم تكن لك دراية وخبرة بلغة CSS فإن الأمر يظل معقداً نسبياً.
للمضي قدماً في التعامل مع ووردبريس . أنصح جميع المستخدمين بتعلم أساسيات لغة CSS لأنها ستجعلك أكثر إلماماً بالتعديلات داخل موقعك . فهي تمكنك من معرفة كيفية تخصيص مظهر أي موقع WordPress.علاوة على ذلك ، فإن معرفتك بأساسيات CSS ، ستمكنك أيضاً من إنشاء عناصر جميلة في محتواك .. وإليك بعض المقالات التي ستفيدك وتحمسك لتعلم CSS من أجل ووردبريس:
أترك مساحة خالية في أعلى الصفحة
بشكل افتراضي ، يقوم المكون الإضافي Sticky Menu بلصق العنصر في أعلى الشاشة. و قد تُفَضِّل أنت ترك بعض المساحة ، أو حتى إبقاء العنصر عائماً في منتصف الصفحة. في هذه الحالة ، ومهما يكن اختيارك ،أدخل الهامش المطلوب بالبكسل.كالتالي :
كيف تجعل العرض متجاوب وغير مزعج لبعض للمستخدمين؟
للحصول على تجربة مستخدم أفضل ، يمكنك تخصيص نقاط توقف العرض الخاصة بالعنصر ، واختيار إزالة العنصر العائم.
حسب حجم الشاشة التي تستخدمها:
- على شاشات أصغر من x بكسل
- على الشاشات الأكبر من x بكسل.
أخيراً ، تذكر حفظ الإعدادات قبل مغادرة لوحة القيادة … تجنباً لإعادة تهيئة كل شيء مرة أخرى. وذلك بالنقر على زر Save Changes الموجود بالأسفل .
الإعدادات المتقدمة
للمزيد من الدقة والضبط ، تسمح لك بعض الإعدادات المتقدمة بالمضي قدماً في الاعدادات :
- يسمح لك خيار Z-index بتركيب العنصر العائم فوق عناصر المظهر الخاص بك. حدد فقط قيمة (مثل 100 أو 1000 أو أكثر) إذا ظهر العنصر الخاص بك تحت عنصر آخر ؛
- « Push-up elements » عناصر الضغط: يزيل العنصر العائم عندما يصل إلى مستوى معين من الصفحة ، وعادة ما يكون التذييل (footer ) ؛
- « Legacy mode » : في حالة ما إذا أردت استخدام إصدار أقدم من هذا المكون الإضافي لجعله متوافقاً مع قالبك الخاص. أما إذا قمت بتثبيته للتو ، فلا تلمسه ؛
- « Debug mode » : لحل المشكلات الناتجة عن الاختيار الخاطئ للمحددات.
في حقيقة الأمر هناك عدة مكونات إضافية لووردبريس تقوم بأدوار مماثلة . وإليك إضافة مماثلة :
إنشاء عنصر يَطْفُو في sidebar بشكل مميز
قناتي على اليوتوب
أرى أن هذه المواضيع قد تهمك: