نحوه افزودن JavaScript به وردپرس

نحوه افزودن JavaScript به وردپرس

زهرا عزتی

نکته جالب در مورد JavaScript این است که JavaScript یک زبان برنامه نویسی است که به جای سرور شما در مرورگر کاربر اجرا می شود؛ شما می توانید وب سایت خود را با توجه به محتوای خود تغییر دهید بدون اینکه نگران دانلود سایت خود با سرعت کم باشید. افزودن JavaScript کمی مشکل است ، زیرا وردپرس به شما اجازه نمی دهد که فقط خواسته و ناخواسته یک قطعه کد JavaScript اضافه کنید. اگر کد را در قسمت “code” یک پست وردپرس قرار دهید و وارد کنید ، وردپرس هنگام امتحان و ذخیره آن ، آن را حذف می کند و باعث می شود در محافل ناامیدکننده قرار بگیرید. اما نگران نباش این مقاله شامل چگونگی افزودن جاوا اسکریپت به وب سایت وردپرس خود با کمک چند افزونه عالی خواهد بود. با ما در شتابان هاست همراه باشید.

دو روش محبوب برای افزودن آسان JavaScript با افزونه عبارتند از:

  • برای افزودن کد به کل سایت خود از افزونه Insert Headers and Footers استفاده کنید
  • برای افزودن کد به پست ها و صفحات ، از افزونه Code Embed را امتحان می کنید

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

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

اسکریپت یک زبان برنامه نویسی از پیش ساخته شده است که توسعه دهندگان و طراحان برای انجام اقدامات خاص از آن استفاده می کنند. چندین زبان مختلف برای نوشتن اسکریپت ها وجود دارد ، از جمله ASP ، Perl ، PHP ، Python ، Ruby ، Java و … JavaScript.

در صورت افزودن اسکریپت با استفاده از زبان جاوا اسکریپت ، وب سایت شما قادر به انجام بسیاری از موارد خواهد بود ، اما در اینجا چند نمونه ذکر شده است:

نمایش یک تایمر شمارش معکوس
نمایش انیمیشن ها
نمایش به روزرسانی های محتوا
ارائه نقشه های تعاملی
و موارد دبگر.

افزودن JavaScript با افزونه Insert Headers and Footers

اگر می خواهید کد JavaScript را به کل وب سایت خود اضافه کنید ، بهترین گزینه دانلود افزونه Insert Headers and Footers است.

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

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

در اینجا مراحل اضافه کردن JavaScript با استفاده از افزونه Insert Headers and Footers وجود دارد:

۱- با اعتبار ورود به سیستم وارد وردپرس شوید.
۲- “Plugins” را در داشبورد سمت چپ پیدا کنید ، نشانگر خود را روی آن قرار دهید و “Add New” را انتخاب کنید.
۳- افزونه “Insert Headers and Footers” را در نوار جستجو ، جستجو کنید.
۴- روی «Install» کلیک کنید.
۵-Activate را کلیک کنید.
۶- وقتی افزونه را فعال می کنید ، به «تنظیمات» بروید و «Insert Headers and Footers» را پیدا کرده و انتخاب کنید.
۷- یکی از جعبه ها برای سربرگ و دیگری برای پاورقی است.
۸- کد JavaScript را در کادر مربوطه وارد کرده و تغییرات خود را ذخیره کنید.
هنگامی که کد خود را اضافه و ذخیره کردید ، تغییرات خود را در سطح سایت مشاهده خواهید کرد. به یاد داشته باشید ، حتی اگر قالب وردپرس خود را به روز کنید ، این افزونه با فعال نگه داشتن تغییرات جاوا اسکریپت ، اطلاعات کد JavaScript را در شما ذخیره می کند.

افزودن JavaScript با افزونه Code Embed

گاهی اوقات کاربران وردپرس می خواهند JavaScript را به یک صفحه یا پست خاص اضافه کنند. اگر این خواسته شماست ، نمی خواهید از افزونه Insert Headers and Footers استفاده کنید. درعوض ، می خواهید افزونه Code Embed را نصب کنید.

در اینجا مراحل اضافه کردن کد جاوا اسکریپت از طریق افزونه Code Embed وجود دارد.

۱- با اعتبار ورود به سیستم وارد وردپرس شوید.
۲- “Plugins” را در داشبورد سمت چپ پیدا کنید ، نشانگر خود را روی آن قرار دهید و “Add New” را انتخاب کنید.
۳- افزونه “Code Embed” را در نوار جستجو ، جستجو کنید.
۴- روی «Install» کلیک کنید.
۵- Activate کلیک کنید.
۶- پس از فعال سازی افزونه ، باید پست یا صفحه مربوطه را که در آن جاوا اسکریپت را می خواهید ویرایش کنید.
۷- به پست یا صفحه “Edit” بروید ، روی “Screen Options” کلیک کنید و “Custom Fields” را انتخاب کنید.
۸- پس از علامت زدن کادر “Custom Fields” ، به پایین بروید تا ویرایشگر پست را ببینید. در زیر ویرایشگر پست ، متاباکس “Custom Fields” را مشاهده خواهید کرد. از ۹- ۹- اینجا می توانید روی پیوند “Enter new” کلیک کنید.
پس از انجام این کار ، نام فیلد و مقادیر سفارشی را مشاهده خواهید کرد.
اطمینان حاصل کنید که برای فیلد سفارشی نامی ارائه کرده و استفاده از پیشوند CODE را فراموش نکنید. این بدان معنی است که کلمه CODE و نام را بنویسید (به عنوان مثال CODEname).

کد JavaScript را در قسمت مقدار قرار دهید.
برای ذخیره قسمت سفارشی ، روی دکمه “Add Custom Field” کلیک کنید.
پس از اتمام این مراحل ، می توانید از این قسمت سفارشی در هر نقطه از پست یا صفحه استفاده کنید. تمام کاری که شما باید انجام دهید این است که کدی را در جایی که می خواهید در پست یا صفحه شما نشان داده شود تعبیه کنید (به عنوان مثال {{CODEname}}).
به محض ورود به قسمت کد خود که می خواهید در آن نمایش داده شود ، می توانید صفحه یا پست خود را ذخیره کنید.
پس از ذخیره کد ، جاوا اسکریپت به کار خود ادامه خواهد داد و عملکرد کدگذاری شده را در پست یا صفحه خود مشاهده خواهید کرد.

اگر می خواهید کد JavaScript خود را از پشت صحنه بررسی کنید ، همیشه می توانید به صفحه مورد نظر بروید ، روی صفحه کلیک راست کرده و از فهرست “View Page Source” را انتخاب کنید.

ما را در شتابان هاست دنبال کنید.