Cara Menggunakan wp_enqueue_style untuk CSS di WordPress

Saat mengembangkan tema atau plugin WordPress, Anda perlu menambahkan stylesheet (CSS) ke antrean (enqueue) agar bisa dimuat dengan benar.

Untuk melakukannya, Anda bisa menggunakan fungsi wp_enqueue_style(), yang merupakan solusi mudah untuk menambahkan stylesheet kustom ke tema WordPress atau plugin Anda. Di samping itu, fungsi ini juga memastikan stylesheet hanya akan dimuat saat diperlukan, dan membantu menghindari masalah dengan plugin atau tema lainnya.

Di tutorial ini, kami akan menjelaskan cara menggunakan wp_enqueue_style() untuk menyempurnakan tampilan dan pengalaman pengguna website WordPress Anda secara keseluruhan. Langsung saja, simak tutorialnya yuk!

Cara Menggunakan wp_enqueue_style untuk Menambahkan CSS ke WordPress

Kami akan mulai dengan beberapa contoh dasar untuk membantu Anda lebih memahami cara menggunakan wp_enqueue_style().

Cara Menambahkan Stylesheet style.css Utama

Untuk menambahkan stylesheet tema utama style.css, gunakan fungsi wp_enqueue_style() dalam file functions.php tema.

Berikut adalah contoh tampilannya:

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my_theme_style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Dalam kode di atas, my-theme-style adalah nama unik untuk stylesheet yang Anda tambahkan ke antrean, sementara fungsi get_stylesheet_uri() menangani URL dari file style.css tema utama.

Kemudian, fungsi wp_enqueue_style() akan menunjukkan gaya yang dimaksud dan menambahkannya ke dalam antrean. Terakhir, fungsi add_action() menambahkan fungsi kustom my_theme_enqueue_styles() ke hook wp_enqueue_scripts, yang akan memastikan bahwa stylesheet ditambahkan ke antrean dengan benar.

Cara Menambahkan Stylesheet Lainnya

Anda juga bisa menggunakan fungsi wp_enqueue_style() untuk menambahkan gaya lain di luar stylesheet utama. Misalnya, Anda bisa menambahkan opsi gaya tambahan dalam file terpisah.

Untuk kodenya, gunakan ulang sebagian besar contoh sebelumnya dengan beberapa tambahan:

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' );

Dalam metode ini, kami menggunakan fungsi get_theme_file_uri(), yang akan menghasilkan URL file dalam direktori tema saat ini. Dalam tutorial ini, file tersebut adalah extra.css. Dengan demikian, fungsi akan menambahkan stylesheet utama ke antrean lebih dulu, baru kemudian beralih ke gaya tambahan.

Cara Memuat Stylesheet Eksternal ke WordPress

Anda bisa menggunakan fungsi wp_enqueue_style() untuk menambahkan stylesheet dari sumber eksternal. Proses ini berguna kalau Anda ingin menggunakan font kustom atau stylesheet yang dihosting di CDN (jaringan pengiriman konten).

Kodenya sangat mirip dengan contoh-contoh sebelumnya:

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

add_action('wp_enqueue_scripts', 'theme_files');

Jangan lupa untuk mengganti bagian INSERT URL dengan URL stylesheet yang sebenarnya.

Cara Menambahkan File Skrip ke WordPress Menggunakan wp_enqueue_script

WordPress memiliki fungsi bawaan wp_enqueue_script() yang memungkinkan Anda menambahkan JavaScript atau skrip serupa. Tambahkan kode berikut ke file functions.php tema:

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' );

Perlu diketahui bahwa fungsi ini menggunakan lebih banyak parameter:

• my-script – nama skrip Anda. Anda bisa memilih nama apa pun yang Anda inginkan.
• /js/my-script.js – lokasi skrip Anda. Dalam hal ini, lokasinya ada di direktori js tema WordPress.
• array() – menentukan dependensi yang mungkin dimiliki oleh skrip Anda.
• 1.0 – nomor versi stylesheet.
• true – menentukan apakah skrip akan dimuat di footer.

Contoh wp_enqueue_style untuk Referensi

