اگر می خواهید عناصر فانتزی را به وب سایت وردپرس خود اضافه کنید، اما نمی خواهید با نصب مجموعه ای از افزونه های مختلف به کاهش سرعت وب سایت خود بپردازید، چه کاری انجام می دهید؟ درست است! افزودن کمی کد جاوا اسکریپت به وردپرس به کل سایت خود یا یک صفحه یا پست مربوطه اضافه می کنید.
نکته جالب در مورد جاوا اسکریپت این است که این یک زبان برنامه نویسی است که به جای سرور شما در مرورگر کاربر اجرا می شود. نتیجه؟ شما می توانید وب سایت خود را با توجه به محتوای قبلی خود تغییر دهید بدون اینکه نگران بارگیری سایت خود با سرعت کم و لاک پشتی باشید.
افزودن جاوا اسکریپت به وردپرس کمی مشکل است. وردپرس به شما اجازه نمی دهد که همین طوری یک قطعه کد JavaScript اضافه کنید. اگر کد را در قسمت “code” یک پست وردپرس قرار دهید، وردپرس وقتی سعی می کنید آن را ذخیره کنید، احتمالا آن را حذف می کند. اما نگران نباشید
این مقاله شامل چگونگی افزودن جاوا اسکریپت به وب سایت وردپرسی خود با کمک چند افزونه عالی خواهد بود. دو روش محبوب برای افزودن آسان جاوا اسکریپت با یک پلاگین است:
- برای افزودن کد به کل سایت خود از پلاگین Insert Headers and Footers استفاده کنید.
- برای افزودن کد به پست ها و صفحات، پلاگین Code Embed را امتحان می کنید.
خوشبختانه، این روش ها خیلی پیچیده نیستند، بنابراین حتی کاربران تازه کار وردپرس باید بتوانند در صورت لزوم کد JavaScript را اضافه کنند.
بیایید بررسی کنیم.
اسکریپت چیست؟
قبل از صحبت در مورد نحوه افزودن جاوا اسکریپت به وردپرس، مهم است که حتی اسکریپت را نیز پوشش دهیم. اسکریپت یک زبان برنامه نویسی از پیش ساخته شده است که توسعه دهندگان و طراحان برای انجام اقدامات خاص از آن استفاده می کنند.
چندین زبان مختلف برای نوشتن اسکریپت ها وجود دارد ، از جمله ASP ، Perl ، PHP ، Python ، Ruby ، Java و … JavaScript.
در صورت افزودن اسکریپت با استفاده از زبان جاوا اسکریپت، وب سایت شما قادر به انجام بسیاری از موارد خواهد بود، اما در اینجا چند نمونه ذکر شده است:
- کشیدن از طریق تصاویر مختلف
- نمایش یک تایمر شمارش معکوس
- نمایش انیمیشن ها
- نمایش به روزرسانی های محتوا
- ارائه نقشه های تعاملی
- توسعه مرورگر
- و موارد خیلی بیشتر!
حالا بیایید در مورد نحوه افزودن کد JavaScript با کمک دو پلاگین صحبت کنیم. می توانید آموزش نحوه نصب و کار کردن با افزونه ها در وردپرس را در این مقاله ببینید.
1. با استفاده از افزونه Insert Headers and Footers جاوا اسکریپت را اضافه کنید.
اگر می خواهید کد JavaScript را به کل وب سایت خود اضافه کنید، بهترین گزینه بارگیری پلاگین Insert Headers and Footers است.
ویرایش و افزودن کد JavaScript به پرونده های header.php یا footer.php قالب وردپرس شما امکان پذیر است. با این حال، باید به خاطر داشته باشید که اگر پرونده های قالب خود را ویرایش کنید، هر بار که موضوع خود را به روز می کنید، وردپرس کد را نادیده می گیرد و ویرایش های شما را حذف می کند.
استفاده از افزونه Insert Headers and Footers راهی برای حل این مشکل است. حتی اگر قالب خود را به روز کنید، در صورت استفاده از افزونه، کد هدرها و پاورقی ها ثابت می مانند.
در اینجا مراحل افزودن جاوا اسکریپت با استفاده از پلاگین Insert Headers and Footers در وردپرس وجود دارد:
- به سیستم وردپرس وارد شوید.
- “افزونه ها” را در داشبورد سمت راست (اگر وردپرس شما فارسی است) پیدا کنید، نشانگر خود را روی آن قرار دهید و “افزودن جدید” را انتخاب کنید.
- پلاگین “Insert Headers and Footers” را در نوار جستجو، جستجو کنید.
- روی «نصب» کلیک کنید.
- فعال کردن را کلیک کنید. “
- وقتی پلاگین را فعال کردید، به «تنظیمات» بروید و «درج سرصفحه ها و پاورقی ها» را پیدا کرده و انتخاب کنید.
- یکی از جعبه ها برای سربرگ و دیگری برای پاورقی است.
- کد JavaScript را در کادر مربوطه وارد کرده و تغییرات خود را ذخیره کنید.
هنگامی که کد خود را اضافه و ذخیره کردید، تغییرات خود را در سطح سایت مشاهده خواهید کرد. به یاد داشته باشید، حتی اگر قالب WordPress خود را به روز کنید، این افزونه با فعال نگه داشتن تغییرات جاوا اسکریپت، اطلاعات کد JavaScript را برای شما ذخیره می کند.
2. با استفاده از افزونه Code Embed کد جاوا اسکریپت را در داخل پست ها یا صفحات اضافه کنید.
گاهی اوقات کاربران وردپرس می خواهند JavaScript را به یک صفحه یا پست خاص اضافه کنند. اگر این خواسته شماست، نمی خواهید از افزونه Insert Headers and Footers استفاده کنید. درعوض،باید افزونه Code Embed را نصب کنید.
در اینجا مراحل اضافه کردن کد جاوا اسکریپت از طریق افزونه Code Embed وجود دارد.
- به سیستم وردپرس وارد شوید.
- “افزونه ها” را در داشبورد سمت راست پیدا کنید، نشانگر خود را روی آن قرار دهید و “افزودن جدید” را انتخاب کنید.
- افزونه “Code Embed” را در نوار جستجو، جستجو کنید.
- روی «نصب» کلیک کنید.
- فعال کردن را کلیک کنید.
- پس از فعال سازی افزونه، باید پست یا صفحه مربوطه را که در آن جاوا اسکریپت را می خواهید ویرایش کنید.
- به پست یا صفحه “ویرایش” بروید، روی “گزینه های صفحه” کلیک کنید و “قالب های سفارشی” را انتخاب کنید.
- پس از علامت زدن کادر “قالب های سفارشی”، به پایین بروید تا ویرایشگر پست را ببینید. در زیر ویرایشگر پست، متاباکس “قالب های سفارشی” را مشاهده خواهید کرد. از اینجا می توانید روی لینک “ورود جدید” کلیک کنید.
- پس از انجام این کار، نام فیلد و مقادیر سفارشی را مشاهده خواهید کرد.
- اطمینان حاصل کنید که برای فیلد سفارشی نامی ارائه کرده و استفاده از پیشوند CODE را فراموش نکنید. این به معنای نوشتن کلمه CODE و نام (به عنوان مثال CODEname) است.
- کد JavaScript را در قسمت مقدار قرار دهید.
- برای ذخیره قسمت سفارشی، روی دکمه “افزودن فیلد سفارشی” کلیک کنید.
- پس از اتمام این مراحل، می توانید از این قسمت سفارشی در هر نقطه از پست یا صفحه استفاده کنید. تمام کاری که شما باید انجام دهید این است که کدی را در جایی که می خواهید در پست یا صفحه شما نشان داده شود تعبیه کنید (به عنوان مثال {{CODEname}}).
- به محض ورود به قسمت کد خود که می خواهید در آن نمایش داده شود، می توانید صفحه یا پست خود را ذخیره کنید.
- پس از ذخیره کد، جاوا اسکریپت به کار خود ادامه خواهد داد و عملکرد کدگذاری شده را در پست یا صفحه خود مشاهده خواهید کرد.
اگر می خواهید کد 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
