نحوه افزودن ابزارک jQuery Tabber در وردپرس

 'WPBTabberWidget' ،
'description' => 'ویجت Tabber ساده jQuery'
)
$ this-> WP_Widget (
'WPBTabberWidget' ،
'WPBeginner Tabber Widget' ،
$ widget_ops
)
}
ویجت تابع ($ args ، $ instance) {// خروجی نوار کناری ویجت

تابع wpb_tabber () {

// حالا ما شیوه نامه و اسکریپت jQuery خود را به کار می بریم

wp_register_style ('wpb-tabber-style'، plugins_url ('wpb-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')؛

// با ایجاد برگه ها ، کد خود را در داخل هر برگه اضافه می کنید
؟>

• برگه 1
• تب 2
• برگه 3

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

اکنون که ویجت را با کد PHP و HTML مورد نیاز برای برگه های خود ایجاد کرده ایم ، مرحله بعدی افزودن jQuery برای نمایش آنها به عنوان زبانه در محفظه برگه است. برای این کار باید این کد را در پرونده wp-tabber.js کپی و جایگذاری کنید.

(تابع ($) {
$ (". tab_content"). پنهان کردن ()؛
$ ("ul.tabs li: first"). addClass ("فعال"). نمایش ()؛
$ (". tab_content: first"). نمایش ()؛
$ ("ul.tabs li"). کلیک کنید (تابع () {
$ ("ul.tabs li"). removeClass ("فعال")؛
$ (این) .addClass ("فعال")؛
$ (". tab_content"). پنهان کردن ()؛
var activeTab = $ (این). find ("a"). attr ("href")؛
// $ (activeTab) .fadeIn ()؛
if ($ .browser.msie) {$ (activeTab) .show ()؛}
دیگری {$ (activeTab) .fadeIn ()؛}
بازگشت نادرست ؛
})
}) (jQuery)؛

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

ul.tabs {
موقعیت: نسبی؛
z-index: 1000؛
شناور به سمت چپ؛
مرز چپ: 1 پیکسل جامد # C3D4EA؛
}
ul.tabs li {
موقعیت: نسبی؛
سرریز: پنهان
ارتفاع: 26 پیکسل؛
شناور به سمت چپ؛
حاشیه: 0؛
بالشتک: 0؛
ارتفاع خط: 26 پیکسل؛
background-color: # 99B2B7؛
حاشیه: 1 پیکسل جامد # C3D4EA؛
مرز چپ: هیچ؛
}
ul.tabs li a {
نمایش: بلوک؛
بالشتک: 0 10px؛
رئوس مطالب: هیچ؛
دکوراسیون متن: هیچ؛
}
html ul.tabs li.active ،
html ul.tabs li.active a: شناور {
background-color: # D5DED9؛
مرز پایین: 1 پیکسل جامد # D5DED9؛
}
.widget-area .widget .tabs a {
رنگ: #FFFFFF؛
}
.tab_container {
موقعیت: نسبی؛
بالا: -1 پیکسل
z-index: 999؛
عرض: 100٪
شناور به سمت چپ؛
اندازه قلم: 11px؛
background-color: # D5DED9؛
حاشیه: 1 پیکسل جامد # C3D4EA؛
}
.tab_content {
بالشتک: 7px 11px 11px 11px؛
ارتفاع خط: 1.5؛
}
.tab_content ul {
حاشیه: 0؛
بالشتک: 0؛
سبک لیست: هیچ؛
}
.tab_content li {
حاشیه: 3px 0؛
 }
.tab-clear {
روشن: هر دو؛
}

این همه است. اکنون فقط پوشه wpbeginner-tabber-widget را از طریق FTP در پوشه / wp-content / plugins / سایت وردپرسی خود بارگذاری کنید. همچنین می توانید پوشه را به بایگانی zip اضافه کرده و به افزونه ها »افزودن موارد جدید در قسمت مدیریت وردپرس خود بروید. برای نصب افزونه بر روی زبانه بارگذاری کلیک کنید. پس از فعال شدن افزونه ، به Appearance »Widgets بروید ، WPBeginner Tabber Widget را در نوار کناری خود بکشید و رها کنید و تمام.