Mari lihat beberapa contoh penggunaan praktis fungsi wp_enqueue_style() untuk meningkatkan website WordPress Anda.

Memuat CSS Hanya pada Halaman Tertentu

Ada beberapa manfaat memuat CSS di halaman tertentu untuk website WordPress Anda:

• Loading halaman lebih cepat – Dengan memuat CSS hanya di halaman yang diperlukan, Anda bisa menghindari kode yang tidak diperlukan. Metode ini akan meningkatkan kecepatan keseluruhan website Anda.
• Maintenance lebih mudah – Anda bisa mengubah file CSS tanpa memengaruhi halaman lain.

Dalam contoh di bawah ini, kami akan menambahkan dan memuat CSS ke halaman Contact Us dengan bantuan hook WordPress wp_enqueue_scripts dan fungsi 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' );
    }
}
?>

Memuat File CSS di Footer

Dengan memindahkan CSS ke bagian bawah halaman, browser bisa memprioritaskan pemuatan HTML dan resource penting lainnya lebih dulu. Hasilnya, memuat CSS di footer pun bisa mempercepat loading halaman website Anda.

Cara terbaik untuk memuat CSS di footer adalah menggunakan hook WordPress get_footer():

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

Namun, perlu diingat bahwa memuat CSS di footer bisa menyebabkan masalah rendering dan membuat tampilan halaman menjadi kacau atau tanpa gaya. Oleh karena itu, muat CSS terpenting di bagian head lebih dulu, baru kemudian ke bagian footer.

Menambahkan Gaya Inline Dinamis

Gaya inline dinamis memungkinkan Anda menambahkan gaya kustom ke elemen individu pada halaman web. Cara termudah untuk menambahkan gaya inline adalah dengan fungsi wp_add_inline_style(), yang memuatnya setelah file CSS tertentu.

Dalam contoh berikut, kami akan menggabungkan fungsi wp_enqueue_style() dan wp_add_inline_style() untuk menerapkan gaya dari file design.css dan judul tebal:

<?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' );
?>

Perlu diingat bahwa gaya inline hanya akan berfungsi setelah design.css benar-benar ditambahkan ke antrean.

Memeriksa Status Antrean Stylesheet

Gunakan fungsi wp_style_is() kalau Anda perlu melihat informasi lebih lanjut tentang status stylesheet. Fungsi ini bisa memeriksa apakah file stylesheet CSS ada dalam antrean, ditambahkan ke antrean, dicatat, atau siap ditampilkan.

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

Memasukkan Metadata ke dalam Stylesheet

Anda juga bisa menggunakan fungsi wp_enqueue_style dengan snippet kode berikut untuk menambahkan stylesheet CSS ke antrean dengan metadata judul:

<?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' );
?>

Dalam contoh ini, kami menggunakan fungsi wp_style_add_data() dan menambahkan judul ke stylesheet CSS.

Membatalkan Pencatatan File Gaya

Penting untuk membatalkan pencatatan file gaya CSS yang tidak lagi digunakan. Apabila beberapa plugin atau tema menambahkan file gaya yang sama dalam antrean, website mungkin akan mengalami konflik dan masalah.

Kode berikut ini akan membatalkan pencatatan dan menghapus gaya tertentu lalu menggantinya dengan stylesheet baru:

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' );
}

Kesimpulan

Dalam pengembangan WordPress, wp_enqueue_style() memiliki peran yang cukup penting. Fungsi ini menyediakan cara yang mudah dan efisien untuk memuat stylesheet ke website Anda.

Dalam tutorial ini, kami sudah membahas fungsi wp_enqueue_style() dan memberikan beberapa contoh penggunaannya untuk menyesuaikan tampilan dan meningkatkan kecepatan website.

Semoga tutorial ini membantu Anda memahami dan menggunakan fungsi wp_enqueue_style() dalam proyek WordPress Anda tanpa masalah, ya. Apabila masih memiliki pertanyaan atau informasi lain yang ingin Anda tambahkan, lihat panduan WordPress kami atau sampaikan lewat kolom komentar di bawah artikel ini yuk!