افزودن تب بندی jquery به وردپرس

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

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

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

افزودن ابزارک تب بندی jquery به وردپرس چه فایده ای دارد؟

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

خب الان خیلی راحت مطالب مفیدتون رو میتونید به ستون های فرعی موجود در سایتتون drag and drop کنید و اونا رو به نمایش بذارید ولی آیا فکر اینم هستید که در آینده ای نه چندان دور کلی مطلب مفید خواهید داشت که باید به ستون های فرعی تون اضافه کنید ولی این کار باعث بی نظمی در سایت شلوغ و نامرتب نشون دادن سایتتون خواهد شد.

در یه همچنین شرایطی است که تب هایی که میخوایم بهتون آموزشش رو بدیم به کمکتون میاد.

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

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

اگر به سایت های حرفه ای در این زمینه دقت کنید میبینید که اکثرا برای نمایش تازه ترین مطلب ها یا مطالب داغ هفته یا مطالب پر بازدیدشون از این روش بهره میگیرند.

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

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

افزودن تب بندی jquery به وردپرس

ساختن ویدجت یا ابزارک نمایش تب بندی jquery در وردپرس

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

برای اینکار ابتدا یک پوشه به نام webmaster-tabber-widget در سیستم خودتون بسازید و درونش هم یک فایل با نام wm-tabber-widget.php ایجاد کنید.

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

خب اولین فایل رو قراره با نام wm-tabber-widget.php ایجاد کنیم که شامل کد های html php هست که در زیر میبینید.

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

اگر این اولین باری هستش که دارید ویدجت وردپرس میسازید فقط کدهای زیر رو copy کنید سپس در notepad پیست کنید و در پوشه مربوطه save کنید.

حتما دقت کنید که پسوند فایل .php باشه.

<?php
/* Plugin Name: webmaster98.com jQuery Tabber Widget
Plugin URI: https://webmaster98.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: webmaster98
Author URI: https://webmaster98.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");')
);
?>

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

برای اضافه کردن کد های jquery همونطور که در بالا گفته شد notepad رو باز کنید و کد های زیر رو درونش بریزید.

این فایل رو هم با نام wm-tabber.js در پوشه مربوطه save کنید و حتما به پسوند فایل توجه داشته باشید.

(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);

خب الان نوبت فایل css هست که باز هم کد هایی را که در زیر مشاهده می کنید copy کرده و در notepad مثل بالا past کنید.

این فایل رو هم با نام wm-tabber-style.css در پوشه مربوطه save کنید. اینبار هم حتما دقت داشته باشید که پسوند فایل ذخیره شده .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;
}

خب کار تمام است بهتون تبریک میگم شما موفق شدید یک افزونه جدید بسازید و ویدجت …

الان برای نصب این افزونه دو راه وجود داره یکیش این که فولدر webmaster-tabber-widget رو در دایرکتوری سایتتون جایی که بقیه افزونه ها قرار دارن یعنی

(/wp-content/plugins/) قرار بدید یا میتونید فولدر webmaster-tabber-widget رو با نرم افزار های فشرده سازی مثل winrar به فایل فشرده تبدیل کنید و در قسمت افزونه ها در افزودن در بخش مدیریت سایتتون افزونه رو upload کنید.

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

افزودن تب بندی jquery به وردپرس

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