نحوه اضافه کردن ویجت وردپرس به سربرگ وب سایت شما

سلام دوستان عزیز

با آموزش نحوه اضافه کردن ویجت وردپرس به سربرگ وب سایت ما خدمت شما هستم

با ای تاتس همراه باشید 🙂

قدم اول : ایجاد یک ویجت سربرگ


 ما باید یک منطقه ویجت سفارشی ایجاد کنیم. این مرحله به شما این امکان را می دهد که منطقه ویجت سفارشی خود را درAppearance » Widgets در داشبورد وردپرس خود ببینید.

شما باید این کد را به فایل 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' );

این کد یک نوار کناری جدید یا یک منطقه ویجت آماده برای موضوع خود را ثبت می کند.

اکنون می توانید به Appearance » Widgets بروید و یک منطقه را که  حاوی« عناصر ویجت سفارشی سربرگ »است ببینید .

یک ویجت متن را برای این منطقه که ویجت تازه ایجاد شده را اضافه کنید و آن را ذخیره کنید.

قدم دوم : عناصر سربرگ سفارشی خود را نمایش دهید


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

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

اجازه دهید این کار را در این مرحله انجام دهیم.

شما باید فایل 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; ?>

فراموش نکنید که تغییرات خود را ذخیره کنید.

شما هم اکنون می توانید وب سایت خود را ببینید و شما منطقه ویجت هدرتون رو ببینید.

Unstyled header widget

متوجه خواهید شد که کمی ناهموار است. این جایی است که شما نیاز به CSS دارید تا بهتر بشوید.

قدم سوم : انتخاب استایل ویجت سرصفحه خود با استفاده از CSS


 شما نیاز دارید به اضافه کردن CSS برای کنترل منطقه ویجت هدرتون تا هر ویجت داخل آن نمایش داده شود.

راه ساده تر برای انجام این کار با استفاده از افزونه CSS Hero است. این اجازه را می دهد تا شما با استفاده از یک رابط کاربری بصری برای تغییر CSS هر تم وردپرس به کدنویسی به بپردازید …

اگر نمی خواهید از یک افزونه استفاده کنید، می توانید با مشاهده Appearance «Customize » بهش CSS سفارشی اضافه کنید.

این رابط، رابط سفارشی تم وردپرس را راه اندازی خواهد کرد. شما باید روی برگه «Additional CSS» کلیک کنید.

Adding custom CSS to a WordPress theme

برگه CSS اضافی در Customizer تم اجازه می دهد تا شما 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;
    }

با این آموزش میتونید حداقل 20 تا 70 قالب وردپرس را ویرایش کنید ( البته بدون بهم رختگی کد ها )

نکته : در پایان به شما دوستان عزیز بگم که شما ممکن است در بعضی از قالب های وردپرس به مشکل بخورید پس باید کد که میزارید مطابق با همون تم یا قالب خودتان باشد

امیدوارم از این مطلب بهره کافی را برده باشید 🙂

مطالب مرتبط

آموزش ریست کردن مودم های TP-Link مخابرات

نحوه اضافه کردن LiveChat به فروشگاه WooCommerce شما و افزایش فروش

چگونه 502 Bad Gateway Error را در وردپرس حل کنیم

آموزش ثبت و تائید وبسایت وردپرس شما در Pinterest

ترفندهای جستجو در گوگل

تبدیل PDF و عکس به Word بدون نرم افزار!

نحوه اضافه کردن ویجت وردپرس به سربرگ وب سایت شما

محتوای مطلب

کامنت ها

لطفا اگر سوالی نامرتبط با این مطلب دارید، از تب «پرسیدن سوال» استفاده کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.