آموزش صحیح فراخوانی کد های CSS در وب سایت وردپرس،قسمت اول

سلام و عرض ادب و احترام خدمت شما دوستان عزیز
در ادامه سری آموزش های وردپرس در این قسمت همراه شما عزیزان هستیم با آموزشی دیگر در وب سایت های وردپرس.در این آوزش بررسی میکنیم که چگونه میتوان فایل ها و کد های CSS را به صورت کاملا درست و صحیح در وب سایت وردپرسی اعمال کرد؟ دوستان عزیز همانطور که می دانید کد های css به شکل ظاهری وب سایت شما کمک بسیاری می کنند و بدون آنها وب سایت شما بسیار زشت و مشکل دار است و گاربران به آن وارد نمیشوند و یا در صورتی که وارد شوند نیز لذتی نخواهند برد

دوستان عزیز برای فهمیدن روش صحیح فراخوانی این کد ها در وب سایت های وردپرسی خود ابتدا باید روش غلط آن را بدانیم تا بتوانیم از روش صحیح استفاده نمائیم.روش غلط به صورت زیر است اما دلیل این غلط نوشتن این است که متاسفانه اکثر طراحان وب سایت ها با این کدها آشنا نیستند و هنوز هم از همان توابع قدیمی استفاده می کنند که یکی از آنها معرفی فایل های css و جاوا اسکریپت در header.php است:

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?> " >

شکل اشتباه دیگر نیز به صورت زیر میتواند باشد:

<? 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_register_style() آن را ثبت کنید برای درک بهتر این موضوع به مثال زیر توجه کنید:

<? php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>

این کد به صورت زیر تجزیه شده است:

  • $handle: ( رشته ای – لازم ):دوستان عزیز مورد اول کد $handle است .این مقدار شامل یک نام منحصر به فرد برای استایل مورد نظر شما در وب سایت وردپرسی می باشد.توجه کنید که از این مقدار برای فراخوانی در توابع دیگر نیز استفاده می شود.
  • $src: ( رشته ای – لازم ):مورد بعدی $src است شما دوستان عزیز میتوانید آدرس فایل خود را اینجا قرار دهید.
  • $deps: ( آرایه – اختیاری ) :توجه کنید که در این تابع این مقدار شامل نام منحصر به فرد ( $handle ) سایر فایل های وابسته به آن می باشد.دوستان عزیز موردی که بسیار مهم است این است که اگر فایل شما به درستی کار نکند در صورتی که فایل های استایل دیگر وجود نداشته باشند می توانید از این بخش استفاده کنید.
  • $ver: ( رشته ای یا منطقی – اختیاری ):دوستان عزیز این مقدار شامل شماره نسخه فایل شما در وب سایت وردپرسی می باشد. شما می توانید شماره نسخه قالب خود را اینجا قرار دهید و اگر نمی خواهید شماره نسخه ای از قالب وردپرس خود داشته باشد میتوانید مقدار آن را null قرار دهید. مقدار پیشفرض این متغیر false است که نسخه وردپرس را اینجا قرار می دهد.
  • $media: ( رشته ای – اختیاری ):مورد نهایی نیز به صورت مقابل است که این مقدار هم شامل نوع استایل شما در وب سایت وردپرسی می شود. مانند: screen , all و….. اگر نمی خواهید از این مورد در وب سایت خود استفاده کنید آن را ننویسید.

در ادامه این اموزش همراه من باشید دوستان
منبع: بیگ تم مرجع اموزش های هک وردپرس

یک نظر

  1. داوود

    سلام مجدد؛ آقای مهندس اگه اشتباه نکنم فکر کنم پیداش کردم و تو اینجا قرار داره:
    <link type="text/css" rel="stylesheet" href="” />

  2. داوود

    به نام خدا
    سلام استاد
    وقتتون بخیر و ممنونم بخاطر این آموزش خوبتون؛
    استاد در ادامه همین مطلب شما من اومدم و یکی از قالبهای شما رو برای درک بیشتر و یادگیری خودم دانلودش کردم.
    http://bigtheme.ir/wordpress-blog-syrup/
    میخواستم بدونم الان شما فایل style.css رو تو کجا بهش مسیر دادین؟ آخه من هر چی Index و header رو نگاه می کنم اثری ازش نمیبینم و خیلی دوست دارم بدونم این فایل کجا مسیردهی شده که داره اعمال نفوذ میکنه؟؟ چون تغییر نامش که میدیم استایل رو بهم میریزه و آخه جالبه هیچ جایی هم من ندیدم لینکی به این فایل باشه. ممنون میشم اگه راهنماییم کنید. خیلی دوست دارم بدونم کجا داره مسیردهی میشه این style.css. ممنونم ازتون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *