في بيئة عمل تهيمن عليها عملية الـscroll، يُعتبر توفير قوائم رأسية ثابتة (sticky headers) أمرًا مفيدًا ومحببا لدى المستخدمين، ما يضمن وضوح قائمة التصفح وسهولة الوصول إليها في كل الأوقات.
في حال ما إن لم تكن تستخدم قالبًا يدعمها بشكل مُباشر، يبقى استعمال أحد الملحقات (plugin) المتوافرة بكثرة أسهل طريقة لإضافة التصفح الثابت، سنتعرف في هذا المقال على إيجابيات وسلبيات إضافة هذه الخاصية إلى موقعك إضافة إلى مجموعة من الملحقات الرائعة للقيام بذلك.
إيجابيات وسلبيات القوائم الرأسية الثابتة (Sticky Headers)
أصبحت القوائم الرأسية الثابتة تحظى بشعبية كبيرة في السنوات الأخيرة، لا يعتبر استعمالها موجة موضة عابرة فقط بل ضرورة ملحة في ظل تزايد أهمية الوصول السريع لقوائم تصفح المواقع نظرا لتكاثر الأجهزة صغيرة الحجم بشكل كبير والهبوط المستمر اللانهائي (Infinite scrolling) لصفحات المواقع.
رغم ما أسلفنا الذكر فإن الآراء تنقسم بين مؤيد ومعارض لاستعمال القوائم الرأسية الثابتة، لكل من الفريقين حججه، فلنبدأ بالإيجابيات:
تجربة المستخدم (User Experience)
تعتبر هذه المسألة أكثر النقاط الإيجابية وضوحا وبداهة، فالوصول اللَّحْظي للأقسام الأساسية لموقع ما يجعل عملية التصفح أكثر سرعة، ما يعني امتلاك المستخدمين لحرية الاختيار بشكل دائم بغض النظر عن مدى تعمقهم في جزء ما من المحتوى، ما يعتبر ذا أهمية أكبر عند التصفح باستخدام الهاتف.
الترويج لعلامتك التجارية (Branding)
من خلال إدماج شعارك (logo) في القائمة الرأسية بطريقة تحافظ على الجمالية وتراعي الذوق الرفيع عن طريق استعمال الحجم والتموقع المناسبين، فإنك تجعل أحد أهم عناصر الترويج التجاري في الواجهة بشكل دائم. من البديهي أنك لن تركز على هذا الجانب بشكل كبير في استراتيجيتك الترويجية، لكن ذلك لا يمنع من أنه سيساعد كثيرا في ترسيخ شعارك في الأذهان والرفع من معرفة المستخدمين بمنتوجك مع مرور الوقت.
مقاييس تحليلية أفضل (Better Analytics Metrics)
نظرا لسهولة التصفح التي يوفرها استعمال القوائم الثابتة فإنه من المرجح أن تلاحظ انخفاضا في معدل الارتداد (bounce rate) وارتفاعا في عدد الصفحات المشاهدة عند كل زيارة (page views per visit)، على الأقل هذا ما لاحظت حدوثه على موقعي الخاص، رغم ذلك يبقى تسجيل هذه التغيرات أمرا غير مضمون على أي حال.
وكما هو الأمر بالنسبة لأغلب الأمور فإن القوائم الرأسية الثابتة سيف ذو حدين، يبقى الخطر الأكبر هو أن يؤدي استعمالها إلى إفساد عملية التنفيذ (implementation) بشكل من الأشكال، أبسط مثال على هذا هو جعل القائمة الرأسية كبيرة الحجم أو ظاهرة بشكل مزعج خصوصا عندما يتعلق الأمر بالشاشات الصغيرة.
يعتبر القيام بتوفير هذا النوع من التصفح بشكل جيد نتيجة مباشرة للتجريب والفحص على أرض الواقع باستعمال كل من الأجهزة الحقيقية والأدوات، يبقى استعمال محاكي وضع الهاتف المقدم من جوجل device mode and mobile emulation إضافة إلى خيارات المعاينة المدمجة في حزمة التصميم (design package) التي تعتمد عليها من بين أفضل الطرق لضمان حصول المستخدم على تجربة تصفح سلسة ومنظمة.
يمكنك التعامل مع مظهر قائمتك الرأسية الثابتة بشكل ذكي للتجاوب مع ما يقوم به مستخدموك فعلا وذلك بغرض الحد من شعورهم بفرضها عليهم واقتحامها لشاشاتهم، فلنأخذ على سبيل المثال طريقة تثبيت القائمة الرأسية في Medium حيث تختفي كل من خيارات البحث، التسجيل والتصفح بشكل كامل عند الانتقال لأسفل الصفحة (scroll down) ثم تعود للظهور بشكل تدريجي عند الانتقال للأعلى (scroll up) لإعطائك خيارات التصفح بشكل لحظي في الوقت الذي غالبا ما ستكون تبحث عنها ما يعتبر لمسة بسيطة وفي نفس الوقت مُبْهِجَةً للغاية فيما يتعلق بسهولة الاستخدام إجمالا.
يبقى ثاني أكبر خطر هو الإخلال بعملية التنفيذ (implementation) من الناحية التقنية والحصول على قائمة رأسية مُشَوَّهَة تحجب المحتوى بشكل كلي أو تسبب في أخطاء برمجية مزعجة بلا فائدة تذكر.
تجدون أسفله مجموعة من ستة ملحقات (plugin) انتقيتها لكم لتفادي الوقوع في شرك هذا النوع من المشاكل من خلال تفادي الحاجة لأي نوع من البرمجة المتقدمة إطلاقا.
قبل التطرق لهذه التشكيلة من ملحقات وورد بريس لنلق نظرة على بعض الأمثلة البارزة لاستعمال أنماط التنفيذ المعهودة في التصفح الثابت.
مواقع رفيعة المستوى تستعمل التصفح الثابت (Sticky Navigation)
على غرار مثال Medium الذي تطرقنا له أعلاه، توجد أكثر من طريقة لتقديم التصفح الثابت على موقعك.
يقدم موقع فرقة الروك الإنجليزية Oasis مثالا جيدا لقائمة تصفح رأسية مثبتة بطريقة اعتيادية، يمكنك أن تقوم بالتنقل بأريحية تامة كيفما تشاء داخل المحتوى على شاشة من أي قياس كان دون أن تبتعد أكثر من ضغطة زر أو إبهام عن المحتوى الأساس الذي تنشده بصفتك من معجبي الفرقة.
عند تصفحك للموقع باستعمال الحاسوب فإنك ستجد كل الخيارات معروضة أمامك، أما عندما تقوم بتصغير متصفحك أو استعمال جهاز متنقل فإنك ستلاحظ عددا أقل من الخيارات المحددة بشكل ذكي من خلال الإبقاء على تلك الأساسية فقط إضافة إلى قائمة سريعة (hamburger menu) للتحكم في خيارات التصفح الأساسية من خلال عرض أفقي.
أما بالنسبة لموقع Gareth Emery فأنه يستعمل نمطا مبتكرا آخر من خلال تصغير حجم القائمة بالتزامن مع الانتقال إلى الأسفل (scroll down) من أجل إتاحة مساحة أكبر وتوفير وضوح أكبر.
عند انتقالك إلى جهاز محمول فإنّك ستلاحظ مثالا رائعا عن استعمال القوائم الرأسية في الترويج التجاري (branding) بشكل جيد، حيث يتم تقليص خيارات المستخدمين إلى شعار الموقع وقائمة سريعة (hamburger menu).
رغم أن استخدام القوائم الجانبية الثابتة قد قل في هذه الأيام بشكل كبير إلا أنه كان يعتبر من بين الخاصيات المحددة للأنترنيت في أزمنته الأولى.
يعتبر موقع Squid Compression من بين أفضل الأمثلة حيث يتم استعمال قائمة جانبية ثابتة عند التصفح من خلال الحواسيب والتحول إلى تصفح رأسي بالإضافة إلى قائمة سريعة عند العرض على شاشات أصغر حجما.
الآن بعد أن تعرّفنا على أهمية القوائم الرأسية الثابتة ثم ألقينا نظرة على بعض الأمثلة الحية لم يبق لنا إلا التطرق للأدوات التي ستساعدك على تقديم التصفح الثابت على موقع وورد بريس الخاص بك أنت أيضا.
ملحقات القوائم الرأسية الثابتة لووردبريس
Sticky Header المُقدّم من طرف ThematoSoup
يعتبر ملحق Sticky Header المقدم من طرف ThematoSoup خيارا مباشرا لأصحاب المواقع الذين يرغبون في إضافة وظائف القوائم الرأسية الثابتة.
يقدم لك هذا الملحق خيارات عرض حتى وإن كانت مُقَلَّصَةً قدر الإمكان إلى الأهم فقط فإنها تبقى معقولة للغاية، يتواجد معظمها في Customizer، من خلال استعمال هذا الملحق فإنك تبقى محصورا في مستوى واحد للتصفح مع توفرك على إعدادات بسيطة للتحكم في لون الخلفية، لون الكتابة والعرض الأقصى للقائمة الرأسية.
تتوافر إعدادات أكثر تقدما أيضا، كإمكانية تحديد المسافة التي يجب أن تظهر عندها القائمة الرأسية، أما إن كنت قلقا حول كيفية ظهورها في الشاشات صغيرة الحجم فبإمكانك إخفاء القائمة بشكل كامل بالنسبة لكل الشاشات التي لا يتجاوز عرضها قيمة معينة تحددها أنت.
Sticky Menu (or Anything!) on Scroll
من المؤكد أن لهذا الملحق اسما لا يقع على طرف الألسن، لكنك بالتأكيد لن تخطئه نظرا لدقة وصفه. يعطي هذا الملحق إمكانيات أكبر بخصوص ما يمكن تثبيته من خلال السماح لك بتثبيت في أعلى الصفحة أي عنصر (element) يحمل اسما (name)، قسما (class) أو رقم تعريف (id) خاصا، ما يفتح الباب أمام استعمالات مبتكرة باستخدام الإعلانات (banners) أو الدعوات إلى الإجراء (calls to action) إضافة إلى القوائم الرأسية، ما يستوجب الحذر من التأثير السلبي لقيامك بذلك على تجربة المستخدم كإفساد عملية التصفح أو جعلها أكثر تعقيدا دون فائدة ترجى.
ستحتاج بعض الخبرة في استخدام HTML/CSS حتى تقوم بالعرض كونك ستكون مسؤولا عن الاستهداف الصحيح للمحدد (selector) على الصفحة التي تريد العمل عليها، يعتبر القيام بهذا الأمر بشكل صحيح عملية سهلة نسبيا في أغلب الأحيان.
يتوفر هذا الملحق على خيارات للتحكم في التموضع انطلاقا من أعلى الشاشة كما يمكن تحديد السماح بالعرض فقط لبعض أحجام الشاشات في حال ما إذا كنت قلقا حول كيفية الظهور في الأجهزة الصغيرة.
هنالك أيضا إعدادات خاصية Z-index لجعل ما تريد تثبيته في المقدمة بغض النظر عن أي عناصر أخرى مُتَوَضِّعَة فوقه بغرض ضمان وضوحه في كل الأحيان، إضافة إلى واجهة تصحيح الأخطاء (debug mode) سهلة الاستخدام من خلال استعمال وحدة تحكم المتصفح (browser’s console) لإظهار الأخطاء عند حدوثها.
myStickymenu
رغم أن ملحق myStickymenu تم تصميمه في الأصل ليعمل مع قالب Twenty Thirteen إلا أنه من المفترض أن يعمل بتناغم وسلاسة مع قوالب أكثر حداثة وتجاوبا.
يتميز هذا الملحق بكون جاهزًا للتّرجمة، متجاوب مباشرة عند الحصول عليه كما يتضمن أيضا خيارات لإضافة أكواد CSS متقدمة للتعديل على مظهره.
قام مصممو هذا الملحق بتوفير صفحة تجريبية عملية بغرض معاينة عمل الملحق قبل اتخاذ القرار بتحميله، يصل عدد مرات تحميل هذا الملحق إلى 000 10 مرة كما أنه حصل على تصنيف خمس نجمات ما يدل على أدائه للمطلوب بشكل جيد للغاية بالنسبة للعديد من أصحاب المواقع.
WordPress Notification Bar
تعتبر الخيارات التي قمنا بتغطيتها إلى حد الآن موجهة بشكل أساس لتوفير خيارات التصفح في قائمة رأسية ثابتة، لكن قد يكون كل ما تحتاج إليه مجرد تنبيه أو دعوة إلى إجراء (call to action). للقيام بذلك يمكن استخدام الطرق التقليدية من خلال إبراز العروض الخاصة أو تشجيع المستخدمين على التسجيل في نشرة إخبارية مثلا.
يعتبر ملحق WordPress Notification Bar المقدم من SeedProd الأداة المناسبة لك إن كان إضافة تنبيه أو دعوة إلى إجراء كل ما تريده، حيث يتميز هذا الملحق بكونه سهل الإعداد، يتوفر على إعدادات سهلة لاختيار الألوان المرغوب بها، كما أنه قابل للترجمة (translation-ready) (تتوافر حاليا الترجمة لثمان لغات) فضلا عن دعمه للتنصيب نسخة Multisite من ووردبريس
WPFront Notification Bar
ملحق WPFront Notification Bar هو الآخر موجه لتوفير التنبيهات بشكل أساسي كما يدل اسمه على ذلك. تتميز الخيارات التي يقدمها هذا الملحق بكونها متقدمة نوعا ما مقارنة بالملحقات التي تطرقنا لها سابقا كما أنه يوفر إمكانية القيام بالكثير من التعديلات.
يمكنك تغيير الارتفاع، اختيار العرض الأفقي، تثبيت القائمة في أعلى أو أسفل الصفحة، كما أنك ستملك تحكما كاملا في اختيار وتخصيص الألوان.
يمكنك أيضا تحديد تواريخ بدأ ونهاية عرض القائمة الرأسية (تتجلى أهمية هذه الخاصية عند التعامل مع العروض التي يعتبر الوقت فيها عاملا حساسا) والقيام بحصر عرضها في منشورات معينة ولرتب مستخدمين محددة.
قام مطورو هذا الملحق بالعمل على توفير صفحة أفكار مع عينة من تجارب الاستخدام بغرض إلهام الزوار، إضافة إلى دليل مفصل لكل الخصائص المتوافرة.
Hero Menu – Responsive WordPress Mega Menu
ملحق Hero Menu – Responsive WordPress Mega Menu هو الملحق الوحيد المدفوع في اللائحة التي نقدمها لكم اليوم حيث يبلغ ثمنه 19 دولارا.
يخول هذا الملحق للمستخدمين إمكانية إنشاء مختلف أنواع القوائم في بضع دقائق، سواء تعلق الأمر بالقوائم الضخمة الغنية بالخاصيات أو القوائم المنسدلة البسيطة.
يعمل هذا الملحق بتوافق تام مع WooCommerce، كما تم تجربته بشكل مُكثّف مع العديد من أشهر القوالب الأخرى المدفوعة مثل Enfold، Avada وDivi إضافة إلى كل قوالب وورد بريس الافتراضية من Twenty Eleven إلى Twenty Fifteen. توجد كل المعلومات المتعلقة بالإعداد باستعمال هذه القوالب المشهورة في دليل الاستخدام (integration guide) الخاص بالملحق.
فيما يتعلق بالقوائم الرأسية الثابتة، كل ما تحتاجه هو القيام بضغطة زر على إعدادات الملحق من أجل توفير التصفح الثابت، كما تتوافر لك إعدادات مستقلة للتحكم في الألوان، الشفافية والشعار في حال ما إن أردت إعداد قائمتك الرأسية الثابتة بشكل مختلف عن قائمتك الرأسية العادية. كما تم توفير التوثيق والدعم على الموقع الخاص بالمطورين.
إن كنت تبحث عن قائمة تتضمن كل الخاصيات التي تحتاجها إضافة إلى حل لتوفير التصفح الثابت فإن هذا الملحق يقدم كل هذا بثمن مناسب.
إضافة التصفح الثابت لموقعك
سواء تعلق الأمر بوضع كل دعوات الإجراء في واجهة ومركز موقعك أو ضمان توفر مستخدميك بشكل دائم على خيارات التصفح المناسبة فإن استعمال القوائم الثابتة يبقى أمرا منطقيا للغاية من منظور كل من صاحب الموقع والمستخدمين.
ما قمت بالتطرق له من الملحقات يكفي لتغطية أغلبية وضعيات الاستعمال، لكن من الواضح أن ذلك ليس كل شيء، حيث تظهر المزيد من الخيارات كل أسبوع، إن كنت تفضل إحدى أدوات التصفح الثابت شاركنا إياها في التعليقات أسفله.
ترجمة بتصرف للمقال: HOW TO CREATE STICKY NAVIGATION FOR WORDPRESS لصاحبه: TOM EWER.
أفضل التعليقات
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.