/rating_on.png "1 Star")
/rating_half-rtl.png "4 Stars")
/rating_off.png "5 Stars")
وردپرس امروزه محبوب ترین سیستم مدیریت محتوا در دنیا شناخته شده است و میلیون ها نفر از این سیستم استفاده می کنند. از این رو برای داشتن یک قالب خوب نیاز به رعایت برخی نکات داریم. امروز هم روش صحیح فراخوانی css در قالب وردپرس را خواهیم گفت.
به طور معمول به چه شکل یک فایل استایل یا یک فایل جاوا اسکریپت را به یک قالب ساده و استاندارد HTML اضافه میکنیم. برای قرار دادن یک فایل استایل در صفحه ی مربوطه از کد زیر استفاده میکنیم :
|
1 |
<link rel="stylesheet" type="text/css" href="path/to/your/style.css"> |
و وقتی میخواهیم یک فایل جاوااسکریپت را به قالب مورد نظر اضافه کنیم از کدی مشابه کد زیر بهره میگیریم :
|
1 |
<script type='text/javascript' src='path/to/your/script.js'></script> |
این روش یک روش استاندارد است و مادامی که پای قالب های وردپرس در میان نباشد، استفاده از آن بر اساس استاندارد ها هیچ ایرادی ندارد. ولی وقتی پای وردپرس به میان می آید، برای اضافه کردن فایل های استایل و جاوااسکریپت استانداردهایی وضع شده که بهتر است آنها را رعایت کنید. این مسئله به این مفهوم نیست که اگر در قالب های وردپرس هم برای اضافه کردن فایل های مربوطه از روش فوق استفاده کنید، قالب شما کار نخواهد کرد بلکه به این مفهوم است که این روش در طراحی قالب های وردپرس استاندارد نیست و ممکن است بعدا در استفاده از برخی ویژگی های وردپرس مثل استفاده از child theme ها و … شما را دچار مشکل کند. بنابراین در این شرایط توصیه میشود که حتما از شیوه ی استانداردی که برای این کار در نظر گرفته شده استفاده کنید.
پیوست صحیح فایل های استایل و جاوااسکریپت در وردپرس :
در وردپرس برای پیوست استایل ها و جاوااسکریپت دو تابع با نام های wp_enqueue_style و wp_enqueue_script در اختیار ما قرار گرفته که کارشان پبوست صحیح فایلهای مربوطه در قالب و همچنین تعیین ورژن، نوبت افزوده شدن و … آنها در قالب است. اگر در رابطه با نحوه ی استفاده از این دو تابع سری به راهنمای توسعه دهندگان وردپرس بزنید، ممکن است در ابتدا از دیدن توضیحات و نحوه ی استفاده این دو تابع کمی گیج شوید ولی واقعیت این است که استفاده از این دو تابع بسیار آسان بوده و اصلا شما را دچار دردسر نخواهد کرد.
تابع wp_enqueue_style :
اجازه بدهید ابتدا نگاهی به توضیحات عمومی این تابع داشته باشیم :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$handle نام استایل را مشخص میکند و لازم است که حتما منحصر به فرد باشد $src محل قرار گیری استایل را مشخص میکند. این مسیر میتواند کامل بوده یا بر اساس روت محل نصب وردپرس آدرس دهی شود $deps مشخص میکند که فایل استایل فعلی به کدام استایل ها وابسته است $ver ورژن فایل استایل را مشخص میکند. $media نوع مدیایی که این استایل بر روی آن تاثیر دارد را تعیین میکند. بنابراین میتوانید از مقادیری مثل : all, print, screen, max-width:640 و موارد مشابه استفاده کنید. پر کردن هیچ یک از موارد فوق بجز نام استایل الزامی نیست |
یک فایل استایل مثل style.css را که در فولدر اصلی قالب قرار گرفته، در قالب فراخوانی کنیم به شکل زیر عمل میکنیم :
|
1 |
wp_enqueue_style( 'mainstyle', get_template_directory_uri().'/style.css', array(), '1.0' ); |
تابع wp_enqueue_script :
در رابطه با ورودی های این تابع در سایت رسمی وردپرس (کم و بیش) توضیحات زیر ارائه شده :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$handle نام اسکریپت را مشخص میکند و باید کاملا منحصر به فرد باشد $src مسیر اسکریپت را مشخص میکند. این مسیر میتواند کامل بوده یا به صورت نسبی بر اساس محل نصب وردپرس وارد شود $deps نشان میدهد که این اسکریپت به چچه اسکریپت های دیگری وابستگی دارد. مقدار باید به صورت آرایه ارائه شود $ver ورژن فایل جاوااسکریپت را مشخص میکند $in_footer تعیین میکند که آیا این اسکریپت باید در تگ سربرگ قرار بگیرد و یا در فوتر قالب. به صورت پیشفرض محل قرار گیری یک اسکریپت در سربرگ است. مجددا تمامی مقادیر فوق بجز نام اسکریپت اختیاری هستند. |
با توضیحات فوق و توضیحاتی که برای تابع wp_enqueue_style به شما ارائه کردیم، حتما حالا میتوانید کارکرد کد زیر را که برای فراخوانی یک فایل جاوااسکریپت به کار رفته، به خوبی درک کنید :
|
1 |
wp_enqueue_script('jsname', get_template_directory_uri().'/scripts.js', array(), '1.3.2', false ); |
این کد ها را میتوانید در فایل functions.php قالبتان قرار دهید.و استفاده از کدهای فوق کافی نیست. کد هایی که برای افزودن استایل و اسکریپت به قالبتان اضافه میکنید را باید درون یک تابع قرار داده و سپس با استفاده از تابع add_action به وردپرس اعلام کنید که میخواهید تابع مورد نظر در چه زمانی اجرا شود. به مثال زیر توجه کنید :
|
1 2 3 4 5 |
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.css را چکار کنیم؟
این فایل، گونه ای کاملا بی آزار از فایل های CSS است که لازم نیست کاری با آن داشته باشید! اما جداً، از شوخی که بگذریم، وقتی قالبی را فارسی سازی میکنید و برای آن استایل rtl جداگانه ای را در فایل rtl.css قرار میدهید، لازم نیست که این استایل را به روش های ذکر شده در بالا به قالب اضافه کنید. چرا که وردپرس بر اساس جهت زبان انتخابی، خودش به صورت اتوماتیک در صورت نیاز فایل rtl.css را صدا کرده و به قالب اضافه میکند. پس نگران این فایل نباشید.
و جی کوئری چطور؟
وقتی در قالبی به جی کوئری نیاز داریم و میخواهیم محل فراخوانی جی کوئری را نیز تحت کنترل داشته باشیم تا اطمینان حاصل کنیم که تمامی اسکریپت هایی که به جی کوئری نیاز دارند، پس از بارگذاری جی کوئری، لود خواهند شد، جی کوئری را به شکل زیر در قالبمان فراخوانی میکنیم :
|
1 |
wp_enqueue_script('jquery'); |
همانطور که مشاهده میکنید فقط به نام جی کوئری اشاره کرده ایم. چرا که وردپرس خودش این فایل را در اختیار دارد و میداند که آن را از کجا بارگذاری کند. در اینجا باید خیلی حواستان باشد که به طور اتفاقی نسخه ای از جی کوئری را به صورت جداگانه بارگذاری نکنید و تنها به استفاده از کد بالا اکتفا کنید. در غیر این صورت با لود کردن چند نسخه از جی کوئری، در قالب شما تداخل ایجاد خواهد شد و شما قادر به استفاده ی صحیح ای جی کوئری نخواهید بود.
خوب، حالا اگر بخواهیم تعدادی اسکریپت که به جی کوئری وابسته هستند را حتما پس از بارگذاری کامل جی کوئری، لود کنیم میتوانیم به شکل زیر عمل کنیم :
|
1 2 3 4 |
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 را قرار داده ایم، این کار باعث میشود که وردپرس به صورت اتوماتیک، ورژن فعلی خودش را به انتهای آدرس اسکریپت های مربوطه اضافه کند.
یک اشتباه :
وردپرس یک تابع wp_head داره که به شما اجازه میده هر چیزی رو در بخش head سایت خودتون لود کنید. کسانی که خیلی آگاهی ندارن ، به راحتی اسکریپت خودشون رو با استفاده از کدی مثل کد زیر ، اضافه میکنند.
|
1 2 3 4 5 6 |
<?php add_action('wp_head', 'wpb_bad_script'); function wpb_bad_script() { echo 'jQuery'; } ?> |
اگرچه کد بالا ، خیلی راحته ، اما راه درستی برای اضافه کردن اسکریپت به وردپرس نیست. برای مثال ، اگر شما jQuery رو به صورت دستی لود کنید و پلاگین دیگه‌ای هم داشته باشید که از لود jQuery به درستی استفاده میکنه ، اونوقت jQuery دوبار لود میشه. حتی ممکنه این دو ، نسخه‌های متفاوتی داشته باشند و ایجاد تداخل کنند.
خب ، حالا روش درست رو با هم ببینیم.
علت سیستم نوبت‌دهی (صف) اسکریپتها در وردپرس؟
وردپرس جامعه‌ای قوی از توسعه‌دهندگان رو داره و هزاران نفر در دنیا مشغول طراحی قالب و نوشتن پلاگینهای وردپرس هستند. وردپرس ، برای اطمینان از اینکه همه چیز به درستی کار میکنه و هیچ مشکلی به وجود نمیاد ، یک تابع نوبت‌دهی اسکریپت داره. این تابع یک روش سیستماتیک برای بارگذاری اسکریپتها و استایلها داره. با استفاده از تابع wp_enqueue_script ، به وردپرس میگیم که چه موقع و کجا یک اسکریپت لود بشه و این بارگذاری به چه چیزهایی بستگی داره. با اینکار همه میتونن از کتابخانه‌های جاوا اسکریپت که به همراه وردپرس وجود داره، استفاده کنند ، و دیگر نیازی به بارگذاری مجدد همون اسکریپتها نیست. علاوه بر این، سرعت لود صفحات افزایش پیدا میکنه و از تداخل با قالبها و تمهای دیگه جلوگیری میشه.
نوبت‌دهی صحیح اسکریپتهای وردپرس
بارگذاری صحیح اسکریپتها در وردپرس بسیار ساده است. در ادامه مثالی آوردم که میتونید در functions.php قالب یا فایل پلاگین خودتون کپی کنید تا اسکریپتها به درستی بارگذاری شوند.
|
1 2 3 4 5 6 7 8 9 |
<?php function wpb_adding_scripts() { wp_register_script('my_BestIT_script', plugins_url('BestIT_script.js', __FILE__), array('jquery'),'1.1', true); wp_enqueue_script('my_BestIT_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); ?> |
توضیح:
خب در اینجا، اول از همه با استفاده از تابع wp_register_script ، اسکریپت خودمون رو ثبت کردیم. این تابع 5 پارامتر میگیره:
• $handle – این پارامتر نام منحصر به فرد اسکریپت شماست. که ما در اینجا اسم اون رو my_BestIT_script گذاشتیم.
• $src – این پارامتر محل اسکریپت رو مشخص میکنه ، که ما در اینجا از تابع plugins_url برای برگرداندن URL صحیح فولدر پلاگینها استفاده کردیم. وقتی که وردپرس اون رو پیدا کرد ، به دنبال نام فایل BestIT_script.js در اون فولدر میگرده .
• $deps – وابستگی رو مشخص میکنه. از اونجایی که اسکریپت ما jQuery هست، ما در بخش وابستگیها jQuery رو اضافه کردیم. وردپرس به طور اتوماتیک جی کوئری رو لود میکنه ، البته اگر تا بحال این بارگذاری در سایت انجام نشده باشه.
• $ver – شماره نسخه اسکریپت ما هست ، البته این پارامتر الزامی نیست.
• $in_footer – از اونجایی که ما میخواهیم اسکریپتمون در فوتر بارگذاری باشه ، مقدار رو true قرار دادیم. اگر شما میخواید که اون رو در هدر بارگذاری کنید اون رو به false تغییر بدید.
بعد از اینکه تمام این پارامترهارو در wp_register_script مشخص کردیم کافیه اسکریپت رو با wp_enqueue_script فراخوانی کنیم که نوبت‌دهی انجام بشه.
شاید بپرسید چرا اول باید چند مرحله اضافی برای ثبت اسکریپت انجام بدیم و بعد نوبت‌دهی رو انجام بدیم؟ خب اینکار به بقیه کسانی که از قالب یا پلاگین شما استفاده میکنن اجازه میده که بدون اینکه لازم باشه کدهای اصلی پلاگین شما رو تغییر بدن ، اسکریپت رو از حالت رجیستر در بیارن.
نوبت‌دهی صحیح استایلها وردپرس :
درست مثل اسکریپتها ، میتونید استایل شیت‌ها رو هم نوبت‌دهی کنید. به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 |
<?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_directoty_url استفاده کنید. و اگر از قالب فرزند (child theme) استفاده میکنید از get_stylsheet_directory_url استفاده کنید. مثال زیر رو ببینید:
|
1 2 3 4 5 6 7 8 9 |
<?php function wpb_adding_scripts() { wp_register_script('my_BestIT_script', get_template_directory_uri() . '/js/BestIT_script.js', array('jquery'),'1.1', true); wp_enqueue_script('my_BestIT_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); ?> |
فراخوانی فایل css و جاوا اسکریپت در هر جای سایت :
شاید بخواهیم یک سری فایل هم برای پیشخوان و یا هر جای دیگری فراخوان کنیم. برای این کار از action ها اسافاده می کنیم:
- wp_enqueue_scripts() : برای فراخوانی استایل ها و اسکریپت ها در front-end
- admin_enqueue_scripts() : برای فراخوانی استایل ها و اسکریپت ها در پنل مدیریت
- login_enqueue_scripts() : برای فراخوانی استایل ها و اسکریپت ها در صفحه ورود
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php // فراخوانی css در سایت function mytheme_enqueue_style() { wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); } add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' ); // فراخوانی css در پنل مدیریت function mytheme_enqueue_options_style() { wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); } add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' ); // فراخوانی css در صفحه ورود function mytheme_enqueue_login_style() { wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); } add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' ); ?> |
معرفی توابع اضافه :
در این بخش از آموزش توابع مفیدی درباره css خواهی گفت که امکان استایل درون خطی، افزودن دیتا در فایل های استایل، ثبت استایل ها و بررسی وضعیت فایل های فراخوان شده را خواهد داد.
افزودن استایل درون خطی: wp_add_inline_style()
اگر قالب شما دارای تنظیماتی برای استایل دلخواه دارد می توانید از این تایع استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php function mytheme_custom_styles() { wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' ); // فراخوان فایل $bold_headlines = get_theme_mod( 'headline-font-weight' ); // دریافت مقدار از تنظیمات $custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }'; // اعمال استایل روی کلاس .headline wp_add_inline_style( 'custom-style', $custom_inline_style ); } add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' ); ?> |
افزودن متا دیتا به استایل: wp_style_add_data()
در اینجا یک فانکشن عالی به نام wp_style_add_data() داریم. این فانکشن به شما اجازه می دهد که متا دیتا به استایل خود اضافه کنید مثلا شامل دستورات شرطی، پشتیبانی از راست چین و ….
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php /* * wp_style_add_data( $handle, $key, $value ); * Possible values for $key and $value: * 'conditional' رشته دستورات شرطی برای IE۶ , ۷ و.... * 'rtl' رشته|منطقی برای اعلام استایل راست چین * 'suffix' رشته پسوند اختیاری، استفاده می شود در ترکیب با راست چین. * 'alt' منطقی برای rel="alternate stylesheet". * 'title' رشته برای preferred/alternate استایل های. */ // wp_style_add_data() مثال function mytheme_extra_styles() { wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' ); wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE ۹' ); /* * روش استفاده: * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE ۹' ); */ } add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' ); ?> |
تابع بالا خیلی کاربردی و مفید است.
سلام خسته نباشید
ممنون بابت مطالب خوبتون واقعا عالی هستن … من میخوام از یک افزونه ای در وردپرس استفاده کنم که از جاوااسکریپت استفاده میکنه و چون این افزونه چپ چین هست من میخواستم راستچینش کنم و یکمی هم ظاهرش رو دستکاری کنم. اسم افزونه wpchords هست. این افزونه برای نوشتن شعر و آکورد در موسیقی استفاده میشه. می خوام شبیه سایت درستش کنم که راستچین هست. ولی من از زبان های برنامه نویسی خیلی سر در نمیارم. در اینترنت آموزش های راستچین کردن قالب ها رو براساس فایل rtl.css دیدم و انجام دادم مشکلی نداشتم ولی در مورد جاوا اسکریپت نمیدونم باید چیکار کنم؟ در جایی نوشته بود از دستورات شرطی در سی اس اس استفاده کنید. میتونید راهنماییم کنید چوری میتونم این افزونه رو راستچین کنم؟
پیشاپیش از راهنماییتون تشکر میکنم. خیلی ممنون و تشکر
سلام
وقت بخیر
ببینید دوست عزیز برای تغییرات این مدلی باید مقداری جاوااسکریپت بلد باشید تا بتوانید تغییرات رو اعمال کنید
مگه اینکه نسخه ترجمه شده این افزونه رو پیدا کنید