كيفية عمل رأس مثبت في WordPress

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

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

أعلى ، أسفل ، يسار ، ويمين

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

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

مدخرات الفضاء

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

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

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

تكوين عناصر لزجة

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

إنشاء رأس مثبت يدويًا

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

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

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

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

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

إنشاء رأس مثبت باستخدام مكون إضافي

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

خلق عنصر

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

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

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

اجعلها تبدو جيدة

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

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

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

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

مؤشر Z هو إعداد اختياري يمكن أن يربك الكثيرين للوهلة الأولى. بسبب هذا وحقيقة أنها ميزة اختيارية ، فمن المحتمل أن يلوح بها الكثيرون ويتجاهلونها. إذا نجح كل شيء ، فربما لن تنظر إلى الوراء أبدًا ؛ ومع ذلك ، إذا كانت هناك مشاكل في الشاشة ، فمن المحتمل أن يكون Z-index حلاً سريعًا للإصلاح. بشكل أساسي ، فكر في الصفحة على أنها مجموعة من الأكوام حيث تحتوي المجموعات الموجودة في الأعلى على أرقام أعلى من تلك الموجودة في الأسفل. لذلك ، إذا كان هناك شيء ما يحجب رأسك اللاصق ، فحاول رفع مؤشر Z (يُقترح 99999 كقيمة تعمل)

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

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

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

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

يعيدنا الجزء الأخير من التحرير المرئي إلى دائرة كاملة لتعديل الرأس اللاصق يدويًا عبر CSS.

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

خيارات متقدمة

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

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

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

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

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

ملخص

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

المؤلف: ماتيج ميلونوجا

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