نحوه افزودن CSS به وردپرس با استفاده از wp_enqueue_style

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

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

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

نحوه استفاده از wp_enqueue_style برای بارگذاری صفحات سبک CSS در وردپرس

ما با چند مثال ابتدایی شروع خواهیم کرد تا به شما در درک بهتر این موضوع کمک کنیم wp_enqueue_style() تابع کار می کند

نحوه قرار دادن صفحه سبک اصلی style.css

برای قرار دادن موضوع اصلی در صف style.css شیوه نامه، از wp_enqueue_style() عملکرد در تم شما functions.php فایل.

در اینجا نمونه ای از نحوه ظاهر آن است:

تابع my_theme_enqueue_styles() {

function my_theme_enqueue_styles() 
    wp_enqueue_style( 'my_theme_style', get_stylesheet_uri() );

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

در کد، سبک تم من یک نام منحصر به فرد برای شیوه نامه ای است که در صف قرار می دهید، در حالی که تابع get_stylesheet_uri() URL تم اصلی را کنترل می کند. style.css فایل.

بعد، wp_enqueue_style() تابع استایل را ثبت کرده و به صف اضافه می کند. در نهایت، تابع add_action() سفارشی شما را اضافه می کند my_theme_enqueue_styles() تابع wp_enqueue_scripts hook، که اطمینان حاصل می کند که شیوه نامه به درستی صف بندی شده است.

نحوه قرار دادن برگه های سبک دیگر

شما همچنین می توانید استفاده کنید wp_enqueue_style() تابعی برای قرار دادن سبک های اضافی در بالای صفحه سبک اصلی. به عنوان مثال، گزینه های یک ظاهر طراحی اضافی را در یک فایل جداگانه اضافه کنید.

در مورد کد، می توانید بیشتر آن را از مثال قبلی با چند اضافات اضافی دوباره استفاده کنید:

function my_theme_enqueue_styles() 
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
 wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css') );

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

در این روش، از تابع get_theme_file_uri() استفاده کرده ایم که آدرس فایل را در دایرکتوری موضوع فعلی برمی گرداند. در مورد ما، این است extra.css. به این ترتیب، تابع ابتدا شیوه نامه اصلی را در صف قرار می دهد و سپس به استایل های اضافی می رود.

نحوه بارگذاری استایل شیت های خارجی در وردپرس

امکان استفاده از wp_enqueue_style() تابع برای ردیف کردن یک شیوه نامه از یک منبع خارجی. اگر بخواهید از فونت های سفارشی یا یک شیوه نامه میزبانی شده در شبکه تحویل محتوا (CDN) استفاده کنید، این فرآیند می تواند مفید باشد.

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

function theme_files()  
    wp_enqueue_style('theme_custom', 'INSERT URL'); 
 

add_action('wp_enqueue_scripts', 'theme_files');

به یاد داشته باشید که جایگزین کنید URL را درج کنید بخشی با یک URL واقعی صفحه سبک.

نحوه اضافه کردن فایل های اسکریپت به وردپرس با استفاده از wp_enqueuing_style

وردپرس دارای یک تابع داخلی به نام ()wp_enqueue_script است که به شما امکان می دهد جاوا اسکریپت یا اسکریپت های مشابه را در صف قرار دهید. کد زیر را به تم خود اضافه کنید functions.php فایل:

function theme_scripts() 
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), '1.0', true );

add_action( 'wp_enqueue_scripts', 'theme_scripts' );

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

• اسکریپت من – نام فیلمنامه شما شما می توانید هر نامی را که می خواهید انتخاب کنید.
• /js/my-script.js – مکان اسکریپت شما در این مورد، آن را در js دایرکتوری تم وردپرس
• آرایه() – وابستگی هایی را که ممکن است اسکریپت شما داشته باشد تعریف می کند.
• 1.0 – شیوه نامه شماره نسخه
• درست است، واقعی – تعیین می کند که آیا اسکریپت در فوتر بارگیری شود یا خیر.

نمونه های مفید wp_enqueue_style

چند مورد کاربرد عملی را بررسی کنید wp_enqueue_style() عملکردی برای بهبود سایت وردپرس شما دارد.

بارگیری CSS فقط در صفحات خاص

بارگذاری CSS در صفحات خاص می تواند چندین مزیت برای یک وب سایت وردپرس داشته باشد:

• زمان بارگذاری صفحه سریعتر – وقتی CSS را فقط در صفحاتی که لازم است بارگذاری می کنید، از داشتن کدهای غیر ضروری اجتناب می کنید. این باعث بهبود سرعت کلی سایت شما می شود.
• تعمیر و نگهداری آسان تر – می‌توانید فایل‌های CSS را بدون تأثیرگذاری بر سایر صفحات تغییر دهید.

