امروز : سه شنبه ۲ آبان ۱۳۹۶ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

اضافه کردن فایل css و js در وردپرس: گاهاً ممکن است برایتان پیش بیاید که استایل سفارشی خود را بنویسید و قصد داشته باشید از آن در وردپرس خود استفاده کنید. در این صورت اگر استایل های شما زیاد باشد، اینلاین نوشتن(درون خطی) اصلا پیشنهاد نمی شود و در این صورت باید استایل های خود را در یک فایل نوشته و آن را فراخوانی کنید. همچنین این موضوع ممکن است در js ها نیز اتفاق بافتد. روش اصولی این است که دستورات در فایل های جداگانه نوشته و فراخوانی شوند.

اضافه کردن فایل css و js در وردپرس

در این قسمت می خواهم در رابطه با روش درست اضافه کردن فایل های css و js را ذر قالب های وردپرسی به شما آموزش بدهم,اما قبل از یاد گیری روش درست,باید روش اشتباه رو به شما بگم که شما از این روش ها استفاده نکنید,پس تا آخر این مطلب با ما همراه باشید.

روش اشتباه اضافه کردن فایل css و js در وردپرس

از آنجایی که روز به روز امکانات جدیدی به سیستم مدیریت محتوای وردپرس اضافه می شود و این امکانات در جهت پیشرفت سیستم مدیریت محتوای وردپرس می باشند,اما متاسفانه هنوز بعضی از افراد از روش های قدیمی ومنسوخ شده اضافه کردن فایل های css و js که شاید در گذشته آموزش دیده اند , استفاده می کنند. ممکن است برای شما این سوال مطرح شود که آیا هنوز روش های قدیمی قابل استفاده می باشند؟ بله این روش ها تا حدی جوابگو هستند , اما برای استفاده از امکانات بیشتر وردپرس باید از روش های جدید بهره گرفت چرا که ممکن است در وسط پروژه ، با مشکل روبه رو شوید به طوری که وردپرس فایل هایی که به آن اضافه کرده ایم که نخواند ,برای درک بهتر به

به عنوان مثال :
<link rel="stylesheet" type="text/css" href="path/to/your/style.css">
<script type='text/javascript' src='path/to/your/script.js'></script>

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

روش درست اضافه کردن فایل css و js در وردپرس

 

روش درست اضافه کردن فایل های css و js استفاده از دو تابع  wp_enqueue_style و wp_enqueue_script  می باشد که عمل پبوست صحیح فایل های مربوطه قالب توسط آن ها انجام می گیرد و همچنین اطلاعاتی نظیر تعیین ورژن، نوبت افزوده شدن و غیره را نیز مشخص می کند .شاید در نگاه اول استفاده از این دو تابع کمی مشکل به نظر بیاید اما با یادگیری این دو تابع شما می توانیدبه راحتی فایل مد نظرتون رو به قالب اضافه کنید.

 

معرفی آرگومان های تابع  ( )wp_enqueue_script

;(string $handle , string $src = '' , array $deps = array() , string|bool|null $ver = false, bool $in_footer = false )wp_enqueue_script

 تمام آرگومان های معرفی شده در زیر غیر از آرگومان handle$ اختیاری می باشند.

handle$
نام اسکریپت را مشخص میکند و باید کاملا منحصر به فرد باشد.
src$
مسیر اسکریپت را مشخص میکند. این مسیر میتواند کامل بوده یا به صورت نسبی بر اساس محل نصب وردپرس وارد شود. 
deps$
نشان میدهد که این اسکریپت به چه اسکریپت های دیگری وابستگی دارد. مقدار باید به صورت آرایه ارائه شود. 
ver$
ورژن فایل جاوااسکریپت را مشخص می کند. 
in-footer$
تعیین میکند که آیا این اسکریپت باید در تگ سربرگ قرار بگیرد و یا در فوتر قالب به صورت پیشفرض محل قرار گیری یک اسکریپت در سربرگ است.
 
 

