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

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

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

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

حال فایل 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");') ); ?>

دوستان عزیز ما در کد بالا، ما یک افزونه به نام 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);

خب دوستان عزیز حال که کار در کد نویسی به پایان رسید باید یک استایل زیبا و مورد استفاده نیز برای آن قرار دهیم که هیچ کدی بدون استایل نمیتواند مود توجه قرار گیرد که برای این منظور از کد زیر استفاده میکنیم.

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 عوض کنید البته در صورتی که نیاز دارید.فقط توجه کنید که در حین تعویض این محتویات به آن ها تسلط کامل داشته باشید که دچار ایجاد ارور های مختلف نشوید.

ممنونم از همراهی شما دوستان عزیز و همراهان ارجمند
در ادامه این اموزش ها نیز همراه من باشید
منبع: بیگ تم مرجع آموزش های هک وردپرس و آموزش های افزونه های کاربردی وردپرس