آموزش اضافه كردن قابليت ابزارك به قالب - How to Widget-Enable WordPress Themes in 3 Easy Steps

WordPress Widgets are an amazing way to customize your blog besides wordpress plugins. How to widgetize your wordpress theme? I use a heavily modified version of the Blix wordpress theme, which does not support widgets…
First thing to know is that Widgets are part of WordPress core since WordPress 2.2 and you do not need to install any Widgets plugin to add widgets on your blog.
Step 1: Create functions.php

No such file existed in our theme, so we simply create a new functions.php and FTP it to the theme folder. Here is what exactly you need to put in the file

کد HTML:

---

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

---

This will work only if you use the default markup of wordpress with h2 as sidebar titles and an unordered list like this

کد HTML:

---

<ul>
<li>
<h2>Sidebar Title</h2>
<ul>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
</ul>
</li>
</ul>

---

Customize functions.php
But we do not use the default markup of wordpress. For SEO benefits, we use h4 for sidebar titles and do not use the ul and li unordered lists in this way. So instead of the above code, we change the function.php file in this way to suit our custom wordpress template.

کد HTML:

---

<?php if ( function_exists('register_sidebar') ) register_sidebar(array( 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h4>', 'after_title' => '</h4>', )); ?>

---

The code titles are self explanatory. before_widget and after_widget – we need no special code , so we leave it empty. before_title and after_title we use the h4. This modification overrides the default markup and now supports our custom template. You can modify it as per your own site web design css.
Step 2: Add Widgets to Dynamic Sidebar

This functions.php code will help widgetize your wordpress theme and support a single dynamic sidebar. Now when you go to your wordpress dashboard under Presentation, you will see a new item called Widgets.
http://www.quickonlinetips.com/archi...ss-widgets.jpg
In the Sidebar Arrangement, You can drag and drop widgets onto your sidebar from the list of preinstalled widgets like Tag Cloud, Recent posts, RSS feeds, Recent comments, Calendar, Archives, Categories, Search, Links easily.
http://www.quickonlinetips.com/archi...dget-types.jpg
Do not forget to save your changes and the widget will be updated. You can drag and drop as many widgets as you like. Clicking on the widget will pop up a set of options which you can modify to further customize the widget.
Step3: Add Dynamic Sidebar to Template

Now you need to place a php code in the sidebar to enable a dynamic sidebar that that will function to display the saved widgets. Paste this code anywhere while editing sidebar.php.

کد HTML:

---

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<?php endif; ?>

---

Save the changes and the new sidebar will now display your widgets! That all there is to it.
See the sidebar at work on our tumblelog (that is a recent posts and RSS widget!). Now go and find new widgets to add to your blog.
Update: Here is a tutorial on how to add multiple dynamic sidebars to wordpress template and support multiple combinations of widgets.
Updated Code for WP3

The latest versions of WordPress already have widgetized sidebars enabled in the core. So you just need to call the dynamic sidebars.
In functions.php, add this code
function quickchic_widgets_init() {
register_sidebar(array(
'name' => __( 'Sidebar 1', 'quickchic' ),
'id' => 'sidebar-1',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
}
add_action( 'init', 'quickchic_widgets_init' );
In sidebar.php you need to add this code to call it

کد HTML:

---

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php endif; ?>

---

ابزارک یکی از امکاناتی هستش که از نسخه ۲٫۲ به بعد به هسته وردپرس اضافه شد. این قابلیت خیلی کار رو برای ما راحت کرده؛ بطوریکه ما می‌تونیم به سادگی با کشیدن (Drag) یه ابزارک و قراردادن اون در مکان دلخواه‌مون اون رو توی یکی از ستون‌های سایت‌مون به نمایش دربیاریم. پوسته‌های جدید عموما از «ابزارک» پشتیبانی می‌کنن؛ اما اگه پوسته شما ابزارک رو پشتیبانی نمی‌کنه و یا خواستار این هستین که به تعداد منوهایی که از ابزارک پشتیبانی می‌کنن بی‌افزایین با ما همراه باشین.

کد PHP:

---

register_sidebars ( $count, $args ); 


---

کد اصلی برای تعریف ابزارک به شکل بالا هستش که ما می‌تونیم طبق نیازمون به اون مقدارهایی رو اضافه یا کم کنیم. در اکثر قالب‌ها ما شاهد یک ستون هستیم، به همین دلیل مقدار $count به صورت پیش‌فرض ۱ هستش. پارامتر بعدی ما $args هستش که در واقع در اون یه آرایه قرار می‌گیره که نام و شناسه و این‌جور چیزها رو می‌تونیم داخلش قرار بدیم.

کد PHP:

---

<?php if ( function_exists('register_sidebar') ) register_sidebar(); ?>

---

کد بالا که باید در فایل تابع پوسته ما، یعنی فایل functions.php موجود در پوشه پوسته قرار بگیره کارش اینه که میاد و واسه وردپرس میگه که بیا و ابزارک رو برای پوسته فعالش کن. توی این کد ما هیچ پارامتری واسه ابزارک‌مون در نظر نگرفتیم و همه چیز به‌صورت پیش‌فرض هستش. اگه یه نگاهی به بخش «ابزارک» توی پیشخوان بندازین مشاهده می‌کنین که ابتدا این قسمت واسه شما فعال شده و هم اینکه شما یه منو به نام «ستون کناری ۱» دارین که می‌تونین ابزارک‌های دلخواه‌تون رو داخلش قرار بدین.
از سری پیش‌فرض‌هایی که خود وردپرس واسه ابزارک‌ها در نظر می‌گیره میشه به موارد زیر اشاره کرد:

کد PHP:

---

'before_widget' => '<li id="%1$s" class="widget %2$s">',  'after_widget' => "</li>n", 'before_title' => '<h2  class="widgettitle">', 'after_title' => "</h2>n" 


---

یعنی به‌طور مثال اگه ما ابزارک «اطلاعات» رو فراخوانی کرده باشیم کد اچ‌تی‌ام‌الی که قراره واسه مرورگر فرستاده بشه به‌صورت زیر هستش :

کد PHP:

---

<li id="meta-5" class="widget widget_meta"> <h2 class="widgettitle">اطلاعات</h2> . . . </li> 


---

این تنظیمات پیش‌فرض یه سری مشکلات رو ممکنه واسه ما به‌وجود بیاره؛ اگه توی کد بالا دقت کرده باشین مشاهده کردین که خود وردپرس میاد و ابتدای ابزارک رو با تگ li شروع میکنه و برای نام ابزارک هم از تگ h2 استفاده کرده؛ ممکنه ما توی کدهای سی‌اس‌اس مون برای منوهای کناری یه استایل دیگه‌ای رو تعریف کرده باشیم. یعنی مثلا بیا و ابتدای منو رو با تگ div شروع کن، یه class اختصاص بده به نام و هر چیز دیگه‌ای. اینجا هستش که اگه ما از دستورات پیش‌فرض تبعیت کنیم با مشکل به‌هم‌ریختگی قالب مواجه میشیم و اینجا هستش که ما مجبور میشیم خودمون رو با شرایط وردپرس وفق بدیم ولی چون وردپرس یه سیستم متن بازه، ما می‌تونیم اون رو طبق نیازمون تغییرش بدیم.
اگه یادتون باشه گفتیم که پارامتر $args کارش اینه که به ما اجازه میده تا یه سری مقادیر رو تعریف کنیم. حالا میخوایم بیایم و واسش مقادیر دلخواهمون رو تعریف کنیم؛ مثل طریقه قراردادن ابزارک در قالب. تو این مثال واسه وردپرس قراره بگیم که بیا و هر ابزارک رو با section و تیتر هر ابزارک رو هم با تگ h2 شروع کن

کد PHP:

---

'before_widget' => '<section id="%1$s">', 'after_widget'  => "</section>", 'before_title' => '<h2  class="wi-title">', 'after_title' => "</h2>" 


---

حالا اگه بخوایم واسه ستونی هم که تعریف کردیم یه نام بزاریم به صورت زیر عمل می‌کنیم:

کد PHP:

---

'name'=> 'نام موردنظر' 


---

برای تعریف دو کد بالا برای ابزارک لازمه که بصورت زیر کدهامون رو به کد اصلی اضافه کنیم:

کد PHP:

---

<?php if ( function_exists('register_sidebar') ) register_sidebar(  array ( 'name'=> 'نام موردنظر',  'before_widget' => '<section  id="%1$s">',  'after_widget' => '</section>',   'before_title' => '<h2 class="wi-title">',  'after_title'  => '</h2>' )); ?>

---

نکته‌ای که داشت فراموشم میشد طریقه فراخوانی کردن ابزارک‌ها برای ستون کناری هستش. ممکنه شما توی پوسته‌تون ۳ تا منو داشته باشین. شما برای هرکدوم یه فایل php در نظر گرفتین که از طریق فایل sidebar.php اونها رو فراخونی کردین. کافیه به اون فایل ها برین و هرجا که شروع منوها هست از کد زیر استفاده کنین:

کد PHP:

---

<?php if ( !dynamic_sidebar() ) : ?> <?php endif;?>

---

این کد میاد و بر اساس تعدادی که شما توی فایل functions.php تعریف داشتین و بر اساس ترتیبی که منوهاتون رو توی فایل sidebar.php قرار دادین منوها رو برمیگردونه. شما می‌تونین خودتون این عملیات رو برعهده بگیرین و واسش بگین منویی که اسمش مثلا sidebar22 هست رو بیا اینجا واسم برگردون. مثلا ما میخوایم بیایم و منویی رو توی قسمت فوتر سایت فراخوانی کنیم. از قبل توی فایل تابع پوسته اسم footer رو ما واسه منو در نظر گرفتیم. می‌تونیم به طریق زیر فراخوانیش کنیم:

کد PHP:

---

<?php if ( !dynamic_sidebar('footer') ) : ?> <?php endif;?>

---

به همین راحتی شاهد این بودین که چجوری ما تونستیم از «ابزارک» استفاده ببریم. موفق باشید