ایجاد تب در وردپرس با jQuery

خانه » آموزش وردپرس » آموزش سئو وردپرس » ایجاد تب در وردپرس با jQuery

ایجاد تب در وردپرس با jQuery

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

ایجاد تب در وردپرس با jQuery

ایجاد تب در وردپرس با jQuery

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

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

برای اینکار نیاز به ساختن سه فایل داریم یکی برای کدهای html php برای ساختمان ویدجت و یک فایل css هم برای استایل دهی به ویدجت و یک فایل دیگر هم برای کدهای اسکریپت jquery برای اضافه کردن انیمیشن. این روش کاملا استاندارد می باشد و مشکلی بابت خراب شدن یا ناسازگاری کد ها با قالب وردپرس سایت خود نخواهید داشت اما به هر حال قبل و بعد از انجام اینکار از سایتتان بکاپ بگیرید تا اگر مشکلی برای شما پیش امد بتوانید رفع کنید.

 نحوه ایجاد ویدجت jQuery  در وردپرس

اولین کاری که برای ایجاد تب در وردپرس با jQuery ، باید انجام دهید ایجاد یک فولدر به نام dehkadeh-tabber-widget روی دسکتاپ میباشد. پس از آن  فایل درون این فایل با استفاده از ویرایشگر متنی ساده مانند Notepad ایجاد کنید. هدف از اولین فایل ایجاد dk-tabber-widget.php است که شامل کد HTML  و PHP  برای ایجاد تب و ویدجت سفارشی وردپرس میباشد.

فایل دوم یک  dk-tabber-style.css است که شامل کد css برای تب ها می باشد. سومین فایل ایجاد یک  dk-tabber.js است که شامل اسکریپت jQuery  برای راه گزینی تب و افزودن انیمیشن میباشد.

ابتدا با فایل mw-tabber-widget.php شروع می کنیم, هدف از این فایل ایجاد یک افزونه برای ثبت نام ویدجت می باشد. اگر اولین باری است که ویدجت وردپرس ایجاد می کنید توصیه می کنیم کد زیر را در فایل dk-tabber-widget.php اضافه کنید.

<?php
/* Plugin Name: dehkadeh jQuery Tabber Widget
Plugin URI: http://dehkadeh-wp.ir
Description: A simple jquery tabber widget.
Version: 1.0
Author: dehkadeh
Author URI: http://dehkadeh-wp.ir
License: GPL2
*/
// creating a widget
class dwTabberWidget extends dk_Widget {
function dwTabberWidget() {
$widget_ops = array(
'classname' => 'dwTabberWidget',
'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
'dwTabberWidget',
'dehkadeh 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('dk-tabber-style', plugins_url('dk-tabber-style.css', __FILE__));
wp_register_script('dk-tabber-widget-js', plugins_url('dk-tabber.js', __FILE__), array('jquery'));
wp_enqueue_style('dk-tabber-style');
wp_enqueue_script('dk-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 = dw_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("dkTabberWidget");')
);
?>

پس تا ابنجا برای ایجاد تب در وردپرس با jQuery ، یک افزونه وردپرس ایجاد شد و در داخل آن یک ویجت ایجاد می شود. حال ما باید برای بخش خروجی ویجت کد های جاوا اسکریپن و css را اضافه کنیم. اکنون باید کد های زیر را به فایل dk-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 نیز آماده است، اکنون تنها کاری که باید انجام دهید آن است که برای آن یک ظاهر طراحی کنید. برای انجام این کار میتوانید کد زیر را در فایل dk-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;
}

اکنون فولدر dk-tabber-widget را در دایرکتوری سایت /wp-content/plugins/  آپلود کرده و همچنین می توانید فولدر را به فایلهای فشرده ی زیپ اضافه کنید و به افزونه ها>افزودن در بخش مدیریت بروید و روی تب upload برای نصب افزونه کلیک کنید. پس از فعال شدن افزونه به نمایش>ویدجت بروید و ویدجت تب بندی را به نوار کناری اضافه کنید.

حال میتوانید به بخش نمایش»ابزارک ها بروید و ویجت را به سایدبار مورد نظر خود اضافه کنید.

ایجاد تب در وردپرس با jQuery

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

 

 

ناشر محصول

فاطمه ساجدی

فاطمه ساجدی

فاطمه ساجدی هستم. کارشناسی ارشد ای تی. کار تولید محتوا و طراحی سایت رو انجام میدم.

مطالب جدید

جلوگیری از ارسال نظرات اسپم در وردپرس

مدیریت سفارشات مشتریان در ووکامرس

مدیریت سفارشات مشتریان در ووکامرس

انتقال مستقیم به صفحه تسویه حساب در ووکامرس

انتقال مستقیم به صفحه تسویه حساب در ووکامرس

کاهش رتبه الکسا در وردپرس

کاهش رتبه الکسا در وردپرس

ساخت جدول قیمت گذاری در وردپرس

ساخت جدول قیمت گذاری در وردپرس

افزونه meta slider

افزونه meta slider

هنوز نظری ثبت نشده! شما نظری ندارید؟!

*

code