الشريط الجانبي العائم WordPress - احصل عليه يعمل في 3 دقائق!

الشريط الجانبي في مواقع WordPress بارز في الجزء العلوي من موقع الويب الخاص بك.

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

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



بشرط أن يكون على سطح المكتب أو الجهاز اللوحي أو الكمبيوتر الشخصي ، أي.

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

تابع القراءة لمعرفة أي واحد هو!

كيف تحصل على شريط جانبي عائم على موقع WordPress الخاص بك؟

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

تثبيت وتنشيط وإعداد البرنامج المساعد للشريط الجانبي الثابت Q2W3

انقر على 'الإضافات' ، واكتب 'Q2W3' (بدون علامات اقتباس) في شريط البحث أعلى يمين الشاشة ، ثم اضغط على إدخال.

عادة ما تكون النتيجة الأولى هي النتيجة الصحيحة.

القطعة الثابتة Q2W3 لـ WordPress بواسطة Thomas Maier و Max Bond.

  بحث البرنامج المساعد Q2W3

اضغط على 'التثبيت الآن' ، ثم انقر على 'تنشيط'.

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

انقر فوق الإعدادات.

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

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

إذا لم تقم بتغييرها ، يمكنك العثور على الشريط الجانبي العائم يتداخل مع منطقة التذييل.

حقلا 'الهامش العلوي' و 'الهامش السفلي' هو المكان الذي تزيد فيه التباعد بين الشريط الجانبي والرأس (أعلى الهامش) والتذييل (الهامش السفلي).

ستكون هذه مختلفة حسب حجم شعارك ورأسك وتذييلك.

يتشابه عنصر Stop ID مع الهامش السفلي ، فقط بدلاً من استمراره في الطفو حتى الوصول إلى التذييل ، يمكنك تعيين عنصر HTML في صفحتك على أنه المكان المناسب لمنعه من التمرير.

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

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

للعثور على عنصر المعرف ، انقر بزر الماوس الأيمن في متصفحك وحدد خيار 'فحص'.

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

في لقطة الشاشة أعلاه ، يمكنك أن ترى أن العنصر المميز على اليسار هو منطقة عنصر واجهة المستخدم 'بعد الدخول'. على اليمين ، تُظهر المنطقة المميزة المعرف 'custom_HTML-7'.

لإيقاف الشريط الجانبي العائم من التمرير بمجرد تحميل هذا العنصر ، هذا هو المعرف الذي يجب وضعه في حقل Stop ID في الإعدادات العامة.

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

يتم تعيين الفاصل الزمني للتحديث على 1500 مللي ثانية افتراضيًا ومن الجيد تركه على هذا النحو. الحقلين الآخرين فقط لتغييرهما هما 'تعطيل العرض' و 'تعطيل الارتفاع'.

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

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

  • للتعطيل على الهاتف المحمول ، اضبط هذا على التعطيل عند حوالي 500 بكسل. يبلغ عرض معظم الهواتف الذكية 414 بكسل كحد أقصى.
  • لتعطيل الأجهزة اللوحية الأصغر أيضًا ، اضبط عرض التعطيل على حوالي 750 بكسل.
  • يمكن للأجهزة اللوحية الأكبر حجمًا إدارة عرض عرض يبلغ حوالي 990 بكسل.
  • أجهزة الكمبيوتر المحمولة وأجهزة الكمبيوتر المكتبية لها أحجام شاشة في منطقة 1440 بكسل وما فوق.

توجد باقي الإعدادات العامة للتوافق لاستكشاف الأخطاء وإصلاحها.

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

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

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

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

لإيقاف التمرير في التذييل ، يلزم تعيين 'الهامش السفلي' لهذا المظهر على 430 بكسل.

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

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

لمنع التداخل في التمرير المحمول ، تحتاج إلى استخدام وظيفة Stop ID لإيقاف تمرير الشريط الجانبي بمجرد تحميل أدنى عنصر معرف للصفحة على الشاشة.

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

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

هل يمكنني عمل زر عائم في الشريط الجانبي؟

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

يمكن القيام بذلك باستخدام البرنامج المساعد Q2W3 Fixed Widget. أدخل عنصر واجهة مستخدم للصور ، واختر صورة من معرض الوسائط الخاص بك واستخدم حقل 'ارتباط إلى:' لإنشاء ارتباط تشعبي.

بروتوكول الهاتف يجعل أرقام الهواتف قابلة للنقر. الرموز الأخرى التي يمكنك استخدامها لتحل محل بروتوكول الهاتف هي 'callto' لمكالمات Skype ، و 'wa.me ' لمكالمة Whatsapp ، و 'sms' لأزرار النقر للنص ، و 'mailto' لأزرار البريد الإلكتروني التي تطلق تطبيق البريد الإلكتروني عند النقر عليه (أو الضغط على الهواتف الذكية).

هل يمكن جعل الشريط الجانبي العائم ديناميكيًا؟

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

وهو متوافق مع المكون الإضافي Widget Options الذي يتيح لك التحكم في الأدوات التي يتم عرضها على أساس كل صفحة و / أو فئة و / أو منشور.

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