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

في هذه المقالة، سنوضح لك كيفية إضافة زر بسهولة إلى قائمة هيدر صفحة ووردبريس الخاصة بك.

لماذا إضافة زر في قائمة هيدر الصفحة في ووردبريس؟

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

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

بشكل افتراضي، تبدو هذه الروابط المهمة تمامًا مثل بقية قائمة الهيدر.

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

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

وبناءً على ذلك، دعنا نرى كيف يمكنك إضافة زر إلى قائمة هيدر الصفحة في ووردبريس.

إضافة زر إلى قائمة هيدر الصفحة في ووردبريس

للبدء، تحتاج إلى إضافة الرابط الذي تريد تحويله إلى زر.

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

بعد ذلك، يجب النقر على زر خيارات الشاشة أعلى الشاشة.

سيؤدي هذا إلى ظهور لوحة بها الكثير من الخيارات الجديدة. ما عليك سوى تحديد المربع بجوار “CSS Classes”.

الآن، انقر لتوسيع عنصر القائمة الذي تريد تحويله إلى زر.

ستلاحظ خيار كلاس CSS جديد حيث يمكنك كتابة اسم الكلاس. يمكنك تسمية كلاس CSS بأي اسم تريده، ولكن في هذا الدليل، سنستخدم زر القائمة.

بعد كتابة اسم، انقر على زر “حفظ القائمة” لتخزين التغييرات.

لقد أضفت الأن كلاس CSS مخصصة إلى عنصر القائمة. يمكنك تغيير مظهرها باستخدام كود CSS مخصص. يمكنك إما إضافة هذا الكود عبر أداة التخصيص المضمنة في ووردبريس أو باستخدام اضافة لمقتطف الكود.

إضافة زر إلى قائمة هيدر الصفحة في ووردبريس باستخدام WPCode

أفضل طريقة لإضافة كود مخصص إلى ووردبريس هي استخدام WPCode. إنه أفضل اضافة لمقطف الكود الذي يسمح لك بإضافة CSS وPHP وHTML والمزيد.

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

إذا كنت تريد إزالة الزر في أي وقت، فيمكنك إيقاف تشغيله بنقرة واحدة.

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

بمجرد تنشيط الاضافة، قم بزيارة صفحة Code Snippets » + Add Snippet من لوحة تحكم ووردبريس.

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

الآن، ما عليك سوى تحريك الماوس فوق خيار “Add Your Custom Code (New Snippet)” والنقر فوق الزر “Use Snippet” عندما يظهر.

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

ثم افتح القائمة المنسدلة “Code Type” واختر “CSS Snippet”.

بمجرد الانتهاء من ذلك، ستكون جاهزًا للصق جزء من كود CSS في محرر WPCode:

.menu-button {
background-color:#d7c5fc;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a, .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}

عند إضافة مقتطف الكود أعلاه، تأكد من استبدال menu-button باسم كلاس CSS الخاصة بك.

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

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

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

عندما تكون راضيًا عن الكود، انقر فوق تبديل “Inactive” حتى يتغير إلى “Active”، ثم انقر فوق الزر “Save Snippet”.

الأن، إذا قمت بزيارة موقع ووردبريس الخاص بك، فسترى زر القائمة الرئيسية الجديد قيد العمل.

إضافة زر إلى قائمة هيدر الصفحة في ووردبريس باستخدام أداة التخصيص

إذا كنت لا تريد استخدام اضافة، فيمكنك إضافة كود باستخدام أداة التخصيص المضمنة.

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

للبدء، انقر فوق خيار “CSS إضافي”.

ستشاهد الأن مربع يمكنك من خلاله إضافة كود CSS مخصص.

مرة أخرى، يمكنك استخدام مقتطف الكود أعلاه كنقطة بداية.

عندما تصبح راضي عن مظهر الزر، انقر فوق “نشر” لنشر تغييراتك.

مكافأة: أضف زر “انقر للاتصال” في هيدر الصفحة في ووردبريس

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

لإضافة هذا الزر، قم بزيارة صفحة المظهر » القوائم من لوحة تحكم ووردبريس وقم بتوسيع علامة التبويب “روابط مخصصة” على اليسار.

هنا، أضف رقم هاتف VOIP الخاص بك في عنوان URL وأضف تسمية له. بعد ذلك، انقر فوق الزر “إضافة إلى القائمة”.

بمجرد إضافة زر النقر للاتصال إلى قائمة روابط التنقل الخاصة بك، لا تنس النقر فوق زر “حفظ القائمة” لتخزين إعداداتك.

للحصول على تعليمات مفصلة، ​​قد ترغب في الاطلاع على البرنامج التعليمي الخاص بنا حول كيفية إضافة زر النقر للاتصال في ووردبريس.

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