افزودن فایل های css و js به قالب وردپرس و روش صحیح آن

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

[toc]

اضافه کردن فایل های css و js به قالب وردپرس :

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

بیایید یک بار این روند را با هم مرور کنیم؛

سوال : میخواهیم بدانیم که به طور معمول به چه شکل یک فایل استایل یا یک فایل جاوا اسکریپت را به یک قالب ساده و استاندارد HTML را باید اضافه کنیم؟

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

<link href="style.css" rel="stylesheet" type="text/css"></pre>

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

<script src="js/jquery.simple_slider.js" type="text/javascript"></script>

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

[su_note note_color=”#ec2bc5″ text_color=”#fff” radius=”5″ class=”.aylin_mahmoud”]می توان اینطور گفت که برای اضافه کردن فایل هایی که استایل و جاوااسکریپت از استانداردهایی استفاده کنید که در این زمینه وردپرس وضع شده اند.[/su_note]

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

پیشنهاد تیم آیلین وب : آموزش طراحی وب سایت خود با المنتور 

پیوست صحیح فایل های استایل و جاوا اسکریپت در وردپرس :

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

[su_note note_color=”#ec2bc5″ text_color=”#fff” radius=”5″ class=”.aylin_mahmoud”]اگر در رابطه با نحوه ی استفاده از این دو تابع سری به راهنمای توسعه دهندگان وردپرس سر بزنید، ممکن است در ابتدا از دیدن توضیحات و نحوه ی استفاده این دو تابع کمی گیج شوید ولی واقعیت این است که استفاده از این دو تابع بسیار آسان بوده و اصلا شما را دچار دردسر نخواهد کرد.[/su_note]

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

;('wp_enqueue_style( 'mainstyle', get_template_directory_url().'/style.css', array(), '1.0 

در کدهایی که در این باره مورد استفاده قرار می گیرند در واقع mainstyle است که نام استایل شخصی ماست. (این نام همچنین میتوان هر چیزی معتبر دیگری هم باشد و نیازی نیست که شما استایل خود را حتما mainstyle نام گذاری کنید.)

در ادامه این مطلب در واقع برای مقدار بعدی از get_template_directory_url().’/style.css’ استفاده خواهیم کرد که فایل style.css را از فولدر اصلی قالب ما فراخوانده خواهد شد. به طور قطع اگر فایل استایل در زیر فولدر دیگری در فولدر قالب قرار گرفته باشد و یا نام دیگری داشته باشد، به سادگی با اضافه کردن مسیر فولدر و همچنین نام استایل بجای عبارت /style.css می توانیم کد را به دلخواه خود تغییر دهیم.

روش صحیح افزودن فایل های css و js به قالب وردپرس :

در رابطه با ورودی های این تابع در سایت رسمی مربوط به وردپرس هم توضیحاتی ارائه شده است که شامل موارد زیر است:

مسیری مشخص را برای اسکریپت را بیان می کند. این مسیر در عین اینکه میتواند کامل باشد همچنین میتواند به صورت نسبی بر اساس محل نصب وردپرس وارد شود.

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

با توضیحات فوق و همچنین توضیحاتی که در زمینه تابع wp_enqueue_style به شما ارائه کرده ایم، به طور حتم حالا میتوانید کاربرد کد زیر را که برای فراخوانی یک فایل جاوا اسکریپت به کار رفته، به خوبی درک کنید. اما همچنان هم سوالات مختلفی در این زمینه مطرح می شود که کد را باید در کجا قرار دهیم و یا استفاده از کد هایی که در این زمینه از پیش تالیف شده اند کافی است یا خیر؟

این کد ها را همچنین میتوانید در فایل های functions.php در قالب وردپرس خود قرار دهید.

; (wp_enqueue_script('jsname', get_template_directory_uri().'/scripts.js', array(), '1.3.2', false 

در واقع کد هایی که برای افزودن استایل و اسکریپت به قالب خود اضافه می کنید را میتوانید درون یک تابع قرار دهید، سپس با استفاده از توابع add_action میتوانید به وردپرس اعلام کنید که میخواهید تابع مدنظرتان در چه زمانی اجرا شود. به مثال زیر توجه کنید:

<?php function mechanicwp_scripts() {
wp_enqueue_style( ‘stylename’, get_template_directory_uri().’/style.css’, array(), ‘1.0’ );
wp_enqueue_script(‘jsname’, get_template_directory_uri().’/scripts.js’, array(), ‘1.3.2’, false );
}
add_action( ‘wp_enqueue_scripts’, ‘mechanicwp_scripts’ );
?>

شاید نکته ای که در اینجا واضح است این باشد که شما میتوانید اضافه شدن هر استایل یا اسکریپت به قالب وردپرس با شرط های مختلف تعیین کنید. مثلا شاید برای قالب خود یک پنل مدیریت طراحی کرده باشید. در چنین حالتی میتوانید بر اساس انتخاب کاربران و همچنین بر اساس رنگی که توسط آن ها در پنل مدیریت تنظیم شده است، استایل ویژه ای را به قالب های خود اضافه کنید. یا مثلا اگر از بوت استرپ در قالب وردپرس خود استفاده کرده اید، میتوانید بررسی کنید که اگر وضعیت نمایش قالب به حالت rtl است، نسخه ی rtl استایل های بوت استرپ شما هم در قالب بارگذاری شود.

نکته های در مورد افزودن فایل های css و js به قالب وردپرس :

• فایل rtl.css

این فایل ها معمولا گونه ای بی تاثیر از فایل های CSS است که لازم نیست شما آن ها را ویرایش کنید. در واقع وقتی قالبی را به صورت فارسی سازی شده تعیین می کند و همچنین برای آن استایل rtl جداگانه ای را در فایل rtl.css قرار میدهید، نیازی نیست که این استایل را به روش هایی که در بالا ذکر شد تغییر دهید.

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

• فایل های جی کوئری

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

;('wp_enqueue_script('jquery

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

هم اکنون اگر بخواهید تعدادی اسکریپت وابسته به جی کوئری را ایجاد کنید، حتما باید پس از بارگذاری کامل جی کوئری، آن را لود کنیم.

wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘script1′, get_template_directory_uri().’/script1.js’, array(‘jquery’), false, false );
wp_enqueue_script(‘script2′, get_template_directory_uri().’/script2.js’, array(‘jquery’), false, false );
wp_enqueue_script(‘script3′, get_template_directory_uri().’/script3.js’, array(‘jquery’), false, false );

همانطور که گفته شد با درج عبارت (`array (‘ jquery مشخص شده است که اسکریپت ما در واقع به اسکریپتی که نامش jquery است وابسته است و به دیگر موارد بستگی ندارد. در اینجا در واقع وردپرس مطمئن می شود که ابتدا اسکریپت اصلی و سپس اسکریپت هایی که به آن وابسته هستند را بارگذاری می کند.

همچنین میتوان گفت ما در اینجا ورژنی مخصوصی را برای اسکریپت هایمان معین نکرده ایم و همچنین بجای ورژن عبارت false را قرار داده ایم، باید دقت داشته باشید که این کار باعث می شود که وردپرس به صورت اتوماتیک، ورژن فعلی و آخرین آپدیت خود را در انتهای آدرس اسکریپت های مربوط به آن اضافه کند.

خوشحالیم از این که توانستیم این مقاله مهم و کاربردی را انتشار دهیم