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

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


هاست

افزودن ابزارک تب بندی 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,872دانلود قالب پرسش و پاسخ FAQ SaaS برای وردپرس تاریخ : 1396/09/6
2,924پوسته فروشگاهی و چندفروشندگی Marketo برای ووکامرس تاریخ : 1397/06/29
10,378افزونه نمایش افکت بر اساس حرکت اسکرول در وردپرس Scroll Magic تاریخ : 1398/05/16
4,076دنبال کردن مطالب نویسنده خاص در وردپرس تاریخ : 1396/04/22
4,542دانلود پوسته گرافیکی بصورت PSD تاریخ : 1392/08/12
3,144ایجاد سیستم چت و پشتیبانی آنلاین در ووکامرس با افزونه WP Live Chat Support تاریخ : 1397/08/20
6,693آموزش ساخت رزومه آنلاین در وردپرس تاریخ : 1395/05/9
240نمایش نقشه Bing در وردپرس تاریخ : 1398/06/16
4,880افزونه وردپرس بررسی فایل های مخرب Sucuri Security تاریخ : 1397/02/2
15,510دانلود قالب حرفه ای فروشگاه برای وردپرس تاریخ : 1392/09/2
10,312کاهش یا افزایش کیفیت تصاویر در وردپرس تاریخ : 1393/06/24
33,465ساخت فرم ورود و عضویت در وردپرس + افزونه تاریخ : 1393/08/5
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب