{"id":54194,"date":"2025-04-01T08:34:00","date_gmt":"2025-04-01T01:34:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=54194"},"modified":"2025-03-28T16:42:46","modified_gmt":"2025-03-28T09:42:46","slug":"cara-custom-css-di-wordpress","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-custom-css-di-wordpress\/","title":{"rendered":"Cara Custom CSS di WordPress Melalui Dashboard"},"content":{"rendered":"\n<p>Salah satu cara yang bisa Anda lakukan untuk membuat tampilan website menjadi lebih menarik adalah dengan menambahkan custom CSS (<em>Cascading Style Sheets<\/em>). Dalam artikel ini, kami akan berbagi cara custom CSS di WordPress melalui halaman dashboard atau wp-admin secara mudah. Simak informasi berikut ini.<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Apa Itu Custom CSS?<\/strong><\/h2>\n\n\n\n<p>Custom CSS adalah salah satu cara yang dapat kita lakukan untuk menyesuaikan tampilan website sesuai keinginan. Dengan menggunakan custom CSS, Anda bisa mengubah elemen di website, seperti warna, <em>font<\/em>, hingga <em>layout<\/em>, tanpa perlu mengutak-atik kode HTML atau PHP.<\/p>\n\n\n\n<p>Misalnya, Anda ingin mengubah warna <em>background <\/em>atau memperbesar ukuran <em>font <\/em>di beberapa elemen. Tanpa menggunakan <a href=\"https:\/\/www.rumahweb.com\/journal\/css-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"css adalah\">CSS<\/a>, Anda harus mengubah struktur HTML dan PHP, yang tentunya lebih rumit dan memerlukan pemahaman lebih dalam. <\/p>\n\n\n\n<p>Jadi, dengan CSS, Anda bisa lebih leluasa mengubah tampilan tanpa takut merusak struktur website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Kenapa Harus Menambahkan Custom CSS?<\/strong><\/h2>\n\n\n\n<p>Ada beberapa alasan kenapa menambahkan Custom CSS itu penting:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Personalisasi Tampilan:<\/strong> Anda bisa menyesuaikan desain website sesuai dengan gaya atau identitas merek yang diinginkan.<\/li>\n\n\n\n<li><strong>Keamanan Pembaruan Tema:<\/strong> Jika menggunakan metode yang tepat, perubahan CSS tidak akan hilang meskipun tema diupdate.<\/li>\n\n\n\n<li><strong>Kontrol Penuh:<\/strong> Dengan CSS, Anda punya kontrol penuh untuk mengubah tampilan sesuai kebutuhan, tanpa bergantung pada pengaturan default tema.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Custom CSS di WordPress<\/strong><\/h2>\n\n\n\n<p>Ada 2 cara yang bisa Anda pilih untuk menambahkan <em>custom <\/em>CSS di WordPress. Setiap cara memiliki kelebihan dan kekurangannya masing-masing. Berikut adalah 2 metode yang bisa Anda pilih sesuai dengan preferensi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cara <strong>1. Menggunakan WordPress Customizer<\/strong><\/h3>\n\n\n\n<p>Cara pertama yang bisa Anda coba adalah dengan menggunakan WordPress Customizer. Opsi ini merupakan cara yang paling mudah dan cepat tanpa perlu Plugin tambahan. Berikut langkah-langkahnya:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Masuk ke Dashboard WordPress. Lalu pilih <strong>Appearance<\/strong> (Tampilan) &gt; <strong>Customize<\/strong> (Sesuaikan).<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-customizer-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"403\" height=\"441\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-customizer-2.png\" alt=\"Langkah 1 menambahkan css menggunakan wordpress customizer\" class=\"wp-image-54200\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-customizer-2.png 403w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-customizer-2-274x300.png 274w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-customizer-2-370x405.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-customizer-2-270x295.png 270w\" sizes=\"auto, (max-width: 403px) 100vw, 403px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Pilih <strong>Additional CSS<\/strong>.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfNc8TEp0lStEjusP8xCW4Zaci7KJ7IBjTMRembkHBI0EoOyexfk4Mo8NwhwXiM1ZL8_wTsVXdhGSTMMaDrFkovmoPENe14RmKMBq_EryvyQWNrCNlMVn9Uk-ahInCHPR5TyuoYiw?key=wRv2AvsMB4RaCWfv_v5ytOzH\" alt=\"Langkah 2 menambahkan css menggunakan wordpress customizer\"\/><\/figure>\n<\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Ketikkan kode CSS yang ingin Anda gunakan di kolom yang tersedia.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-customizer.png\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"562\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-customizer.png\" alt=\"Langkah 3 custom css di WordPress menggunakan customizer\" class=\"wp-image-54201\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-customizer.png 556w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-customizer-297x300.png 297w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-customizer-370x374.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-customizer-270x273.png 270w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Klik <strong>Publish<\/strong> untuk menyimpan perubahan.<\/li>\n<\/ol>\n\n\n\n<p>Metode ini sangat mudah dan cepat, terutama bagi Anda yang tidak ingin ribet. Anda bisa langsung melihat perubahan tanpa perlu khawatir jika tema diupdate, karena perubahan CSS ini disimpan terpisah dari file tema. Namun, jika Anda ingin melakukan penyesuaian yang lebih besar, <em>Customizer<\/em> mungkin terasa kurang fleksibel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Opsi <strong>2. Menggunakan Plugin<\/strong>s<\/h3>\n\n\n\n<p>Jika Anda tidak ingin repot mengedit kode, Anda bisa menggunakan plugin untuk menambahkan Custom CSS. Plugin seperti <em><a href=\"https:\/\/wordpress.org\/plugins\/simple-custom-css\/\" target=\"_blank\" rel=\"noopener\" title=\"Simple Custom CSS\">Simple Custom CSS<\/a><\/em> atau <em>WP Add Custom CSS<\/em> akan sangat membantu.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Instal plugin seperti <em>Simple Custom CSS<\/em> melalui menu <strong>Plugins<\/strong> &gt; <strong>Add New Plugins &gt;&gt; search \u201cSimple Custom CSS\u201d &gt;&gt; install now &gt;&gt; activate<\/strong><\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-pluggin.png\"><img loading=\"lazy\" decoding=\"async\" width=\"508\" height=\"511\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-pluggin.png\" alt=\"Langkah 1 menambahkan css menggunakan plugin\" class=\"wp-image-54208\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-pluggin.png 508w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-pluggin-298x300.png 298w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-pluggin-150x150.png 150w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-pluggin-370x372.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah1-wp-pluggin-270x272.png 270w\" sizes=\"auto, (max-width: 508px) 100vw, 508px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Setelah plugin aktif, buka <strong>Appearance<\/strong> &gt; <strong>Custom CSS<\/strong>.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah2-wp-pluggin.png\"><img loading=\"lazy\" decoding=\"async\" width=\"451\" height=\"609\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah2-wp-pluggin.png\" alt=\"Langkah 2 menambahkan css menggunakan plugin\" class=\"wp-image-54211\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah2-wp-pluggin.png 451w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah2-wp-pluggin-222x300.png 222w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah2-wp-pluggin-370x500.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah2-wp-pluggin-270x365.png 270w\" sizes=\"auto, (max-width: 451px) 100vw, 451px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Masukkan kode CSS yang Anda inginkan.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-pluggin.png\"><img loading=\"lazy\" decoding=\"async\" width=\"496\" height=\"484\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-pluggin.png\" alt=\"Langkah 3 custom css di wordpress menggunakan plugin\" class=\"wp-image-54212\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-pluggin.png 496w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-pluggin-300x293.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-pluggin-370x361.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Langkah3-wp-pluggin-270x263.png 270w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Klik <strong>Update Custom CSS<\/strong> untuk menyimpan perubahan.<\/li>\n<\/ol>\n\n\n\n<p>Plugin sangat mudah digunakan, terutama bagi Anda yang baru mulai dan tidak ingin repot dengan kode. Selain itu, menggunakan plugin bisa membantu Anda memisahkan CSS dari tema utama, yang lebih aman saat tema diupdate. Kekurangannya adalah penggunaan plugin bisa memperlambat kinerja website, terutama jika terlalu banyak plugin yang diinstall.<\/p>\n\n\n\n<p><strong>BACA JUGA<\/strong>: <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css\/\" target=\"_blank\" rel=\"noopener\" title=\"Belajar CSS\">Belajar CSS: Apa itu CSS dan Cara Membuatnya Untuk Pemula<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Penutup<\/strong><\/h2>\n\n\n\n<p>Melakukan custom CSS di WordPress sangatlah mudah dan memberikan banyak keuntungan, seperti mengubah tampilan sesuai dengan keinginan tanpa merusak struktur tema. Anda bisa menambahkan custom css menggunakan WordPress <em>Customizer <\/em>ataupun menggunakan plugin. Pilih cara yang paling cocok dengan kebutuhan Anda.<\/p>\n\n\n\n<p>Demikian panduan kami tentang cara custom CSS di WordPress melalui <em>dashboard<\/em>, semoga bermanfaat!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Salah satu cara yang bisa Anda lakukan untuk membuat tampilan website menjadi lebih menarik adalah dengan menambahkan custom CSS (Cascading Style Sheets). Dalam artikel ini, kami akan berbagi cara custom CSS di WordPress melalui halaman dashboard atau wp-admin secara mudah. Simak informasi berikut ini. Apa Itu Custom CSS? Custom CSS adalah salah satu cara yang [&hellip;]<\/p>\n","protected":false},"author":358,"featured_media":54235,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[463],"tags":[1751,1000,14],"class_list":{"0":"post-54194","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-wordpress","8":"tag-css","9":"tag-tutorial-wordpress","10":"tag-wordpress"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/Banner-Cara-Custom-CSS-di-WordPress.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-e66","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/54194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/358"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=54194"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/54194\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/54235"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=54194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=54194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=54194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}