روش قرار دادن CSS Stylesheet در وردپرس با استفاده از 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 تم شما.

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

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() تابع برای ردیف کردن یک شیوه نامه از یک منبع خارجی. این process اگر می خواهید از فونت های سفارشی یا یک شیوه نامه میزبانی شده استفاده کنید، می تواند مفید باشد روی یک شبکه تحویل محتوا (CDN).

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

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

add_action('wp_enqueue_scripts', 'theme_files');

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

روش افزودن فایل های اسکریپت به وردپرس با استفاده از wp_enqueue_script

وردپرس یک تابع داخلی به نام دارد 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 روی صفحات خاص می توانند چندین مزیت را برای یک وب سایت وردپرس فراهم کنند:

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

در مثال زیر، ما CSS را ثبت کرده و در آن بارگذاری می کنیم با ما تماس بگیرید page با کمک wp_enqueue_scripts وردپرس hook و 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 در پاورقی

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

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

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

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

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

سبک های درون خطی پویا به شما امکان می دهند سبک های سفارشی را به عناصر جداگانه اضافه کنید روی یک وب page. ساده ترین راه برای افزودن استایل های درون خطی با 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() با پروژه های وردپرس خود با موفقیت کار کنید. اگر سوال یا دیدگاهی دارید، به راهنمای وردپرس ما مراجعه کنید یا در زیر نظر بگذارید.