وردپرس امروزه محبوب ترین سیستم مدیریت محتوا در دنیا شناخته شده است و میلیون ها نفر از این سیستم استفاده می کنند. از این رو برای داشتن یک سایت خوب نیاز به رعایت برخی نکات داریم. امروز در آقای وردپرس فراخوانی اصولی css در وردپرس را به شما عزیزان خواهم گفت. باما همراه باشید:
روش غلط فراخوانی css در قالب وردپرس
در هر سالی که می گذرد وردپرس پیشرفت می کند و کدها و توابع خود را بهینه تر می کند.اما متاسفانه اکثر طراحان با این کدها آشنا نیستند و هنوز هم از همان توابع قدیمی استفاده می کنند که یکی از آنها معرفی فایل های css و جاوا اسکریپت در header.php است:
|
<link rel=“stylesheet” href=“<?php echo get_stylesheet_uri(); ?> “ >
|
و یا به شکل زیر در functions.php فراخوان می کنیم:
|
<? php
function add_stylesheet_to_head() {
echo “<link href=’http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>”;
}
add_action( ‘wp_head’, ‘add_stylesheet_to_head’ );
?>
|
در روش های بالا ممکن است وردپرس نتواند تشخیص بدهد که فایل در صفحه فراخوان شده یا خیر که این میتواند یک مشکل یزرگ و بد برای سایت های وردپرسی باشد.اگر یک افزونه دیگر هم بخواهد از این فایل استفاده کند ممکن است نتواند فایل را شناسایی کند.
روش صحیح فراخوانی css در قالب وردپرس
اگر می خواهید فایل های خود را فراخوانی کنید ابتدا باید با استفاده از تابع wp_enqueue_style() آن را ثبت کنید:
|
<? php
wp_register_style( $handle, $src, $deps, $ver, $media );
?>
|
- $handle: ( رشته ای – لازم ): این مقدار شامل یک نام منحصر به فرد برای استایل شما می باشد. از این مقدار برای فراخوانی در توابع دیگر استفاده می شود.
- $src: ( رشته ای – لازم ): آدرس فایل خود را اینجا قرار می دهید.
- $deps: ( آرایه – اختیاری ) : این مقدار شامل نام منحصر به فرد ( $handle ) سایر فایل های وابسته می باشد. اگر فایل شما به درستی کار نکند در صورتی که فایل های استایل دیگر وجود نداشته باشند می توانید از این بخش استفاده کنید.
- $ver: ( رشته ای یا منطقی – اختیاری ): این مقدار شامل شماره نسخه فایل می باشد. شما می توانید شماره نسخه قالب خود را اینجا قرار دهید و اگر نمی خواهید شماره نسخه ای داشه باشد مقدار null را قرار دهید. مقدار پیشفرض این متغیر false است که نسخه وردپرس را اینجا قرار می دهد.
- $media: ( رشته ای – اختیاری ): این مقدار هم شامل نوع استایل شما می شود. مانند: screen , all و….. اگر نمی خواهید از این استفاده کنید آن را ننویسید. مقدار پیشفرض : all
در زیر یک نمونه برای تابع wp_register_style() است:
|
<? php
// wp_register_style() مثال
wp_register_style(
‘my-bootstrap-extension’, // نام منحصر به فرد
get_template_directory_uri() . ‘/css/my-bootstrap-extension.css’, // آدرس فایل
array( ‘bootstrap-main’ ), // نام فایل یا فایل های وابسته
‘1.2’, // شماره نسخه
‘screen’, // نوع استایل
);
?>
|
استفاده از تابع بالا اختیاری است. اگر فکر می کنید که استایل شما توسط هر افزونه دیگری اجرا می شود و با استایل های دیگری تداخل پیدا نمی کند می توانید مستقیم فایل را فراخوان کنید و دیگر نیازی به تابع بالا نخواهید داشت.
فراخوان css در قالب وردپرس
بعد از ثبت استایل نوبت به فراخوانی استایل خواهد شد. برای این کار از تابع wp_enqueue_style() استفاده می کنیم.
|
<?php
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
?>
|
پارامتر های این تابع هم مانند تابع wp_register_style() عمل می کنند و نیازی به توضیح مجدد نیست.
کد زیر یک نمونه فراخوان css در قالب وردپرس است:
|
<?php
// اگر استایل را از قبل ثبت کرده ایم اینطوری فراخوان می کنیم
wp_enqueue_style( ‘my-bootstrap-extension’ );
// اگر فایل از قبل ثبت نشده اینطوری فراخوان می کنیم
wp_enqueue_style(
‘my-bootstrap-extension’, // نام منحصر به فرد فایل
get_template_directory_uri() . ‘/css/my-bootstrap-extension.css’, // آدرس فایل
array( ‘bootstrap-main’ ), // فایل وابسته
null, // شماره نسخه
// …بدون نوع استایل
);
?>
|
امیدوارم با استفاده از این توابع گامی به سوی ساخت سایت های بهینه برداریم.
موفق باشید.
