اگر می خواهید عناصر فانتزی را به وب سایت وردپرس خود اضافه کنید، اما نمی خواهید با نصب مجموعه ای از افزونه های مختلف به کاهش سرعت وب سایت خود بپردازید، چه کاری انجام می دهید؟ درست است! افزودن کمی کد جاوا اسکریپت به وردپرس به کل سایت خود یا یک صفحه یا پست مربوطه اضافه می کنید.
نکته جالب در مورد جاوا اسکریپت این است که این یک زبان برنامه نویسی است که به جای سرور شما در مرورگر کاربر اجرا می شود. نتیجه؟ شما می توانید وب سایت خود را با توجه به محتوای قبلی خود تغییر دهید بدون اینکه نگران بارگیری سایت خود با سرعت کم و لاک پشتی باشید.
افزودن جاوا اسکریپت به وردپرس کمی مشکل است. وردپرس به شما اجازه نمی دهد که همین طوری یک قطعه کد JavaScript اضافه کنید. اگر کد را در قسمت “code” یک پست وردپرس قرار دهید، وردپرس وقتی سعی می کنید آن را ذخیره کنید، احتمالا آن را حذف می کند. اما نگران نباشید
این مقاله شامل چگونگی افزودن جاوا اسکریپت به وب سایت وردپرسی خود با کمک چند افزونه عالی خواهد بود. دو روش محبوب برای افزودن آسان جاوا اسکریپت با یک پلاگین است:
خوشبختانه، این روش ها خیلی پیچیده نیستند، بنابراین حتی کاربران تازه کار وردپرس باید بتوانند در صورت لزوم کد JavaScript را اضافه کنند.
بیایید بررسی کنیم.
قبل از صحبت در مورد نحوه افزودن جاوا اسکریپت به وردپرس، مهم است که حتی اسکریپت را نیز پوشش دهیم. اسکریپت یک زبان برنامه نویسی از پیش ساخته شده است که توسعه دهندگان و طراحان برای انجام اقدامات خاص از آن استفاده می کنند.
چندین زبان مختلف برای نوشتن اسکریپت ها وجود دارد ، از جمله ASP ، Perl ، PHP ، Python ، Ruby ، Java و … JavaScript.
در صورت افزودن اسکریپت با استفاده از زبان جاوا اسکریپت، وب سایت شما قادر به انجام بسیاری از موارد خواهد بود، اما در اینجا چند نمونه ذکر شده است:
حالا بیایید در مورد نحوه افزودن کد JavaScript با کمک دو پلاگین صحبت کنیم. می توانید آموزش نحوه نصب و کار کردن با افزونه ها در وردپرس را در این مقاله ببینید.
اگر می خواهید کد JavaScript را به کل وب سایت خود اضافه کنید، بهترین گزینه بارگیری پلاگین Insert Headers and Footers است.
ویرایش و افزودن کد JavaScript به پرونده های header.php یا footer.php قالب وردپرس شما امکان پذیر است. با این حال، باید به خاطر داشته باشید که اگر پرونده های قالب خود را ویرایش کنید، هر بار که موضوع خود را به روز می کنید، وردپرس کد را نادیده می گیرد و ویرایش های شما را حذف می کند.
استفاده از افزونه Insert Headers and Footers راهی برای حل این مشکل است. حتی اگر قالب خود را به روز کنید، در صورت استفاده از افزونه، کد هدرها و پاورقی ها ثابت می مانند.
در اینجا مراحل افزودن جاوا اسکریپت با استفاده از پلاگین Insert Headers and Footers در وردپرس وجود دارد:
هنگامی که کد خود را اضافه و ذخیره کردید، تغییرات خود را در سطح سایت مشاهده خواهید کرد. به یاد داشته باشید، حتی اگر قالب WordPress خود را به روز کنید، این افزونه با فعال نگه داشتن تغییرات جاوا اسکریپت، اطلاعات کد JavaScript را برای شما ذخیره می کند.
گاهی اوقات کاربران وردپرس می خواهند JavaScript را به یک صفحه یا پست خاص اضافه کنند. اگر این خواسته شماست، نمی خواهید از افزونه Insert Headers and Footers استفاده کنید. درعوض،باید افزونه Code Embed را نصب کنید.
در اینجا مراحل اضافه کردن کد جاوا اسکریپت از طریق افزونه Code Embed وجود دارد.
اگر می خواهید کد JavaScript خود را از پشت صحنه بررسی کنید، همیشه می توانید به صفحه مورد نظر بروید، روی صفحه کلیک راست کرده و از فهرست کشویی “مشاهده منبع صفحه” را انتخاب کنید.
استفاده از افزونه Insert Headers and Footers برای افزودن جاوا اسکریپت به کل سایت وردپرس و پلاگین Code Embed برای افزودن جاوا اسکریپت به صفحات و پست های منفرد ساده ترین روش برای افزودن جاوا اسکریپت است. با این حال، آن ها تنها روش ها نیستند.
اگر به کد نویسی علاقه دارید، می توانید به صورت دستی کد را نیز به وب سایت خود اضافه کنید.
ابتدا، بیایید نگاهی به نحوه افزودن کد به هدر سایت وردپرس خود بیاندازیم. شما باید کد زیر را به پرونده functions.php طرح زمینه خود یا یک پلاگین مخصوص سایت اضافه کنید.
functionwpb_hook_javascript() {?><script>// your javscript code goes</script><?php}add_action('wp_head', 'wpb_hook_javascript');
افزودن جاوا اسکریپت به یک پست خاص وردپرس یا صفحه با استفاده از کد
فرض کنید شما فقط می خواهید این 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');
اگر نگاهی دقیق به کد بالا بیندازید، خواهید دید که ما کد javascript را با منطق شرطی منطبق کرده ایم تا با یک شناسه پست خاص مطابقت داشته باشد. با جایگزینی 16 شناسه پست خود می توانید از این مورد استفاده کنید.
اکنون، این کد برای هر نوع پستی به جز صفحات کار می کند. بیایید نگاهی به مثال دیگری بیندازیم، به غیر از این مورد قبل از افزودن کد javascript به بخش 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');
به جای is_single ، اکنون از is_page برای بررسی شناسه صفحه استفاده می کنیم.
برای افزودن کد javascript به پاورقی سایت شما، می توانیم از همان کد با کمی تغییر استفاده کنیم. به مثال زیر نگاهی بیندازید.
function wpb_hook_javascript_footer() {?><script>// your javscript code goes</script><?php
}add_action('wp_footer', 'wpb_hook_javascript_footer');
به جای اینکه عملکرد خود را به wp_head وصل کنیم، اکنون آن را به wp_footer متصل کرده ایم. همچنین می توانید از آن با برچسب های شرطی برای افزودن Javascript به پست ها یا صفحات خاص استفاده کنید.
افزودن اسکریپت به وب سایت شما روشی جالب برای افزودن ویژگی های اضافی به کل سایت، صفحات یا پست های شما است. بهترین بخش در مورد افزودن جاوا اسکریپت به وردپرس این است که شما می توانید بدون اینکه سایت خود را با تعداد زیادی پلاگین درگیر کنید، به وب سایت خود قابلیت اضافه کنید.
گرچه مطمئناً می توانید JavaScript را به صورت دستی به وب سایت خود اضافه کنید، اما اغلب برای کاربران مبتدی وردپرس نصب یک پلاگین آسان تر است. یعنی تنها نیاز است افزونه های Insert Headers and Footers and Code Embed را نصب کنید.
منبع: hostgator و wpbeginner