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

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

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

شاید استفاده از ابزارک های تب بندی در سایت وردپرسی شما برای افراد یک سایت ساده و بیهوده به نظر به رسد ولی شما می توانید با داشتن این ابزارک های تب بندی سایت خود را گسترش داده و کاربران بیشتری را به سمت سایت خود بکشید و سایت خود را گسترش دهید و یا اگر که همین حالا هم یک سایت با ورودی بالا دارید می توانید از این قابلیت استفاده کنید و کمک زیادی به کاربران خود کنید تا سوالاتی که در ذهن خود در مورد سایت شما دارند را اینجا مشاهده کنند

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

چرا باید در سایت وردپرسی خود ابزارک تب بندی داشته باشیم :

یکی از قابلیت های که در سایت وردپرسی استفاده می شود و شاید شما هم دیده باشید ، داشتن ابزارک های تب بندی در سایت و نمایش آن است ، شاید شما در اکثر سایت های وردپرسی دیده باشید که این ابزارک ها در چه صورت استفاده می شود ولی اگر که ندیده اید به صورت کامل بهتون توضیح می دهم

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

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

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

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

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

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

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

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

اول از همه شما باید یک فولدر به نام mihanacademy-tabber-widget در دسکتاپ خود ایجاد کنید و سپس در آن با استفاده از برنامه های ویرایشگر متن سیستم خود مانند NotePad یک فایل ایجاد کنید و نام آن را ma-tabber-widget.php بسازید و که قرار است کد های HTML و PHP خود را که برای ساخت ویجت یا ابزارک می خواهید بسازید را در آن قرار دهید

فایل دوم آن یک فایل CSS می باشد که برای استایل دهی به ویجت تب های سایت شما می باشد و شما باید این فایل را به نام ma-tabber-style.css قرار دهید و فایل سوم شما باید به نام ma-tabber.js باشد که در این فایل شما باید اسکریپت های jQuery را برای انیمیشنی کردن تب های خود کد نویسی کنید.

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

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

<?php
/* Plugin Name: mihanacademy jQuery Tabber Widget
Plugin URI: https://mihanacademy.org
Description: A simple jquery tabber widget.
Version: 1.0
Author: mihanacademy
Author URI: https://mihanacademy.org
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('ma-tabber-style.css', __FILE__));
wp_register_script('wpb-tabber-widget-js', plugins_url('ma-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 اضافه کنیم و برای ایم کار شما باید کد زیر را در فایل جاوا اسکریپت خود یعنی ma-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 آماده است و شما باید حالا ظاهر طراحی شده ابزارک خود را از حالت پیشفرض به حالت معمولی یا پیشرفته تغییر دهید و این کار با کد نویسی CSS انجام می شود و شما باید برای انجام این کار در فایل ساخته شده CSS خود که به نام ma-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;
}

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

خب همانطور که اول آموزش توضیح دادم الان شما باید یک فولدر به نام mihanacademy-tabber-widget داشته باشید و در آن سه فایل برای افزونه مورد نظر خود و حالا شما باید فولدر mihanacademy-tabber-widget را در یک فایل به صورت فشرده یا همان زیپ کنید و در وردپرس خود وارد شوید و بر روی گزینه افزونه ها و افزودن کلیک کنید و برای نصب افزونه بر روی دکمه Upload کلیک کنید و افزونه را نصب کنید ، اگر که نمی دانید چطور در وردپرس خود افزونه نصب کنید (آموزش نصب افزونه در وردپرس) را نیز مطالعه کنید.

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

به همین راحتی شما می توانید یک ابزارک تب بندی در وردپرس خود بسازید و نمایش دهید موفق و پیروز باشید 👀