آیا می خواهید بدانید که چگونه JavaScript را در وردپرس بارگیری کنید؟

تمام تم وردپرس معمولا از فایل های PHP، HTML، CSS و جاوا اسکریپت تشکیل شده است. جاوا اسکریپت یک زبان برنامه نویسی محبوب در بین توسعه دهندگان است. تم وردپرس. این زبانی است که یک صفحه HTML را تعاملی می کند و همچنین می تواند به شما امکان تعامل با سرور را بدهد.

دانستن نحوه استفاده از آن در وب سایت خود یک مزیت بزرگ است.

برای اینکه در واقع از JavaScript استفاده کنید ، باید بدانید که چگونه آن را در وب سایت خود بارگیری کنید.

اما قبل از آن ، اگر هرگز WordPress را نصب نکرده اید کشف کنید چگونه به نصب یک وبلاگ وردپرس مراحل 7 et چگونه برای پیدا کردن، نصب و فعال یک تم وردپرس در وبلاگ خود 

سپس به این دلیل که چرا ما اینجا هستیم

نحوه بارگیری اسکریپتهای جاوا اسکریپت در وردپرس

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

همچنین آموزش ما را در این زمینه کشف کنید چگونه فشرده سازی فایل های CSS، HTML و Javascript

وردپرس دقیقاً همین کار را انجام می دهد، اما شما نمی توانید این تگ های اسکریپت را فقط در فایل هدر یا پاورقی خود رها کنید. تم وردپرس. وردپرس از مکانیزم بارگذاری هوشمند به نام “ enqueueing '.

این مکانیسم برای دادن معنی به وابستگی ها ضروری است. اگر شما در حال نوشتن کد jQuery برای موضوع وردپرس خود هستید ، ابتدا باید جی کوئری بارگیری شود.

شما کدی می نویسید که به یک افزونه jQuery متکی است. در این حالت ابتدا باید جی کوئری بارگیری شود ، سپس افزونه jQuery ، سپس کد شما.

چگونه اسکریپت های "Enqueueing" (افزودن به صف)

شما می توانید اسکریپت ها را در پوشه تم وردپرس خود یا پوشه خود در صف قرار دهید پلاگین وردپرس. در اینجا کد کامل برای گنجاندن یک اسکریپت متکی بر jQuery آمده است:

my_theme_scriptts of function ()

 wp_enqueue_script ('اسکریپت من "، get_template_directory_uri ().' /js/my-script.js '، آرایه (' jquery ') ،' 1.0.0 '، درست)؛

}

add_action ('wp_enqueue_scriptts'، 'my_theme_scripts')؛

اول از همه ، یک تابع باید " قلاب شده در وردپرس (با استفاده از قلاب وردپرس). اولین استدلال از عملکرد ADD_ACTION () به وردپرس می گوید که این اسکریپت ها در کجا باید قرار بگیرند:

  • در فضای عمومی
  • در داشبورد

اگر استفاده می کنید " wp_enqueue_scripts در صورت استفاده از آنها در فضای عمومی بارگیری می شود " admin_enqueue_scripts آنها روی داشبورد بارگیری می شوند.

در تابع « ADD_ACTION می توانید استفاده کنید " wp_enqueue_script برای اضافه کردن اسکریپت های مورد نیاز خود. این تابع یک پارامتر موردنیاز و چهار پارامتر اختیاری را شامل می شود:

  • اولین پارامتر نام فیلمنامه شما است. شما می توانید آنچه را می خواهید انتخاب کنید اما حتما از یک نام منحصر به فرد استفاده کنید.
  • پارامتر دوم باید حاوی محل فایل در قالب وردپرس یا پلاگین وردپرس.
  • پارامتر سوم شامل آرایه ای از وابستگی ها است. در مثال بالا گفتم که jQuery یک وابستگی است. همه وابستگی ها قبل از اسکریپت موردنظر بارگیری می شوند.
  • پارامتر چهارم شماره نسخه است
  • پارامتر پنجم و آخرین نشان می دهد که آیا می خواهید اسکریپت را در هدر یا پاورقی بارگیری کنید. برای بارگذاری در پاورقی از "true" یا برای بارگذاری اسکریپت در هدر از "false" استفاده کنید (همچنین نمی توانید این پارامتر را پر کنید).

