آموزش جاوا اسکریپت, آموزش کدهای وردپرس, آموزش وردپرس, افزونه رایگان وردپرس

نحوه اضافه کردن جاوا اسکریپت به صفحات وردپرس (2 روش)

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

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

جاوا اسکریپت چیست؟

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

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

قطعه معمول کد جاوا اسکریپت ممکن است شبیه به این باشد:

<script type="text/javascript"> 
 
// Some JavaScript code
 
</script>
 
<!-- Another Example: --!>  
 
<script type="text/javascript" src="/path/to/some-script.js"></script>

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

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

روش 1) اضافه کردن جاوا اسکریپت با استفاده از سربرگ ها و پاورقی ها (هدر – فوتر)

گاهی از شما خواسته می شود یک قطعه کد جاوا اسکریپت را در وب سایت خود کپی کنید و بچسبانید تا یک ابزار شخص ثالث اضافه کنید. این اسکریپت ها معمولا قبل از تگ </ body> وب سایت شما به بخش سر یا پایین در می آیند. به این ترتیب کد در هر صفحه نمایش بارگذاری می شود.

برای مثال، کد نصب Google Analytics باید در هر صفحه وب سایت شما حضور داشته باشد تا بتواند بازدیدکنندگان وب سایت شما را دنبال کند.

شما می توانید این کد را به فایل header.php یا footer.php تم وردپرس خود اضافه کنید. با این حال، هنگامی که قالب وردپرس خود را بروزرسانی می کنید یا تغییر دهید، این تغییرات از بین می روند.

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

اول، شما نیاز به نصب و فعال سازی افزونه Insert Headers and Footers دارید. برای جزئیات بیشتر نصب و فعال سازی، مراحل گام به گام آموزش نصب افزونه وردپرس را ببینید.

پس از نصب و فعال سازی این افزونه گزینه ای جدید با نام Insert Headers and Footers به تظیمات وردپرس شما اضافه می شود. بعد از کلیک بر روی این گزینه شما دو جعبه را مشاهده می کنید یکی برای هدر و یکی برای فوتر. (لازم به ذکر است در بعضی از قالب های وردپرس این ویژگی وجود دارد و نیازی به نصب افزونه ندارید)

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

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

خب اکنون کد در هر صفحه وب سایت شما بارگذاری می کند.

روش 2) اضافه کردن کد جاوا اسکریپت به صورت دستی با استفاده از کد

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

ابتدا اجازه دهید نگاهی به نحوه اضافه کردن کد به سرصفحه سایت وردپرس خود کنیم. شما باید کد زیر را به فایل functions.php یا یک افزونه خاص سایت اضافه کنید.

function wpb_hook_javascript() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

اضافه کردن جاوا اسکریپت به وردپرس یا صفحه خاص با استفاده از کد

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

function wpb_hook_javascript() {
  if (is_single ('16')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

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

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

function wpb_hook_javascript() {
  if (is_page ('10')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

به جای is_single، ما اکنون از is_page برای شناسایی صفحه استفاده می کنیم.

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

function wpb_hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

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

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

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

4.7/5 - (13 امتیاز)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *