اضافه کردن فایل های css و javascript به قالب وردپرس

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

از آنجایی که استفاده از فایل های css و همین طور جاوا اسکریپت، تاثیر بسیار زیادی در ظاهر و کارکرد سایت شما برای کاربران را دارد، لذا شما باید با روش های استاندارد اضافه کردن فایل های css و javascript به قالب وردپرس آشنایی پیدا کنید.

اضافه کردن فایل های css و javascript به قالب وردپرس

فیلم آموزش استفاده از کد جاوا اسکریپت در وردپرس

چرا نیاز به اضافه کردن فایل های css و javascript به قالب وردپرس دارید؟

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

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

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

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

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

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

این handle دارای یک نام، یک مسیر برای یافتن فایل و وابستگی های مورد نیاز برای این فایل (مانند نیازمندی یک فایل اسکریپت برای اجرا شدن به JQuery ) می باشد. شما با استفاده از یک hook خواهید توانست تا فایل های استایل و جاوا اسکریپت خود را به صفحات سایت خود متصل نمایید.

نحوه enqueue کردن اسکریپت ها و استایل ها در قالب وردپرس

راه مناسب برای اضافه کردن فایل های css و javascript به قالب وردپرس ، enqueue کردن آن ها در داخل فایل functions.php قالب وردپرس شما می باشد.

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

نکته مهم در اضافه کردن فایل های جاوا اسکریپت به قالب وردپرس

در نظر داشته باشید که هسته وردپرس از تعداد زیادی از فایل ها و کتابخانه های رایج جاوا اسکریپت در سطح وب استفاده می کند (مانند کتابخانه JQuery ).

این فایل های javascript به عنوان بخشی از هسته پکیج نرم افزاری وردپرس محسوب می گردند، بنابراین پیش از اضافه کردن فایل های جاوا اسکریپت خود به قالب وردپرس، حتما چک کنید که آیا وردپرس نیز از آن استفاده کرده است یا خیر. در غیر این صورت استفاده از یک اسم مشابه برای دو handle مختلف باعث ایجاد اختلال در کار اسکریپت های سایت شما و در نتیجه کل سایت شما خواهد شد.

اصول استفاده از فایل های استایل و جاوا اسکریپت در قالب وردپرس ، این است که آن ها راف با استفاده از تابع های wp_enqueue_script و wp_enqueue_style در قالب خود enqueue نمایید.

اضافه کردن فایل های استایل به قالب وردپرس ( اتصال css به وردپرس)

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

جدا از لود شدن فایل استایل قالب شما در فایل header.php ، شما می توانید فایل اصلی استایل قالب خود را توسط تابع wp_enqueue_style بر روی صفحات خود لود نمایید. برای این کار شما باید فایل اصلی استایل قالب خود را در فایل functions.php به صف درآورده و همانند زیر آن را فراخوانی نمایید:

wp_enqueue_style( 'style', get_stylesheet_uri() );

با اجرای این کد، هر بار که فایل functions.php اجرا می گردد، هسته وردپرس به دنبال فایلی با نام style در دایرکتوری قالب وردپرس شما گشته تا آن را بارگذاری نماید.

شکل کلی تابع برای enqueue کردن استایل های قالب وردپرس به صورت زیر می باشد:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

این تابع شامل پارامترهای زیر می باشد:

  • پارامتر handle که نامی برای گیره مورد نظر برای فایل استایل شما می باشد.

  • پارامتر src بیانگر مسیر جایی است که فایل استایل شما در آن قرار دارد.

  • پارامتر deps بیانگر وابستگی فایل استایل شما برای اجرا شدن است، این بدین معنی است که فایل استایل شما برای اجرا شدن به این پارامتر نیازمند است. در صورتی که این پارامتر برای فایل استایل شما تنظیم شده باشد، فایل استایل شما لود نخواهد شد، مگر آنکه پیش از آن، فایل استایل وابسته به آن، لود شده باشد.

  • پارامتر ver که برای شماره گذاری ورژن فایل استایل استفاده می شود.

  • پارامتر media که نشان می دهد این فایل استایل برای چه media (مانند all یا screen یا print یا handled ) می باید بارگذاری گردد.

بنابراین اگر فرض کنیم که شما فایل استایلی به نام slider.css دارید که در دایرکتوری ای با نام  css در داخل روت اصلی قالب وردپرس شما قرار دارد، برای متصل کردن این فایل و اضافه کردن فایل css خود به قالب وردپرس، می باید کد زیر را در داخل فایل functions.php قرار دهید:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

اضافه کردن فایل های اسکریپت به قالب وردپرس ( اضافه کردن اسکریپت در وردپرس)

هر فایل اضافه جاوا اسکریپت در داخل قالب وردپرس، نیاز دارند تا به وسیله تابع wp_enqueue_script لود گردد. استفاده از این فایل تضمین می کند که فایل های javascript در قالب وردپرس شما به درست لود شده و عملیات caching بر روی آن ها به درستی انجام گردد.

همچنین استفاده از تابع به شما اجازه می دهد که از conditional tag ها بر روی صفحات خاص سایت خود، استفاده کنید.

نحوه استفاده از تابع wp_enqueue_script ، کاملا مشابه با تابع wp_enqueue_style می باشد. فرم کلی دستور این تابع به صورت زیر می باشد:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

این تابع شامل پارامترهای زیر می باشد:

  • پارامتر handle که نامی برای گیره مورد نظر برای فایل اسکریپت شما می باشد.

  • پارامتر src بیانگر مسیر جایی است که فایل اسکریپت شما در آن قرار دارد.

  • پارامتر deps بیانگر وابستگی فایل اسکریپت شما برای اجرا شدن است، این بدین معنی است که فایل اسکریپت شما برای اجرا شدن به این پارامتر نیازمند است. در صورتی که این پارامتر برای فایل اسکریپت شما تنظیم شده باشد، فایل اسکریپت شما اجرا و لود نخواهد شد، مگر آنکه پیش از آن، فایل اسکریپت وابسته به آن، لود و اجرا شده باشد.

  • پارامتر ver که برای شماره گذاری ورژن فایل اسکریپت استفاده می شود.

  • پارامتر in_footer که نشان می دهد این فایل اسکریپت در تگ هد بارگذاری شود یا در بخش فوتر و قبل از بسته شدن تگ body. در صورت true بودن این مقدار، فایل اسکریپت در فوتر و بعد از لود شدن کلیه مطالب صفحه، لود خواهد شد.

به عنوان مثال اگر بخواهید فایل script.js را که در دایرکتوری js در داخل فولدر قالب وردپرس شما قرار دارد را، لود نمایید، باید از کد زیر استفاده کنید:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

لود کردن اسکریپت پاسخ به نظرات در وردپرس

نظرات در وردپرس ساختار کمی متفاوت دارند، این امر به این خاطر بوده است تا وردپرس بتواند فرم های پیشرفته تری در بخش نظرات پیاده سازی کرده و از threaded comments نیز استفاده کند.

به همین سبب و برای اینکه بخش نظرات سایت وردپرس شما به درستی کار کند، سایت شما نیازمند یک سری از کد های جاوا اسکریپت می باشد. همانند سایر اسکریپت ها که شما می باید به قالب وردپرس خود الصاق نمایید، برای استفاده از نظرات وردپرس نیز فایل اسکریپت نظرات و پاسخ های وردپرس یا همان comment-reply script باید به قالب سایت وردپرسی شما اضافه گردد.

راه درست برای اضافه کردن این فایل اسکریپت استفاده از تگ های شرطی وردپرس یا همان conditional tag ها در وردپرس می باشد تا در صورتی که نیاز به استفاده از این اسکریپت باشد، این فایل به صفحه شما الصاق گردد. در نظر داشته باشید که با استفاده از تگ های شرطی می توانید از لود شدن بی مورد فایل های استایل و اسکریپت خود در قالب وردپرس، جلوگیری نمایید.

برای نمونه پیش از enqueue کردن فایل اسکریپت نظرات وردپرس، شما می توانید توسط تگ شرطی is_singular ، چک کنید که آیا صفحه شما یک single post page هست و همین طور چک کنید که آیا threaded comment توسط کاربر فعال شده است یا خیر. در صورت درست بودن تمام این موارد، شما می توانید فایل اسکریپت نظرات وردپرس را به صفحه خود متصل نمایید:

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}

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

ترکیب کردن تابع های enqueue در قالب وردپرس

بهترین راه برای منظم سازی و همین طور ترتیب دادن به نحوه اضافه کردن فایل های css و javascript به قالب وردپرس ، ترکیب کردن آن ها در یک تابع و فراخوانی همگی آن ها با استفاده از اکشن wp_enqueue_script می باشد. برای اضافه کردن فایل های css و javascript به قالب وردپرس ، این action دقیقا باید در جایی پایین تر از تنظیمات اولیه یا همان initial setup، در فایل functions.php قرار گیرد.

  
function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
 
  wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
 
  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
 
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
      wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

اسکریپت های پیش فرض از قبل الصاق شده و ثبت شده توسط هسته وردپرس

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

لیست این اسکریپت ها و نام handle مربوط به آن ها را می توانید در لینک های انتهای صفحه مشاهده نمایید.

برای دیدن لیست کامل از اسکریپت های مورد استفاده در وردپرس شما می توانید فایل wp-includes/script-loader.php را مورد بررسی قرار دهید.

راهنما برای مطالعه بیشتر:

شما می توانید از لینک های زیر برای مطالعه بیشتر استفاده نمایید:

راهنما برای خواندن سایر مقالات سایت به صورت دسته بندی شده:

شما می توانید از طریق لینک های کاربردی زیر به سایر مقالات سایت که کاملا بصورت طبقه بندی شده وجود دارد، مراجعه نموده و از آن ها استفاده کنید:

بازگشت به صفحه بلاگ وبمستر وردپرس