قطعا در سایت های مختلفی دیده اید که بخشی به نام تب دارند و در آن محطالب محبوب، آخرین مطالب و… را با یک کلیک نمایش می دهند؟ در این مطلب قصد داریم چگونگی ساخت ابزارک تب ها در وردپرس را آموزش دهیم تا بتوانیم در سایت وردپرسی خود ابزارک تب ها را داشته باشیم

چرا ابزارک تب ها را باید داشته باشیم؟

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

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

نکته: برای یادگیری این آموزش نیاز است که با HTML و CSS آشنا باشید.

ساخت ابزارک تب های جی کوئری

شروع می کنیم. در مرحله اول نیاز است که یک پوشه به نام wp-tab-widget بسازید. سپس شما می بایست 2 فایل در داخل این پوشه بسازید که در ادامه خواهیم گفت

فایل اول با نام wp-tabber-widget.php بسازید. این فایل شامل کدهای HTML و PHP مربوط به تب ها است. فایل دوم را با نام wp-tabber-style.css بسازید. کد های این فایل برای استایل دهی به تب ها می باشد. فایل سوم را نیز با نام wp-tabber.js بسازید. این فایل شامل اسکریپت های مربوط به تب هاست.

حال فایل wp-tabber-widget.php را با NotePad باز کنید و کد زیر را داخل آن قرار دهید

<?php
/* Plugin Name: WPSchool jQuery Tabber Widget
Plugin URI: http://wpschool.ir
Description: نمونه افزونه ابزارک تب ها اماده شده توسط مدرسه وردپرس
Version: 1.0
Author: WPSchool
Author URI: http://wpschool.ir
License: GPL2
*/

// creating a widget
class WPBTabberWidget extends WP_Widget {

function WPBTabberWidget() {
		$widget_ops = array(
		'classname' => 'WPBTabberWidget',
		'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
		'WPBTabberWidget',
		'WPBeginner Tabber Widget',
		$widget_ops
);
}
function widget($args, $instance) { // widget sidebar output

function wpb_tabber() { 

// Now we enqueue our stylesheet and jQuery script

wp_register_style('wpb-tabber-style', plugins_url('wp-tabber-style.css', __FILE__));
wp_register_script('wpb-tabber-widget-js', plugins_url('wp-tabber.js', __FILE__), array('jquery'));
wp_enqueue_style('wpb-tabber-style');
wp_enqueue_script('wpb-tabber-widget-js');

// Creating tabs you will be adding you own code inside each tab
?>

<ul class="tabs">
<li class="active"><a href="#tab1">جدیدترین ها</a></li>
<li><a href="#tab2">برچسب ها</a></li>
<li><a href="#tab3">نظرات</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
<?php wp_get_archives('type=postbypost&limit=3'); ?>
</div>

<div id="tab2" class="tab_content" style="display:none;">

<?php wp_tag_cloud('smallest=8&largest=10&'); ?>

</div>

<div id="tab3" class="tab_content" style="display:none;">
<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 10";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.":" . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>
</div>

</div>

<div class="tab-clear"></div>

<?php

}

extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget; 
$tabs = wpb_tabber(); 
// output tabs HTML
echo $tabs; 
// post-widget code from theme
echo $after_widget; 
}
}

// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget("WPBTabberWidget");')
);
?>

با کد بالا، ما یک افزونه به نام WPSchool jQuery Tabber Widget ساختیم. اگر با روش افزونه نویسی آشنا نیستید افزونه نویسی در وردپرس را مطالعه نمایید.

حال نیاز داریم و اسکریپت ها و استایل های مربوط به ابزارک تب ها را تعریف کنیم. پس در ابتدا یک فایل به نام wp-tabber.js ساخته و کدهای زیر را درون آن قرار دهید

(function($)  {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
else {$(activeTab).fadeIn();}
return false;
});
})(jQuery);

حال ابزارک ما آماده است. در قدم بعدی نیاز است که استایل های ابزارک را نیز تعریف کنیم. پس یک فایل به نام wp-tabber-style.css ساخته و کدهای زیر را داخلش قرار دهید:

ul.tabs { 
position: relative; 
z-index: 1000; 
float: right; 
border-left: 1px solid #C3D4EA; 
}
ul.tabs li {
position: relative; 
overflow: hidden; 
height: 26px; 
float: right; 
margin: 0; 
padding: 0; 
line-height: 26px; 
background-color: #99B2B7;
border: 1px solid #C3D4EA; 
border-left: none; 
}
ul.tabs li  a{ 
display: block; 
padding: 0 10px; 
outline: none; 
text-decoration: none;
}
html ul.tabs li.active, 
html ul.tabs li.active a:hover { 
background-color: #D5DED9; 
border-bottom: 1px solid #D5DED9; 
}
.widget-area .widget .tabs a  { 
color: #FFFFFF; 
}
.tab_container {
position: relative; 
top: -1px; 
z-index: 999; 
width: 100%; 
float: left; 
font-size: 11px; 
background-color: #D5DED9; 
border: 1px solid #C3D4EA;
}
.tab_content { 
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul { 
margin: 0;
padding: 0; 
list-style: none; 
}
.tab_content li { 
margin: 3px 0;
 }
.tab-clear {
clear:both;
}

آموزش امروز هم به پایان رسید. با استفاده از افزونه بالا می توانید آخرین نوشته ها، برچسب ها و دیدگاه ها را به صورت تب نمایش دهید.

همچنین می توانید محتویات این تب ها را مطابق میل خود و داخل فایل wp-tabber.php عوض کنید

امیدوارم مورد پسند شما واقع شده باشد

موفق باشید

8 دیدگاه برای “ساخت ابزارک تب ها در وردپرس

  • امیر
    - ۱۶ خرداد , ۱۳۹۳

    سلام من اینو ساختم اصلا مثل مال خودتون نیست که خیلی ساده هست می شه استایلی که برای خودتون ساختین رو برای من ایمیل کنید با تشکر

  • طراحی قالب وردپرس
    - ۶ مرداد , ۱۳۹۴

    عالللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللی بود

  • mohamad
    - ۸ شهریور , ۱۳۹۴

    سلام.امکان استفاده از این افزونه در قالب اصلی هم وجود داره؟

    • الناز
      - ۱۶ شهریور , ۱۳۹۴

      سلام محمد جان. منظورتون از قالب اصلی چیه؟ این ابزارک هستش

  • مهرداد
    - ۲۱ شهریور , ۱۳۹۴

    سلام
    الان اینو دقیق چیکار کنیم؟میشه توضیح بدین چطور توی قالب استفاده کنم ؟ ممنون

    • سیروس
      - ۲۳ شهریور , ۱۳۹۴

      سلام دوست من. متوجه منظورتون نشدم. توی آموزش گفتم که کد ها داخل فایل functions.php باشند
      لطفا با ایمیل wpschool1@gmail.com در ارتباط باشید

  • علی
    - ۲۸ شهریور , ۱۳۹۴

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

    • الناز
      - ۲۸ شهریور , ۱۳۹۴

      سلام دوست عزیز. از همین آموزش میتونید عوض کنید فقط دقت کنید که باید نام class ها و فانکشن ها و id ابزارک رو عوض کنید

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

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

-- بارگیری کد امنیتی --