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

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

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

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

ایجاد فایل های مهم برای تب ها

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

در ابتدای کار فایل wp-tabber-widget.php را گشوده و کد زیر را در آن قرار دهید:

 '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
?>
  
 









 
  

پس از آن شما باید به این ابزارکی که ساخته شده است کد های 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;
}

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


امتیاز شما از ۱ تا ۵

Loading…

Let’s block ads! (Why?)