وابستگی ها

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

اگر چندین اسکریپت مستقل دارید ، می توانید دقیقاً به همان ترتیب آنها را به صورت وابستگی اضافه کنید. نگاهی به مثال زیر بیندازید:

my_theme_scriptts of function ()

 wp_enqueue_script ("اسکریپت پایه من" ، get_template_directory_uri (). '/js/my-base-script.js' ، آرایه ('jquery') ، '1.0.0' ، درست)؛

 wp_enqueue_script ("my-script-extension"، get_template_directory_uri (). '/js/my-script-extension.js'، array ("my-script-base")، "1.0.0"، true))؛

}

add_action ('wp_enqueue_scriptts'، 'my_theme_scripts')؛

از آنجا که فیلمنامه اول به جی کوئری بستگی دارد ، فیلمنامه بعدی نیز به آن بستگی دارد. بنابراین نیازی به افزودن jQuery به عنوان یک وابستگی برای هردو نیست. این امر مدیریت وابستگی را آسانتر می کند.

بارگیری مشروط

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

my_theme_scriptts of function ()

 wp_register_script ('اسکریپت من' ، get_template_directory_uri (). '/js/my-script.js' ، آرایه ('jquery') ، '1.0.0' ، درست)؛

 wp_enqueue_script ('متن من')؛

}

add_action ('wp_enqueue_scriptts'، 'my_theme_scripts')؛

ما اسکریپت را ذخیره کرده ایم تا وردپرس درباره اسکریپت بیاموزد ، اما ما از " در نوبت قراردادن ". به این ترتیب ، در صورت استفاده از کد کوتاه در این صفحه ، اسکریپت به صفحه اضافه می شود.

روش دیگر بارگذاری اسکریپت ها با شرایط استفاده از توابع شرطی است. اگر می خواهید اسکریپتی را در تمام صفحات بایگانی این گروه بارگیری کنید ، می توانید از این تابع استفاده کنید is_category ().

به عنوان مثال ، شما می توانید یک چرخ و فلک از تصاویر ایجاد کنید که کاربران می توانند به این شکل به مقاله اضافه کنند: [carousel ids = '42,124,123,331,90، XNUMX،XNUMX،XNUMX،XNUMX]. چرخ و فلکی در صفحه مقاله با استفاده از تصاویر تعیین شده توسط شناسه آنها ایجاد می شود.

برای انجام این کار ، شما باید یک پرونده ایجاد کنید " carousel.js که مبتنی بر jQuery است. برای دستیابی به آنجا یک کد وجود دارد (کاروسل ایجاد نمی کند ، اما به شما امکان می دهد ببینید که چگونه فرآیند بارگیری اتفاق می افتد):

add_action ('wp_enqueue_scriptts'، 'my_theme_scripts')؛

my_theme_scriptts of function ()

 wp_register_script ('چرخ فلک من' ، get_template_directory_uri (). '/js/my-carousel.js' ، آرایه ('jquery') ، '1.0.0' ، درست)؛

}

add_shortcode ('چرخ فلک' ، 'my_carousel')؛

عملکرد my_carousel ($ args) {

 $ atts = کد کوتاه_اتس (آرایه (

 'Ids' => "،

 ) ، $ Atts ، 'چرخ فلک')؛

 wp_enqueue_script ('چرخ فلک من')؛

 // کد برای نمایش چرخ فلک در اینجا

}

حذف و جایگزینی اسکریپت ها

