ساخت تب بار جی کوئری در وردپرس

احتمالا تا به حال در وب گردی های خود با وب سایت هایی مواجه شدید که در تب بار (Tab Bar) سایت خود پست های اخیر، محبوب و ویژه را نمایش می دهند و شما با یک کلیک، به راحتی قادر به مشاهده آن ها هستید.

این نوع از تب بارها jQuery نامیده می شودند.

ویژگی این نوع از تب بارها در آن است که با جای دادن چند تب در یک منو، سبب ذخیره فضای کاربری استفاده شده در صفحه می گردند.

در این آموزش ما به شما خواهیم گفت که چگونه تب بارهایی با خاصیت جی کوئری (jQuery) بسازید.

آیا شما مطمئن هستید که می خواهید از ویجت تب بار jQuery استفاده کنید؟

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

شروع کنیم!

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

گام اول:

در ابتدا یک فولدر بر روی میز کار (Desktop) خود ایجاد کنید و نام آن را wprahnama-tabber-widget بگذارید.

گام دوم:

با استفاده از Notpad سه فایل ایجاد کنید. فایل اول wpr-tabber-widget.php نام دارد و در آن کدهای HTML و PHP قرار دارد که جهت ساخت تب ها و ویجیت استفاده می شود.فایل دوم wpr-tabber-style.css نام دارد. این فایل حاوی کدهای CSS بوده و مکانی برای استایل دهی به تب ها می باشد. و نهایتا فایل سوم wpr-tabber.js نام دارد که حاوی  jQuery scrip برای سوئیچ تب ها و اضافه کردن انیمیشن ساخته می شود.

گام سوم:

کار را با فایل wpr-tabber-widget.php آغاز می کنیم. هدف این فایل در آن است که یک پلاگین جهت ثبت ویجت بسازد. به این منظور کدهای زیر را در آن جایگذاری می کنیم.

<?php
/* Plugin Name: wprahnama jQuery Tabber Widget
Plugin URI: https://www.wprahnama.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: wprahnama
Author URI: https://www.wprahnama.com
License: GPL2
*/

// creating a widget
class wprTabberWidget extends WP_Widget {

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

function wpr_tabber() { 

// Now we enqueue our stylesheet and jQuery script

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

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

<ul class="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
<?php 
// Enter code for tab 1 here. 
?>
</div>

<div id="tab2" class="tab_content" style="display:none;">
<?php 
// Enter code for tab 2 here. 
?>
</div>

<div id="tab3" class="tab_content" style="display:none;">
<?php 
// Enter code for tab 3 here. 
?>
</div>

</div>

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

<?php

}

extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget; 
$tabs = wpr_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("wprTabberWidget");')
);
?>

در کد فوق ما ابتدا یک پلاگین (افزونه) ساخته و سپس درون آن پلاگین یک ویجت می سازیم.در بخش خروجی ویجت نیز اسکریپت ها (scripts) و استایل شیت ها (stylesheet) را اضافه کرده و سپس خروجی HTML برای تب هایمان تولید کرده ایم. در پایان ما ویجت را ثبت کردیم. به یاد داشته باشید شما نیاز به اضافه کردن محتوا جهت نمایش در هر تب دارید.

گام چهارم:

اکنون نیاز به ساخت ویجت (widget) با استفاده از کدهای PHP و HTML برای تب هایمان داریم. در این مرحله jQuery جهت نمایش تب ها در tab container اضافه خواهد شد. برای انجام این کار کد زیر را در فایل 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);

اکنون ویجت ما با jQuery آماده شده است.

گام پنجم:

اکنون نوبت به استایل دهی به تب ها استاست. برای شما یک نمونه استایل قرار داده ایم که می توانید آن را در فایل wpr-tabber-style.css جایگذاری کنید.

ul.tabs { 
position: relative; 
z-index: 1000; 
float: left; 
border-left: 1px solid #C3D4EA; 
}
ul.tabs li {
position: relative; 
overflow: hidden; 
height: 26px; 
float: left; 
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;
}

نکته: در صورتی که با CSS آشنایی دارید، می توانید کد بالا را به دلخواه خود ویرایش نمایید.

گام آخر:

اکنون دیگر کار تقریبا تمام شده و شما باید فولدر wprahnama-tabber-widget  را در مسیر wp-content/plugins از طریق FTP آپلود نمایید.

همچنین می توانید پوشه wprahnama-tabber-widget را فشرده کرده و آن را از طریق کنترل پنل وردپرس مثل سایر پلاگین ها آپلود و نصب کنید.

پس از فعالسازی پلاگین به مسیر نمایش / ابزارک ها بروید و با کشیدن و رها کردن ویجت  wprahnama Tabber در سایدبارتان از آن استفاده کنید.

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