افزودن CSS و جاوا اسکریپت سفارشی به قالب وردپرس

اگر شما می‌خواهید CSS و جاوا اسکریپت اختصاصی خود را به قالب وردپرس اضافه کنید. در این مقاله ما به شما روش افزودن درست جاوا اسکریپت به وردپرس با کد نویسی را آموزش می‌دهیم. ازآنجایی‌که اغلب کاربران دوست ندارند در سایت خود افزونه نصب کنند؛ بنابراین در این مقاله این کار را با کد نویسی انجام خواهیم داد. این آموزش برای توسعه‌دهندگانی که یادگیری قالب و افزونه را شروع کرده‌اند مفید می‌باشد. ببینیم برای افزودن CSS و جاوا اسکریپت سفارشی به قالب وردپرس چه باید کرد؟

برخی اوقات شما نیاز پیدا می‌کنید که از کدهای جاوا اسکریپت و یا CSS در سایت خود استفاده نمایید. درواقع هر زمان که شما بخواهید قالب سایت خود را سفارشی‌سازی کنید می‌توانید از این قابلیت استفاده نمایید. همچنین در هنگام طراحی قالب نیز این ویژگی به کمک شما می‌آید و می‌توانید از آن استفاده کنید.

نکته بسیار مهم در این زمینه این است که شما باید در هنگام استفاده از این کدها نهایت دقت را داشته باشید. چراکه ممکن است خسارت‌هایی را به وب‌سایت شما وارد کند.

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

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

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

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

CSS چیست؟

پس از روی کار آمدن زبان HTML مشکلاتی در عرصه برنامه نویسی به‌وجود آمد که پس از آن CSS سعی بر جبران آن داشت. یعنی مشکلاتی که با استفاده از HTML به‌وجود آمد را با استفاده از این زبان می‌توان حل کرد. با استفاده از این زبان برنامه‌نویسی شما امکان این را دارید که تغییراتی در سایت خود به‌وجود بیاورید و به‌عنوان پایه برای سایت شما به‌شمار می‌رود.

CSS به شما کمک می‌کند که بتوانید با استفاده از این زبان و همچنین HTML استه سایت را بسازید. با استفاده از CSS شما امکان این را دارید که مشخص کنید محل قرارگیری تمام اجزای سایتتان کجا است. درواقع وظیفه مشخص کردن محل قرارگیری متون، تصاویر و … را به‌عهده دارد.

افزودن CSS و جاوا اسکریپت سفارشی به وردپرس

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

وردپرس دارای یک تابع wp_Head می‌باشد که به شما اجازه بارگذاری هر چیزی در بخش بالای سایت یا همان هدر سایت را می‌دهد. شما می‌توانند به‌راحتی اسکریپت خود را با استفاده از قطعه کدی که در زیر برای شما قرار داده‌ایم اضافه کنید:

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'کد‌های جاوا اسکریپت یا سی اس اس';
}
?>

درحالی‌که کد بالا یک راه راحت برای شما محسوب می‌شود؛ اما در نظر داشته باشید که یک راه اشتباه برای افزودن CSS و جاوا اسکریپت سفارشی به وردپرس می‌باشد. برای مثال اگر شما JQuery را به‌صورت دستی بارگذاری کنید و همچنین افزونه‌های دیگر نیز از جی کوئری از طریق مناسب استفاده کنند؛ جی کوئری شما دو مرتبه بارگذاری شده است و مطمئناً دو نسخه مختلف باعث تضاد خواهد شد.

علت قرار دادن اسکریپت در نوبت

وردپرس یک جامعه توسعه‌دهنده قوی دارد. در نظر داشته باشید که هزاران نفر در اطراف جهان قالب طراحی می‌کنند. علاوه بر این افراد زیادی برای وردپرس افزونه می‌نویسند. برای اینکه مطمئن شوید همه‌چیز به‌درستی کارکرده و هیچ‌یک در کار دیگری خلل ایجاد نمی‌کند؛ وردپرس تابع اسکریپت‌ها را در نوبت قرار می‌دهد. این تابع یک راه اصولی برای بارگذاری جاوا اسکریپت و سبک فراهم می‌کند. توجه داشته باشید که شما با استفاده از تابع Wp_Enqueue_Script مکان بارگذاری را به وردپرس اعلام می‌کنید.

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

قرار دادن صحیح اسکریپت در صف

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

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

توضیح:

شما باید ثبت‌نام اسکریپت خود از طریق تابع () wp_Register_Script شروع کنید. این تابع شامل 5 پارامتر می‌باشد. که شما می‌توانید در زیر آن‌ها را مشاهده کنید.

handle$: یک نام منحصربه‌فرد برای اسکریپت محسوب می‌شود. که ما آن را “my_Amazing_Script” می‌نامیم.

src$: شامل مکان اسکریپت می‌باشد. شما باید از تابع آدرس افزونه برای به‌دست آوردن آدرس صحیحی از فولدر افزونه استفاده کنید. پس‌ازاینکه وردپرس آن را پیدا کرد؛ سپس به دنبال فایل Amazing_Script.js در فولدر می‌گردد.

deps$: این پارامتر برای وابستگی می‌باشد. ازآنجاکه اسکریپت از جی کوئری استفاده می‌کند؛ شما باید جی کوئری را در بخش وابستگی اضافه کنید. همچنین وردپرس به‌صورت خودکار جی کوئری را درصورتی‌که در سایت در حال بارگذاری نباشد، بارگذاری می‌کند.

ver$: این پارامتر نسخه اسکریپت شما را نشان می‌دهد. در نظر داشته باشید که این پارامتر موردنیاز شما نمی‌باشد.

in_footer$: قصد داریم اسکریپت را در فوتر بارگذاری کنیم. بنابراین برای درست بودن باید ارزش تعیین کنیم. اگر بخواهید اسکریپت را در هدر بارگذاری کنید؛ پس به شما می‌گوید که نادرست است.

پس از فراهم کردن تمام پارامترها در Wp_Register_Script تنها می‌توانید اسکریپت را در ()Wp_Enqueue_Script که باعث می‌شود همه‌چیز اتفاق بیفتد صدا بزنید. رفتن به گام ثبت‌نام و در صف قرار دادن اسکریپت به سایت‌های دیگر اجازه ثبت‌نام اسکریپت شما را می‌دهد. البته این مورد در صورتی است که بخواهند بدون تغییر کد از افزونه استفاده کنند.

در صف قرار دادن صحیح CSS

این کار نیز به‌سادگی قابل انجام است. شما دقیقاً مانند اسکریپت‌ها می‌توانید CSS خود را در صف قرار دهید. به مثال زیر توجه کنید:

<?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

توجه داشته باشید که شما از قلاب عمل Wp_Enqueue_Scripts هم برای اسکریپت و هم برای سبک استفاده کرده‌اید. درنتیجه این تابع برای هر دو حالت کار می‌کند. در مثال بالا ما از Plugins_url برای اشاره کردن به مکان اسکریپت و یا سبک که قصد داریم در صف قرار دهیم استفاده کرده‌ایم. بااین‌حال اگر از تابع اسکریپت صف در قالب خود استفاده می‌کنید؛ پس از ()Get_Template_Directory_Uri استفاده کنید. همچنین اگر با قالب کودک کار می‌کنید نیز از () get_stylesheet_directory_uri استفاده کنید. مانند مثال زیر:

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

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

موفق و پیروز باشید. 🙂

تیم تولید محتوا

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