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