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

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

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

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

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

برای مطالعه مطالب بیشتر، به صفحه بلاگ سایت دکتر گرافیک مراجعه کنید.

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

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

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

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

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

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

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

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

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

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

افزونه BackWPup و روش بک آپ گرفتن از سایت وردپرسی با آن

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

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

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

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

<?php
/* Plugin Name: drgraphic jQuery Tabber Widget
Plugin URI: https://drgraphic.net/
Description: A simple jquery tabber widget.
Version: 1.0
Author: drgraphic.
Author URI: https://drgraphic.net/
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;
}

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

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

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

امیدواریم از این آموزش استفاده لازم را کرده باشید. اگر سوالی داشتید، در بخش نظرات با ما در میان بگذارید. سپاس از همراه شما…

منابع: wikipedia – wordpress.org – mihanwp – youtube