خوش آمدید به انجمن ای فری

بازدیدکننده گرامی برای دسترسی به تمامی امکانات در انجمن عضو شوید. پس از ثبت نام و ورود به سیستم ، می توانید موضوعات ایجاد کنید ، پاسخ به موضوعات موجود ارسال کنید ، به اعضای انجمن امتیاز دهید ، اقدام به خرید و فروش کنید ، و موارد دیگر. عضویت، سریع و کاملاً رایگان است ، پس منتظر چی هستی؟

درخواست راهنمایی

اگر نیاز به راهنمایی دارید درخواست خود را ثبت کنید

فروشگاه

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

دانلود منابع

قالب و افزونه های جدید و بروز را میتوایند از اینجا دانلود کنید

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

  • شروع کننده موضوع sslri
  • تاریخ شروع

sslri

معاون انجمن
عضویت
8/6/19
ارسال ها
1,868
امتیاز واکنش
1,752
سن
24
محل سکونت
بندرعباس
4291

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

دلیل افزودن تب jQuery

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

نکته: این آموزش برای کاربران سطح متوسط است و به دانش HTML و CSS نیاز است.

اولین کاری که باید انجام دهید ایجاد یک فولدر به نام
bistscript-tabber-widget روی دسکتاپ میباشد. پس از آن فایل درون این فایل با استفاده از ویرایشگر متنی ساده مانند Notepad ایجاد کنید. هدف از اولین فایل ایجاد bistsc-tabber-widget.php است که شامل کد HTML و PHP برای ایجاد تب و ویدجت سفارشی وردپرس میباشد.
فایل دوم یک bistsc-tabber-style.css است که شامل کد css برای تب ها میباشد. سومین فایل ایجاد یک bistsc-tabber.js است که شامل اسکریپت jQuery برای راه گزینی تب و افزودن انیمیشن میباشد.

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

PHP
<?php
/* Plugin Name: afree jQuery Tabber Widget
Plugin URI: http://www.afree.ir
Description: A simple jquery tabber widget.
Version: 1.0
Author: afree
Author URI: http://www.afree.ir
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('bistsc-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 اضافه کنید.

PHP
(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 اضافه کنید.

PHP
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;
}


اکنون فولدر bistsc-tabber-widget را در دایرکتوری سایت /wp-content/plugins/ آپلود کرده و همچنین میتوانید فولدر را به فایلهای فشرده ی زیپ اضافه کنید و به افزونه ها>افزودن در بخش مدیریت بروید و روی تب upload برای نصب افزونه کلیک کنید. پس از فعال شدن افزونه به نمایش>ویدجت بروید و ویدجت تب بندی را به نوار کناری اضافه کنید.


4292



موفق باشید



 
ارسال کننده موضوعات مشابه انجمن پاسخ ها تاریخ
maede آموزش افزودن ابزارک (تولبار) به ادیتور متن در چتروم پشتیبانی زنفورو 2
maede مباحث و مشکلات افزودن ویجت به صفحه اصلی پشتیبانی زنفورو 0
I مباحث و مشکلات افزودن فونت به ادیتور زنفورو پشتیبانی زنفورو 5
WALKER آموزش افزودن ssl و https به سایت وردپرسی آموزشهای وردپرس 0
WALKER آموزش افزودن آیکون دلخواه به پست تایپ های سفارشی آموزشهای وردپرس 0
WALKER آموزش افزودن فرم تماس بصورت پاپ آپ در وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن لینک سفارشی به نوار ابزار وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن اسکرول به بالا با استفاده از jQuery آموزشهای وردپرس 0
WALKER آموزش افزودن جستجوی باز شونده به قالب وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن شماره تلفن قابل کلیک به سایت آموزشهای وردپرس 0
WALKER دانلود JetGuten - Blocks Set Addon for Gutenberg Editor v1.1.2 افزونه افزودن قابلیت های جدید به گوتنبرگ افزونه های وردپرس 0
WALKER آموزش افزودن فرمت مجاز برای آپلود در رسانه وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن تگ Hreflang به وردپرس برای افزایش سئو آموزشهای وردپرس 0
WALKER آموزش افزودن شماره صفحات به وردپرس بدون افزونه آموزشهای وردپرس 0
WALKER آموزش غیر فعال شدن دکمه افزودن پرونده چند رسانه‌ای در وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن شبکه‌های اجتماعی به منو سایت وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن آیکون به منوهای وردپرس آموزشهای وردپرس 0
WALKER دانلود افزودن مطلب توسط کاربر در وردپرس WP User Frontend Pro Business - Ultimate Frontend Solution For WordPress v3.4.1 افزونه های وردپرس 16
WALKER آموزش افزودن نمودار تغییرات قیمت محصولات به ووکامرس آموزشهای وردپرس 0
WALKER آموزش کد افزودن تصویر شاخص مطالب در پنل مدیریت وردپرس آموزشهای وردپرس 0
WALKER دانلود افزونه افزودن فیلد دلخواه در ووکامرس WooCommerce Checkout Fields & Fees v7.7 افزونه های وردپرس 10
Magical اندروید دانلود Add Music to Voice Premium 1.7 - نرم افزار افزودن موزیک به صدای ضبط شده برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود Add Audio to Video: Music Video Editor Pro 1.7 - نرم افزار افزودن موزیک به ویدیو برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود PixelLab - Text on pictures 1.9.2 - نرم افزار افزودن متن روی تصاویر برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود Phonto Pro - Text on Photos 1.7.19 - نرم افزار افزودن متن به تصاویر برای اندروید نرم افزارهای اندروید 0
WALKER دانلود ابزارک جستجوگر آجاکس المنتور JetSearch v1.1.3 - AJAX Search widget for Elementor افزونه های وردپرس 1
WALKER آموزش استفاده از eEmbed در ابزارک متن وردپرس آموزشهای وردپرس 0
WALKER آموزش آموزش قرار دادن کد PHP در ابزارک وردپرس آموزشهای وردپرس 0
WALKER دانلود JetTabs - Tabs and Accordions for Elementor Page Builder v2.1.10 افزونه ساخت تب در وردپرس افزونه های وردپرس 24
WALKER دانلود Woocommerce Tabs Pro: Extra Tabs for Product Page v3.0 افزونه ایجاد تب دلخواه در صفحه محصولات ووکامرس افزونه های وردپرس 0
WALKER دانلود افزونه تب سفارشی حساب کاربری ووکامرس SS WooCommerce Myaccount Ajax Tabs v2.1.0 افزونه های وردپرس 4
Magical اندروید دانلود Songsterr Guitar Tabs & Chords Full 2.1.12 - نرم افزار تب و آکورد گیتار برای اندروید نرم افزارهای اندروید 0

موضوعات مشابه

shape1
shape2
shape3
shape4
shape7
shape8
بالا