هل تريد إظهار Header مخصص لموقع WordPress الخاص بك او تخصيص؟
تأتي العديد من سمات WordPress مع Header مضمّن يقع في الجزء العلوي من كل صفحة. قد تحتاج إلى تخصيصه لإضافة روابط مهمة أو رموز اجتماعية أو بحث في الموقع أو عناصر أخرى لتكوين انطباع أول جيد.
في هذه المقالة ، سنوضح لك كيفية تخصيص Header WordPress الخاص بك وحتى إنشاء رأس مخصص بالكامل لموقعك بالكامل أو لصفحات معينة.
ما هو Header في ووردبريس؟
Header موقع الويب الخاص بك هو القسم العلوي من كل صفحة على موقع WordPress الخاص بك ، وربما يكون أول شيء يراه زوارك.
غالبًا ما يعرض شعار موقع الويب الخاص بك وعنوانه وقوائم التنقل والعناصر المهمة الأخرى التي تريد أن يراها المستخدمون أولاً.
من خلال تخصيص Header موقعك ، يمكنك منحه تصميمًا فريدًا وجعله أكثر فائدة للزائرين. يمكنك الارتباط بصفحاتك الأكثر شيوعًا ، وعرض الرموز الاجتماعية أو رقم هاتف عملك ، وإظهار أزرار الحث على اتخاذ إجراء لمزيد من التحويلات.
دعنا نلقي نظرة على كيفية تخصيص Header WordPress الخاص بك بسهولة.
تخصيص Header باستخدام مُخصص قوالب ووردبريس
تتيح لك العديد من سمات WordPress الشائعة استخدام أداة تخصيص سمة WordPress لإجراء تغييرات على منطقة Header WordPress الخاص بك. تسمى هذه الميزة أحيانًا بالرأس المخصص ، ولكن لا تدعمها جميع السمات.
يجب أن تبدأ بالانتقال إلى المظهر »تخصيص في منطقة إدارة WordPress الخاصة بك.
ملاحظة : إذا كنت لا ترى المظهر »تخصيص في قائمة مسؤول WordPress الخاصة بك ، ولكنك ترى فقط المظهر» محرر (تجريبي) ، فهذا يعني أن المظهر الخاص بك قد مكّن تحرير الموقع بالكامل. في هذه الحالة ، يجب أن تنتقل إلى القسم التالي.
قد يضيف المظهر الخاص بك قسم “Header ” إلى أداة التخصيص ، أو إضافة خيارات Header ضمن قسم “اللون” ، ولكن هذا يختلف من موضوع إلى آخر. وفيما يلي بعض الأمثلة على ذلك.
بعض السمات ، مثل Twenty-One ، لا تقدم خيارات تخصيص الرأس على الإطلاق. في هذه الحالة ، نوصيك باستخدام مكون إضافي منشئ سمة السحب والإفلات مثل SeedProd.
يتيح لك موضوع Twenty Sixteen إضافة صورة خلفية إلى العنوان ، وحتى إضافة صور Header عشوائية .
تقدم بعض سمات WordPress المجانية والمميزة المزيد من خيارات تخصيص السمات. على سبيل المثال ، قد تتمكن من تغيير نمط خط Header والتخطيط والألوان وغير ذلك الكثير. لكنك مقيد بما يتيح لك مطور السمات القيام به.
على سبيل المثال ، يمكنك إنشاء Header مخصص باستخدام أداة تخصيص السمات مع سمة Astra .
لدى Astra خيار “Header Builder” مخصص في اللوحة الموجودة على يسارك. ستجد هنا إعدادات مختلفة لتعديل مظهر ونمط الرأس. يمكنك إنشاء رأس مخصص عن طريق إضافة كتل ، تمامًا كما هو الحال عند تحرير منشور مدونة أو صفحة في محرر محتوى WordPress .
للبدء ، ما عليك سوى التمرير فوق منطقة فارغة في Header والنقر فوق الرمز “+” لإضافة كتلة Header .
بعد ذلك ، يمكنك تحديد أي كتلة تريد إضافتها إلى Header المخصص. على سبيل المثال ، يمكنك إضافة كتلة عنصر واجهة المستخدم وحظر الحساب وحظر البحث والمزيد.
بالإضافة إلى ذلك ، يتيح لك منشئ الرأس أيضًا سحب الكتل وإفلاتها ووضعها أعلى أو أسفل Header .
يمكنك أيضًا تخصيص كل كتلة تضيفها إلى Header .
على سبيل المثال ، يمنحك تحديد كتلة عنوان وشعار الموقع خيارات لتحميل عنوان وشعار موقع وتغيير عرض الشعار وعرض سطر شعار الموقع والمزيد.
إلى جانب ذلك ، يمكنك أيضًا تغيير لون خلفية العنوان أو إضافة صورة خلفية لتظهر في Header .
عندما تنتهي من تعديل Header المخصص ، ما عليك سوى النقر فوق الزر “نشر”.
تخصيص Header باستخدام محرر موقع WordPress
أضاف WordPress تحرير الموقع بالكامل إلى WordPress في الإصدار 6.0 . إذا كان المظهر الخاص بك يدعم الميزة الجديدة ، فإنه يحل محل أداة تخصيص السمات. ومع ذلك ، في هذا الوقت ، لا يوجد سوى عدد قليل من السمات التي تعمل مع محرر الموقع الكامل.
عند استخدام سمة متوافقة ، يمكنك تخصيص Header الصفحة بالانتقال إلى المظهر »المحرر . سيؤدي هذا إلى تشغيل محرر الموقع الكامل ، والذي يشبه تمامًا محرر الكتلة الذي تستخدمه لكتابة منشورات وصفحات WordPress.
عند النقر فوق الرأس ، ستلاحظ تغيير اسم القالب في الجزء العلوي من الصفحة إلى “Header page”.
الآن عند النقر فوق رمز “الإعدادات” على شريط الأدوات ، سترى خيارات لتخصيص تخطيط العنوان ولونه وحدوده وأبعاده.
كمثال ، سنقوم بتغيير لون خلفية Header . أولاً ، تحتاج إلى النقر فوق قسم “اللون” لتوسيعه. بعد ذلك ، يجب النقر فوق خيار “الخلفية”.
ستظهر نافذة منبثقة تسمح لك بتحديد لون خالص أو تدرج. سيكون هناك أيضًا عدد من الألوان التي يمكنك تحديدها. عند النقر فوق أحد الألوان ، سيتم تغيير خلفية العنوان الخاص بك على الفور.
يمكنك العثور على المزيد من خيارات التخصيص بالنقر فوق رمز “الأنماط” في الجزء العلوي الأيسر من الصفحة. سيتيح لك ذلك تغيير خط الرأس وألوانه وتخطيطه.
قم بإنشاء Header مخصص وتخطيطات الصفحة باستخدام SeedProd
إذا كنت ترغب في الحصول على تحكم كامل في Headers و Footes والأشرطة الجانبية لمنح موقع الويب الخاص بك تصميمًا فريدًا ، فإننا نوصي باستخدام SeedProd .
SeedProd هو أفضل مكون إضافي منشئ قوالب WordPress يتيح لك إنشاء سمة WordPress مخصصة بسهولة دون كتابة أي رمز. يتضمن ذلك إنشاء رؤوس وتذييلات وكل شيء آخر لازم لموضوع WordPress جذاب.
يمكنك أيضًا إنشاء أنماط Header مخصصة متعددة لصفحات وأقسام مختلفة من موقع الويب الخاص بك.
ملاحظة: يمكنك استخدام الإصدار المجاني من SeedProd لإنشاء صفحات مقصودة مخصصة بما في ذلك Headers مخصصة ، ولكنك ستحتاج إلى إصدار Pro لإنشاء سمات مخصصة بالكامل تتضمن تخطيطات Header على مستوى الموقع.
كل ما عليك فعله هو النقر فوق ارتباط “تحرير التصميم” الموجود أسفل العنوان.
سيؤدي هذا إلى فتح Header في محرر السحب والإفلات في SeedProd.
من هنا ، يمكنك بسهولة تخصيص Header عن طريق إضافة كتل جديدة.
توجد كتل لعلامات القوالب مثل شعار الموقع وأي من أدوات WordPress الخاصة بك وكتل متقدمة مثل مؤقت العد التنازلي أو قائمة التنقل أو أزرار المشاركة الاجتماعية.
أفضل جزء هو أنه يمكنك تخصيص كل كتلة بشكل أكبر باستخدام أداة إنشاء السمات. على سبيل المثال ، يمكنك تغيير حجم شعارك ومحاذاة شعارك أو اختيار الصفحات التي تريد عرضها في قائمة التنقل. حتى أنه يسمح لك بإضافة صورة في العنوان .
باستخدام SeedProd ، يمكنك أيضًا إضافة قسم كامل إلى قالب Header نسقك.
الأقسام عبارة عن مجموعة من الكتل ، ويمكنك استخدامها لمناطق مختلفة على موقع الويب الخاص بك. يتضمن ذلك الرؤوس والتذييلات والميزات والشهادات وعبارة تحث المستخدم على اتخاذ إجراء والمزيد.
لاستخدام قسم Header ، قم أولاً بالتبديل إلى علامة التبويب “الأقسام” في لوحة التصميم.
بعد ذلك ، اختر قسم Header الذي ترغب في استخدامه لموقعك على الويب. يقدم SeedProd قوالب أقسام متعددة يمكنك استخدامها.
بعد ذلك ، امض قدمًا وقم بتخصيص قسم Header .
بمجرد أن تصبح راضيًا عن Header المخصص ، تأكد من النقر فوق الزر “حفظ” لتخزين تغييراتك.
الآن ، أنت جاهز لنشر Header المخصص.
ما عليك سوى الانتقال إلى صفحة SeedProd »Theme Builder من لوحة معلومات WordPress الخاصة بك والنقر فوق زر التبديل بجوار خيار” Enable SeedProd Theme “إلى” نعم “.
بمجرد تمكين الخيار ، سيحل SeedProd محل قالب WordPress الافتراضي الخاص بك بموضوع و Header مخصصين جديدين.
يمكنك الآن زيارة موقع الويب الخاص بك لمشاهدة Header المخصص الجديد قيد التشغيل.
إنشاء رؤوس مخصصة مختلفة لكل صفحة
هل تعلم أنه باستخدام SeedProd ، يمكنك إنشاء Headers مخصصة لصفحات مختلفة؟
يتيح لك مُنشئ السمات إضافة رؤوس مخصصة لكل صفحة على موقع WordPress الخاص بك . بهذه الطريقة ، يمكنك إظهار رأس مخصص لمختلف الفئات والعلامات وأنواع المنشورات وأنواع الصفحات والمزيد.
للبدء ، ستحتاج إلى الانتقال إلى SeedProd »Theme Builder من لوحة معلومات WordPress الخاصة بك والنقر فوق الزر” إضافة قالب قالب جديد “.
ستظهر نافذة منبثقة جديدة حيث ستحتاج إلى إدخال تفاصيل قالب السمة.
انطلق وأدخل اسمًا لقالب السمة الخاص بك. بعد ذلك ، اختر “Header ” كنوع القالب من القائمة المنسدلة. يمكنك ترك حقل “الأولوية” فارغًا.
بعد ذلك ، ستحتاج إلى إدخال شروط العرض Header المخصص. على سبيل المثال ، استخدمنا الشروط حيث ستظهر في جميع المنشورات والصفحات الموجودة في فئة البرامج التعليمية.
لا تنس النقر فوق الزر “حفظ” عند الانتهاء.
بعد ذلك ، يمكنك المضي قدمًا وتحرير Header المخصص باستخدام أداة إنشاء السمات والسحب والإفلات من SeedProd.
عندما تنتهي من تحرير Header المخصص ، ما عليك سوى النقر فوق الزر “حفظ” في الجزء العلوي.
إضافة رأس مخصص لكل فئة
تعرض معظم مواقع الويب نفس Header في جميع المنشورات والصفحات والفئات وصفحات الأرشيف. ومع ذلك ، يمكنك عرض Header مختلف لكل فئة من فئات WordPress .
يمكن القيام بذلك عن طريق إضافة رمز إلى ملفات السمات الخاصة بك ، ولكن سيكون لديك المزيد من التحكم باستخدام أداة إنشاء السمات.
لقد أوضحنا لك سابقًا كيفية تخصيص Header باستخدام المكون الإضافي SeedProd theme builder. يتيح لك SeedProd أيضًا إنشاء عدة Header مخصصة وعرضها لفئات مختلفة باستخدام المنطق الشرطي.
لإنشاء Header جديد ، تحتاج إلى الانتقال إلى SeedProd »Theme Builder والنقر فوق الزر البرتقالي” Add New Theme Template “. بدلاً من ذلك ، يمكنك تكرار Header الحالي واستخدامه كنقطة بداية.
سيتم عرض نافذة منبثقة حيث يمكنك تسمية قالب السمة واختيار “Header ” من القائمة المنسدلة “النوع”.
تحتاج أيضًا إلى إدخال أولوية. يتم استخدام هذا الخيار في حالة استيفاء أكثر من Header واحد للشروط الخاصة بصفحة معينة ، وسيتم عرض العنوان ذي الأولوية الأكبر. أولوية العنوان الافتراضي هي 0 ، لذا تأكد من إدخال 1 أو أعلى.
بعد ذلك ، ستحتاج إلى إعداد شرط واحد أو أكثر. يتيح هذا لـ SeedProd معرفة وقت عرض Header معين. يمكنك ببساطة تحديد الشروط من القوائم المنسدلة.
في أول قائمتين ، تحتاج إلى تحديد “تضمين” ثم “لها فئة”. في الحقل الأخير ، يجب عليك كتابة اسم الفئة حيث تريد عرض Header .
يمكنك بسهولة عرض العنوان نفسه لفئات متعددة بالنقر فوق الزر “إضافة شرط” وتضمين فئة أخرى. عند الانتهاء ، تأكد من النقر فوق الزر “حفظ” لحفظ Header الجديد.
يمكنك الآن تخصيص تصميم كل Header جديد باستخدام محرر السحب والإفلات في SeedProd كما أوضحنا لك سابقًا.
أضف منطقة عنصر واجهة مستخدم إلى Header WordPress الخاص بك
إذا كنت تقوم بإنشاء سمة مخصصة من البداية باستخدام كود ، فقد تبحث عن إضافة عنصر واجهة مستخدم WordPress إلى العنوان الخاص بك لجذب انتباه زوارك. تتيح لك التطبيقات المصغّرة إضافة كتل محتوى إلى أقسام معينة من المظهر الخاص بك بسهولة ، ولكن لا تتضمن كل سمة منطقة عنصر واجهة مستخدم Header .
ذكرنا سابقًا مدى سهولة إضافة عناصر واجهة مستخدم إلى Header باستخدام أداة إنشاء السمات SeedProd . ولكن ماذا لو كنت ترغب في إضافة عنصر واجهة مستخدم إلى Header قالب WordPress العادي؟
تتيح لك بعض السمات ، مثل سمة Astra ، القيام بذلك باستخدام أداة تخصيص سمة WordPress. على سبيل المثال ، يضيف Astra خيارًا يسمى “Header Builder” يتيح لك تخصيص الرأس بالكامل ، بما في ذلك إضافة عناصر واجهة المستخدم.
إذا لم يكن قالب WordPress الخاص بك يحتوي حاليًا على منطقة عناصر واجهة مستخدم WordPress في Header ، فستحتاج إلى إضافته يدويًا عن طريق إضافة الكود التالي إلى ملف function.php الخاص بك .
هذا خيار أكثر تقدمًا ، حيث ستحتاج إلى معرفة مكان وضع الكود وكيفية تصميمه باستخدام CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function wpb_widgets_init() { register_sidebar( array( 'name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => '<div class="chw-widget">', 'after_widget' => '</div>', 'before_title' => '<h2 class="chw-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'wpb_widgets_init' ); |
يسجل هذا الرمز شريطًا جانبيًا جديدًا أو منطقة جاهزة لعناصر واجهة المستخدم لموضوعك.
إذا انتقلت إلى المظهر »Widgets، فسترى منطقة عناصر واجهة مستخدم جديدة تسمى” منطقة عنصر واجهة Header مخصصة “. الآن ، يمكنك إضافة أدواتك إلى هذه المنطقة الجديدة.
أخيرًا ، تحتاج إلى إضافة بعض التعليمات البرمجية إلى قالب Header القالب الخاص بك الموجود في ملف header.php الخاص بقالبك. سيؤدي هذا إلى إضافة منطقة عنصر واجهة المستخدم التي قمت بإنشائها مسبقًا إلى Header الخاص بك بحيث يتم عرض الأدوات على موقع الويب الخاص بك.
تحتاج إلى نسخ مقتطف الشفرة هذا ولصقه حيث تريد عرض الأداة.
|
1 2 3 4 5 6 7 8 |
<?php if ( is_active_sidebar( 'custom-header-widget' ) ) : ?> <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary"> <?php dynamic_sidebar( 'custom-header-widget' ); ?> </div> <?php endif; ?> |
اعتمادًا على المظهر الخاص بك ، قد تحتاج أيضًا إلى إضافة CSS إلى WordPress للتحكم في كيفية عرض منطقة عنصر واجهة المستخدم.
أضف صور Header عشوائية إلى مدونة WordPress الخاصة بك
هناك طريقة أخرى يمكنك من خلالها جعل Header WordPress الخاصة بك أكثر جاذبية وهي إضافة صور عشوائية إلى قسم Header .
يساعد عرض الصور التي يتم تغييرها بشكل عشوائي في جذب انتباه الزوار وجعل المحتوى الخاص بك أكثر جاذبية.
لإضافة صور Header عشوائية إلى مدونة WordPress الخاصة بك ، يمكنك استخدام أداة تخصيص السمات وتحميل الصور إلى قسم العنوان. قد يختلف هذا الخيار وفقًا لموضوع WordPress الذي تستخدمه.
بعد ذلك ،حدد خيار “Randomize uploaded headers”.
إذا كنت تريد المزيد من التحكم والمرونة في عرض صور عشوائية في قسم Header ، فيمكنك أيضًا استخدام مكون WordPress الإضافي .
أضف رمزًا إلى عنوان موقع الويب الخاص بك (متقدم)
أخيرًا ، إذا كنت ترغب في إضافة رمز مخصص إلى قسم Header موقع الويب الخاص بك ، فيمكنك القيام بذلك بسهولة من لوحة معلومات WordPress الخاصة بك. يوصى بهذه الطريقة للمستخدمين المتقدمين وليست مناسبة للمبتدئين لأنها تتضمن كود تحرير وتتطلب معرفة فنية.
يمكنك العثور على ملفات Header السمة الخاصة بك بالانتقال إلى المظهر »محرر ملف السمة من لوحة إدارة WordPress. في ملفات السمات “style.css” ، يمكنك التمرير لأسفل إلى قسم Header الموقع وإضافة التعليمات البرمجية أو إزالتها.
ملاحظة: لا نوصي بتحرير ملفات السمات مباشرة لأن أدنى خطأ يمكن أن يكسر موقع الويب الخاص بك ويعطل التصميم.
تتمثل الطريقة الأسهل لإضافة رمز مخصص لتحرير Header موقعك في استخدام المكون الإضافي ” Insert Headers and Footers” .
أولاً ، قم بتثبيت وتفعيل الاضافة Insert Headers and Footers.
عند التنشيط ، يمكنك الانتقال إلى الإعدادات » Insert Headers and Footers من لوحة معلومات WordPress الخاصة بك. بعد ذلك ، أدخل الرمز المخصص في قسم “Scripts in Header”.
بعد إدخال الرمز ، احفظ التغييرات.
نأمل أن يساعدك هذا البرنامج التعليمي في تعلم كيفية تخصيص Header WordPress الخاص بك.