آموزش روش صحیح اضافه کردن فایل های css و js به قالب وردپرس
چگونه به درستی اسکریپت ها و استایل ها را به وردپرس اضافه کنیم
آیا می خواهید یاد بگیرید که چگونه می توان به صورت صحیح به اضافه کردن کدهای استایل و جاوااسکریپت در وردپرس پرداخت؟ بسیاری از کاربرانی که خودشون تصمیم می گیرند بدون کمک گرفتن از افراد متخصص در امر وردپرس، پلاگینی و یا قالبی بنویسند دچار این اشتباه می شوند و صورت نادرستی کدهای مربوط به اسکریپت ها و استایل ها را در قالب یا پلاگینی که می نویسند، فراخوانی می کنند.
در این مقاله ما به شما شیوه صحیح اضافه کردن کدهای استایل و جاوااسکریپت را یاد خواهیم داد. این مقاله می تواند برای آن دسته از کاربران علاقه مندی که تازه شروع به یادگیری توسعه و طراحی قالب یا پلاگین در امر وردپرس کرده اند مفید باشد.
.
اشتباهات رایج در اضافه کردن استایل ها و اسکریپت ها در وردپرس
بسیاری از کاربرانی که به تازگی شروع به طراحی قالب و یا نوشتن پلاگین کرده اند مرتکب این اشتباه می شوند و به صورت مستقیم کدهای مربوط به اسکریپت ها یا کدهای سی اس اس خطی را به قالب یا پلاگین اضافه می کنند.
برخی از آنها به اشتباه از تابع wp_head استفاده می کنند تا کدهای مربوط به اسکریپت ها و استایل ها را بارگذاری کنند.
|
۱
|
<?php add_action('wp_head', 'wpb_bad_script'); function wpb_bad_script() { echo 'کدهای مربوط به اسکریپت'; } ?><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span> |
در نگاه اول ممکن است کد بالا آسان به نظر برسد، اما این کد روش اشتباهی برای بارگذاری کدهای مورد نظر در وردپرس است و در آینده باعث ایجاد تداخل بیشتر در سیستم می شود.
برای مثال، اگر شما به صورت دستی jQuery را بارگذاری کنید و پلاگین دیگری هم از همین روش استفاده کرده و به صورت دستی آن را بارگذاری کند، در این صورت شما مشاهده خواهید کرد که jQuery دو بار بارگذاری شده است. اگر jQuery در هر صفحه بارگذاری شود، نتیجه آن افت محسوس سرعت و عملکرد سایت شما خواهد بود.
حتی ممکن است این دو نسخه که بارگذاری شده اند، دو نسخه متفاوت jQuery باشند که این خود باعث ایجاد تداخل هم می شود.
با این حرف هایی که زدیم حتما به اهمیت اضافه کردن کدهای استایل و جاوااسکریپت در وردپرس به صورت صحیح پی برده اید. پس بهتر است با روش صحیحی که در زیر به آن اشاره شده این مشکل را حل کنید.
چرا باید استایل ها و اسکرپیت ها را در وردپرس صف بندی (Enqueue) کرد؟
وردپرس از یک جامعه توسعه دهنده بسیار قوی برخوردار است. هزاران نفر از سرتاسر دنیا مشغول طراحی قالب و نوشتن پلاگین برای وردپرس هستند.
برای این که مطمئن بشیم همه به درستی و به طور صحیح در حال انجام کار خودشون هستند و هیچ کس در کار دیگری دخالت نمیکنه، میتوانیم از سیستم صف بندی وردپرس استفاده کنیم. این سیستم یک روش کاملا مناسب را برای بارگذاری استایل ها و فایل های جاوااسکریپت فراهم می کند.
با استفاده از توابع wp_enqueue_script و wp_enqueue_style شما به وردپرس میفهمانید که چه موقع یک فایل باید بارگذاری شود، کجا باید بارگذاری شود و به چه چیزهایی بستگی دارد.
این سیستم همچنین به توسعه دهندگان اجازه می دهد تا از کتابخانه مربوط به جاوااسکریپت در وردپرس استفاده کرده تا اینکه از موارد مشابه چندین بار استفاده کنند. این امر باعث کاهش سرعت بارگذاری و کاهش تداخل در قالب ها و پلاگین ها می شود.
چگونه می توان اسکریپت ها را به طور صحیح فراخوانی کرد؟
بارگذاری اسکریپت ها در وردپرس بسیار آسان است. نمونه کد زیر یک مثال ساده است که با کپی کردن آن و قرار دادن آن در فایل پلاگین خود و یاfunctions.php قالب خود می توانید به طور صحیح اسکریپت ها را در وردپرس بارگذاری کنید.
|
۱
|
<?php function wpnovin_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', 'wpnovin_adding_scripts' ); ?><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span> |
توضیحات مربوط به کد بالا:
ما با ثبت اسکریپت خود با استفاده از تایع wp_register_script() شروع کرده ایم. این تابع ۵ پارامتر زیر را قبول می کند:
- $handle: نام یکتا اسکرپیت شما است. یعنی قبلا فایلی با این عنوان ایجاد نشده است. نامی که ما در کد بالا استفاده کرده ایم “my_amazing_script” است.
- $src: محل قرارگیری فایل شما است. ما در اینجا از تابع plugins_url استفاده می کنیم تا آدرس صحیح پوشه مربوط به پلاگین را دریافت کنیم. به محض اینکه وردپرس آدرس پوشه پلاگین را دریافت کند، به دنبال فایلی به نام amazing_script.js در آن پوشه خواهد گشت.
- $deps: مربوط به وابستگی است. از آنجایی که اسکریپت مورد نظر ما از jQuery استفاده می کند، ما jQuery را در قسمت وابستگی در کد بالا اضافه کرده ایم.
- $ver: این مربوط به نسخه اسکریپتی است که ما از آن استفاده می کنیم. این پارامتر ضروری نیست.
- $ln_footer: ما میخواهیم اسکریپت خود را در فوتر بارگذاری کنیم، خب برای این منظور مقدار این پارامتر را true قرار داده ایم. اگر شما می خواهید این اسکریپت را در هدر سایت خود بارگذاری کنید، مقدار این پارامتر را false قرار بدید.
بعد از تهیه پارامترهای لازم در تایع wp_register_script، می توانیم از تایع wp_enqueue_script() برای فراخوانی اسکریپت مورد نظر در وردپرس استفاده کنیم.
آخرین مرحله استفاده از هوک wp_enqueue_scripts برای بارگذاری اسکریپت مورد نظر در سایت است. از آنجایی که کد بالا فقط یه نمونه و مثال است، ما آن را دقیقا در پایین بقیه کدها قرار داده ایم.
اگر میخواهید این کد را به قالب یا پلاگین مورد نظر خود اضافه کنید، می توانید این هوک را در جایی اضافه کنید که به این کد نیاز دارید.
حالا برخی از کاربران ممکن است از خود بپرسند چرا ابتدا اسکریپت مورد نظر را ثبت کرده و و بعد آن را فراخوانی می کنیم؟ خب این کار به مدیران سایت ها اجازه میدهد تا بدون ویرایش و اصلاح کدهای مربوط به هسته، به راحتی اسکریپت شما را deregister کنند.
نحوه صحیح فراخوانی استایل ها در وردپرس
مانند بخش اسکریپت ها، شما می توانید استایل ها را نیز به همین صورت فراخوانی کنید. به مثال زیر توجه کنید:
|
۱
|
<?php function wpnovin_adding_styles() { wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__)); wp_enqueue_style('my_stylesheet'); } add_action( 'wp_enqueue_scripts', 'wpnovin_adding_styles' ); ?> |
به جای استفاده از تابع wp_enqueue_script، برای فراخوانی استایل ها از تابع wp_enqueue_style استفاده می کنیم.
دقت داشته باشید که ما از هوک wp_enqueue_scripts برای فراخوانی هر دو یعنی هم استایل ها و هم اسکریپت ها استفاده می کنیم. علی رغم نام یکسان آن، این تابع برای هر دو یعنی استایل ها و اسکریپت ها کار می کند.
در مثال های بالا، ما از تابع plugins_url برای دریافت محل قرارگیری اسکریپت یا استایلی که میخواهیم آنرا فراخوانی کنیم استفاده می کنیم.
اما اگر شما از تابع مربوط به فراخوانی اسکریپت ها در قالب خود استفاده میکتید، به راحتی با استفاده از get_template_directory_uri() می توانید این کار را انجام دهید. اگر از child theme استفاده میکنید، در آن صورت باید از get_stylesheet_directory_uri() استفاده کنید.
کد زیر یک نمونه از کاربرد آن است:
|
۱
|
<?php function wpnovin_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', 'wpnovin_adding_scripts' ); ?> |
.
وقتی در حال طراحی یک قالب برای سیستم مدیریت محتوای وردپرس هستید و یا اینکه میخواهید یک قالب HTML را به یک قالب وردپرسی تبدیل کنید، شاید برایتان این سوال پیش بیاید که شیوه ی صحیح اضافه کردن استایل ها و فایل های جاوااسکریپت به قالب وردپرس دقیقا به چه صورت است و از چه طریقی باید این کار را انجام دهید. قبلا در آموزش تبدیل قالب html به وردپرس مختصرا در رابطه با روش صحیح اضافه کردن فایل های css و js به قالب وردپرس صحبت کرده بودیم. در آموزش امروز کمی گسترده تر به این مبحث میپدازیم. با کدینگ شاپ همراه شوید تا آموزش امروز را به همراه هم پی بگیریم.
به طور معمول چه کار میکنیم؟
البته بدون شک خودتان استاد هستید ولی اجازه بدهید یک بار هم با هم مرور کنیم که به طور معمول به چه شکل یک فایل استایل یا یک فایل جاوا اسکریپت را به یک قالب ساده و استاندارد HTML اضافه میکنیم. برای قرار دادن یک فایل استایل در صفحه ی مربوطه از کد زیر استفاده میکنیم :
|
۱
|
<link rel=“stylesheet” type=“text/css” href=“path/to/your/style.css”>
|
البته تگ link میتواند خصوصیت های دیگری هم داشته باشد که در اینجا به آن نمیپردازیم.
و وقتی میخواهیم یک فایل جاوااسکریپت را به قالب مورد نظر اضافه کنیم از کدی مشابه کد زیر بهره میگیریم :
|
۱
|
<script type=‘text/javascript’ src=‘path/to/your/script.js’></script>
|
این روش یک روش استاندارد است و مادامی که پای قالب های وردپرس در میان نباشد، استفاده از آن بر اساس استاندارد ها هیچ ایرادی ندارد. ولی وقتی پای وردپرس به میان می آید، برای اضافه کردن فایل های استایل و جاوااسکریپت استانداردهایی وضع شده که بهتر است آنها را رعایت کنید. این مسئله به این مفهوم نیست که اگر در قالب های وردپرس هم برای اضافه کردن فایل های مربوطه از روش فوق استفاده کنید، قالب شما کار نخواهد کرد بلکه به این مفهوم است که این روش در طراحی قالب های وردپرس استاندارد نیست و ممکن است بعدا در استفاده از برخی ویژگی های وردپرس مثل استفاده از child theme ها و … شما را دچار مشکل کند. بنابراین در این شرایط توصیه میشود که حتما از شیوه ی استانداردی که برای این کار در نظر گرفته شده استفاده کنید.
پیوست صحیح فایل های استایل و جاوااسکریپت در وردپرس
در وردپرس برای پیوست استایل ها و جاوااسکریپت دو تابع با نام های wp_enqueue_style و wp_enqueue_script در اختیار ما قرار گرفته که کارشان پبوست صحیح فایلهای مربوطه در قالب و همچنین تعیین ورژن، نوبت افزوده شدن و … آنها در قالب است. اگر در رابطه با نحوه ی استفاده از این دو تابع سری به راهنمای توسعه دهندگان وردپرس بزنید، ممکن است در ابتدا از دیدن توضیحات و نحوه ی استفاده این دو تابع کمی گیج شوید ولی واقعیت این است که استفاده از این دو تابع بسیار آسان بوده و اصلا شما را دچار دردسر نخواهد کرد.
تابع wp_enqueue_style
اجازه بدهید ابتدا نگاهی به توضیحات عمومی این تابع داشته باشیم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
|
$handle
نام استایل را مشخص میکند و لازم است که حتما منحصر به فرد باشد
$src
محل قرار گیری استایل را مشخص میکند. این مسیر میتواند کامل بوده یا بر اساس روت محل نصب وردپرس آدرس دهی شود
$deps
مشخص میکند که فایل استایل فعلی به کدام استایل ها وابسته است
$ver
ورژن فایل استایل را مشخص میکند.
$media
نوع مدیایی که این استایل بر روی آن تاثیر دارد را تعیین میکند. بنابراین میتوانید از مقادیری مثل :
all, print, screen, max–width:640
و موارد مشابه استفاده کنید.
پر کردن هیچ یک از موارد فوق بجز نام استایل الزامی نیست
|
پس اگر بخواهیم در حالتی ساده و در عین حال قابل درک، یک فایل استایل مثل style.css را که در فولدر اصلی قالب قرار گرفته، در قالب فراخوانی کنیم به شکل زیر عمل میکنیم :
|
۱
|
wp_enqueue_style( ‘mainstyle’, get_template_directory_uri().‘/style.css’, array(), ‘1.0’ );
|
در کد بالا اولین مقدار استفاده شده mainstyle است که نام استایل ماست. (و میتواند هر چیز منحصر به فرد و معتبر دیگری باشد. الزامی نیست که شما نام استایل خود را mainstyle بگذارید)
در ادامه برای مقدار بعدی از get_template_directory_uri().’/style.css’ استفاده کرده ایم که فایل style.css را از فولدر اصلی قالبمان قراخوانی میکند. طبعا اگر فایل استایل در زیر فولدر دیگری در فولدر قالب قرار گرفته بود و یا نام دیگری داشت، به سادگی با اضافه کردن مسیر فولدر و نام استایل بجای عبارت /style.css میتوانستیم کد را به دلخواه خود تغییر داده و به نتیجه ی دلخواه دست پیدا کنیم.
سپس با استفاده از array() اعلام کرده ایم که این فایل، به فایل دیگری وابستگی ندارد.
در آخر هم ورژن فایل را مشخص کرده ایم.
تابع wp_enqueue_script
در رابطه با ورودی های این تابع در سایت رسمی وردپرس (کم و بیش) توضیحات زیر ارائه شده :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
|
$handle
نام اسکریپت را مشخص میکند و باید کاملا منحصر به فرد باشد
$src
مسیر اسکریپت را مشخص میکند. این مسیر میتواند کامل بوده یا به صورت نسبی بر اساس محل نصب وردپرس وارد شود
$deps
نشان میدهد که این اسکریپت به چچه اسکریپت های دیگری وابستگی دارد. مقدار باید به صورت آرایه ارائه شود
$ver
ورژن فایل جاوااسکریپت را مشخص میکند
$in_footer
تعیین میکند که آیا این اسکریپت باید در تگ سربرگ قرار بگیرد و یا در فوتر قالب. به صورت پیشفرض محل قرار گیری یک اسکریپت در سربرگ است.
مجددا تمامی مقادیر فوق بجز نام اسکریپت اختیاری هستند.
|
با توضیحات فوق و توضیحاتی که برای تابع wp_enqueue_style به شما ارائه کردیم، حتما حالا میتوانید کارکرد کد زیر را که برای فراخوانی یک فایل جاوااسکریپت به کار رفته، به خوبی درک کنید :
|
۱
|
wp_enqueue_script(‘jsname’, get_template_directory_uri().‘/scripts.js’, array(), ‘1.3.2’, false );
|
کد ها را در کجا قرار دهیم؟ آیا استفاده از کد های فوق کافی است؟
این کد ها را میتوانید در فایل functions.php قالبتان قرار دهید. و در جواب سوال دوم. نه استفاده از کدهای فوق کافی نیست. کد هایی که برای افزودن استایل و اسکریپت به قالبتان اضافه میکنید را باید درون یک تابع قرار داده و سپس با استفاده از تابع add_action به وردپرس اعلام کنید که میخواهید تابع مورد نظر در چه زمانی اجرا شود. به مثال زیر توجه کنید :
|
۱
۲
۳
۴
۵
|
function mrcodeirwp_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’, ‘mrcodeirwp_scripts’ );
|
یک ترفند …
شاید این مسئله خیلی واضح باشد که شما در اینجا میتوانید برای اضافه شدن هر استایل یا اسکریپت به قالب شرطی تعیین کنید. مثلا شاید برای قالبتان پنل مدیریت طراحی کرده باشید. در چنین حالتی میتوانید بر اساس انتخاب کاربر و بر اساس رنگی که توسط وی در پنل مدیریت تنظیم شده، استایل ویژه ای را به قالب اضافه کنید. یا مثلا اگر از بوت استرپ در قالب استفاده کرده اید، میتوانید چک کنید که اگر وضعیت نمایش قالب به حالت rtl است، نسخه ی rtl استایل های بوت استرپ شما در قالب بارگذاری شود و …
فایل 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 را قرار داده ایم، این کار باعث میشود که وردپرس به صورت اتوماتیک، ورژن فعلی خودش را به انتهای آدرس اسکریپت های مربوطه اضافه کند.
سورس شبکه اجتماعی اندروید
سورس کتاب اندروید
سورس فروشگاه اینترنتی اندروید Codecanyon Nulled
MaterialX – Android Material Design UI Components
دیدگاه ها