در مثال زیر، ما CSS را ثبت کرده و در آن بارگذاری می کنیم با ما تماس بگیرید صفحه با کمک wp_enqueue_scripts هوک وردپرس و تابع ()is_page:

<?php
add_action('init', 'register_custom_styles');
function register_custom_styles() 
    wp_register_style( 'custom-design', '/wp-content/design.css' );

add_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );
function conditionally_enqueue_styles_scripts() 
    if ( is_page('contactus') ) 
        wp_enqueue_style( 'custom-design' );
    

?>

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

بهترین راه برای بارگذاری CSS در فوتر این است get_footer() قلاب وردپرس:

<?php
function footer_style() 
    wp_enqueue_style('custom-design', '/wp-content/design.css');
;
add_action( 'get_footer', 'footer_style' );
?>

به یاد داشته باشید که بارگیری CSS در پاورقی می تواند باعث مشکلات رندر شود و صفحه را شکسته یا بدون استایل به نظر برساند. به همین دلیل، ابتدا مهمترین CSS را در قسمت head بارگذاری کنید، سپس به قسمت فوتر بروید.

اضافه کردن سبک های درون خطی پویا

سبک های درون خطی پویا به شما امکان می دهند سبک های سفارشی را به عناصر جداگانه در یک صفحه وب اضافه کنید. ساده‌ترین راه برای افزودن استایل‌های درون‌خط، تابع ()wp_add_inline_style است که آنها را پس از یک فایل CSS خاص بارگذاری می‌کند.

در مثال زیر هر دو را با هم ترکیب می کنیم wp_enqueue_style() و wp_add_inline_style() توابع برای اعمال سبک از design.css فایل و عناوین پررنگ:

?php
function theme_style() 
	wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/wp-content/design.css' );
	$bold_headlines = get_theme_mod( 'headline-font-weight' ); 
	$inline_style=".headline  font-weight: " . $bold_headlines . '; ';
	wp_add_inline_style( 'custom-style', $inline_style );

add_action( 'wp_enqueue_scripts', 'theme_style' );
?>

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

بررسی وضعیت صف قرار دادن Stylesheet

اگر اطلاعات بیشتری در مورد وضعیت صفحه سبک می‌خواهید از تابع wp_style_is() استفاده کنید. این تابع می تواند بررسی کند که آیا یک فایل شیوه نامه CSS در صف قرار دارد، در صف قرار گرفته، ثبت شده است یا آماده نمایش است.

<?php
function check_styles() 
	if( wp_style_is( 'main' ) 
    
		wp_enqueue_style( 'my-theme', '/custom-theme.css' );
	

add_action( 'wp_enqueue_scripts', 'check_styles' );
?>

درج متادیتا در Stylesheet

شما همچنین می توانید استفاده کنید wp_enqueue_style با قطعه کد زیر عمل کنید تا یک شیوه نامه CSS را با ابرداده عنوان در صف قرار دهید:

<?php
function theme_extra_styles() 
	wp_enqueue_style( 'add-metadata', '/wp-content/design.css' );
	wp_style_add_data( 'add-metadata', 'title', 'My Awesome Title' );
	
add_action( 'wp_enqueue_scripts', 'theme_extra_styles' );
?>

در این مثال، ما از تابع ()wp_style_add_data استفاده کرده‌ایم و یک عنوان به شیوه نامه CSS اضافه کرده‌ایم.

لغو ثبت فایل های سبک

مهم است که فایل‌های به سبک CSS را که دیگر استفاده نمی‌کنید لغو ثبت کنید. هنگامی که چندین پلاگین یا تم یک فایل سبک را در صف قرار می دهند، می تواند منجر به تضادها و مشکلات در وب سایت شود.

کد زیر یک استایل خاص را لغو ثبت کرده و صف بندی می کند و آن را با یک شیوه نامه جدید جایگزین می کند:

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() 
    wp_dequeue_style( 'original-enqueue-stylesheet-handle' );
    wp_deregister_style( 'original-register-stylesheet-handle' );

    wp_register_style( 'new-style', get_stylesheet_directory_uri() . '/new.css', false, '1.0.0' ); 
    wp_enqueue_style( 'new-style' );

نتیجه

را wp_enqueue_style() عملکرد بخش مهمی از توسعه وردپرس است. این یک راه آسان و کارآمد برای بارگیری شیوه نامه ها در وب سایت شما ارائه می دهد.

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

امیدواریم این آموزش برای شما مفید بوده باشد و بتوانید از آن استفاده کنید wp_enqueue_style() با پروژه های وردپرس خود با موفقیت کار کنید. اگر سوال یا دیدگاهی دارید، به راهنمای وردپرس ما مراجعه کنید یا در زیر نظر بگذارید.

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