دوره جامع سئو وردپرس

تبلیغات
طراحی و بهینه سازیمشاهده
هاست

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

مقالات,آموزش,ترفند , وردپرس

افزودن ویدجت تب jQuery به وردپرس

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

 

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

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

 

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

 

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

 

ایجاد ویدجت jQuery در وردپرس

اولین کاری که باید انجام دهید ایجاد یک فولدر به نام 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 اضافه کنید.

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

 

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

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

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

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

موفق باشید


دانلود


دوره حرفه ای آموزش سئو سایت مارکیو | رتبه اول گوگل یک رویا نیست!


مطلب مفیدی بود ؟
نویسنده : mohammad 0 مقالات,آموزش,ترفند , وردپرس

لینک کوتاه مطلب : https://www.20script.ir/?p=47042

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
2,524قالب متفاوت برای ادامه مطلب هر دسته در وردپرس تاریخ : 1397/03/9
6,635افزونه وردپرس آپلود از آدرس External Media تاریخ : 1396/04/29
4,349۱۰ تابع برجسته ی ناشناس در وردپرس تاریخ : 1392/10/1
4,913نمایش تصاویر متحرک در وردپرس با افزونه WP GIF Player تاریخ : 1396/11/3
3,699نشانه گذاری خودکار دیدگاه های حاوی لینک های طولانی به عنوان جفنگ تاریخ : 1395/01/25
1,308حل خطای پیوندی که شما دنبال می‌کردید منقضی شده است در وردپرس تاریخ : 1398/02/6
460ویرایش دسته جمعی نوشته ها در وردپرس تاریخ : 1398/05/19
11,865افزونه اشتراک گذاری مطالب در واتس آپ برای وردپرس تاریخ : 1394/02/14
2,640آنالیز افزونه و قالب وردپرس با افزونه Query Monitor تاریخ : 1396/12/25
6,941آموزش ساخت رزومه آنلاین در وردپرس تاریخ : 1395/05/9
3,252هفتمین شماره ماهنامه طراحی وب منتشر شد تاریخ : 1393/09/15
1,236استفاده از دسته و برچسب در وردپرس تاریخ : 1397/10/2
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب