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

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

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

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

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

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

اول فایل wp-tabber-widget.php را باز کنید و کد زیر را در آن کپی کنید:
[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
?>

• جدیدترین ها
• برچسب ها
• نظرات

[/php] بعد از آن شما باید به این ابزارکی که ساخته اید کد های js را برای عملکرد صحیح آن اضافه کنید که به صورت زیر است:
[php] (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);
[/php] در آخر اگر شما نیاز به دادن استایل هایی به آن هستید که یک مورد از این استایل ها برای شما در ادامه قرار داده می شود:
[php] 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;
}
[/php] مطالب مرتبط:

تغییر نام کاربری در وردپرس

رفع مشکل ارسال ایمیل در وردپرس

ریدایرکت تصاویر وردپرس به پست اصلی برای افزایش سئو

تقسیم بندی فایلهای XML بزرگ برای درون ریزی در وردپرس

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