Di tutorial ini, kami akan menjelaskan cara menggunakan wp_enqueue_style()<\/strong> untuk menyempurnakan tampilan dan pengalaman pengguna website WordPress Anda secara keseluruhan. Langsung saja, simak tutorialnya yuk!<\/p> Kami akan mulai dengan beberapa contoh dasar untuk membantu Anda lebih memahami cara menggunakan wp_enqueue_style()<\/strong>.<\/p> Untuk menambahkan stylesheet tema utama style.css<\/strong>, gunakan fungsi wp_enqueue_style()<\/strong> dalam file functions.php tema.<\/p> Berikut adalah contoh tampilannya:<\/p> Dalam kode di atas, my-theme-style<\/strong> adalah nama unik untuk stylesheet yang Anda tambahkan ke antrean, sementara fungsi get_stylesheet_uri()<\/a> menangani URL dari file style.css<\/strong> tema utama.<\/p> Kemudian, fungsi wp_enqueue_style()<\/strong> akan menunjukkan gaya yang dimaksud dan menambahkannya ke dalam antrean. Terakhir, fungsi add_action()<\/a> menambahkan fungsi kustom my_theme_enqueue_styles()<\/strong> ke hook wp_enqueue_scripts<\/strong>, yang akan memastikan bahwa stylesheet ditambahkan ke antrean dengan benar.<\/p> Anda juga bisa menggunakan fungsi wp_enqueue_style()<\/strong> untuk menambahkan gaya lain di luar stylesheet utama. Misalnya, Anda bisa menambahkan opsi gaya tambahan dalam file terpisah.<\/p> Untuk kodenya, gunakan ulang sebagian besar contoh sebelumnya dengan beberapa tambahan:<\/p> Dalam metode ini, kami menggunakan fungsi get_theme_file_uri()<\/a>, yang akan menghasilkan URL file dalam direktori tema saat ini. Dalam tutorial ini, file tersebut adalah extra.css<\/strong>. Dengan demikian, fungsi akan menambahkan stylesheet utama ke antrean lebih dulu, baru kemudian beralih ke gaya tambahan.<\/p> Anda bisa menggunakan fungsi wp_enqueue_style()<\/strong> untuk menambahkan stylesheet dari sumber eksternal. Proses ini berguna kalau Anda ingin menggunakan font kustom atau stylesheet yang dihosting di CDN (jaringan pengiriman konten).<\/p> Kodenya sangat mirip dengan contoh-contoh sebelumnya:<\/p> Jangan lupa untuk mengganti bagian INSERT URL<\/strong> dengan URL stylesheet yang sebenarnya.<\/p> WordPress memiliki fungsi bawaan wp_enqueue_script()<\/a> yang memungkinkan Anda menambahkan JavaScript atau skrip serupa. Tambahkan kode berikut ke file functions.php<\/strong> tema:<\/p> Perlu diketahui bahwa fungsi ini menggunakan lebih banyak parameter:<\/p> Mari lihat beberapa contoh penggunaan praktis fungsi wp_enqueue_style()<\/strong> untuk meningkatkan website WordPress<\/a> Anda.<\/p> Ada beberapa manfaat memuat CSS di halaman tertentu untuk website WordPress Anda:<\/p> Dalam contoh di bawah ini, kami akan menambahkan dan memuat CSS ke halaman Contact Us<\/strong> dengan bantuan hook WordPress wp_enqueue_scripts<\/strong> dan fungsi is_page()<\/a>:<\/p> 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.<\/p> Cara terbaik untuk memuat CSS di footer adalah menggunakan hook WordPress get_footer()<\/strong>:<\/p> 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.<\/p> 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()<\/a>, yang memuatnya setelah file CSS tertentu.<\/p> Dalam contoh berikut, kami akan menggabungkan fungsi wp_enqueue_style() <\/strong>dan wp_add_inline_style() <\/strong>untuk menerapkan gaya dari file design.css<\/strong> dan judul tebal:<\/p> Perlu diingat bahwa gaya inline hanya akan berfungsi setelah design.css <\/strong>benar-benar ditambahkan ke antrean.<\/p> Gunakan fungsi wp_style_is()<\/a> 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.<\/p> Anda juga bisa menggunakan fungsi wp_enqueue_style <\/strong>dengan snippet kode berikut untuk menambahkan stylesheet CSS ke antrean dengan metadata judul:<\/p> Dalam contoh ini, kami menggunakan fungsi wp_style_add_data()<\/a> dan menambahkan judul ke stylesheet CSS.<\/p> 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.<\/p> Kode berikut ini akan membatalkan pencatatan dan menghapus gaya tertentu lalu menggantinya dengan stylesheet baru:<\/p> Dalam pengembangan WordPress, wp_enqueue_style()<\/strong> memiliki peran yang cukup penting. Fungsi ini menyediakan cara yang mudah dan efisien untuk memuat stylesheet ke website Anda.<\/p> Dalam tutorial ini, kami sudah membahas fungsi wp_enqueue_style() <\/strong>dan memberikan beberapa contoh penggunaannya untuk menyesuaikan tampilan dan meningkatkan kecepatan website.<\/p> Semoga tutorial ini membantu Anda memahami dan menggunakan fungsi wp_enqueue_style()<\/strong> dalam proyek WordPress Anda tanpa masalah, ya. Apabila masih memiliki pertanyaan atau informasi lain yang ingin Anda tambahkan, lihat panduan WordPress<\/a> kami atau sampaikan lewat kolom komentar di bawah artikel ini yuk!<\/p>\n","protected":false},"excerpt":{"rendered":" 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 […]<\/p>\nCara Menggunakan wp_enqueue_style untuk Menambahkan CSS ke WordPress<\/h2>
Cara Menambahkan Stylesheet style.css Utama<\/h3>
![\"functions](\"\/tutorial\/wp-content\/uploads\/sites\/37\/2022\/11\/functions-php-di-file-manager-hpanel-baru-1024x366.png\")
<\/figure><\/div>function my_theme_enqueue_styles() {\r\n wp_enqueue_style( 'my_theme_style', get_stylesheet_uri() );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre>![\"file](\"\/tutorial\/wp-content\/uploads\/sites\/37\/2024\/03\/file-style-css-di-file-manager-hostinger.png\")
<\/figure><\/div>Cara Menambahkan Stylesheet Lainnya<\/h3>
function my_theme_enqueue_styles() {\r\n wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );\r\n wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css') );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre>Cara Memuat Stylesheet Eksternal ke WordPress<\/h3>
function theme_files() { \r\n wp_enqueue_style('theme_custom', 'INSERT URL'); \r\n} \r\n\r\nadd_action('wp_enqueue_scripts', 'theme_files');<\/pre>Cara Menambahkan File Skrip ke WordPress Menggunakan wp_enqueue_script<\/h3>
function theme_scripts() {\r\n wp_enqueue_script( 'my-script', get_template_directory_uri() . '\/js\/my-script.js', array(), '1.0', true );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'theme_scripts' );<\/pre>\n
Contoh wp_enqueue_style untuk Referensi<\/h2>
Memuat CSS Hanya pada Halaman Tertentu<\/h3>
\n
<?php\r\nadd_action('init', 'register_custom_styles');\r\nfunction register_custom_styles() {\r\n wp_register_style( 'custom-design', '\/wp-content\/design.css' );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );\r\nfunction conditionally_enqueue_styles_scripts() {\r\n if ( is_page('contactus') ) {\r\n wp_enqueue_style( 'custom-design' );\r\n }\r\n}\r\n?><\/pre>Memuat File CSS di Footer<\/h3>
<?php\r\nfunction footer_style() {\r\n wp_enqueue_style('custom-design', '\/wp-content\/design.css');\r\n};\r\nadd_action( 'get_footer', 'footer_style' );\r\n?><\/pre>Menambahkan Gaya Inline Dinamis<\/h3>
<?php\r\nfunction theme_style() {\r\n\twp_enqueue_style( 'custom-style', get_template_directory_uri() . '\/wp-content\/design.css' );\r\n\t$bold_headlines = get_theme_mod( 'headline-font-weight' ); \r\n\t$inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';\r\n\twp_add_inline_style( 'custom-style', $inline_style );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'theme_style' );\r\n?><\/pre>Memeriksa Status Antrean Stylesheet<\/h3>
<?php\r\nfunction check_styles() {\r\n\tif( wp_style_is( 'main' ) {\r\n \r\n\t\twp_enqueue_style( 'my-theme', '\/custom-theme.css' );\r\n\t}\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'check_styles' );\r\n?><\/pre>Memasukkan Metadata ke dalam Stylesheet<\/h3>
<?php\r\nfunction theme_extra_styles() {\r\n\twp_enqueue_style( 'add-metadata', '\/wp-content\/design.css' );\r\n\twp_style_add_data( 'add-metadata', 'title', 'My Awesome Title' );\r\n\t}\r\nadd_action( 'wp_enqueue_scripts', 'theme_extra_styles' );\r\n?><\/pre>Membatalkan Pencatatan File Gaya<\/h3>
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );\r\nfunction remove_default_stylesheet() {\r\n wp_dequeue_style( 'original-enqueue-stylesheet-handle' );\r\n wp_deregister_style( 'original-register-stylesheet-handle' );\r\n\r\n wp_register_style( 'new-style', get_stylesheet_directory_uri() . '\/new.css', false, '1.0.0' ); \r\n wp_enqueue_style( 'new-style' );\r\n}<\/pre>![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/public\")
<\/a><\/figure><\/div>Kesimpulan<\/h2>