Cara Mengedit CSS & HTML di WordPress (Panduan Langkah demi Langkah)

Cara Mengedit CSS & HTML di WordPress (Panduan Langkah demi Langkah)

Salah satu dari banyak manfaat menggunakan WordPress adalah kemampuan untuk menyesuaikan dan mempersonalisasi situs web Anda sesuai keinginan Anda.

Meskipun WordPress memberi Anda banyak alat dan metode untuk mengedit desain situs web Anda, Anda bahkan dapat mengedit kode untuk mengubah atau menghapus elemen tata letak situs web Anda.

Dalam panduan singkat ini, kami akan menunjukkan cara melakukannya dengan mengedit CSS dan HTML di WordPress. Kami akan memandu Anda melalui beberapa metode dengan petunjuk langkah demi langkah. Mari kita mulai.

Satu Langganan: Semua yang Anda Butuhkan untuk Membangun Situs Web

Dapatkan semua yang Anda butuhkan untuk membangun situs web Anda berikutnya dengan satu langganan sederhana. Mulai dari $16 per bulan, dapatkan akses tak terbatas ke hampir 2 juta tema WordPress, templat web, font, grafik, dan foto.

Bangun Situs Web Anda Berikutnya

Mengapa Mengedit CSS dan HTML di WordPress?

Di WordPress, Anda dapat mengedit desain tema dengan menggunakan penyesuai tema atau plugin pembuat halaman. Tetapi mereka hanya mengizinkan Anda untuk mengedit desain sampai batas tertentu. Untuk menyesuaikan beberapa elemen desain, Anda harus mengedit kode tema.

Misalnya, jika Anda ingin mengubah warna bagian header situs web Anda, Anda dapat melakukannya dengan mengedit stylesheet CSS untuk tema tersebut.

Anda juga dapat menambahkan kode HTML khusus ke situs web Anda, seperti menambahkan blok iklan ke tata letak beranda atau di dalam entri blog.

Cara Mengedit CSS di WordPress

Ada beberapa cara berbeda untuk mengedit dan menambahkan kode CSS di WordPress. Begini caranya.

catatan: Sebelum Anda melanjutkan, pastikan untuk membuat cadangan file tema Anda. Juga, perlu diingat bahwa setiap perubahan yang Anda buat pada file tema Anda akan hilang jika Anda memutuskan untuk memperbarui tema di masa mendatang. Atau pertimbangkan untuk menggunakan tema anak.

Metode 1: Edit CSS Menggunakan Editor Tema WordPress

Cara termudah untuk mengedit CSS di WordPress adalah dengan menggunakan editor tema.

edit css di wordpress 1

Login ke dashboard WordPress Anda dan pergi ke Appearance >> Theme Editor.

Dari sini, Anda dapat menemukan stylesheet CSS untuk tema Anda saat ini.

Klik pada file Style.CSS dan kemudian Anda dapat menggunakan editor untuk menambahkan atau mengedit kode CSS. Setelah melakukan perubahan, ingatlah untuk mengklik tombol Perbarui File untuk menyimpan perubahan.

Metode 2: Edit CSS Dari CPanel atau FTP

Anda juga dapat mengedit stylesheet tema dengan langsung mengedit file CSS di server. Ini dapat dilakukan dengan masuk ke server Anda melalui CPanel atau dengan menggunakan klien FTP.

edit css di cpanel 1

Saat menggunakan CPanel, cukup gunakan File Manager dan cari folder Public_HTML. Di sinilah file situs web Anda disimpan.

edit css di cpanel 2

Kemudian arahkan ke folder WP-Content >> Themes. Temukan folder untuk tema Anda saat ini. Di dalam folder, Anda akan menemukan file Style.CSS.

edit css di cpanel 3

Klik kanan pada file CSS dan pilih Edit untuk mulai menyesuaikan stylesheet.

Prosesnya sama saat menggunakan klien FTP. Kecuali Anda akan menggunakan rincian login FTP Anda untuk mengakses server. Anda akan menemukan detail ini di email pendaftaran hosting web Anda. Atau hubungi penyedia hosting web dan minta detail login.

Metode 3: Tambahkan Kode CSS Khusus di Penyesuai Tema

Jika Anda ingin menambahkan kode CSS khusus ke lembar gaya tema Anda tanpa harus mengedit file tema inti, Anda cukup menggunakan Penyesuai Tema.

tambahkan css di wordpress 1

Pergi ke Penampilan >> Sesuaikan. Kemudian cari opsi dengan nama yang mirip dengan CSS Kustom atau CSS Tambahan.

tambahkan css di wordpress 2

Dari bagian ini, Anda dapat dengan mudah menambahkan kode CSS khusus dan bahkan mendapatkan pratinjau langsung dari perubahan yang Anda buat.

Cara Mengedit HTML WordPress

Ketika datang untuk mengedit HTML, kami memiliki kabar baik dan kabar buruk. Berita buruknya adalah tidak ada cara langsung untuk mengedit HTML file tema Anda di WordPress karena tema WordPress dibuat dengan PHP. Kabar baiknya adalah Anda masih dapat menggunakan plugin untuk memasukkan kode HTML ke dalam tema Anda.

Berikut adalah beberapa plugin terbaik yang dapat Anda gunakan untuk mencapai tujuan.

Pembuat Kode WP

Plugin pembuat kode WP

WP Coder adalah alat serbaguna yang memungkinkan Anda menambahkan kode HTML khusus, kode CSS, dan bahkan skrip ke situs web Anda. Anda bahkan dapat menggunakannya untuk memasukkan file CSS khusus dalam tema Anda, seperti ikon Font Awesome dengan cukup mudah.

Head, Footer, dan Post Injection

injeksi header footer

Seperti namanya, plugin ini memungkinkan Anda memasukkan kode ke bagian header dan footer situs web. Ini juga mendukung penyuntikan kode ke dalam posting, seperti menambahkan iklan di dalam posting.

Penyisipan Iklan

penyisip iklan

Jika Anda ingin menambahkan blok iklan ke bagian tertentu dari situs web Anda, Ad Inserter adalah plugin ramah pemula yang dapat Anda gunakan. Ini memungkinkan Anda untuk dengan mudah menempatkan beberapa iklan yang menargetkan lokasi tertentu dari desain situs web Anda.

Kesimpulannya

Sekali lagi, kami menyarankan Anda untuk membuat cadangan file situs web Anda sebelum membuat perubahan atau mengedit file tema. Selain itu, Anda dapat merujuk ke dokumentasi tema atau menghubungi pengembang tema jika Anda mengalami kesulitan dalam mengedit desain.

Atau, pertimbangkan untuk beralih ke tema yang lebih baik. Kami memiliki kumpulan lebih dari 60 tema premium yang dapat Anda unduh dengan harga satu.