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

221 بازدید
مهر 24, 1403

آخرین بروز رسانی این مطلب
24 مهر 1403

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

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

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

امروز قصد داریم در این مقاله به شما آموزش دهیم چگونه یک ابزارک تب‌بندی 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 اضافه کنید و آن را ذخیره کنید.

01&amp;amp;lt;?php
02/* Plugin Name: drgraphic jQuery Tabber Widget
03Plugin URI: https://drgraphic.net/
04Description: A simple jquery tabber widget.
05Version: 1.0
06Author: drgraphic.
07Author URI: https://drgraphic.net/
08License: GPL2
09*/
10 
11// creating a widget
12class WPBTabberWidget extends WP_Widget {
13 
14    function WPBTabberWidget() {
15        $widget_ops = array(
16            'classname' =&amp;amp;gt; 'WPBTabberWidget',
17            'description' =&amp;amp;gt; 'Simple jQuery Tabber Widget'
18        );
19        $this-&amp;amp;gt;WP_Widget(
20            'WPBTabberWidget',
21            'WPBeginner Tabber Widget',
22            $widget_ops
23        );
24    }
25    function widget($args, $instance) { // widget sidebar output
26 
27        function wpb_tabber() {
28 
29// Now we enqueue our stylesheet and jQuery script
30 
31            wp_register_style('wpb-tabber-style', plugins_url('mw-tabber-style.css', __FILE__));
32            wp_register_script('wpb-tabber-widget-js', plugins_url('wpb-tabber.js', __FILE__), array('jquery'));
33            wp_enqueue_style('wpb-tabber-style');
34            wp_enqueue_script('wpb-tabber-widget-js');
35 
36// Creating tabs you will be adding you own code inside each tab
37            ?&amp;amp;gt;
38 
39            &amp;amp;lt;ul class="tabs"&amp;amp;gt;
40                &amp;amp;lt;li class="active"&amp;amp;gt;&amp;amp;lt;a href="#tab1"&amp;amp;gt;Tab 1&amp;amp;lt;/a&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;
41                &amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;a href="#tab2"&amp;amp;gt;Tab 2&amp;amp;lt;/a&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;
42                &amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;a href="#tab3"&amp;amp;gt;Tab 3&amp;amp;lt;/a&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;
43            &amp;amp;lt;/ul&amp;amp;gt;
44 
45            &amp;amp;lt;div class="tab_container"&amp;amp;gt;
46 
47                &amp;amp;lt;div id="tab1" class="tab_content"&amp;amp;gt;
48                    &amp;amp;lt;?php
49                    // Enter code for tab 1 here. 
50                    ?&amp;amp;gt;
51                &amp;amp;lt;/div&amp;amp;gt;
52 
53                &amp;amp;lt;div id="tab2" class="tab_content" style="display:none;"&amp;amp;gt;
54                    &amp;amp;lt;?php
55                    // Enter code for tab 2 here. 
56                    ?&amp;amp;gt;
57                &amp;amp;lt;/div&amp;amp;gt;
58 
59                &amp;amp;lt;div id="tab3" class="tab_content" style="display:none;"&amp;amp;gt;
60                    &amp;amp;lt;?php
61                    // Enter code for tab 3 here. 
62                    ?&amp;amp;gt;
63                &amp;amp;lt;/div&amp;amp;gt;
64 
65            &amp;amp;lt;/div&amp;amp;gt;
66 
67            &amp;amp;lt;div class="tab-clear"&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
68 
69            &amp;amp;lt;?php
70 
71        }
72 
73        extract($args, EXTR_SKIP);
74// pre-widget code from theme
75        echo $before_widget;
76        $tabs = wpb_tabber();
77// output tabs HTML
78        echo $tabs;
79// post-widget code from theme
80        echo $after_widget;
81    }
82}
83 
84// registering and loading widget
85add_action(
86    'widgets_init',
87    create_function('','return register_widget("WPBTabberWidget");')
88);
89?&amp;amp;gt;

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

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

اکنون نیاز است یک ویجت با کدهای PHP و HTML برای تب‌ها ایجاد کنیم و در گام بعدی برای نمایش آنها به‌عنوان تب jQuery اضافه کنیم. برای این کار کد زیر را به فایل wp-tabber.js اضافه کنید.

01(function($)  {
02$(".tab_content").hide();
03$("ul.tabs li:first").addClass("active").show();
04$(".tab_content:first").show();
05$("ul.tabs li").click(function() {
06$("ul.tabs li").removeClass("active");
07$(this).addClass("active");
08$(".tab_content").hide();
09var activeTab = $(this).find("a").attr("href");
10//$(activeTab).fadeIn();
11if ($.browser.msie) {$(activeTab).show();}
12else {$(activeTab).fadeIn();}
13return false;
14});
15})(jQuery);

استایل دهی به ابزارک ساخته شده

اکنون ویجت همراه با jQuery آماده است، گام بعدی افزودن یک ظاهر طراحی شده به تب می‌باشد. شیوه‌ی زیر را به فایل wpb-tabber-style.css اضافه کنید:

01ul.tabs {
02position: relative;
03z-index: 1000;
04float: left;
05border-left: 1px solid #C3D4EA;
06}
07ul.tabs li {
08position: relative;
09overflow: hidden;
10height: 26px;
11float: left;
12margin: 0;
13padding: 0;
14line-height: 26px;
15background-color: #99B2B7;
16border: 1px solid #C3D4EA;
17border-left: none;
18}
19ul.tabs li  a{
20display: block;
21padding: 0 10px;
22outline: none;
23text-decoration: none;
24}
25html ul.tabs li.active,
26html ul.tabs li.active a:hover {
27background-color: #D5DED9;
28border-bottom: 1px solid #D5DED9;
29}
30.widget-area .widget .tabs a  {
31color: #FFFFFF;
32}
33.tab_container {
34position: relative;
35top: -1px;
36z-index: 999;
37width: 100%;
38float: left;
39font-size: 11px;
40background-color: #D5DED9;
41border: 1px solid #C3D4EA;
42}
43.tab_content {
44padding: 7px 11px 11px 11px;
45line-height: 1.5;
46}
47.tab_content ul {
48margin: 0;
49padding: 0;
50list-style: none;
51}
52.tab_content li {
53margin: 3px 0;
54}
55.tab-clear {
56clear:both;
57}

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

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

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

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

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

تگ ها: