4 اطلاعیه بروزرسانی و تخفیف‌های ویژه سایت :

افزودن جاوااسکریپت و استایل در وردپرس

217 وردپرس مینا تیموریان یکشنبه ۱۶ آبان ۱۳۹۵
1 Star2 Stars3 Stars4 Stars5 Stars
1 رای

وردپرس امروزه محبوب ترین سیستم مدیریت محتوا در دنیا شناخته شده است و میلیون ها نفر از این سیستم استفاده می کنند. از این رو برای داشتن یک قالب خوب نیاز به رعایت برخی نکات داریم. امروز هم روش صحیح فراخوانی css در قالب وردپرس را خواهیم گفت.

جاوااسکریپت و استایل در وردپرس

به طور معمول به چه شکل یک فایل استایل یا یک فایل جاوا اسکریپت را به یک قالب ساده و استاندارد HTML اضافه میکنیم. برای قرار دادن یک فایل استایل در صفحه ی مربوطه از کد زیر استفاده میکنیم :

و وقتی میخواهیم یک فایل جاوااسکریپت را به قالب مورد نظر اضافه کنیم از کدی مشابه کد زیر بهره میگیریم :

این روش یک روش استاندارد است و مادامی که پای قالب های وردپرس در میان نباشد، استفاده از آن بر اساس استاندارد ها هیچ ایرادی ندارد. ولی وقتی پای وردپرس به میان می آید، برای اضافه کردن فایل های استایل و جاوااسکریپت استانداردهایی وضع شده که بهتر است آنها را رعایت کنید. این مسئله به این مفهوم نیست که اگر در قالب های وردپرس هم برای اضافه کردن فایل های مربوطه از روش فوق استفاده کنید، قالب شما کار نخواهد کرد بلکه به این مفهوم است که این روش در طراحی قالب های وردپرس استاندارد نیست و ممکن است بعدا در استفاده از برخی ویژگی های وردپرس مثل استفاده از child theme ها و … شما را دچار مشکل کند. بنابراین در این شرایط توصیه میشود که حتما از شیوه ی استانداردی که برای این کار در نظر گرفته شده استفاده کنید.

پیوست صحیح فایل های استایل و جاوااسکریپت در وردپرس :

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

تابع wp_enqueue_style :

اجازه بدهید ابتدا نگاهی به توضیحات عمومی این تابع داشته باشیم :

یک فایل استایل مثل style.css را که در فولدر اصلی قالب قرار گرفته، در قالب فراخوانی کنیم به شکل زیر عمل میکنیم :

تابع wp_enqueue_script :

در رابطه با ورودی های این تابع در سایت رسمی وردپرس (کم و بیش) توضیحات زیر ارائه شده :

با توضیحات فوق و توضیحاتی که برای تابع wp_enqueue_style به شما ارائه کردیم، حتما حالا میتوانید کارکرد کد زیر را که برای فراخوانی یک فایل جاوااسکریپت به کار رفته، به خوبی درک کنید :

این کد ها را میتوانید در فایل functions.php قالبتان قرار دهید.و استفاده از کدهای فوق کافی نیست. کد هایی که برای افزودن استایل و اسکریپت به قالبتان اضافه میکنید را باید درون یک تابع قرار داده و سپس با استفاده از تابع add_action به وردپرس اعلام کنید که میخواهید تابع مورد نظر در چه زمانی اجرا شود. به مثال زیر توجه کنید :

فایل rtl.css را چکار کنیم؟

این فایل، گونه ای کاملا بی آزار از فایل های CSS است که لازم نیست کاری با آن داشته باشید! اما جداً، از شوخی که بگذریم، وقتی قالبی را فارسی سازی میکنید و برای آن استایل rtl جداگانه ای را در فایل rtl.css قرار میدهید، لازم نیست که این استایل را به روش های ذکر شده در بالا به قالب اضافه کنید. چرا که وردپرس بر اساس جهت زبان انتخابی، خودش به صورت اتوماتیک در صورت نیاز فایل rtl.css را صدا کرده و به قالب اضافه میکند. پس نگران این فایل نباشید.

و جی کوئری چطور؟

وقتی در قالبی به جی کوئری نیاز داریم و میخواهیم محل فراخوانی جی کوئری را نیز تحت کنترل داشته باشیم تا اطمینان حاصل کنیم که تمامی اسکریپت هایی که به جی کوئری نیاز دارند، پس از بارگذاری جی کوئری، لود خواهند شد، جی کوئری را به شکل زیر در قالبمان فراخوانی میکنیم :

