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

وردپرس امروزه محبوب ترین سیستم مدیریت محتوا در دنیا شناخته شده است و میلیون ها نفر از این سیستم استفاده می کنند. از این رو برای داشتن یک قالب خوب نیاز به رعایت برخی نکات داریم. امروز هم روش صحیح فراخوانی css در قالب وردپرس را خواهیم گفت.

روش غلط فراخوانی css در قالب وردپرس

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

و یا به شکل زیر در functions.php فراخوان می کنیم:

در روش های بالا ممکن است وردپرس نتواند تشخیص بدهد که فایل در صفحه فراخوان شده یا خیر. این می تونه یک مشکل بزرگ باشه

اگر افزونه دیگری از همین فایل css استفاده کند، وردپرس نمی تواند چک کند که آیا این فایل در صفحه فراخوان شده یا خیر. در این صورت با تکرار بودن کدها مواجه خواهید شد

خوشبختانه وردپرس یک راه حل آسان برای این مشکل داره

روش صحیح فراخوانی css در قالب وردپرس

وردپرس دارای توابع مفیدی برای فراخوانی css در قالب دارد که در ادامه معرفی خواهیم کرد.

wp_register_style()

اگر می خواهید فایل های خود را فراخوانی کنید ابتدا باید با استفاده از تابع wp_register_style() آن را ثبت کنید:

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

کد زیر یک نمونه برای تابع wp_register_style() است:

البته استفاده از تابع بالا اختیاری است. اگر فکر می کنید که استایل شما توسط هر افزونه دیگری اجرا می شود و با استایل های دیگری تداخل پیدا نمی کند می توانید مستقیم فایل را فراخوان کنید و دیگر نیازی به تابع بالا نخواهید داشت

فراخوان css در قالب وردپرس

بعد از ثبت استایل نوبت به فراخوانی استایل خواهد شد. برای این کار از تابع wp_enqueue_style() استفاده می کنیم.

پارامتر های این تابع هم مانند تابع  wp_register_style() عمل می کنند و  نیازی به توضیح مجدد نیست.

کد زیر یک نمونه فراخوان css در قالب وردپرس است:

 فراخوانی فایل css و جاوا اسکریپت در هر جای سایت

تا الان 2 تابع معرفی کردیم که این تابع ها فایل ها را در داخل قالب سایت فراخوان می کنند اما شاید بخواهیم یک سری فایل هم برای پیشخوان و یا هر جای دیگری فراخوان کنیم. برای این کار از action ها اسافاده می کنیم:

wp_enqueue_scripts(): برای فراخوانی استایل ها و اسکریپت ها در front-end

admin_enqueue_scripts(): برای فراخوانی استایل ها و اسکریپت ها در پنل مدیریت

login_enqueue_scripts(): برای فراخوانی استایل ها و اسکریپت ها در صفحه ورود

کد زیر شامل 3 مثال برای توابع بالا است:

 معرفی توابع اضافه

در این بخش از آموزش توابع مفیدی درباره css خواهی گفت که امکان استایل درون خطی، افزودن دیتا در فایل های استایل، ثبت استایل ها و بررسی وضعیت فایل های فراخوان شده را خواهد داد.

افزودن استایل درون خطی: wp_add_inline_style()

اگر قالب شما دارای تنظیماتی برای استایل دلخواه دارد می توانید از این تایع استفاده کنید.

 بررسی وضعیت فراخوان css

در بعضی مواقع ممکن است اطلاعاتی درباره فایل فراخوان شده بخواهیم مثلا فایل ثبت شده چاپ شده فراخوان شده و …. در این حالت از تابع wp_style_is() استفاده می کنیم:

 افزودن متا دیتا به استایل: wp_style_add_data()

در اینجا یک فانکشن عالی به نام wp_style_add_data() داریم. این فانکشن به شما اجازه می دهد که متا دیتا به استایل خود اضافه کنید مثلا شامل دستورات شرطی، پشتیبانی از راست چین و ….

تابع بالا خیلی کاربردی و مفید است

مقاله امروز مدرسه وردپرس در خصوص روش صحیح فراخوانی css در قالب وردپرس به پایان رسید. با این مقاله یاد گرفتیم که چگونه فایل های خود را فراخوان کنیم

موفق باشید

29 دیدگاه برای “روش صحیح فراخوانی css در قالب وردپرس

  • امین
    - ۱۹ تیر , ۱۳۹۳

    با سلام
    من از پوسته mercury استفاده میکنم. این پوسته یه کادر ارسال مطلب بالای صفحه اول قرار میده که کاربر از همونجا میتونه مطلب ارسال کنه. حالا من میخوام اگه میشه وقتی میریم توی ۱ دسته هم اون کادر نمایش داده بشه و مطلب مورد نظر به صورت اتوماتیک موقع ارسال تو همون دسته ارسال بشه. برای این چکار باید بکنم؟
    ممنون

    • الناز بیک زاده
      - ۲۵ تیر , ۱۳۹۳

      سلام دوست من. برای اینکار باید کد مربوط به کادر ارسال رو از صفحه index پیدا کنید و داخل فایل category قرار دهید. برای این هم که به طور اتوماتیک به آن دسته ارسال بشه باید خودتون کد بنویسید

  • حمید
    - ۲۲ تیر , ۱۳۹۳

    جالب و آموزنده بود

  • Alireza
    - ۲۶ تیر , ۱۳۹۳

    مقاله خوبی بود ولی افزودن مستقیم فایل های CSS و JS در قالب سرعت بارگذاری و انعطاف پذیری بهتری داره تا اینکه از کد های PHP استفاده بشه .

    البته مزیت این روش اینکه لینک های css و js در قالب مخفی میشن و این یک امتیاز مثبت برای جلوگیری از ریپ شدن قالبه .

  • جواد
    - ۲۷ تیر , ۱۳۹۳

    سلام از این هم میشه استفاده کرد.
    bloginfo(‘styleseet_url’)

  • بهنام
    - ۲۸ تیر , ۱۳۹۳

    سلام.
    بابت این مطلب آموزنده ممنون.
    یک سوال:
    در قسمتی که توابعی مثل admin_enqueue_scripts(): را معرفی کردید،یعنی با فراخوانی فایل css در پپنل مدیریت،میتوان ویژگی های ظاهری پنل مدیریت را بدون دستکاری فایل های css پوشه admin تغییر داد ؟

    • الناز بیک زاده
      - ۱۲ مرداد , ۱۳۹۳

      سلام. بله دوست عزیز می تونید تغییر بدهید

  • omid ahmadi
    - ۴ مرداد , ۱۳۹۳

    آموزنده بود

  • سینا
    - ۱۶ آبان , ۱۳۹۳

    سلام
    کدهایی رو از سورس یک سایت در فوتر سایت خودم که وردپرس هست کپی کردم ولی فقط محتواش کپی شده و لی قالبش که همون css هست پی نشده
    حالا سوالم اینه کد css اش رو چطور بنویسم برنامه firebug رو هم نصب کردم ولی کدهای css مربوط به اون تکه که من می خام رو تشخیص ندادم
    ۲- کدهای html رو در فوتر گذاشتم css رو هم در style.css قرار بدم ولی دقیقا” کجاش؟

    • الناز بیک زاده
      - ۱۷ آبان , ۱۳۹۳

      سلام سینا جان. کد css رو فرقی نداره که کجای style.css قرار بدی. انتهای فایل قرار بده

  • مهدی
    - ۲۷ اسفند , ۱۳۹۳

    سلام
    من از قالب جریده استفاده میکنم. با وجود اینکه این قالب واکنش گراست ولی وقتی با تبلت یا موبایل وارد سایت می شویم با تاچ کردن دو انگشت مطالب زوم نمی شه. مشکل از چیست ممنونم.

    • الناز بیک زاده
      - ۲۷ اسفند , ۱۳۹۳

      سلام مهدی جان. تا اونجایی که می می دونم چون تم به صورت رسپانسیو نوشته شده دیگه این امکان درش غیرفعاله. من که سایتی ندیدم رسپانسیو باشه و بشه دوباره زوم کرد

  • robert
    - ۱۱ اردیبهشت , ۱۳۹۴

    الان یک مشکلی که وجود داره فراخوانی فایل style.css در فانکشن هست اونم اینکه تمام فایلهای استایل از پوشه های جانبی فراخوانی میشن که در واقع استایل ها در روت قالب قرار ندارند در صورتی که وردپرس برای اجرا نیاز به وجود فایل استایل بصورت مستقیم در روت قالب داره ه با این روشهای بالا ظاهرا انگار امکان فراخوانی اون فایل وجود نداره!
    برای این چه راهکاری دارید؟

    • الناز
      - ۱۴ اردیبهشت , ۱۳۹۴

      سلام دوست عزیز. طبق مقاله wp_enqueue در وردپرس برای فراخوانی style.css از این کد استفاده کن


      wp_enqueue_style( 'main-style', get_stylesheet_uri() );

      موفق باشی

  • علی
    - ۱۸ اردیبهشت , ۱۳۹۴

    میشه در مورد اینکه فراخوانی سی اس اس کجا انجام بشه هم بگین برای سرعت لود سایت منظورمه

    • الناز
      - ۲۸ اردیبهشت , ۱۳۹۴

      دوست عزیز استاندارد فراخوانی استایل به همین روشی که در این مقاله گفتم هستش و اینکه کد رو داخل فایل فانکشن قرار بدید

  • erfan
    - ۳۰ شهریور , ۱۳۹۴

    سلام خسته نباشید
    کد ها زیاد بودن و یه مقدار گیج کننده
    بنده کد های css و js رو در فانکشن فراخوانی کردم ولی در google speed میگه فایلهای css و js ابتدای مطالب لود میشه
    میشه کدی نوشت که لود شدن اینهارو به تاخیر بندازه؟
    متاسفانه چون فایلها در فانکشن فراخوانی میشن نمیشه کش کرد و هربار هم لود میشن!!!
    مثلا این کد js چنتا عدد آخرشه که اصلا نفهمیدم برای چیه
    wp_enqueue_script(‘mag-popup’, get_template_directory_uri().’/js/jquery.magnific-popup.min.js’, array(‘jquery’), ‘3.2’, true);

    ممنون میشم جواب بدین

    • سیروس
      - ۳ مهر , ۱۳۹۴

      سلام دوست عزیز. در مقاله توضیح داده شده اما مجدد میگم خدمتتون.
      عددی که گذاشته ۳.۲ در واقع ورژن فایل هستش. و همچنین مقدار TRUE که گذاشته شده مشخص کننده اینه که فایل ها در فوتر فراخوان بشوند یا خیر. که اگر مقدار TRUE بزارید یعنی فایل ها در فوتر فراخوان شوند

  • تبلت ارزان
    - ۱۰ مهر , ۱۳۹۴

    ممنون.
    ارورهای مرسوم وردپرس را هم توضیح بدید عالی میشه
    مرسی

  • ایران دانلود
    - ۲۸ مهر , ۱۳۹۴

    ممنون خیلی عالی بود

  • مهدی
    - ۱۶ فروردین , ۱۳۹۵

    با سلام
    ممنون میشم راهنمایی کنید که چطور کد جاوااسکریپت تبلیغات کلیکی رو توی قالب سایت قرار بدهیم
    مثل:
    طوری که در انتها تمام مطالب سایت نشون داده بشه!
    … ببخشید یه کم تازه کارم 🙂

    با تشکر

    • الناز
      - ۲۰ فروردین , ۱۳۹۵

      سلام. من درست متوجه منظور شما نشدم. کد مربوط به تبلیغات رو داخل فایل index.php و یا single.php بعد از لوپ قرار بدید

  • حسینی
    - ۲۸ اردیبهشت , ۱۳۹۵

    سلام
    من یه منو به قالبم اضافه کردم و میخوام ریسپانسیوش کنم…
    همه چیز خوبه بغیر از اینکه تو سایز موبایل تاگل نشون داده میشه ولی کار نمیکنه!!
    گفتم شاید مشکل از فراخوانی js باشه.. لطفا راهنمایی کنید.
    کدی که تو فانکشن چایلد تمم آوردم اینه:
    require_once(‘wp_bootstrap_navwalker.php’);
    wp_enqueue_script(“bootstrap.min”, get_stylesheet_directory_uri().”/bootstrap.min.js”, false, “1.0”);
    هرکاری میکنم درست نمیشه!!۳روزه دارم روش کار میکنم به جایی نرسیدم!!

    • الناز
      - ۲ خرداد , ۱۳۹۵

      سلام دوست عزیز. کدتونو واسم بفرستید

  • ناصر
    - ۲۱ مرداد , ۱۳۹۵

    سلام مهندس

    wp-styl.css
    family:’Droid Arabic Naskh
    margin-left: 20px;font-weight: bold;
    با firebug فونت بولد میشه ولی تو سایت خیر مشکل چیه

    • سیروس
      - ۲۱ مرداد , ۱۳۹۵

      سلام دوست عزیز. به خاطر وجود کد font-weight: bold هستش

  • رضا اکبری
    - ۱۳ آبان , ۱۳۹۵

    سلام
    ببیخشید یه سوال داشتم
    برای ساخت فایل rtl افزونه باید چیکار کرد؟
    یدونه ساختم ولی کار نمیکنه اصلا

    • الناز
      - ۲۸ آبان , ۱۳۹۵

      در قسمت روت افزونه فایل rtl.css بسازید. اگر باز هم نشد فایل رو فراخوان کنید

  • تجهیزات آشپزخانه های صنعتی
    - ۱۹ فروردین , ۱۳۹۶

    مرسی عالی بود.

دیدگاه خود را بیان کنید