معرفی آرگومان های تابع () wp_enqueue_style

wp_enqueue_style( string $handle, string $src = ”, array $deps = array(), string|bool|null $ver = false, string $media = ‘all’ )

در زیر به معرفی آرگومان های تابع بالا ، خواهم پرداخت

    handle$
نام استایل را مشخص میکند و لازم است که حتما منحصر به فرد باشد 
src$
محل قرار گیری استایل را مشخص میکند. این مسیر میتواند کامل بوده یا بر اساس روت محل نصب وردپرس آدرس دهی شود 
deps$
مشخص میکند که فایل استایل فعلی به کدام استایل ها وابسته است 
 ver$
ورژن فایل استایل را مشخص میکند. 
media$
نوع مدیایی که این استایل بر روی آن تاثیر دارد را تعیین میکند. بنابراین می توانید از مقادیری مثل :
all, print, screen, max-width:640
و موارد مشابه استفاده کنید. 
پر کردن هیچ یک از موارد فوق بجز نام استایل الزامی نیست

 

پس اگر بخواهیم این تابع را در قالب خودمان  استفاده کنیم ، همانند مثال زیر در فایل functions.php باید دستورات زیر را وارد کنیم .

}()function mrcodeirwp_scripts
;wp_enqueue_style( 'stylename', get_template_directory_uri().'/style.css', array(), '1.0' )
;wp_enqueue_script('jsname', get_template_directory_uri().'/scripts.js', array(), '1.3.2', false )
{
;add_action( 'wp_enqueue_scripts', 'mrcodeirwp_scripts' )

و اما سوال:

برای استفاده از پلاگین هایی که وابستگی به جی کوئری دارند باید چه کار کنیم ؟

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

;wp_enqueue_script('jquery')

سپس وردپرس در تابع wp_enqueue_script در قسمت deps$ ,شما باید (‘jquery’)array را بنویسید,که وردپرس چک میکنه که جی کوئری  قبل از این دستورات لود شود تا این تابع اجرا شود,مانند زیر:

;wp_enqueue_script('jquery')
;wp_enqueue_script('script1', get_template_directory_uri().'/script1.js', array('jquery'), false, false )
;wp_enqueue_script('script2', get_template_directory_uri().'/script2.js', array('jquery'), false, false )
;wp_enqueue_script('script3', get_template_directory_uri().'/script3.js', array('jquery'), false, false )

نحوه استفاده از توابع  ()wp_register_style و  () wp_register_script

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

;wp_register_style( $handle, $src, $deps, $ver, $media)
;wp_register_script( $handle, $src, $deps, $ver, $in_footer)

توضیحات تابع register مشابه تابع enqueue است و شما به جای اضافه کردن فایل ها آن ها را ثبت می کنید و هر زمانی که نیاز داشتید با صدا زدن یا همون enqueue کردن نام آنها که به صورت یکتا انتخاب کردید به هسته ورد پرس اضافه می شود.برای درک بهتر به مثال زیر دقت کنید:

php?>
// اگر استایل را از قبل ثبت کرده ایم اینطوری فراخوان می کنیم
;wp_enqueue_style( 'my-bootstrap-extension')
// اگر فایل از قبل ثبت نشده اینطوری فراخوان می کنیم
()wp_register_style
, نام منحصر به فرد فایل// 'my-bootstrap-extension'
, // آدرس فایل'get_template_directory_uri() . '/css/my-bootstrap-extension.css
, // فایل وابستهarray( 'bootstrap-main' )
, // شماره نسخه'۱.۲'
, // نوع استایل 'screen'
);
<?
هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

منبع : وبیت

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 145 بار دسته بندی : آموزش ، آموزش وردپرس دیدگاه : ۰ تاريخ : ۲۲ شهریور ۱۳۹۶
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
بهنام خرقانی

دیدگاه کاربران تعداد دیدگاه : ۰