همانطور که میدانید با استفاده از تب ها میتوانید بخش های مختلفی را در سایت خود ایجاد کنید، میتوانید مطالب محبوب را در سایت خود نمایش دهید میتوانید یک تب مخصوص تبلیغات ایجاد کنید و مهمترین قابلیت و ویژگی تب ها آن است که با استفاده از آنها میتوانید در فضای صفحه نمایش صرفه جویی کنید. در این مطلب شما ایجاد تب jQuery در وردپرس را فرا خواهید گرفت.
نحوه اضافه کردن محتوای تب دار به وردپرس
شما میتوانید ویجت های مورد نظر خود را در تب های مختلفی استفاده کنید. و این را بدانید که در سایت های بزرگ ممکن است مدیران وبسایت ها این احساس را داشته باشند که فضای کافی را جهت نمایش محتوا ندارند در این زمان تب ها به کمک شما می آیند.
نمایش آیتم های مختلف در یک مکان یکی از ویژگی های مهم تب ها است، با کلیک بر روی هر تب کاربران خواهند توانست تا محتوای مورد نظر خود را مشاهده کنند. همانطور که تا کنون مشاهده کرده اید مدیران وبسایت ها از تب ها برای نمایش مطالب محبوب و یا آخرین مطالب استفاده میکنند. خب اگر به این قابلیت در سایت خود نیاز دارید میتوانید این مطلب را تا انتها مطالعه کنید.
دقت داشته باشید که این مطلب برای کاربرانی است که دارای دانش CSS , HTML هستند.
ایجاد ویجت با استفاده از کدنویسی و طراحی افزونه سفارشی
در دسکتاپ خود یک فولدر با نام digiwp-tabber-widget ایجاد کنید . در این فولدر یک فایل متنی ایجاد کنید. در این فایل کد های ویجت را وارد خواهیم نمود. نام فایل را dw-tabber-widget.php قرار دهید.
اکنون با استفاده از نوت پد فایل متنی دیگری را ایجاد کنید و نام آن را dw-tabber-style.css قرار دهید و فایل دیگری نیز با نام dw-tabber.js ایجاد کنید، فایل css که برای استایل دهی به ویجت شما است و فایل js که دارای اسکریپت های جی کوئری برای افزودن تب است.
اکنون باید کد زیر را در فایل dw-tabber-widget.php قرار دهید:
<?php
/* Plugin Name: digiwp jQuery Tabber Widget
Plugin URI: https://digiwp.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: digiwp
Author URI: https://digiwp.com
License: GPL2
*/
// creating a widget
class dwTabberWidget extends WP_Widget {
function dwTabberWidget() {
$widget_ops = array(
'classname' => 'dwTabberWidget',
'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
'dwTabberWidget',
'digiwp 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('dw-tabber-style', plugins_url('dw-tabber-style.css', __FILE__));
wp_register_script('dw-tabber-widget-js', plugins_url('dw-tabber.js', __FILE__), array('jquery'));
wp_enqueue_style('dw-tabber-style');
wp_enqueue_script('dw-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("dwTabberWidget");')
);
?>
اتفاقی که در کد بالا می افتد آن است که یک افزونه وردپرس ایجاد شده و در داخل آن یک ویجت ایجاد میشود. حال ما باید برای بخش خروجی ویجت کد های جاوا اسکریپن و css را اضافه کنیم. اکنون باید کد های زیر را به فایل dw-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);
اکنون فایل جی کوئری نیز آماده است، اکنون تنها کاری که باید انجام دهید آن است که برای آن یک ظاهر طراحی کنید. برای انجام این کار میتوانید کد زیر را در فایل dw-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;
}
اکنون میتوانید فولدر dw-tabber-widget را در دایرکتوری /wp-content/plugins/ آپلود کنید. همینطور میتوانید فولدر را زیپ کنید و آن را با استفاده از بخش افزونه ها»افزودن در سایت خود آپلود کنید. پس از آپلود افزونه را در سایت خود فعالسازی کنید.
حال میتوانید به بخش نمایش»ابزارک ها بروید و ویجت را به سایدبار مورد نظر خود اضافه کنید.
با این روش شما موفق به افزودن یک ابزارک جرفه ای به وردپرس شدید. شما می توانید هر نوع محتوایی را به این صورت به سایت خود اضافه کنید و در صورت آشنایی لازم آن را حرفه ای تر کنید.
