كيفية تخصيص رأس WordPress الخاص بك (دليل المبتدئين)

هل تريد إظهار رأس مخصص لموقع WordPress الخاص بك؟

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

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

ما هو العنوان في ووردبريس؟

رأس موقع الويب الخاص بك هو القسم العلوي من كل صفحة على موقع WordPress الخاص بك ، وربما يكون أول شيء يراه زوارك.

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

على سبيل المثال ، إليك منطقة العنوان الخاصة بنا على WPBeginner والتي يراها ملايين القراء كل شهر.

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

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

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

تخصيص العنوان باستخدام مُخصص قوالب ووردبريس

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

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

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

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

يتيح لك موضوع Twenty Sixteen إضافة صورة خلفية إلى العنوان ، وحتى إضافة صور رأس عشوائية.

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

على سبيل المثال ، يمكنك إنشاء رأس مخصص باستخدام أداة تخصيص السمات مع سمة Astra.

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

للبدء ، ما عليك سوى التمرير فوق منطقة فارغة في الرأس والنقر فوق الرمز "+" لإضافة كتلة رأس.

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

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

يمكنك أيضًا تخصيص كل كتلة تضيفها إلى العنوان.

على سبيل المثال ، يمنحك تحديد كتلة عنوان وشعار الموقع خيارات لتحميل عنوان وشعار موقع وتغيير عرض الشعار وعرض سطر شعار الموقع والمزيد.

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

عندما تنتهي من تعديل الرأس المخصص ، ما عليك سوى النقر فوق الزر "نشر".

لمزيد من التفاصيل ، راجع دليلنا النهائي حول كيفية استخدام أداة تخصيص سمة WordPress.

تخصيص الرأس باستخدام محرر موقع WordPress الكامل

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

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

عند النقر فوق الرأس ، ستلاحظ تغيير اسم القالب في الجزء العلوي من الصفحة إلى "رأس الصفحة".

الآن عند النقر فوق رمز "الإعدادات" على شريط الأدوات ، سترى خيارات لتخصيص تخطيط العنوان ولونه وحدوده وأبعاده.

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

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

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

لمعرفة المزيد حول كيفية عمل محرر الموقع الكامل ، راجع دليل المبتدئين لدينا حول كيفية تخصيص قالب WordPress الخاص بك.

قم بإنشاء رأس مخصص وتخطيطات الصفحة باستخدام SeedProd

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

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

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

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

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

كل ما عليك فعله هو النقر فوق ارتباط "تحرير التصميم" الموجود أسفل العنوان.

سيؤدي هذا إلى فتح الرأس في محرر السحب والإفلات في SeedProd.

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

توجد كتل لعلامات القوالب مثل شعار الموقع وأي من أدوات WordPress الخاصة بك وكتل متقدمة مثل عداد العد التنازلي أو قائمة التنقل أو أزرار المشاركة الاجتماعية.

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

باستخدام SeedProd ، يمكنك أيضًا إضافة قسم كامل إلى قالب رأس نسقك.

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

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

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

بعد ذلك ، امض قدمًا وقم بتخصيص قسم الرأس.

بمجرد أن تصبح راضيًا عن رأسك المخصص ، تأكد من النقر فوق الزر "حفظ" لتخزين تغييراتك.

الآن ، أنت جاهز لنشر رأسك المخصص.

ما عليك سوى الانتقال إلى صفحة SeedProd »Theme Builder من لوحة معلومات WordPress الخاصة بك والنقر فوق زر التبديل بجوار خيار" Enable SeedProd Theme "إلى" نعم ".

بمجرد تمكين الخيار ، سيحل SeedProd محل قالب WordPress الافتراضي الخاص بك بموضوع ورأس مخصصين جديدين.

يمكنك الآن زيارة موقع الويب الخاص بك لمشاهدة العنوان المخصص الجديد قيد التشغيل.

إنشاء رؤوس مخصصة مختلفة لكل صفحة

هل تعلم أنه باستخدام SeedProd ، يمكنك إنشاء رؤوس مخصصة لصفحات مختلفة؟

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

للبدء ، ستحتاج إلى الانتقال إلى SeedProd »Theme Builder من لوحة معلومات WordPress الخاصة بك والنقر فوق الزر" إضافة قالب قالب جديد ".

ستظهر نافذة منبثقة جديدة حيث ستحتاج إلى إدخال تفاصيل قالب السمة.

انطلق وأدخل اسمًا لقالب السمة الخاص بك. بعد ذلك ، اختر "رأس" كنوع القالب من القائمة المنسدلة. يمكنك ترك حقل "الأولوية" فارغًا.

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

لا تنس النقر فوق الزر "حفظ" عند الانتهاء.

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

عندما تنتهي من تحرير الرأس المخصص ، ما عليك سوى النقر فوق الزر "حفظ" في الجزء العلوي.

يمكنك رؤية المزيد من الأفكار حول كيفية تخصيص رأسك باستخدام SeedProd في دليل المبتدئين الخاص بنا حول كيفية إنشاء سمة WordPress مخصصة بسهولة باستخدام منشئ السمات SeedProd.

إضافة رأس مخصص لكل فئة

تعرض معظم مواقع الويب نفس العنوان في جميع المنشورات والصفحات والفئات وصفحات الأرشيف. ومع ذلك ، يمكنك عرض عنوان مختلف لكل فئة من فئات WordPress.

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

لقد أوضحنا لك سابقًا كيفية تخصيص رأسك باستخدام المكون الإضافي SeedProd theme builder. يتيح لك SeedProd أيضًا إنشاء عدة رؤوس مخصصة وعرضها لفئات مختلفة باستخدام المنطق الشرطي.

لإنشاء عنوان جديد ، تحتاج إلى الانتقال إلى SeedProd »Theme Builder والنقر فوق الزر البرتقالي" Add New Theme Template ". بدلاً من ذلك ، يمكنك تكرار عنوانك الحالي واستخدامه كنقطة بداية.

سيتم عرض نافذة منبثقة حيث يمكنك تسمية قالب السمة واختيار "رأس" من القائمة المنسدلة "النوع".

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

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

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

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

يمكنك الآن تخصيص تصميم كل رأس جديد باستخدام محرر السحب والإفلات في SeedProd كما أوضحنا لك سابقًا.

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

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

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

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

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

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

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

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' );

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

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

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

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

<?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 للتحكم في كيفية عرض منطقة عنصر واجهة المستخدم.

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

أضف صور رأس عشوائية إلى مدونة WordPress الخاصة بك

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

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

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

بعد ذلك ، امض قدمًا وحدد خيار "عشوائية الرؤوس المحملة".

إذا كنت تريد المزيد من التحكم والمرونة في عرض صور عشوائية في قسم الرأس ، فيمكنك أيضًا استخدام مكون WordPress الإضافي.

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

أضف رمزًا إلى عنوان موقع الويب الخاص بك (متقدم)

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

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

ملاحظة: لا نوصي بتحرير ملفات السمات مباشرة لأن أدنى خطأ يمكن أن يكسر موقع الويب الخاص بك ويعطل التصميم.

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

أولاً ، قم بتثبيت وتفعيل المكون الإضافي Insert Headers and Footers. لمزيد من التفاصيل ، يرجى الاطلاع على دليلنا حول كيفية تثبيت مكون WordPress الإضافي.

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

بعد إدخال الرمز ، احفظ التغييرات.

لمزيد من التفاصيل ، يمكنك الاطلاع على دليلنا حول كيفية إضافة كود الرأس والتذييل في WordPress.

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

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على YouTube لدروس فيديو WordPress. يمكنك أيضًا أن تجدنا على Twitter و Facebook.