Cara Mempertahankan CSS Kustom Saat Memperbarui Tema WordPress
Diterbitkan: 2022-05-05Tema menentukan tata letak dan tampilan situs web WordPress. Terlepas dari tema yang Anda gunakan, Anda mungkin perlu menyesuaikannya sedikit agar sesuai dengan kebutuhan spesifik Anda.
Salah satu cara untuk menyesuaikan tema Anda adalah dengan menggunakan Cascading Style Sheets (CSS). Bahasa style sheet populer ini akan memungkinkan Anda untuk mengubah hampir semua elemen tema Anda. Anda dapat menambahkan CSS khusus ke tema Anda untuk menentukan warna latar belakang, mengubah ukuran font, membuat jarak antar konten, memposisikan ulang menu, dan banyak lagi. CSS khusus, bagaimanapun, dapat dihapus saat Anda memperbarui tema Anda berikutnya.
Mengapa Pembaruan Tema Melanggar CSS Khusus
Semua tema memiliki file style.css. Tersedia di folder tema, berisi CSS. Saat memperbarui tema, Anda akan mengunduh versi baru yang berbeda untuk menggantikan versi yang ada.
Memperbarui tema Anda akan menghapus file style.css yang ada dan menggantinya dengan file style.css baru yang segar. File style.css baru tidak akan berisi CSS khusus yang mungkin telah Anda tambahkan sebelumnya. Anda selalu dapat menambahkan kembali CSS khusus yang dihapus, tetapi melakukannya setelah setiap pembaruan tema bisa jadi membosankan.
Tambahkan ke Penyesuai
Anda dapat mempertahankan CSS khusus saat memperbarui tema Anda dengan menambahkannya ke penyesuai. Penyesuai adalah alat penyesuaian tema di dasbor WordPress. Ini fitur bidang "CSS tambahan". Daripada menambahkan CSS khusus langsung ke style.css tema Anda, Anda dapat menambahkannya ke bidang ini.
Bidang "CSS tambahan" diperkenalkan di WordPress versi 4.7 untuk mencegah CSS khusus dihapus selama pembaruan tema. Itu tidak mempengaruhi file style.css, juga tidak mempengaruhi file lain di folder tema. Saat Anda menambahkan CSS khusus ke penyesuai melalui bidang ini, itu akan disimpan di database situs web Anda. Anda kemudian dapat memperbarui tema Anda sambil mempertahankan CSS khusus.
Untuk mengakses penyesuai, klik "Tampilan" di dasbor WordPress dan pilih "Sesuaikan." Tab "CSS tambahan" ada di dekat bagian bawah. Mengklik tab ini akan menampilkan bidang tempat Anda dapat memasukkan CSS khusus. Memperbarui tema Anda hanya akan menggantikan file di folder tema. Ini tidak akan menggantikan atau memengaruhi database situs web Anda, sehingga CSS khusus akan dipertahankan.
Menambahkan CSS khusus ke penyesuai memungkinkan Anda untuk mempratinjaunya. Penyesuai memiliki fitur pratinjau bawaan untuk semua perubahan. Baik Anda menyetel widget baru atau menambahkan CSS khusus, penyesuai akan mengungkapkan seperti apa tampilan situs web Anda nantinya. Anda kemudian dapat memilih untuk melanjutkan penyesuaian dengan mengklik “Terbitkan.” Jika situs web Anda tidak terlihat benar, Anda dapat mengubah opsi penyesuaian sebelum menayangkannya. Terlepas dari itu, penyesuai akan menampilkan pratinjau situs web Anda dengan CSS khusus.
Buat Tema Anak
Solusi lain adalah membuat tema anak. Tema anak pada dasarnya adalah salinan dari tema lain yang dapat Anda sesuaikan tanpa takut kehilangan perubahan Anda. Mereka tidak salinan lengkap. Sebaliknya, sebagian besar tema anak hanya terdiri dari beberapa file dasar, termasuk file style.css dan file functions.php.
Tema anak dirancang untuk mewarisi properti tema induk. Anda dapat menggunakan tema Anda sebagai tema induk. Tema anak akan memiliki foldernya sendiri, yang akan berisi file style.css dan file functions.php sendiri. Namun, tema anak tidak akan berisi file index.php, file page.php, file single.php, atau file tema standar lainnya. Ini akan memanfaatkan tema induk untuk properti ini.
Karena tema anak memiliki file style.css mereka sendiri, mereka mendukung CSS khusus. Lebih penting lagi, tema anak mempertahankan semua CSS khusus mereka saat tema induknya diperbarui. Memperbarui tema induk tidak akan memengaruhi file style.css tema anak. Untuk petunjuk tentang cara membuat tema anak, kunjungi developer.wordpress.org/themes/advanced-topics/child-theme. Atau, beberapa tema premium hadir dengan tema anak.
Untuk beberapa baris CSS khusus, Anda mungkin ingin menambahkannya ke penyesuai. Untuk jumlah CSS khusus yang lebih besar, membuat tema anak mungkin sepadan dengan usaha. Tema anak akan memberi Anda file style.css terpisah yang dapat Anda sesuaikan.
Anda bahkan dapat mengerjakan file style.css tema anak secara offline, dan karena ini adalah file terpisah, Anda akan memiliki banyak ruang untuk CSS khusus. Menambahkan CSS khusus ke penyesuai akan membatasi Anda ke bidang kecil yang hanya dapat diakses secara online. Penyesuai menawarkan manfaat dari mode pratinjau, sedangkan tema anak menawarkan manfaat dari file style.css yang terpisah.
Gunakan Plugin CSS Khusus
Anda dapat menggunakan plugin CSS khusus. Plugin Simple Custom CSS, misalnya, melakukan persis seperti apa bunyinya: Ini memungkinkan Anda untuk dengan mudah menambahkan CSS khusus ke tema Anda. CSS khusus yang ditambahkan ke plugin akan menggantikan CSS tema Anda sendiri.
Setelah Anda mengaktifkan plugin CSS Kustom Sederhana, Anda akan melihat tab "CSS Kustom" baru di bawah "Tampilan" di dasbor WordPress. Di sinilah Anda dapat menambahkan CSS khusus. Saat Anda memperbarui tema, CSS khusus akan dipertahankan. Memperbarui tema Anda akan menggantikan file style.css tema, tetapi plugin akan menimpa file style.css baru dengan CSS khusus Anda.
Ada juga plugin JS dan CSS Kustom Sederhana, yang mendukung CSS kustom dan JavaScript kustom. Anda dapat menggunakannya untuk membuat CSS khusus yang menggantikan CSS tema Anda sendiri. Jika Anda tidak ingin dipusingkan dengan membuat tema anak, Anda mungkin ingin menggunakan plugin CSS khusus. Mengunduh plugin CSS khusus adalah cara mudah untuk mempertahankan CSS khusus selama pembaruan tema.
Kesimpulan
Ini membuat frustrasi ketika Anda kehilangan CSS khusus setelah memperbarui tema. Bahkan jika Anda menyimpan CSS khusus secara lokal ke komputer Anda, Anda harus kembali dan menambahkannya. Anda dapat mempertahankan CSS khusus tema Anda dengan menggunakan penyesuai di dasbor WordPress, membuat tema anak, atau menggunakan plugin CSS khusus.
