به نام خداوند بخشنده مهربان با آموزش نحوه استفاده از فایل css در قالب وردپرس خدمت شما عزیزان هستیم. در جلسات قبل آموزش دادیم که چگونه فایل ها را تفکیک میکنیم و فایل header و footer را ایجاد میکنیم در این جلسه سه راه برای ایجاد و استفاده از فایل css خدمت شما عزیزان آموزش میدهیم. که شما میتوانید از هر سه روش برای قالب خود استفاده کنید.
روش اول:
روش اول بسیار ساده میباشد و برای کسانی که با زبان php آشنایی زیادی ندارد و تنها با وردپرس شروع به طراحیوب کرده اند مناسب است زیرا این روش نیز از توابع خود وردپرس که خیلی ساده هستند استفاده میشود. شما میتوانید برای انجام این فعالیت از تابع get_template_directory_uri استفاده نمایید که بسیار ساده میباشد و شما به راحتی با استفاده از آن فایل های مختلفی مانند css و جاوا و همینطور تصاویر گم شده را نمایش دهید.
<?php echo get_template_directory_uri(); ?>
نحوه استفاده از تابع get_template_directory_uri
همان طور که گفته شد استفاده از این تابع بسیار ساده است و فقط کافی است آن را قبل از آدرس مورد نظر قرار دهید تا فرایند انجام شود این تابع زمانی استفاده میشود که نیاز باشد آدرس وب برای موضوعی بازگردانی کند تا شما بتوانید از آن استفاده کنید.
نحوه استفاده از تابع get_template_directory_uri برای نمایش استایل
همانطور که که در نمونه مشاهده میکنید در داخل تگ <link> در ویژگی href قبل از نام فایل از تابع استفاده شده است و با علامت (/) کمک میکند تا به راحتی آدرس پیدا شده و بتوانیم از آن استفاده کنیم. قرار ندادن علامت (/) باعث به وجود آمدن اختلال خواهد شد.
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">
روش دوم:
روش دوم نیز مانند روش اول بسیار ساده میباشد و شما عزیزان میتوانید از آن برای نمایش دستورات و استفاده از فایل css استفاده کنید. در این روش نیز شما از یک تابع وردپرس برای انجام این فرایند استفاده میکنید که به سادگی فایل شما را پیدا کرده و نمایش خواهد داد راه های دیگر نیز برای انجام این فعالیت وجود دارد که همانطور که گفته شد در این جلسه فقط میخواهیم سه روش آن را خدمت شما عزیزان توضیح بدهیم.
استفاده از تابع get_theme_file_uri
تابع فوق عملکرد مشابه ای با تابع قبلی دارد ولی فقط تفاوت در نحوه استفاده آنها میباشد که آن را نیز خدمت شما عزیزان خواهیم آموخت از تابع فوق برای نشانی یابی یک فایل در وب استفاده میشود.
نحوه استفاده از تابع get_theme_file_uri
همانطور که در کد زیر مشاهده میکنید تابع در ویژگی href تگ <link> قرار گرفته است و آدرس فایل و نام آن را داخل تابع قرار میدهیم و تفاوت تابع فوق با تابع قبلی در همین موضوع میباشد. از تابع فوق مانند تابع قبل برای پیدا کردن فایل عکس ها و همینطور جاوا نیز استفاده کنید که در جلسات آینده خواهیم آموخت.
<link rel="stylesheet" type="text/css" href="<?php echo get_theme_file_uri('/style.css'); ?>">
روش سوم: روش سوم و آخر برای آن دسته از عزیزانی هست که میخواهند با استفاده از فایل functions.php این عمل را انجام دهند و از تگ <head> و قرار دادن <mete> ها و <link> ها استفاده نمیکنند. ابتدا باید خدمت این عزیزان بگویم که حتما و حتما از تابع های زیر در صفحه استفاده کنند.
<?php wp_head(); ?>
<?php wp_footer(); ?>
زیرا وجود این تابع و مخصوصا wp_head به انجام این روش کمک میکند و بدون وجود آن این روش ممکن نیست.
نحوه ایجاد فانکشن در وردپرس
این روش برای ایجاد فانکشن نیازمند آن است که شما حداقل هایی از زبان php بدانید تا بتوانید از آن استفاده نمایید. ابتدا باید به شما بگویم که باید به شما بگویم که برای اینکه ما function نوشته شده توسط خودمان را نمایش دهیم و از آن استفاده کنیم باید با استفاده از دستور زیر آن را فراخوانی کنیم.
add_action('wp_enqueue_scripts', 'abbashosseini_files');
این دستور از ما دو استدلال میخواهد در قسمت اول عبارت wp_enqueue_scripts را درج میکنیم و در قسمت دوم نام function تعریف شده از طرف خودمان را درج میکنیم تا بتواند آن را اجرا کند.
برای ایجاد function مانند تصویر زیر ابتدا کلمه function را مینویسیم سپس نام برای function خود مشخص میکنیم درنظر داشته باشید نام ای را باید استفاده کنید که برای استدلال دوم add_action تعریف کرده اید و این خیلی مهم است زیرا در صورت تداخل نمایش داده نمیشود.
function abbashosseini_files(){}
و در قسمت سوم وارد function تعریف شده میشویم حالا زمان آن است که تابع نمایش و اجرای فایل css خود را درج کنیم با استفاده از دستور زیر فایل css فراخوانی میشود و شما میتوانید از آن استفاده کنید در این قسمت نیز از شما دو استدلال میخواهد در قسمت اول یک نام هست که زیاد اهمیتی ندارد و فقط برای بهتر شناختن تابع برای خود شما است در قسمت دوم باید تابع get_stylesheet_uri درج شود تا بتواند فایلی که با نام style.css وجود دارد در پوشه را پیدا کند و از آن استفاده کند.
wp_enqueue_style('abbashosseini_style', get_stylesheet_uri());