افزودن javascript در وردپرس

نحوه بارگذاری Javascript در صفحات خاص در وردپرس

Spread the love

افزودن JavaScript در هدر

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

در این پست ، می خواهم به شما نشان دهم که چگونه JavaScript را فقط در صفحات یا مناطق خاص در وردپرس بگنجانید.
اولین کاری که باید انجام دهید افزودن JavaScriptای است که می خواهید اجرا شود به فایل های وردپرس. برای مرتب نگه داشتن همه چیز ، پوشه ای به نام “Scripts” یا “Js” ایجاد کنید.
از این رو ، فایل header.php تم خود باز کرده و به جای آن که پیوند را به صورت عادی فراخوانی می کنید ، کد زیر را در برچسب head وارد کنید:

کد:

<?php if (is_page('home')): ?>
<!--home page custom JS-->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Scripts/customJS.js"></script>
<?php endif; ?>

توضیح کد :

if (is_page('home')
این بدان معناست که اگر permalinks فعال و صفحه ای به نام home باشد ، JavaScript فقط در آن صفحه بارگیری می شود.
<!--home page custom JS-->
این یک کامنت ساده HTML است برای منظم نگه داشتن یا تسهیل برای سایر توسعه دهندگانی که ممکن است مجبور به کار با کد شما باشند.
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Scripts/customJS.js"></script>
در واقع ، این پیوند به پرونده جاوا اسکریپت ما است که می تواند به تنهایی باقی بماند ، همانطور که در همه صفحات بارگیری می شود.

تغییرات

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

 

if (is_page('home') || is_page('contact') || is_page('45'))
یا بخشهایی به عنوان:
if (is_single())
برای گزینه های بیشتر به برچسب های شرطی وردپرس مراجعه کنید

JavaScript افزونه های وردپرس را حذف کنید

این یکی یک ترفند است. وب سایت هایی که از وردپرس به عنوان CMS استفاده می کنند ، برای دستیابی به عملکرد مطلوب به چندین افزونه نیاز دارند.JavaScript بسیاری از این افزونه ها با استفاده از هوک wp_head() را در برچسب head قرار می دهند.

 

چه اتفاقی می افتد اگر بخواهیم آن کد JavaScript پلاگین های خاص را فقط در صفحات خاص فراخوانی کنیم؟

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

 

کدهایی که لازم است

با استفاده از کد زیر در فایل functions.php ما ، JavaScript افزونه غیر از صفحه مشخص شده غیرفعال می شود:

 

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}

 

تنها افزونه هایی که می توانید هدف قرار دهید ، مواردی هستند که از wp_enqueue_script استفاده می کنند و شما باید با مرور فایل اصلی .php دسته آن پلاگین خاص را پیدا کنید.

 

منابع

ترتیب وارد کردن جاوا اسکریپت از اهمیت ویژه ای برخوردار است ، به ویژه هنگامی که با Jquery در وردپرس سر و کار دارید. شاید بخواهید این مقاله را نیز بررسی کنید:

Use Google-Hosted JavaScript Libraries (…still the Right Way)

 

ترجمه شده از