كيفية إنشاء عنصر واجهة رأس مخصص في WordPress

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

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

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

لماذا تقوم بإنشاء عنصر واجهة مستخدم مخصص في WordPress؟

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

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

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

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

كيفية إنشاء عنصر واجهة رأس مخصص في WordPress

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

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

بمجرد القيام بذلك ، انتقل إلى القسم التالي.

1) إنشاء عنصر واجهة مستخدم مخصص

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

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

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

في هذا العرض التوضيحي ، سنستخدم Code Snippets ، لذلك نذهب إلى Plugins> Add New ونبحث عن المكون الإضافي Code Snippets. ثم نقوم بتثبيته وتنشيطه كما هو موضح أدناه.

بعد التنشيط ، سترى إعدادات المكون الإضافي على الجانب الأيسر. انتقل إلى All Snippets واضغط على Add New لإنشاء قصاصة جديدة.

امنح المقتطف اسمًا ثم الصق المقتطف التالي في قسم الرمز :

 الدالة quadlayers_widgets_init () {
 register_sidebar (مجموعة (
 'name' => 'أداة رأس QuadLayers' ،
 'id' => 'quadlayers-header-widget' ،
 'before_widget' => '<div class = "ql-widget">'،
 'after_widget' => '</div>'،
 'before_title' => '<h2 class = "ql-title">'،
 'after_title' => '</h2>'،
 )) ؛
 }
 add_action ('widgets_init'، 'quadlayers_widgets_init') ؛

ينشئ هذا المقتطف عنصر واجهة مستخدم جديدًا في موقع WordPress الخاص بك يسمى Quadlayers Header Widget.

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

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

2) إضافة القطعة إلى الرأس

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

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

بعد ذلك ، الصق الكود التالي في ملف header.php :

 <؟ php

 إذا (is_active_sidebar ('quadlayers-header-widget')):؟>
 <div class = "ql-widget-area widget-area" role = "completeary">
 <؟ php dynamic_sidebar ('quadlayers-header-widget') ؛ ؟>
 </div>

 <؟ php endif؛ ؟>

بمجرد لصق الرمز ، قم بتحديث الملف.

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

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

هذا يعني أن القطعة والرمز يعملان. باهر!

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

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

3) تخصيص القطعة باستخدام CSS

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

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

 div # quadlayers-header-widget {
 العرض: 100٪؛
 لون الخلفية: # f5f5f5 ؛
 الحد السفلي: 1px صلب #eeeeee ؛
 محاذاة النص: مركز ؛
 }

 أداة .ql {
 العرض: 100٪؛
 لون الخلفية: # f5f5f5 ؛
 محاذاة النص: مركز ؛
 }

 h2.ql-title {
 أعلى الهامش: 0 بكسل ؛
 محاذاة النص: يسار ؛
 تحويل النص: الأحرف الكبيرة ؛
 حجم الخط: صغير ؛
 لون الخلفية: # تأثير ؛
 العرض: 130 بكسل ؛
 الحشو: 5 بكسل ؛
 } 

بمجرد تحديث CSS ، سيبدو كما يلي:

هذا مجرد رمز عينة. يمكنك أن تأخذها كقاعدة وتخصيصها لتكييفها مع تصميم ومتطلبات موقع الويب الخاص بك.

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

استنتاج

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

في هذا المنشور ، أوضحنا لك كيفية إنشاء عنصر واجهة مستخدم مخصص للرأس وتخصيصه بقليل من التعليمات البرمجية. حتى إذا لم تكن لديك مهارات برمجة ، يمكنك اتباع البرنامج التعليمي وإضافة الأداة إلى موقعك. ومع ذلك ، لتغيير أسلوبها ، قد تحتاج إلى بعض المعرفة الأساسية بـ CSS. قد يكون تحرير ملف header.php أمرًا صعبًا اعتمادًا على المظهر الخاص بك ، لذلك إذا كنت تواجه أي مشاكل في ذلك ، يمكنك الاتصال بمؤلف القالب الخاص بك.

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

لمزيد من الطرق لتخصيص رأسك ، ألق نظرة على الأدلة التالية:

• 3 طرق لتخصيص الرأس في ووردبريس
• كيفية جعل رأس Divi لزجًا