این تقریباً یک سناریو معمول است ، اما بعضی اوقات ممکن است نیاز به حذف یا جایگزینی یک فیلمنامه باشید. من در شرایطی قرار گرفتم که یک اسکریپت توسط افزونه اضافه شود (اما توسط موضوع استفاده نمی شود) باعث ایجاد مشکلات سازگاری شد. "برداشت" بهترین گزینه بود ، زیرا خطا کاملاً ناپدید شد.

اگر چیزی را آزمایش می کنید می توانید jQuery را با نسخه جدید جایگزین کنید تا مطمئن شوید با نسخه های جدید سازگار است.

در این شرایط توابع wp_deregister_script () "و" wp_dequeue_script () مفید هستند در اینجا نحوه ویرایش کدی که قبلاً در WordPress اضافه شده است آورده شده است.

my_theme_scriptts of function ()

 wp_deregister_script ('jquery')؛

 wp_enqueue_script ('jquery'، get_template_directory_uri (). '/js/jquery3.0.0.js'، array ()، '3.0.0'، true)؛

 wp_enqueue_script ('اسکریپت من' ، get_template_directory_uri (). '/js/my-script.js' ، آرایه ('jquery') ، '1.0.0' ، درست)؛

}

add_action ('wp_enqueue_scriptts'، 'my_theme_scripts')؛

افکار نهایی

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

همچنین برخی از افزونه های برتر WordPress را کشف کنید  

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

ما در اینجا برخی از افزونه های برتر وردپرس را به شما پیشنهاد می دهیم که در انجام این کار به شما کمک می کنند.

1. Premium SEO Pack

پک سئو پریمیوم یک است پلاگین وردپرس که سئوی شما را بهینه می کند و CSS را فشرده می کند تا سرعت بارگذاری وب سایت شما را بهبود بخشد.

این افزونه همچنین به شما امکان می دهد طراحی وب سایت خود را با چند کلیک مدیریت کنید. ویژگی های آن عبارتند از: فشرده سازی CSS و JS ، ادغام نقشه سایت ویدئو و قطعه ، قالب بندی فایل HTML و XML ، تغییر مسیر صفحه 404 و 301 ، به اشتراک گذاری شبکه های اجتماعی ، ارائه 'ALT برچسب ، طرح بسیار قابل تنظیم است

دانلود | نسخه ی نمایشی | میزبانی وب

2. زمان تحویل زمان تحویل Woocommerce برای حمل و نقل

انتخاب کننده زمان تحویل Woocommerce برای حمل و نقل یک افزونه WooCommerce است که به شما اجازه می دهد تا مشتریان تاریخ و زمان تحویل را در صفحه پرداخت انتخاب کنند. 

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

دانلود | نسخه ی نمایشی | میزبانی وب

3. منو قهرمان

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

از پیچیده ترین منوی مگا پر از امکانات ، گرفته تا ساده ترین منو با منوی کشویی ، افزونه وردپرس HeroMenu هر نوع منویی را تنظیم می کند و در عرض چند دقیقه کار می کند.

از لحاظ ویژگی هایی که در بین دیگران ارائه می دهد: عملکرد کامل در رایانه های شخصی ، تبلت و گوشی های هوشمند ، از CSS سفارشی برای افزودن سبک های خود به منو ، سازنده megamenu ، چندین مرورگر پشتیبانی شده: Chrome ، Firefox ، Safari ، Opera، IE9 و موارد دیگر.

دانلود | نسخه ی نمایشی | میزبانی وب

منابع پیشنهادی

سایر منابع توصیه شده را که به شما کمک می کنند سایر خطاهای رایج وردپرس را برطرف کنید ، بررسی کنید. 

نتیجه

اینجاست این برای این آموزش است ، امیدوارم که به شما کمک کند درک کنید چگونه JavaScript را در وردپرس بارگذاری کنید. دریغ نکنید که آن را با دوستان خود در میان بگذارید شبکه های اجتماعی ارجح است. 

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس.

در ضمن در مورد خودتان برای ما بگویید نظر و پیشنهادات در بخش اختصاصی

...