ایجاد تب در ستون کناری

راه های مختلفی برای ایجاد تب در سایدبار سایت وجود دارد در این آموزش به یک راه خیلی ساده ساخت تب با استفاده از جی کوئری می پردازیم

ابتدا برگه ای به نام tabs.php  به قالب خود اضافه نموده و کدهای زیر را در آن کپی می کنیم

                <table align="center" cellpadding="0" cellspacing="0" class="tableTabs">
<thead>
<tr class="tab-header">
  <td deta="tab1" class="active"><div>تازه ها</div></td>
  <td deta="tab2"><div>دسته ها</div></td>
  <td deta="tab3"><div>برچسب</div></td>
</tr>
</thead>
<tbody class="tabs">
<tr id="tab1" class="active">
  <td colspan="3"><div> <?php 
   $custom_query = new WP_Query(array(
'post_status' =>'publish',
'post_type' =>'post',
'order' =>'descending',
'orderby' =>'ID',
'posts_per_page' =>'8',
 
  'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1 
  ));
  ?>
        <ul>
  <?php if($custom_query->have_posts()) :
while($custom_query->have_posts()) : $custom_query->the_post();?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark"><!-- برای حذف تصویر ارسال کننده از اینجا حذف شود --><span title="ارسال شدهتوسط <?php the_author();?>" ><?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?> </span><!-- برای حذف تصویر ارسال کننده تا اینجا حذف شود --><?php the_title(); ?></a></li>
<?php endwhile;endif;?>
  </ul>
  <?php wp_reset_query(); ?>
</div></td>
</tr>
<tr id="tab2">
  <td colspan="3"><div><ul>
<?php wp_list_categories('orderby=name&show_count=1'); ?>
</ul>
  </div></td>
</tr>
<tr id="tab3">
  <td colspan="3"><div>
<?php wp_tag_cloud('smallest=8&largest=12&number=40&orderby=count&order=DESC'); ?>
</div></td>
</tr>
</tbody>
</table>

ما در این نمونه برای محتوای سه تب به ترتیب آخرین ارسال ها همراه با تصویر نویسنده و دسته بندی های سایت به همراه تعداد مطالب هر دسته و مجموعه ای از ۴۰ برچسب سایت را قرار داده ایم شما می توانید با ویرایش محتوای هر تب هر کد یا پرس و جویی را خواستید احضار کنید
برای این منظور می توانید از ژنراتور کوئری سازسایت استفاده کنید

در مرحله بعد کدهای استایل را به فایل style.css  قالب اضافه می کنیم

.tableTabs {display:table; border:10px #646D76 solid; width:240px;}
.tableTabs td { background:#646D76; }
.tableTabs .tab-header td { width:80px; line-height:32px;}
.tableTabs td div { display:block; padding:5px; margin:0px; background:#FFFFFF; border:1px #000 solid; position:relative;}
.tableTabs .tab-header td div { background:#494C55; text-align:center; color:#D5CECF; padding-bottom:0; border:1px #646D76 solid;border-bottom:0px transparent none;cursor:pointer;width:70px;}
.tabs td div { margin:-1px 0 0px 0; overflow:hidden; padding-top:2px; width:234px; z-index:1;}
.tableTabs .tab-header td.active div { background:#FFFFFF; color:#000000; border:1px #000 solid; border-bottom:0px transparent none; z-index:2;}

معمولا قالبها به کتابخانه جی کوئری متصلند اما در صورتی که متصل نبودند می شه با اضافه کردن کد زیر در functions.php قالب

  wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js', 'jquery', '1.8.1'); // Load Google CDN jQuery

یا کد زیر در header.php  قالب را به کتابخانه jquery  متصل کرد

  <script src="http://code.jquery.com/jquery-latest.js"></script>

مرحله آخر کدهای jquery داخل صفحه هستند این کدها را در زیر table  رسم شده در برگه tabs.php قرار می دهیم

<script type="text/javascript">
<!--
$(".tabs tr").hide();
$(".tabs tr.active").show();
$(".tab-header td").click(function() {
   var myid = ".tabs tr#"+$(this).attr("deta");
   $(".tab-header td,.tabs tr").removeClass("active");
   $(".tabs tr").hide();
   $(this).addClass("active");
   $(myid).show();
});
//-->
</script>

تنها کار باقی مانده اینکلود تبها به برگه sidebar.php  مربوطه است

<?php include (TEMPLATEPATH . '/tabs.php'); ?>

این کد را بعد از

<?php endif;?>

یا به عبارت دیگر خارج از شرط داخل صفحه sidebar.php  قرار می دهیم