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

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

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

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

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

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

1 . اضافه کردن جاوا اسکریپت با استفاده از header.php و footer.php

گاهی از شما خواسته می شود یک قطعه کد جاوا اسکریپت را در وب سایت خود کپی کنید و بچسبانید تا یک ابزار شخص ثالث اضافه کنید. این اسکریپت ها معمولا قبل از تگ </ body> وب سایت شما به بخش سر یا پایین در می آیند. به این ترتیب کد در هر صفحه نمایش بارگذاری می شود.
برای مثال، کد نصب Google Analytics باید در هر صفحه وب سایت شما حضور داشته باشد تا بتواند بازدیدکنندگان وب سایت شما را دنبال کند.
شما می توانید این کد را به فایل header.php یا footer.php تم وردپرس خود اضافه کنید. با این حال، هنگامی که تم خود را به روز می کنید یا تغییر دهید، این تغییرات تغییر خواهد کرد.
به همین دلیل ما توصیه می کنیم با استفاده از یک افزونه برای بارگیری جاوا اسکریپت در سایت خود.
اول، شما نیاز به نصب و فعال پلاگین درج header و footer دارید .
پس از فعال سازی، شما باید از تنظیمات ( صفحه های سرصفحه و پاورقیها را وارد کنید) شما دو جعبه را مشاهده خواهید کرد، یکی برای هدر و دیگری برای بخش بالا و پایین صفحه.

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

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

این روش نیاز به اضافه کردن کد به فایل های وردپرس شما دارد.
ابتدا اجازه دهید نگاهی به نحوه اضافه کردن کد به سرصفحه سایت وردپرس خود کنیم. شما باید کد زیر را به فایل function.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 با شناسه پست خود استفاده کنید.
در حال حاضر، این کد برای هر نوع پست به جز صفحات کار می کند. بیایید نگاهی به مثال دیگری بیاندازیم، به جز این، قبل از اضافه کردن کد جاوا اسکریپت به قسمت head، برای یک شناسه صفحه خاص بررسی می شود.

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');

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

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

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

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

این روش به شما امکان می دهد کد را در هر جای پست و صفحه وردپرس خود اضافه کنید. شما همچنین قادر خواهید بود کلاسی از محتویاتی که میخواهید کد جاوا اسکریپت را جاسازی کنید را انتخاب کنید.
ابتدا باید پلاگین code Embed را فعال کنید. پس از فعال سازی، شما نیاز به ویرایش پست یا صفحه که در آن شما می خواهید جاوا اسکریپت را اضافه کنید دارید. در صفحه ویرایش پست، روی گزینه ‘ Screen Option’ کلیک کنید و گزینه ‘Field Fields’ را بررسی کنید.

در حال حاضر به پایین و زیر ویرایشگر پست بروید، متاکس سفارشی Fields را که در آن شما باید روی پیوند «Enter new» کلیک کنید را ببینید.

نام فیلد سفارشی و فیلدهای ارزش در حال حاضر ظاهر می شود.
شما باید یک نام را برای فیلد سفارشی با یک پیشوند CODEمثلا( CODEmyjscode) ارائه کنید و سپس کد جاوا اسکریپت را در فیلد مقدار جاگذاری کنید.

فراموش نکنید که روی فیلد «افزودن فیلد سفارشی» کلیک کنید تا فیلد سفارشی شما ذخیره شود.
اکنون می توانید از این فیلد سفارشی برای جاسازی کد جاوا اسکریپت در هر نقطه از این پست یا صفحه استفاده کنید. به سادگی این کد جاسازی را در هر جای پست شما اضافه کنید
{{CODEmyjscode}}
شما هم اکنون می توانید پست یا صفحه خود را ذخیره کرده و سایت خود را مشاهده کنید. شما می توانید کد جاوا اسکریپت را با استفاده ازابزار سفارشی یا مشاهده منبع ببینید.