همانطور که مشاهده میکنید فقط به نام جی کوئری اشاره کرده ایم. چرا که وردپرس خودش این فایل را در اختیار دارد و میداند که آن را از کجا بارگذاری کند. در اینجا باید خیلی حواستان باشد که به طور اتفاقی نسخه ای از جی کوئری را به صورت جداگانه بارگذاری نکنید و تنها به استفاده از کد بالا اکتفا کنید. در غیر این صورت با لود کردن چند نسخه از جی کوئری، در قالب شما تداخل ایجاد خواهد شد و شما قادر به استفاده ی صحیح ای جی کوئری نخواهید بود.

خوب، حالا اگر بخواهیم تعدادی اسکریپت که به جی کوئری وابسته هستند را حتما پس از بارگذاری کامل جی کوئری، لود کنیم میتوانیم به شکل زیر عمل کنیم :

همانطور که مشاهده میکنید با درج عبارت array(‘jquery’) مشخص کرده ایم که اسکریپت های ما به اسکریپتی که نامش jquery است وابستگی دارند. بنابراین در اینجا وردپرس اطمینان حاصل میکند که ابتدا اسکریپت اصلی و سپس اسکریپت های وابسته را بارگذاری نماید. راستی، همانطور که میبینید در اینجا ورژنی برای اسکریپت هایمان تعیین نکرده ایم و بجای ورژن عبارت false را قرار داده ایم، این کار باعث میشود که وردپرس به صورت اتوماتیک، ورژن فعلی خودش را به انتهای آدرس اسکریپت های مربوطه اضافه کند.

یک اشتباه :

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

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

علت سیستم نوبت‌دهی (صف) اسکریپت‌ها در وردپرس؟

وردپرس جامعه‌ای قوی از توسعه‌دهندگان رو داره و هزاران نفر در دنیا مشغول طراحی قالب و نوشتن پلاگینهای وردپرس هستند. وردپرس ، برای اطمینان از اینکه همه چیز به درستی کار میکنه و هیچ مشکلی به وجود نمیاد ، یک تابع نوبت‌دهی اسکریپت داره. این تابع یک روش سیستماتیک برای بارگذاری اسکریپتها و استایلها داره. با استفاده از تابع wp_enqueue_script ، به وردپرس میگیم که چه موقع و کجا یک اسکریپت لود بشه و این بارگذاری به چه چیزهایی بستگی داره. با اینکار همه میتونن از کتابخانه‌های جاوا اسکریپت که به همراه وردپرس وجود داره، استفاده کنند ، و دیگر نیازی به بارگذاری مجدد همون اسکریپتها نیست. علاوه بر این، سرعت لود صفحات افزایش پیدا میکنه و از تداخل با قالبها و تمهای دیگه جلوگیری میشه.

نوبت‌دهی صحیح اسکریپتهای وردپرس

بارگذاری صحیح اسکریپتها در وردپرس بسیار ساده است. در ادامه مثالی آوردم که میتونید در functions.php قالب یا فایل پلاگین خودتون کپی کنید تا اسکریپتها به درستی بارگذاری شوند.

توضیح:

خب در اینجا، اول از همه با استفاده از تابع wp_register_script ، اسکریپت خودمون رو ثبت کردیم. این تابع 5 پارامتر میگیره:

•    $handle – این پارامتر نام منحصر به فرد اسکریپت شماست. که ما در اینجا اسم اون رو my_BestIT_script گذاشتیم.
•    $src – این پارامتر محل اسکریپت رو مشخص میکنه ، که ما در اینجا از تابع plugins_url برای برگرداندن URL صحیح فولدر پلاگینها استفاده کردیم. وقتی که وردپرس اون رو پیدا کرد ، به دنبال نام فایل BestIT_script.js در اون فولدر میگرده .
•    $deps – وابستگی رو مشخص میکنه. از اونجایی که اسکریپت ما jQuery هست، ما در بخش وابستگیها jQuery رو اضافه کردیم. وردپرس به طور اتوماتیک جی کوئری رو لود میکنه ، البته اگر تا بحال این بارگذاری در سایت انجام نشده باشه.
•    $ver – شماره نسخه اسکریپت ما هست ، البته این پارامتر الزامی نیست.
•    $in_footer – از اونجایی که ما میخواهیم اسکریپتمون در فوتر بارگذاری باشه ، مقدار رو true قرار دادیم. اگر شما میخواید که اون رو در هدر بارگذاری کنید اون رو به false تغییر بدید.

بعد از اینکه تمام این پارامترهارو در wp_register_script مشخص کردیم  کافیه اسکریپت رو با wp_enqueue_script فراخوانی کنیم که نوبت‌دهی انجام بشه.
شاید بپرسید چرا اول باید چند مرحله اضافی برای ثبت اسکریپت انجام بدیم و بعد نوبت‌دهی رو انجام بدیم؟ خب اینکار به بقیه کسانی که از قالب یا پلاگین شما استفاده میکنن اجازه میده که بدون اینکه لازم باشه کدهای اصلی پلاگین شما رو تغییر بدن ، اسکریپت رو از حالت رجیستر در بیارن.

نوبت‌دهی صحیح استایلها وردپرس :

درست مثل اسکریپتها ، میتونید استایل شیت‌ها رو هم نوبت‌دهی کنید. به مثال زیر توجه کنید:

توجه کنید که از wp_enqueue_scripts هم برای اسکریپت و هم برای استایل ، استفاده کردیم. بر خلاف نامی که داره ،این تابع هم برای استایل و هم برای اسکریپت جواب میده.
در مثالهای بالا از تابع plugins_url برای مشخص کردن محل اسکریپت یا استایل استفاده کردیم. اگرچه ، اگر از تابع نوبت دهی اسکریپت در قالبتون استفاده میکنید ، میتونید در عوض از get_template_directoty_url استفاده کنید. و اگر از قالب فرزند (child theme)  استفاده میکنید از get_stylsheet_directory_url استفاده کنید. مثال زیر رو ببینید:

فراخوانی فایل css و جاوا اسکریپت در هر جای سایت :

 شاید بخواهیم یک سری فایل هم برای پیشخوان و یا هر جای دیگری فراخوان کنیم. برای این کار از action ها اسافاده می کنیم:

  • wp_enqueue_scripts() : برای فراخوانی استایل ها و اسکریپت ها در front-end
  • admin_enqueue_scripts() : برای فراخوانی استایل ها و اسکریپت ها در پنل مدیریت
  • login_enqueue_scripts() : برای فراخوانی استایل ها و اسکریپت ها در صفحه ورود

معرفی توابع اضافه :

در این بخش از آموزش توابع مفیدی درباره css خواهی گفت که امکان استایل درون خطی، افزودن دیتا در فایل های استایل، ثبت استایل ها و بررسی وضعیت فایل های فراخوان شده را خواهد داد.

افزودن استایل درون خطی: wp_add_inline_style()

اگر قالب شما دارای تنظیماتی برای استایل دلخواه دارد می توانید از این تایع استفاده کنید.

افزودن متا دیتا به استایل: wp_style_add_data()

در اینجا یک فانکشن عالی به نام wp_style_add_data() داریم. این فانکشن به شما اجازه می دهد که متا دیتا به استایل خود اضافه کنید مثلا شامل دستورات شرطی، پشتیبانی از راست چین و ….

تابع بالا خیلی کاربردی و مفید است.

آموزش جاوااسکریپت و استایل در وردپرس

افزودن جاوااسکریپت و استایل در وردپرس

1 رای 1 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 5
217
توضیحات بیشتر
کسب و کار اینترنتی

تعریف کسب و کار اینترنتی

2 رای 2 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 5
169
توضیحات بیشتر
مقایسه محصولات

مقایسه محصولات در ووکامرس

2 رای 2 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 52 votes, average: 5٫00 out of 5
116
توضیحات بیشتر
وردپرس
آموزش edd
فارسی سازی قالب و پلاگین
قالب رستوران
قالب وردپرس خبر خوب
قالب وردپرس کلاوی
خدمات ویژه وردپرسی سفارش خدمات تعرفه‌ها
پشتیبانی ویژه وردپرسی سفارش خدمات
نظرات شما + ۰
  • هنوز دیدگاهی ارسال نشده است.
ارسال نظر ۰

برای عضویت در خبرنامه و دریافت کتاب ایمیل خود را وارد کنید