روزهای خط خطی  | پاسخ به یک سوال در مورد ابزارک و سایدبار در وردپرس

پاسخ به یک سوال در مورد ابزارک و سایدبار در وردپرس

سوال در مورد وردپرسحدود هفت ماه پیش مطلبی در مورد کارکردن با سایدبار در وردپرس منتشر کردم با عنوان «کارکردن با سایدبار در وردپرس» که به شرح چگونگی تعریف و استفاده از سابدبارهای دینامیک در وردپرس می پرداخت. در نگارش نوشته ی مورد اشاره تمام سعی خود را معطوف به این نکته کردم که همه ی نکاتی که در خلال تجربه های کاری در مورد سایدبار در وردپرس آموخته بودم را در قالبی مدون درآورده و به شکل یک راهنمای جامع منتشر کنم. به تازگی سوال یکی از دوستان در مورد نوشته ی مزبور مرا متوجه این نکته کرد که راهنمای کارکردن با سایدبار در وردپرس مثال عملی و کاربردی ندارد.

به همین منظور صورت اصلاح شده ی سوال این دوست گرامی را به همراه پاسخ آن به عنوان مثال عملی کارکردن با سایدبار در وردپرس در ادامه حضور مخاطبان گرامی «روزهای خط خطی» عرضه می دارم؛ با این امید که روشنگر باشد.

سوال: چطور می توانیم با استفاده از تعریف سایدبار در وردپرس به ابزارک های موجود در سایدبار سایت استایل های متفاوتی بدهیم؟

برای پاسخ به این سوال در حالت کلی فرض می کنیم که قالب سایت ما دارای یک فایل sidebar.php می باشد که سایدبارهای ما بناست در درون آن فراخوانی شوند. می خواهیم ابزارک های درون سایدبار استایل های متفاوتی داشته باشند. به عنوان مثال عنوان یک ابزارک خاص را با رنگ سبز و عنوان سایر ابزارک ها را با رنگ مشکی نمایش دهیم.

در قدم اول کار لازم است دو سایدبار دینامیک برای وردپرس تعریف کنیم. کد نمونه مربوط به این قسمت در ادامه آمده است. لازم است این کدها را در فایل functions.php قالب سایت وارد نماییم.

 PHP | 
 
 copy code |
?

01
<?php
02
$args = array('name' => 'Home Page Main SideBar',
03
                'id' => 'home_bar',
04
                'description' => 'Site Default SideBar',
05
                'before_widget' => '<div class="default_widget">',
06
                'after_widget' => '</div>',
07
                'before_title' => '<h3 class="default_widget_title">',
08
                'after_title' => '</h3>');
09
register_sidebar($args);
10
?>

با استفاده از تکه کد بالا سایدباری تعریف می کنیم که در واقع قراراست محل قرارگیری ابزارک های عادی سایت ما باشد. همانطور که می بینیم خط 5 کد به ابزارک های این سایدبار کلاس default_widget می دهد و در خط 7 برای عنوان ابزارک های این ساید بار کلاس default_widget_title در نظر گرفته می شود. خط 9 کد هم در نهایت سایدبار ما را که دارای شناسه ی home_bar است را ثبت می کند.

در ادامه ساید بار دیگری نیز تعریف می کنیم. شناسه ی این ساید بار را special_bar در نظر می گیریم و برای ابزارک های درون آن کلاس special_widget و برای عنوان ابزارک ها کلاس special_widget_title را انتخاب می کنیم.

 PHP | 
 
 copy code |
?

01
<?php
02
$args = array('name' => 'Special SideBar',
03
                'id' => 'special_bar',
04
                'description' => 'Special SideBar',
05
                'before_widget' => '<div class="special_widget">',
06
                'after_widget' => '</div>',
07
                'before_title' => '<h3 class="special_widget_title">',
08
                'after_title' => '</h3>');
09
register_sidebar($args);
10
?>

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

 PHP | 
 
 copy code |
?

1
<?php dynamic_sidebar('home_bar'); ?>

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

 PHP | 
 
 copy code |
?

1
<?php dynamic_sidebar('special_bar'); ?>

برای روشن تر شدن موضوع بررسی مثال موردی زیر خالی از لطف نخواهد بود:

 HTML | 
 
 copy code |
?

1
 <div id="site_sidebar">
2
    <?php dynamic_sidebar('special_bar'); ?>
3
    <?php dynamic_sidebar('home_bar'); ?>
4
 </div>

در مثال ساده ی بالا ما ابتدا محتوای سایدبار special_bar و بعد از آن محتوای home_bar را در درون div مربوط به سایدبار سایت به نمایش در می آوریم. به این ترتیب ابزارک های special بار در بالای ابزارک های home_bar دیده خواهند شد. تا اینجای کار هنوز اتفاق مهمی نیفتاده است ولی با تعریف استایل در مربوط به هر سایدبار هدف ما کاملا محقق خواهد شد.

 CSS | 
 
 copy code |
?

01
<style type="text/css">
02
.default_widget
03
{
04
    background: antiquewhite;
05
    font-family: tahoma;
06
    font-size: 12px;
07
    color: #fff;
08
}
09
.default_widget_title
10
{
11
    font-family: arial;
12
    font-size: 24px;
13
}
14
.special_widget
15
{
16
    background: white;
17
    font-family: tahoma;
18
    font-size: 12px;
19
    color: #f00;
20
}
21
.special_widget_title
22
{
23
    font-family: arial;
24
    font-size: 26px;
25
    font-weight: bold;
26
    color: #f00;
27
}
28
</style>

با قراردادن کدی مشابه کد بالا در فایل style.css قالب می توانیم به ابزارک های درون هر سایدبار قالب دلخواه و متمایز از دیگری تخصیص بدهیم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *