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

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

أضف أداة  ووردبريس إلى رأس موقعك

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

لماذا ومتى تحتاج إلى رأس القطعة على موقعك؟

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

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

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

قسم الرأس على موقع List25 الشهير

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

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

الخطوة 1. إنشاء منطقة رأس القطعة

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

سوف تحتاج إلى إضافة هذا الرمز إلى موضوع الخاص بك functions.php الملف.

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

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

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

منطقة عنصر واجهة مستخدم رأس مخصصة

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

الخطوة 2: عرض عنصر واجهة المستخدم المخصص للرأس

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

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

لنفعل ذلك في هذه الخطوة.

ستحتاج إلى تحرير ملف 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 لجعله يبدو أفضل.

الخطوة 3: تصميم منطقة عنصر واجهة المستخدم باستخدام CSS

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

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

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

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

إضافة CSS مخصص إلى قالب  ووردبريس

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

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

إليك بعض نماذج CSS لمساعدتك على البدء.

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
}   
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

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

معاينة رأس القطعة

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

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

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

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