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

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

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

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

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

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

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

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

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

روش ۱- اضافه کردن کد جاوا اسکریپت با استفاده از سرصفحه ها و پاورقی ها

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

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

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

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

در قدم اول، شما نیاز به نصب و فعالسازی افزونه Insert Headers and Footers (درج هدر و پاورقی) دارید.

پس از فعالسازی افزونه، شما باید از قسمت تنظیمات، گزینه «Insert Headers and Footers» را انتخاب نمایید. سپس شما دو جعبه را مشاهده خواهید کرد، که یکی برای هدر و دیگری برای بخش بالا و پایین صفحه می باشد.

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

افزونه Insert Headers and Footers بصورت اتوماتیک کدهای وارد شده را در همه ی صفحات شما بارگذاری می کند.

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

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

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

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

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

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

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

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

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

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

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

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

ابتدا باید افزونه Code Embed را نصب و فعال کنید.

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

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

نام فیلد سفارشی و فیلد مقدار  در حال حاضر ظاهر می شود.

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

فراموش نکنید که روی فیلد «افزودن فیلد سفارشی» کلیک کنید تا فیلد سفارشی شما ذخیره شود.

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

{{CODEmyjscode}}

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

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

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

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

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

هاست