آموزش ساخت ابزارک تب ها در وردپرس

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

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

اما نحوه ساخت این تب ها در سایت

در ابتدا باید در سایت خود یک پوشه بسازید و نام آن را wp-tab-widget قرار دهید  و در مرحله دوم درون این پوشه سه فایل با نام های wp-tabber-widget.php و wp-tabber-style.css بسازید.قابل توجه شما که فایل اولی شامل کد های html و php مخصوص تب ها و فایل دوم مربوط به کد های css این تب ها می باشد.و در نهایت یک فایل با نام wp-tabber.js که درون این فایل اسکریپت های مربوط به تب های ایجاد شده است.حال نوبت به کد نویسیدرون این فایلهاست …

1. کد زیر را در فایل wp-tabber-widget.php جای دهید.

<?php // 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");') ); ?>

2. با کد بالا ما یک افزونه با نام WPSchool jQuery Tabber Widget ایجاد کردیم که نیاز به اسکریپت و css دارد که شما می بایست کد زیر را درون فایل 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);

3. حال نوبت به استایل دهی به تب هاست ما استایلی آماده کردیم.شما می توانید از آن استفاده کنید و یا اگر با کد نویسی css آشنایی دارید خود استایل بنویسید.کد زیر را در فایل 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;
}

کاربران گرامی سایت آپ تم کار ا به پایان رسید و با این ابزارک که ایجاد کردید قادر هستید در وبسایت خود تب هایی قرار دهید تا دسترسی کاربران خود را نسبت به مطلب هموار کنید.

منبع: uptheme  مرجع: آموزش وردپرس