۱۶
مرداد

جلسه ۲۴ : ساخت سایدبار در قالب وردپرس

دسته‌بندی‌ها :

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره جامع آموزش ساخت قالب وردپرس در خدمت شما هستیم.
در این جلسه قصد داریم به آموزش ساخت سایدبار در قالب وردپرس (Sidebar) بپردازیم.

فهرست

ساخت سایدبار در قالب وردپرس

هر ناحیه ای که بتواند ویجت ها (ابزارک) را در خود نگه دارد و نمایش دهد، یک سایدبار (Sidebar) است.
ناحیه های ویجت ها مکان هایی هستند که کاربران قالب می‌توانند ویجت های خود را در آن جا قرار دهند.

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

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

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

فعال کردن یک سایدبار

برای استفاده از سایدبار ها، باید آن ها را در فایل functions.php فعال کنید.

برای اینکار از تابع ()register_sidebar استفاده می‌کنیم که پارامتر های مختلفی دارد و حتما باید مقداردهی شوند.

name : نام سایدبار. این نامی است که کاربران در پنل ویجت ها ان را می‌بینند
id : با استفاده از این می‌توانید سایدبار را در قالب با استفاده از تابع dynamic_sidebar فراخوانی کنید
description : توضیحی در مورد سایدبار. در پنل ویجت ها نمایش داده می‌شود
class : نام کلاس css که به ویجت اختصاص داده شده است
before_widget : کد html که قبل از ویجت قرار می‌گیرد
after_widget : کد html که بعد از ویجت قرار می‌گیرد
before_title : کد html که قبل از عنوان قرار می‌گیرد
after_title : کد html که بعد از عنوان قرار می‌گیرد

برای فعال کردن سایدبار، ما از توابع ()register_sidebar و ()widgets_init استفاده می‌کنیم.

مثال :

function themename_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Primary Sidebar', 'theme_name' ),
        'id'            => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
 
    register_sidebar( array(
        'name'          => __( 'Secondary Sidebar', 'theme_name' ),
        'id'            => 'sidebar-2',
        'before_widget' => '<ul><li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li></ul>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}

function themename_widgets_init() {

register_sidebar( array(

'name' => __( 'Primary Sidebar', 'theme_name' ),

'id' => 'sidebar-1',

'before_widget' => '<aside id="%1$s" class="widget %2$s">',

'after_widget' => '</aside>',

'before_title' => '<h3 class="widget-title">',

'after_title' => '</h3>',

) );

register_sidebar( array(

'name' => __( 'Secondary Sidebar', 'theme_name' ),

'id' => 'sidebar-2',

'before_widget' => '<ul><li id="%1$s" class="widget %2$s">',

'after_widget' => '</li></ul>',

'before_title' => '<h3 class="widget-title">',

'after_title' => '</h3>',

) );

}

فعال کردن سایدبار به این معنی است که شما به وردپرس می‌گویید که در حال ایجاد یک ناحیه ویجت جدید در Appearance > Widgets هستید که کاربران می‌توانند ویجت های خودشان را در آن جا قرار دهند. (drag کنند)

دو تابع برای فعال کردن ویجت ها وجود دارد که یکی از آن ها را در مثال بالا استفاده کردیم:

()register_sidebar
()register_sidebars

تابع اول به شما امکان فعال کردن یک سایدبار و تابع دوم امکان فعال کردن چندین سایدبار را به شما می‌دهد.

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

نمایش سایدبار در قالب

برای نمایش سایدبار در قالب، مراحل زیر را باید انجام دهید.

فایل قالب sidebar.php را ایجاد کرده و با استفاده از تابع dynamic_sidebar، سایدبار را نمایش دهید
برای بارگذاری سایدبار در قالب نیز از تابع get_sidebar استفاده کنید

ساخت فایل قالب sidebar.php

فایل قالب sidebar حاوی کدهای سایدبار هستند. وردپرس فایل sidebar.php و هر فایل قالبی تحت عنوان sidebar-{name}.php را به عنوان فایل های قالب سایدبار شناسایی می‌کند. این به آن معناست که شما می‌توانید فایل های قالب سایدبار خود را با استفاده از نام هر سایدبار سازمان دهی کنید.

در مثال زیر یک سایدبار را که در فایل sidebar-primary.php قرار دارد را نمایش می‌دهیم.

مثال :

<div id="sidebar-primary" class="sidebar">
    <?php dynamic_sidebar( 'primary' ); ?>
</div>

<?php dynamic_sidebar( 'primary' ); ?>

</div>

تمام توابع مربوط به نمایش و بارگذاری سایدبار ها به صورت پیش‌فرض از سایدبار فایل sidebar.php استفاده می‌کنند. (که تابع پارامتر ندارد)
در غیر این صورت می‌توانید id سایدبار را به عنوان پارامتر تابع ارسال کنید.

نمایش ویجت های پیش‌فرض

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

مثال :

<div id="primary" class="sidebar">
    <?php do_action( 'before_sidebar' ); ?>
    <?php if ( ! dynamic_sidebar( 'sidebar-primary' ) ) : ?>
        <aside id="search" class="widget widget_search">
           <?php get_search_form(); ?>
        </aside>
        <aside id="archives" class"widget">
            <h3 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h3>
            <ul>
                <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
            </ul>
        </aside>
        <aside id="meta" class="widget">
            <h3 class="widget-title"><?php _e( 'Meta', 'shape' ); ?></h3>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
            </ul>
        </aside>
   <?php endif; ?>
</div>

<?php do_action( 'before_sidebar' ); ?>

<?php if ( ! dynamic_sidebar( 'sidebar-primary' ) ) : ?>

<?php get_search_form(); ?>

</aside>

<ul>

<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>

</ul>

</aside>

<ul>

<?php wp_register(); ?>

<?php wp_meta(); ?>

</ul>

</aside>

<?php endif; ?>

</div>

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

در جلسه بعد به آموزش ساخت ویجت (ابزارک) در قالب وردپرس خواهیم پرداخت.

QR: جلسه ۲۴ : ساخت سایدبار در قالب وردپرس

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۴ : ساخت سایدبار در قالب وردپرس

ساخت سایدبار در قالب وردپرس

فعال کردن یک سایدبار

نمایش سایدبار در قالب

ساخت فایل قالب sidebar.php

نمایش ویجت های پیش‌فرض

لیست مطالب دوره

مفاهیم پایه

عملکرد قالب

Customizer وردپرس

امنیت

حریم خصوصی

انتشار قالب در سایت Wordpress

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