چگونه یک ویجت وردپرس را به هدر وب سایت خود اضافه کنیم (2 روش)

[ad_1]

آیا می خواهید ویجت وردپرس را به قسمت هدر وب سایت خود اضافه کنید؟

ابزارک‌ها به شما امکان می‌دهند بلوک‌های محتوا را به راحتی به بخش‌های خاصی از موضوع خود اضافه کنید، اما هر موضوعی شامل یک ناحیه ویجت هدر نیست.

در این مقاله به شما نشان خواهیم داد که چگونه به راحتی ویجت وردپرس را به هدر وب سایت خود اضافه کنید.

چرا ویجت هدر را به سایت وردپرس خود اضافه کنید؟

هدر وب سایت شما یکی از اولین چیزهایی است که بازدیدکنندگان هنگام بازدید از سایت شما می بینند وب سایت وردپرس. با افزودن ویجت وردپرس به هدر خود، می توانید این قسمت را برای جلب توجه خواننده بهینه کنید.

اکثر هدرهای وب سایت شامل الف خواهند بود آرم سفارشی و الف منوی ناوبری برای کمک به بازدیدکنندگان در اطراف سایت شما.

همچنین می‌توانید یک ویجت هدر را در بالا یا پایین این قسمت اضافه کنید تا محتوای مفید، تبلیغات بنری، پیشنهادات با زمان محدود، فرم های تک خطی، و بیشتر.

در اینجا در WPBeginner، ما یک هدر داریم فراخوانی برای اقدام مستقیماً زیر منوی پیمایش

اکثر قالب‌های وردپرس دارای قسمت‌های آماده ابزارک در قسمت‌های نوار کناری و پاورقی سایت هستند، اما هر موضوعی مناطق آماده ویجت را در هدر اضافه نمی‌کند.

اما ابتدا، بیایید نگاهی به نحوه افزودن ویجت وردپرس به هدر وب سایت خود در قالب موجود خود بیندازیم. به سادگی از پیوندهای سریع زیر استفاده کنید تا مستقیماً به روشی که می خواهید استفاده کنید بروید.

• یک ویجت هدر وردپرس را در تنظیمات قالب وردپرس اضافه کنید
• با افزودن کد به وردپرس، ویجت هدر وردپرس را اضافه کنید

روش 1. یک ویجت وردپرس را به سربرگ وب سایت خود در تنظیمات قالب وردپرس اضافه کنید

بسیاری از بهترین تم های وردپرس شامل یک منطقه ویجت هدر است که می توانید آن را به دلخواه شخصی سازی کنید.

ابتدا، باید ببینید که آیا قالب فعلی وردپرس شما از یک ناحیه ویجت وردپرس در هدر پشتیبانی می کند یا خیر.

شما می توانید این را با رفتن به پیدا کنید سفارشی کننده تم وردپرس یا قسمت ویجت پنل مدیریت وردپرس شما. برای انجام این کار، به ظاهر » سفارشی کردن و ببینید آیا گزینه ای برای ویرایش هدر وجود دارد یا خیر.

در این مثال، رایگان آسترا تم دارای گزینه ای به نام Header Builder است. ما به شما نحوه استفاده از این ویژگی را در Astra نشان خواهیم داد، اما به خاطر داشته باشید که بسته به موضوعی که استفاده می کنید، این ویژگی متفاوت به نظر می رسد.

اگر روی این کلیک کنید، شما را به صفحه‌ای می‌آورد تا هدر خود را ویرایش کنید و ویجت‌ها را اضافه کنید.

در پایین صفحه، می‌توانید هدر را به همراه قسمت‌های بالا و زیر هدر کاملاً شخصی‌سازی کنید. به سادگی روی یکی از قسمت های خالی حرکت کنید و روی نماد “Plus” کلیک کنید.

با این کار یک منوی بازشو ظاهر می شود که در آن می توانید “ویجت 1” را انتخاب کنید.

گزینه های دیگری برای انتخاب وجود دارد، اما باید یکی از گزینه های “ویجت” را انتخاب کنید تا ویجت هدر آماده شود.

برای افزودن یک ناحیه ویجت به هدر خود، روی کادر “ویجت 1” که در بخش سفارشی‌سازی سرصفحه است کلیک کنید.

با این کار گزینه ای برای افزودن ویجت ظاهر می شود.

