Get in Touch

Masukkan CSS di WordPress

Untuk menyesuaikan tampilan dan nuansa situs WordPress Anda, Anda perlu memasukkan kode CSS. Lalu bagaimana cara memasukkan CSS dan apakah rumit? Pada artikel ini, Vietrick akan memandu Anda untuk memasukkan CSS ke dalam WordPress melalui Kustomisasi Temasisipkan CSS ke setiap postingan oleh plugin Dan tambahkan file CSS ke dalam tema.

Apa itu CSS?

Masukkan kode CSS ke dalam WordPress

CSS, kependekan dari TUAacading Sgaya Sheet, CSS dapat dipahami secara sederhana sebagai berikut:

  • CSS menggambarkan, format, tata letak Bagaimana elemen HTML muncul di layar, situs web, atau media lainnya
  • CSS menghemat waktu pemformatankarena bisa kontrol tata letak, warna, warna teks, dll. dari beberapa halaman web secara bersamaan.

CSS dikembangkan oleh W3C (Konsorsium World Wide Web) pada tahun 1996, karena HTML tidak dirancang untuk pemberian tag guna membantu pemformatan halaman web.

Cara kerja CSS adalah akan mencari berdasarkan pilihan, pilihan tersebut bisa berupa nama tag HTML, nama ID, class atau banyak jenis lainnya. Kemudian itu akan menerapkan properti yang akan diubah ke pilihan itu.

Masukkan CSS di Kustomisasi Tema

Ini adalah cara paling sederhana untuk memasukkan beberapa baris kode CSS ke WordPress Anda tanpa memasang tambahan apa pun. Kustomisasi Tema Sebagai salah satu fitur WordPress default, pengadopsiannya tidak akan banyak memengaruhi situs Anda.

Untuk memasukkan CSS ke dalam WordPress, di halaman Admin, Anda mengakses menu Penampilan > Sesuaikan. Pada titik ini, Anda akan pindah ke bagian di mana Anda dapat menyesuaikan tema yang Anda gunakan.

Masukkan CSS melalui Kustomisasi Tema

Kami terus mengakses item tersebut CSS tambahan. Anda dapat memasukkan CSS ke dalam kotak edit pada gambar di atas.

Sisipkan CSS ke dalam halaman individual

Biasanya ketika Anda memasukkan CSS di WordPress melalui CSS tambahan di Theme Customize atau file .css, maka kode CSS akan diterapkan ke seluruh halaman web. Jika Anda ingin menerapkan kode CSS ke posting atau halaman tertentu, Anda perlu menggunakan plugin khusus.

Untuk memasukkan kode CSS ke WordPress untuk setiap halaman/posting secara terpisah, Anda dapat menggunakan plugin Manajer Kode Header Footer

Pengelola Kode Footer Header Plugin

Mengapa menggunakan plugin ini:

  • Plugin ini gratis: versi gratis sepenuhnya memenuhi kebutuhan.
  • Mudah dipasang dan digunakan
  • Mendukung kedua posting, halaman, dan jenis posting khusus (Taksonomi khusus)
  • Dukungan oleh perangkat: ponsel / komputer / tablet
  • Dukungan kode pendek
  • Mendukung beberapa posisi penyisipan kode: Header / Footer, artikel Atas / Bawah.

Masukkan lebih banyak file CSS ke dalam tema

Anda dapat menggunakan plugin Manajer Kode Header Footer disebutkan di atas untuk memasukkan file CSS tambahan ke dalam tema.

Jika Anda tidak suka menggunakan plugin, kami perlu mengedit file functions.php pada tema yang digunakan untuk melanjutkan.

Kalian mengunggah file custom-style.css Buka folder tema yang digunakan di: /wp-content/themes/. Kemudian tambahkan kode di bawah ini ke dalam file functions.php.

/**
@VIETRICK: Masukkan CSS ke dalam tema
@ gunakan kait wp_enqueue_scripts() untuk merendernya ke front-end
**/
fungsi vietrick_styles() {
/*
* Fungsi get_stylesheet_uri() akan mengembalikan nilai yang mengarah ke file style.css tema
* Jika menggunakan tema anak, file custom-style.css ini akan tetap dimuat dari tema utama
*/
wp_register_style( ‘gaya kustom‘, get_template_directory_uri() . ‘/custom-style.css‘, ‘semua‘ );
wp_enqueue_style( ‘gaya kustom‘ );
}
add_action( ‘wp_enqueue_scripts‘, ‘vietrick_styles‘ );
lihat mentah

wp-custom-css.php

diselenggarakan dengan ❤ oleh GitHub

Memasukkan file CSS dengan metode di atas memiliki keuntungan karena sangat kompatibel dengan WordPress dan plugin pengoptimalan kecepatan: WP-Rocket, Cache Kecepatan Ringan…

Baca selengkapnya:

  • Buat daftar isi WordPress tanpa plugin
  • Hapus Gutenberg CSS dari WordPress (perpustakaan blok/style.min.css)

Menyimpulkan

Memasukkan kode CSS ke dalam WordPress sebenarnya sangat sederhana. Bergantung pada kebutuhan Anda, silakan terapkan metode yang paling sesuai.

Semoga berhasil, jika Anda mengalami kesulitan, silakan tinggalkan komentar di bawah ini.

5/5 – (1 suara)

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *