كيفية تفعيل قائمة الرأس الثابتة (sticky header) في ووردبريس

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

(Sticky header) على مواقع الووردبريس، من خلال إضافات الووردبريس أو من خلال أكواد CSS مخصصة. ما هي قائمة الرأس الثابتة (Sticky header)

مصدر الصورة

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

يمكن أن يحتوي رأس موقع الويب أو الهيدر الخاص بالموقع على العديد من العناصر على حسب متطلبات الموقع، ولكن الأمور الشائعة التي يتم تضمينها عادة في هذا القسم هي: شعار أو عنوان الموقع قائمة التنقل الأساسية (Main navigation menu) أيقونة البحث معلومات الاتصال أيقونات التواصل الاجتماعي الإشعارات، أو سلة التسويق أو الاشتراك الذي يحدث في موقعك عندما تقوم بتفعيل خاصية قائمة الرأس الثابتة (سنتحدث عن طرق القيام بذلك في الأسفل)، هو أن هذا الهيدر أو القائمة الرأسية ستبقى ثابتة وظاهرة للمستخدمين أثناء تمريرهم للأسفل أو الأعلى، لتسمح لهم بالوصول لها بسرعة والبحث والتنقل بين كافة العناصر الموجودة فيها دون الحاجة إلى التمرير لأعلى الصفحة. قبل أن نبدأ الحديث بالتفصيل، عن كيفية إنشاء وتفعيل خاصية (Sticky header)، على مواقع الووردبريس، يجب أن نتعرف لماذا يحتاج أصحاب المواقع لهذه الخاصية وماهي أهم ميزاتها وسلبياتها.

أهمية الرأس الثابتة (Sticky header) يلجأ أصحاب المواقع لإنشاء قائمة الرأس الثابتة كي تساعدهم على إنشاء تجربة مستخدم

أفضل،

وجعل موقع الويب سهل الاستخدام، وغيرها من الأمور حيث أن تفعيل هذه الخاصية

يقدم مجموعة من الإيجابيات لمستخدمي الموقع وأبرزها:

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

وحسب دراسة أجرتها

مجلة Smashing ، فإن استخدام قائمة الرأس الثابتة (Sticky header)، يساهم في زيادة سرعة التنقل داخل الموقع بنسبة 22%. 2- توفير الوقت في حال عدم عدم استخدام قائمة التنقل الثابتة، سيتعين على المستخدمين العودة لأعلى الصفحة إذا أرادوا اختيار صفحة أخرى للذهاب إليها، أو أرادوا مثلاً الضغط مثلاً على أحد أزرار التواصل الاجتماعي أو البحث في الموقع أو غيرها من العناصر المعروضة أعلى الموقع.

وبهذا سوف يقضي الزوار الكثير من الوقت في التمرير إلى أعلى موقع الويب للوصول إلى أحد العناصر الموجودة فيه لا سيما إذا كانت صفحات الموقع طويلة و مليئة بالمحتوى. وبالتالي فإن استخدام خاصية (Sticky header) في هذه الحالة سيوفر الكثير من الوقت عليهم.

3- إشهار علامتك التجارية

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

4- زيادة معدلات التحويل

يمكن أن يساعدك تضمين عبارات تحث المستخدم على اتخاذ إجراء (CTA)، في قائمة الرأس الثابتة (Sticky header)، على زيادة معدلات التحويل . كذلك يمكن أن يساعد عرض عبارات مثل (تسجيل اشتراك أو رقم هاتف أو عربات التسوق) أمام المستخدمين بشكل دائم، على رفع معدلات التحويل في موقعك.

سلبيات تفعيل الرأس الثابتة

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

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

(أي تتوافق مع كافة أحجام الشاشات) فقد يسبب ذلك مشاكل عند استعراض الموقع على أجهزة الهاتف المحمول. الحل هنا: هو القيام بعمل التصميم بطريقة جيدة وصحيحة، وتجربة عرض القائمة على العديد من الأجهزة المحمولة للتأكد من ظهورها بالشكل الأمثل. نصائح عند إنشاء قائمة الرأس الثابتة (Sticky header)

عند إنشاء قائمة الرأس الثابت احرص على أن لا يكون حجمها كبيرًا أو يشغل مساحة كبيرة من الشاشة.

والأفضل أن يكون ارتفاع القسم الثابت ما بين 45-50 بكسل.على سبيل المثال يبلغ ارتفاع الـ(Sticky header) في الفيسبوك حوالي 44 بكسل، بينما يبلغ في تويتر 48 بكسل. كذلك احرص على تصميم القائمة أو شريط التنقل الثابت بشكل أنيق وبسيط بحيث لا يحتوي الكثير من العناصر والألوان المشتتة أو العناصر التي لا تقدم أي فائدة.

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

محتويات المقالة ما هي قائمة الرأس الثابتة (Sticky header) أهمية الرأس الثابتة (Sticky header) 1- سرعة التنقل 2- توفير الوقت 3- إشهار علامتك التجارية 4- زيادة معدلات التحويل سلبيات تفعيل الرأس الثابتة 1- شغل مساحة كبيرة 2- مشاكل الهاتف الجوال نصائح عند إنشاء قائمة الرأس الثابتة (Sticky header) 1. تفعيل الـ (Sticky header) من خلال إضافات ووردبريس خطوات استخدام إضافة (myStickymenu) ماذا أفعل في حال لم تعمل خاصية الـ (Sticky header)؟

كيفية استخدام شريط الترحيب (Welcome Bar) 2. تفعيل خاصية الـ (Sticky header) من خلال أكواد CSS أكواد إضافية، يمكنك إضافتها: بالنسبة لأصحاب مواقع الووردبريس، يعد استخدام الـ (Sticky header)، من الأمور الشائعة اليوم

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

1. تفعيل الـ (Sticky header) من خلال إضافات ووردبريس هناك الكثير من الإضافات في الووردبريس، التي تمكنك من تفعيل هذه الخاصية على موقعك بشكل سهل وسلس ومناسب للمبتدئين.

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

myStickymenu عدة مميزات قيمة تساعدك في إضافة Sticky header بشكل مخصص مثل: تثبيت شريط التنقل (قائمة الرأس الثابتة) التحكم بلون الخلفية ولون النص التحكم بنوع التأثير للشريط (Fade or slide effect) تعطيل ميزة الشريط الثابت في الشاشات الصغيرة اختيار الوقت الذي تريد جعل الشريط فيه مرئيًا عند التمرير تحديد وقت الانتقال (Transition Time) تحديد الشفافية (Sticky Opacity) خاصية شريط الترحيب (Welcome Bar خطوات استخدام إضافة (myStickymenu) بداية يجب عليك تثبيت الإضافة، وذلك من خلال الذهاب إلى لوحة تحكم الووردبريس لموقعك، ومن ثم الانتقال إلى التبويب إضافات