ساخت ابزارک تب بندی در وردپرس

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

استفاده از تب‌بندی در سایت ممکن است برای افرادی که یک سایت ساده دارند بیهوده به نظر برسد، اما اگر شما هم قصد دارید سایت خود را گسترش دهید و یا اینکه همین الآن هم یک سایت با ورودی بالا دارید، از این موضوع غافل نشوید که تب‌بندی می‌تواند کمک بسیار زیادی به سایت شما کند.

امروز قصد داریم در این مقاله به شما آموزش دهیم چگونه یک ابزارک تب‌بندی jQuery را به وردپرس خود اضافه کنید. پس با ما همراه باشید.:)

چرا بهتر است ابزارک تب بندی بسازیم

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

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

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

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

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

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

ساخت ابزارک تب بندی در وردپرس

قبل از اینکه بریم سراغ آموزش باید این نکته را به شما بگویم که این آموزش برای کاربرانی است که در سطح متوسط هستند و تا حدودی با دانش HTML و CSS آشنا هستند، چراکه باید یک سری کد را به فایل‌های سایت خود اضافه کنید.

نکته: باوجوداینکه این روش کاملاً امتحان شده است اما ازآنجایی‌که در فایل‌های سایت شما تغییراتی را ایجاد می‌کند، بهتر است یک نسخه پشتیبانی از اطلاعات سایت تهیه کنید تا درصورتی‌که با مشکل مواجه شدید، بتوانید محتوا و اطلاعات را بازگردانی کنید و مشکل را برطرف نمایید.

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

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

شروع ساخت افزونه ابزارک تب بندی

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

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

// 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('mw-tabber-style.css', __FILE__));
wp_register_script('wpb-tabber-widget-js', plugins_url('wpb-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
?>

<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 = wpb_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("WPBTabberWidget");')
);
?>

در کد بالا ابتدا یک افزونه ایجاد می‌کنیم و سپس در افزونه یک ویجت ایجاد می‌کنیم. در بخش خروجی ویجت سی اس اس و جاوا اسکریپت اضافه و سپس یک خروجی HTML برای تب‌ها ایجاد می‌کنیم. در انتها ویجت را ثبت‌نام می‌کنیم.

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

اکنون نیاز است یک ویجت با کدهای PHP و HTML برای تب‌ها ایجاد کنیم و در گام بعدی برای نمایش آنها به‌عنوان تب jQuery اضافه کنیم. برای این کار کد زیر را به فایل 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 آماده است، گام بعدی افزودن یک ظاهر طراحی شده به تب می‌باشد. شیوه‌ی زیر را به فایل wpb-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;
}


نصب افزونه ساخته شده و استفاده از ابزارک

حالا باید فولدر mw-tabber-widget را در دایرکتوری سایت wp-content » plugins آپلود کرده و همچنین می‌توانید فولدر را به فایل‌های فشرده‌ی زیپ اضافه کنید و به پیشخوان وردپرس بروید و روی گزینه افزونه‌ها» افزودن کلیک کنید، سپس برای نصب افزونه، روی تب Upload کلیک کنید.

بعد از آپلود افزونه باید آن را فعال کنید، سپس به پیشخوان» ابزارک‌ها بروید و ویجت تب‌بندی را به نوار کناری سایت اضافه کنید.

به همین راحتی شما توانستید، به سایت وردپرسی خود یک تب کناری اضافه کنید. از آن لذت ببرید.:)

امیدواریم این مقاله برای شما مفید واقع شده باشد. سربلند و پیروز باشید.:)

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...