سپس، روی نماد اضافه کردن بلوک «به علاوه» در منوی سمت چپ کلیک کنید.

با این کار یک پنجره بازشو ظاهر می شود که در آن می توانید ویجتی را برای افزودن به هدر خود انتخاب کنید.

می‌توانید به سفارشی‌سازی هدر خود ادامه دهید و هر تعداد ویجت که می‌خواهید اضافه کنید.

پس از اتمام کار، مطمئن شوید که روی دکمه “انتشار” کلیک کنید تا تغییرات خود را ذخیره کنید.

اکنون می توانید ناحیه سرصفحه خود را با ویجت یا ویجت هایی که اضافه کرده اید مشاهده کنید.

از Astra استفاده نمی کنید؟

راه دیگر برای مشاهده اینکه آیا تم شما از قبل ویجت هدر وردپرس دارد یا نه این است که به آن بروید ظاهر » ویجت ها در پنل مدیریت وردپرس شما

سپس، ببینید آیا یک بخش ویجت با عنوان “Header” یا چیزی مشابه وجود دارد.

اگر وجود دارد، به سادگی بر روی نماد “Plus” کلیک کنید تا منوی ابزارک ها ظاهر شود.

سپس با کلیک کردن بر روی آن می توانید هر ویجتی را که دوست دارید اضافه کنید.

مطمئن شوید که روی دکمه «به‌روزرسانی» کلیک کرده‌اید تا تغییرات خود را در ناحیه ویجت هدر ذخیره کنید.

روش 2. با افزودن کد به وردپرس، ویجت وردپرس را به سربرگ وب سایت خود اضافه کنید

اگر پوسته وردپرس شما در حال حاضر دارای قسمت ویجت وردپرس در هدر نیست، باید آن را به صورت دستی با افزودن کد به وردپرس اضافه کنید.

اگر قبلا این کار را انجام نداده اید، به راهنمای ما در این زمینه مراجعه کنید نحوه کپی و پیست کردن کد در وردپرس.

سپس، می توانید قطعه کد زیر را به خود اضافه کنید functions.php فایل، در یک پلاگین سایت خاص، یا با استفاده از a افزونه قطعه کد.

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 به ناحیه ویجت سرصفحه وردپرس خود سبک دهید

بسته به موضوع خود، ممکن است لازم باشد CSS را به وردپرس اضافه کنید تا نحوه نمایش ناحیه ویجت هدر و هر ویجت داخل آن را کنترل کنید. اگر CSS نمی دانید، می توانید از افزونه ای مانند استفاده کنید قهرمان CSS بجای.

برای کسب اطلاعات بیشتر، راهنمای ما را در چگونه به راحتی CSS سفارشی را به سایت وردپرس خود اضافه کنید.

بعد، به ظاهر » سفارشی کردن در پنل مدیریت وردپرس شما

با این کار پنل سفارشی کننده تم وردپرس ظاهر می شود. شما باید بر روی تب “CSS اضافی” کلیک کنید.

این به شما امکان می دهد CSS اضافی را مستقیماً به موضوع خود اضافه کنید و تغییرات را در زمان واقعی مشاهده کنید.

در اینجا چند نمونه کد CSS برای کمک به شما برای شروع آورده شده است:

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

به سادگی کد CSS را به کادر “CSS اضافی” اضافه کنید.

پس از اتمام افزودن CSS، مطمئن شوید که روی دکمه «انتشار» کلیک کنید تا تغییرات خود را ذخیره کنید.

در اینجا نحوه ظاهر ویجت هدر سفارشی با تغییرات CSS به صورت زنده است.

امیدواریم این مقاله به شما کمک کند تا یاد بگیرید چگونه یک ویجت وردپرس را به سربرگ وب سایت خود اضافه کنید. همچنین ممکن است بخواهید راهنمای ما را در این زمینه ببینید نحوه انتخاب بهترین هاست وردپرس و انتخاب های متخصص ما از بهترین نرم افزار چت زنده برای مشاغل کوچک

اگر این مقاله را دوست داشتید، لطفا در ما مشترک شوید کانال یوتیوب برای آموزش تصویری وردپرس. شما همچنین می توانید ما را در توییتر و فیس بوک.

پست وبلاگ اولین بار در ظاهر شد WPBeginner.

[ad_2]

تهیه و ترجمه توسط دیتکو لینک منبع خبر