اضافه کردن جاوا اسکریپت به مضامین وردپرس راه درست

به منظور جلوگیری از بروز درگیری با افزونه ها یا مضامین والد وردپرس ، روش خاصی برای افزودن Javascript به موضوع وردپرس وجود دارد. مشکل این است که بسیاری از “توسعه دهندگان” پرونده های جاوا اسکریپت خود را مستقیماً در فایل header.php یا footer.php فراخوانی می کنند که این روش نادرست در انجام آن است.


در این راهنما به شما نشان می دهم چگونه می توانید با استفاده از پرونده های function.php ، فایلهای جاوا اسکریپت خود را به درستی فراخوانی کنید تا مستقیماً در برچسب صفحه یا صفحه اصلی شما قرار بگیرند به این ترتیب اگر شما در حال ایجاد یک موضوع برای توزیع هستید و کاربر نهایی شما می خواهد اسکریپت ها را از طریق یک موضوع کودک تغییر دهد و یا در صورت استفاده از minification / caching یا سایر افزونه های بهینه سازی ، آنها به درستی کار کنند. و اگر با یک موضوع کودک کار می کنید ، اسکریپت های شما به روشی صحیح اضافه می شوند ، بدون کپی کردن پرونده های header.php یا footer.php در موضوع کودک شما که دیگر لازم نیست (هنگام کار با یک موضوع رمزگذاری شده).

راه اشتباه برای افزودن Javascript به مضامین وردپرس

تماس با جاوا اسکریپت در پرونده header.php یا فایل footer.php مانند تصویر زیر ، صحیح نیست و من اکیداً در برابر آن توصیه می کنم ، اغلب اوقات باعث اختلافات با سایر افزونه ها می شود و انجام کار به صورت دستی هنگام کار با CMS هرگز نیست. یک ایده خوب.

راه درست برای افزودن Javascript به مضامین وردپرس

بهتر برای افزودن جاوا اسکریپت به موضوع وردپرس ، انجام این کار از طریق فایل function.php است wp_enqueue_script. استفاده از عملکرد wp_enqueue_scriptts برای بارگذاری جاوا اسکریپت به شما کمک می کند تا موضوع شما از مشکل خارج شود.

مثال

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

کد بالا پرونده my-script.js را در سایت شما بارگذاری می کند. همانطور که می بینید من فقط دسته $ را در بر گرفته ام اما می توانید به اسکریپت ، شماره نسخه و اینکه آیا می توانید آن را در سربرگ یا پاورقی نیز بارگذاری کنید ، وابستگی ها را اضافه کنید (پیش فرض هدر است).

تابع wp_enqueue_script () از لحاظ فنی می تواند در هر پرونده قالب یا قالب الگوی افزونه مورد استفاده قرار گیرد اما اگر اسکریپت های جهانی را بارگیری می کنید می خواهید آن را یا در پرونده function.php تم خود یا در یک پرونده جداگانه قرار دهید که به طور خاص قصد بارگذاری اسکریپت ها را در سایت. اما اگر فقط به دنبال بارگذاری یک اسکریپت در یک فایل الگوی خاص هستید (به عنوان مثال در پست های گالری) می توانید این کارکرد را درست در پرونده قالب قرار دهید ، با این وجود شخصاً توصیه می کنم که همه اسکریپت ها را در یک مکان نگه دارید و برای بارگیری از حالت مشروط استفاده کنید. اسکریپت ها در صورت لزوم.

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

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

با استفاده از وردپرس Enqueue Hook

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

وردپرس دارای دو قلاب عمل متفاوت است که می توانید برای تماس با اسکریپت های خود استفاده کنید.

  1. wp_enqueue_scriptts – عملی که برای بارگذاری اسکریپت ها در قسمت جلویی استفاده می شود
  2. admin_enqueue_scriptts – عملی که برای بارگیری اسکریپت ها در مدیر WP استفاده می شود

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

/ **
* یک فیلم نامه را ضبط کنید
* /
عملکرد myprefix_enqueue_scriptts ()
wp_enqueue_script ("متن من" ، get_template_directory_uri (). '/js/my-script.js' ، آرایه () ، درست)؛
}
add_action ('wp_enqueue_scriptts'، 'myprefix_enqueue_scriptts')؛

توجه داشته باشید: ببینید چگونه می توانیم هنگام تعریف مکان اسکریپت از تابع “get_template_directory_uri” استفاده کنیم؟ این عملکرد یک URL به پوشه موضوع شما ایجاد می کند. اگر با یک مضمون کودک کار می کنید می خواهید به جای آن از “get_stylesheet_directory_uri” استفاده کنید تا به موضوع کودک شما و نه موضوع والدین اشاره کند..

افزودن کد Javascript درون خطی

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

عملکرد myprefix_add_inline_script ()
wp_add_inline_script ("متن من" ، "هشدار (" سلام جهان ") ؛" ، "بعد")؛
}
add_action ('wp_enqueue_scriptts'، 'myprefix_add_inline_script')؛

آنچه این کار را انجام می دهد ، اضافه کردن جاوا اسکریپت درون خطی شما پس از اسکریپت “my-script” قبلاً ثبت شده است. هنگام استفاده از wp_add_inline_script فقط می توانید قبل از یا بعد از یک اسکریپت از قبل ثبت شده ، کد داخلی را اضافه کنید ، بنابراین اگر می خواهید کد یک اسکریپت خاص را تغییر دهید ، اطمینان حاصل کنید که پس از آن بارگیری شده است ، یا اگر فقط نیاز به اضافه کردن کد سفارشی دارید می توانید قلاب کنید. آن را به اسکریپت جی کوئری که عموما توسط بیشتر مضامین وردپرس بارگذاری می شود ، در صورت نبود می توانید از wp_enqueue_script برای بارگیری نسخه میزبانی شده وردپرس از jQuery استفاده کنید..

با استفاده از این روش افراد می توانند اسکریپت های درون خطی شما را از طریق یک تم کودک یا افزونه افزونه به راحتی حذف کنند ، تمام جاوا اسکریپت سفارشی شما را مرتباً مرتب نگه می دارد و توسط WordPress تجزیه می شود که می تواند ایمن تر باشد. و اگر از یک موضوع کودک استفاده می کنید ، می توانید اسکریپت های خود را به جای کپی کردن از پرونده های header.php یا footer.php از طریق موضوع فرزندتان ، از طریق فایل های function.php بارگذاری کنید..

به گفته این ، اگر شما در زمینه کودک کار می کنید ، لازم نیست این کار را انجام دهید ، می توانید با استفاده از قلاب های wp_head یا قلاب های wp_footer مانند مثال زیر ، کد خود را درون هدر خود قرار دهید.

add_action ('wp_footer' ، عملکرد () {؟>)  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map