قبل از هر چیز لازم است در مورد خود سایدبار صحبت کنیم. سایدبار یا نوار کناری در وردپرس معمولا نواری افقی در کنار صفحات است که اطلاعات مفیدی را به صورت فشرده در اختیار بازدید کننده می گذارد. مثلا لینک آخرین نوشته های سایت را در دسترس بیننده می گذارد یا لیستی از برگه های سایت و امثال آن.
وردپرس به طراح قالب اجازه می دهد که سایدبارهای متعددی را در قالب پیاده کند. در نگاه اول ممکن است این قابلیت خیلی مفید به نظر نرسد ولی با نگاهی عمیق تر می توانیم کاربردهای متعددی برای آن پیدا کنیم که تنها برخی از آن ها به شرح زیر هستند.
- استفاده از دو ساید بار کنار هم یا در دو طرف صفحه
- استفاده از ساید بارهای مختلف در صفحات مختلف سایت. مثلا برای داشتن سایدبارهایی با محتوای متفاوت در صفحه ی نخست و در صفحات داخلی سایت.
- درج یک یا چند ساید بار در پایین صفحه و ایجاد widget_area
سایدبارهای وردپرس می توانند به دو صورت باشند. نوع اول سایدبارهای استاتیک هستند. البته ممکن است محتوای این سایدبارها دینامیک باشد و منظور از استاتیک، ثابت بودن کد تشکیل دهنده ی آن هاست. قسمتی از کد HTML و PHP قالب که مربوط به سایدبار می شود در یک فایل php ذخیره می شود و در موقع لزوم فراخوانی می شود.
نوع دوم سایدبار وردپرس سایدبار دینامیک است. در سایدبارهای دینامیک محتوای همچنان می تواند دینامیک یا استاتیک باشد. تنها تفاوت موجود در این حالت دینامیک بودن کد ساید بار است. به بیان دیگر سایدبارهای دینامیک استفاده از ابزارک ها را برای طراح قالب و مدیر سایت امکان پذیر می سازد. البته طراح خوش ذوق می تواند با ترکیب این دو نوع سایدبار ایده های خلاق خود را به بهترین نحو ممکن پیاده کند. با این مقدمه کوتاه به سراغ نحوه ی تعریف و استفاده از سایدبارها می رویم.
وردپرس توابع متععدی برای کار با سایدبارها دارد که در ادامه به ترتیب آن ها را معرفی کرده و درباره نحوه ی استفاده از آن ها صحبت می کنبم.
تابع get_sidebar تقریبا شبیه توابع get_header و get_footer عمل می کند و یک فایل php را درون قالب صفحه بارگذاری می کند. همانطور که می بینید این تابع که برای فراخوانی سایدبارهای استاتیک استفاده می شود دارای یک پارامتر ورودی می باشد. اگر $name را خالی بگذاریم و در واقع تابع را بدون آرگومان فراخوانی کنیم وردپرس به یرغ پوشه ی قالب رفته، فایل sidebar.php را پیدا کرده و بارگذاری می کند. اگر به هردلیلی این فایل در دسترس نباشد وردپرس فایل sidebar.php پیش فرض را مورد استفاده قرار می دهد.
حال اگر بخواهیم یک سایدبار خاص را فراخوانی کنیم باید از ایت تابع به شکل زیر استفاده کنیم.
به این ترتیب وردپرس به سرغ پوشه قالب رفته و فایل sidebar-home.php را پیدا کرده و آن را درون قالب بارگذاری می کند. نکته ی حائز اهمیت در استفاده از این دستور توجه به نحوه ی نامگذاری صحیح فایل سایدبار است. در این حالت نیز اگر فایل مورد نظر موجود نباشد وردپرس فایل سایدبار پیش فرض را مورد استفاده قرار می دهد.
حالا نوبت به سایدبارهای دینامیک رسیده است. با استفاده از تابع بالا در فایل functions.php قالب می توانیم یک سایدبار دینامیک ایجاد کنیم. البته بعد از این مرحله شکل ظاهری قالب ما تغییر نخوهد کرد، بلکه این ساید بار در قسمت ابزارک ها نمایش داده شده و مدیر سایت می تواند ابزارک های دلخواه خود را در آن قرار دهد. در ادامه تابع دیگری معرفی خواهیم کرد که به ما اجازه می دهد سایدبارهای دینامیک را در قالب سایت به نمایش درآوریم.
تابع register_sidebars دارای یک آرگومان ورودی از جنس آرایه است که خود شامل موارد زیر می شود:
- name: نام سایدبار که در قسمت ابزارک ها نمایش داده می شود.
- id: برای فراخوانی سایدبار مورد استفاده قرار می گیرد.
- description: توضیحی است که در قسمت ابزارک ها در مورد سایدبار نمایش داده می شود.
- class: کلاس css خاصی که در صورت لزوم می توانیم به سایدبار اختصاص بدهیم.
- before_widget: کدی است که می خواهیم قبل از هر کدام از ابزارک های درون سایدبار نمای داده می شود.
- after_widget: مکمل مورد قبلی است و کدی است که بعد از هر کدام از ابزارک ها نمای شداده خواهد شد.
- before_title: کدی است که قبل از عنوان هر کدام از ابزارک ها درج می شود.
- after_title: کد مکمل بند قبل است و بعد از عنوان هر ابزارک درج می شود.
در ادامه نمونه استفاده از این تابع را آورده ایم.
$args = array('name' => 'Home Page Side Bar',
'id' => 'home_bar',
'description' => 'Shows up in home page right panel',
'before_widget' => '
',
'before_title' => '
',
'after_title' => '
');
register_sidebar($args);
تابع بالا هم دقیقا شبیه register_sidebar عمل می کند با این تفاوت که با استفاده از آن می توان چند سایدبار مشابه ایجاد کرد. مطالعه ی مثال زیر می تواند موضوع را روشن تر کند.
sprintf(__('Sidebar %d'), $i ),
'id' => "sidebar-$i",
'before_widget' => '
'after_widget' => '
',
'before_title' => '
',
'after_title' => '
' ); ?>
و اما حالا که سایدبار مورد نیاز را تعریف کردیم وقت آن رسیده با استفاده از تابع dynamic_sidebar آن را در قالب نمایش دهیم. شکل کلی تابع به صورت زیر می باشد.
این تابع تنها یک آرگومان ورودی دارد که در واقع همان id مربوط به سایدبار دلخواه ماست.
به این ترتیب توانستیم با چند گام ساده سایدبار خود را تعریف کرده و در محل دلخواه در قالب سایت به نمایش درآوریم.
به این نیاز داشتم.ممنون
با سلام
اگه ما بخوایم از این کد استفاده کنیم و یه ابزارک داشته باشیم بخوایم اون ابزارک خاص استایل دیگه ای داشته باشه یعنی css اون متفاوت باشه باید چیکار کنیم
میشه راهنمایی کنید
با تشکر
سلام دوست عزیز،
لحظاتی پیش پاسخ سوال شما در قالب نوشته ای روی «روزهای خط خطی» قرار گرفت. امیدوارم راهگشا باشد.
ای کاش استفاده از ساید بار آخرین مطالب و یا مطالب برگزیده را می گذاشتید
با سلام،
برای مواردی که فرمودید هم میشه کد نوشت و هم میشه از افزونه های آماده ی موجود استفاده کرد و هر کدوم مزایا و معایب خودشون رو دارند. شماکدوم مد نظرتون هست؟