تبليغات تبليغات تبليغات تبليغات

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

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

 

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

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

 

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

 

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

 

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

اولین کاری که باید انجام دهید ایجاد یک فولدر به نام scriptha-tabber-widget روی دسکتاپ میباشد. پس از آن  فایل درون این فایل با استفاده از ویرایشگر متنی ساده مانند Notepad ایجاد کنید. هدف از اولین فایل ایجاد mw-tabber-widget.php است که شامل کد HTML  و PHP  برای ایجاد تب و ویدجت سفارشی وردپرس میباشد.

 

فایل دوم یک  mw-tabber-style.css است که شامل کد css برای تب ها میباشد. سومین فایل ایجاد یک  mw-tabber.js است که شامل اسکریپت jQuery  برای راه گزینی تب و افزودن انیمیشن میباشد.

 

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

 

 

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

 

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

 

 

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

 

 

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

دسته بندی : آموزش ، وردپرس

لایف سرور تبليغات


مطالب مشابه

ارسال دیدگاه

انتشار یافته : بدون ديدگاه
    • دیدگاه ارسال شده توسط شما ، پس از تایید توسط مدیران سایت منتشر خواهد شد.
    • دیدگاهی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد.


خرید vpnخرید vpn
تبليغات