Bagaimana cara mengedit konten di wordpress html?

Salah satu daya tarik utama penggunaan WordPress adalah Anda dapat membangun situs web tanpa menyentuh satu baris kode pun, tetapi Anda masih memiliki kebebasan penuh untuk mengedit kode sumber jika diinginkan.  

Jika Anda tahu cara menambahkan kode ke WordPress dengan aman, Anda dapat mengubah desain dan fungsionalitas situs web untuk mempermudah pekerjaan Anda. Jenis kode apa yang Anda putuskan untuk dimasukkan terserah Anda. Di WordPress, Anda biasanya berurusan dengan HTML, CSS, dan PHP

Pada artikel ini, kami akan memberi tahu Anda apa yang harus dilakukan sebelum Anda mulai menambahkan dan mengedit kode di WordPress. Kemudian kami akan menunjukkan cara menyisipkan HTML, CSS, dan PHP ke situs web Anda. Kami akan membahas beberapa pendekatan untuk menambahkan dan mengedit kode untuk setiap bahasa

Apa yang harus dilakukan sebelum Anda mengedit kode di WordPress

Mengedit kode yang ada dalam file inti situs Anda atau menambahkannya selalu berisiko. Jika ada kesalahan atau Anda merusak fungsi yang ada, situs web Anda mungkin berhenti berfungsi

Dimungkinkan untuk memperbaiki situs web dengan kesalahan dalam kodenya. Namun, kecuali Anda memiliki pengalaman pengembangan, mempersempit kode persis yang menyebabkan masalah bisa menjadi suatu tantangan.  

Dengan mengingat hal itu, kami menyarankan Anda mengambil beberapa langkah untuk mengamankan situs web Anda sebelum mulai menambahkan atau mengedit kode. Pikirkan tentang proses ini sebagai menciptakan lingkungan yang aman untuk menghindari masalah di kemudian hari

1. Cadangkan situs web Anda

Apa pun jenis situs yang Anda miliki, pencadangan sangatlah penting. Mengapa?

Dengan kata lain, mencadangkan situs Anda adalah cara terbaik untuk melindungi situs web Anda jika terjadi kesalahan

Untuk mempermudah proses ini, sebaiknya gunakan plugin untuk mengurus semuanya secara otomatis atau membuat salinan situs web Anda sesuai permintaan.  

Tentu saja, kami merekomendasikan Pencadangan Jetpack — solusi lengkap yang bekerja secara real-time

Dengan Jetpack, cadangan disimpan dengan aman di luar situs di cloud, sehingga tidak ada beban di server Anda. Dan karena pencadangan diambil setiap kali ada perubahan di situs Anda, Anda dapat dengan cepat memulihkannya tepat sebelum terjadi kesalahan, bahkan jika situs Anda benar-benar luring.  

Namun, jika Anda memilih untuk menggunakan plugin pencadangan lain, sebaiknya lakukan pencadangan manual lengkap sebelum melanjutkan dengan langkah-langkah di bawah ini

2. Gunakan tema anak WordPress

Ukuran ini hanya berlaku jika Anda berencana untuk mengedit tema Anda. WordPress memungkinkan Anda untuk membuat perubahan apa pun yang Anda inginkan pada kode tema apa pun, tetapi ketika Anda memperbarui ke versi tema yang baru, penyesuaian apa pun akan hilang

Untuk mencegahnya, Anda harus menggunakan tema anak. Tema anak adalah tema sekunder yang menarik fitur, fungsionalitas, dan gaya dari tema induknya, tetapi itu tidak berubah saat Anda memperbarui induknya. Artinya, kode yang Anda tambahkan ke tema anak tidak akan terhapus saat Anda memperbarui tema induk

Meskipun Anda dapat membuat tema anak secara manual, sebaiknya gunakan plugin. Salah satu alat terbaik untuk pekerjaan itu adalah Child Theme Configurator

Aktifkan plugin dan buka Alat → Tema Anak. Pilih opsi untuk membuat tema anak baru dan pilih tema Anda saat ini sebagai induk

Klik Analisis, dan plugin akan memeriksa untuk melihat apakah itu dapat membuat tema anak untuk pilihan Anda. Di bawah Pilih tempat untuk menyimpan gaya baru, pilih opsi Lembar Gaya Utama.  

Untuk opsi penanganan stylesheet Select Parent Theme, klik Use the WordPress style queue

Anda juga dapat menyesuaikan atribut tema anak. Ini termasuk nama, penulis, dan deskripsi yang akan muncul saat Anda menavigasi ke Penampilan → Tema

Atribut yang Anda pilih hanya untuk penggunaan internal. Setelah Anda puas dengan pengaturannya, klik Buat Tema Anak Baru.  

Jika Anda menavigasi ke Tema → Tampilan, tema anak baru akan muncul di antara tema yang tersedia

Setelah tema anak disiapkan, Anda dapat mulai menambahkan kode khusus ke dalamnya. Jika Anda tidak yakin bagaimana proses itu bekerja, teruslah membaca. Kami akan menunjukkan cara mengedit CSS dan HTML di WordPress di bagian berikut

3. Gunakan situs pementasan

Seluruh tujuan situs web pementasan adalah untuk membantu Anda menguji kode baru dan perubahan pada situs Anda di lingkungan yang aman. Dengan situs pementasan WordPress, Anda dapat menambahkan kode tanpa harus khawatir tentang kesalahan kritis atau waktu henti di situs web langsung Anda

Biasanya, host web Anda akan menawarkan fungsionalitas pementasan. Ada beberapa opsi untuk plugin pementasan WordPress, tetapi agak canggung untuk digunakan. Jika Anda dapat mengakses fungsionalitas pementasan melalui panel kontrol hosting Anda, akan lebih mudah untuk membuat salinan situs Anda dan mendorong perubahan dari pementasan ke produksi

Cara mengedit kode HTML, CSS, dan PHP di WordPress (10 metode)

Mempelajari cara mengedit kode di WordPress jauh lebih mudah daripada yang Anda kira. Namun, prosesnya akan berubah tergantung pada jenis kode yang ingin Anda gunakan. Mari kita mulai dengan berbicara tentang menambahkan HTML menggunakan Editor Blok dan Klasik

1. Cara mengedit HTML di Editor Blok

Metode ini memungkinkan Anda untuk mengedit halaman atau posting apa pun yang ada menggunakan HTML di dalam Editor Blok. Ini adalah metode langsung yang seharusnya tidak menimbulkan masalah apa pun jika Anda terbiasa dengan Editor Blok.  

Untuk memulai, buka editor. Setelah Anda dapat melihat isi halaman atau postingan, klik ikon tiga titik di pojok kanan atas layar

Sekarang klik pada opsi yang mengatakan Editor kode

Tampilan di badan editor akan beralih dari blok ke kode. Untuk setiap blok, Anda akan melihat bagian kode HTML yang berbeda

Perlu diingat bahwa editor kode WordPress tidak menyertakan fungsi penyorotan apa pun. Itu berarti semua kode akan muncul sebagai teks biasa. Anda harus membaca dengan cermat jika ingin mengubah atau menambahkannya.  

Anda dapat beralih bolak-balik antara antarmuka visual dan kode di Editor Blok. Saat Anda puas dengan hasilnya, simpan perubahan ke pos atau halaman Anda

2. Cara mengedit HTML di Editor Klasik

Mengedit kode HTML menggunakan Editor Klasik sangatlah mudah. Buka halaman atau postingan yang ingin Anda kerjakan dan temukan tab Teks di atas badan dokumen.  

Klik tab Teks, dan Anda akan melihat konten tab Visual muncul dalam format teks biasa. Secara default, teks apa pun yang Anda tambahkan tanpa pemformatan tidak akan menyertakan kode HTML apa pun

Anda dapat menambahkan pemformatan dan kode HTML dengan cepat menggunakan tombol di bagian atas editor. Editor Klasik menyertakan opsi untuk teks tebal atau miring, tautan, gambar, daftar, dan jenis kode lainnya

Ada juga opsi untuk menambahkan kode HTML secara manual. Jika Anda terbiasa dengan HTML, Anda dapat menyisipkan atau mengeditnya di dalam tab Teks sesuai keinginan. Editor memungkinkan Anda untuk beralih antara tab Visual dan Teks untuk melihat hasilnya

3. Cara mengedit HTML menggunakan Theme Editor

WordPress memungkinkan Anda mengakses dan mengedit file tema langsung dari dasbor Anda. Namun jika Anda berencana untuk mengedit file tema, sebaiknya siapkan tema anak terlebih dahulu.  

Untuk mengakses editor tema, buka Penampilan → Editor file tema. Di halaman berikutnya, Anda akan melihat editor teks biasa di sebelah kiri dan daftar file di sebelah kanan. Daftar file tersebut sesuai dengan tema yang Anda pilih dari menu dropdown kanan atas

Secara default, editor tema akan terbuka dengan Style. file css untuk tema yang sedang Anda kerjakan. Sebagian besar file tema yang dapat Anda akses menggunakan editor melibatkan CSS atau PHP. Tetapi Anda dapat mengedit beberapa komponen tema menggunakan HTML

Namun, dalam banyak kasus, tema anak hanya memiliki gaya. css dan fungsi. file php secara default. Jadi jika Anda ingin mengedit file HTML, seperti footer. html, Anda harus menyalinnya ke tema anak sebelum membuat perubahan apa pun menggunakan alat protokol transfer file (FTP) atau panel kontrol penyedia hosting Anda.  

Dengan menggunakan alat pilihan Anda, buka public_html → konten-wp → tema → tema induk Anda. Temukan file HTML yang ingin Anda edit dan salin ke folder tema anak Anda. Kemudian, file itu akan terlihat di Editor Tema WordPress

Anda dapat menemukan file HTML Anda di Editor Tema dengan memilih tema anak Anda dari dropdown di kanan atas halaman, lalu mengklik file dari daftar yang muncul

Kami menyarankan untuk tidak melakukan perubahan apa pun saat Anda mengedit file tema kecuali Anda benar-benar memahami fungsi kode Anda. Jika tidak, Anda berisiko merusak fitur penting dalam tema dan situs web Anda.  

4. Cara mengedit CSS dan PHP di Theme Editor

Untuk mengakses editor tema WordPress, buka Penampilan → Editor file tema. Anda akan melihat daftar file yang dapat Anda edit untuk tema aktif Anda di layar berikutnya. Di sebelah kiri, Anda akan melihat tab editor yang menampilkan konten file yang Anda pilih

Secara default, editor tema akan terbuka ke stylesheet. Gaya. File css akan berisi semua gaya CSS untuk tema. Ini termasuk kelas, ID, gaya tombol, dan banyak lagi

Anda dapat membuat perubahan apa pun yang Anda inginkan pada gaya. file css. Setelah selesai, klik Perbarui File untuk menyimpan perubahan

Proses yang sama berlaku untuk file PHP. Pilih. php yang ingin Anda edit menggunakan menu di sebelah kanan. Dalam contoh ini, kami sedang mengedit fungsi. file php

Mengedit kode PHP bisa lebih rumit daripada bekerja dengan HTML atau CSS. Dengan yang terakhir, jika Anda membuat kesalahan, itu dapat memengaruhi gaya situs web Anda. Sebaliknya, kode PHP yang tidak berfungsi dapat menyebabkan fungsionalitas rusak

5. Mengedit HTML di widget WordPress

Seperti yang Anda ketahui, versi terbaru WordPress memungkinkan Anda mengedit widget menggunakan blok. Itu berarti alih-alih widget klasik, Anda dapat menggunakan rangkaian lengkap elemen Editor Blok di area widget Anda

Untuk mengedit area widget Anda, buka Penampilan → Widget. Di sini, Anda dapat mengedit bagian widget yang tersedia untuk tema Anda

Beberapa blok dapat menambahkan HTML khusus ke area widget Anda. Klik tombol tanda plus di sebelah tajuk Widget dan pilih blok HTML Khusus

Tambahkan kode yang Anda inginkan di dalam blok dan pindahkan untuk mengubah penempatannya. Setelah selesai, klik tombol Perbarui di sudut kanan atas layar

6. Mengedit HTML melalui cPanel

Jika host web Anda menawarkan instalasi cPanel untuk akun Anda, Anda dapat menggunakannya untuk mengelola dan mengedit file situs web Anda.  

Untuk memulai, masuk ke akun cPanel Anda dan cari opsi File Manager di bawah FILES

File Manager memungkinkan Anda untuk menavigasi file akun hosting Anda. Bergantung pada struktur server Anda, Anda mungkin menghadapi beberapa folder.  

Cari opsi yang bertuliskan public_html atau www. Direktori tersebut harus berisi file situs WordPress Anda

Ini disebut direktori root WordPress. Setelah Anda membukanya, Anda akan menemukan beberapa subdirektori dan file yang sesuai dengan situs web WordPress Anda. Jika Anda mengklik kanan salah satu file ini, Anda akan melihat opsi Edit

Mengklik opsi itu akan meluncurkan editor teks cPanel. Editor ini sangat barebone dibandingkan dengan perangkat lunak apa pun yang diinstal secara lokal. Kami hanya menyarankan Anda menggunakannya untuk melakukan sedikit pengeditan HTML

Untuk pembaruan kode yang lebih kompleks, Anda sebaiknya menggunakan File Transfer Protocol (FTP) dan editor teks lokal. Kami akan menunjukkan cara melakukannya di bagian selanjutnya

7. Mengedit HTML, CSS, dan PHP menggunakan FTP

FTP memungkinkan Anda untuk terhubung ke server situs web Anda sehingga Anda dapat mengedit dan mengunggah file. Dengan FTP, Anda dapat dengan mudah mengunggah file dalam jumlah besar. Proses ini akan memakan waktu dan sulit jika Anda mencoba melakukannya langsung melalui dashboard WordPress

Lebih penting lagi, FTP dapat mengedit file WordPress dan menambahkan kode HTML, CSS, atau PHP menggunakan editor teks lokal pilihan Anda.  

Untuk terhubung ke situs web Anda melalui FTP, Anda memerlukan klien (seperti FileZilla) dan sekumpulan kredensial. Sebagian besar host web memberi Anda kredensial FTP saat mendaftar. Jika tidak, Anda seharusnya dapat membuat akun FTP baru melalui panel kontrol hosting

Masukkan kredensial FTP Anda ke klien FTP pilihan Anda dan sambungkan ke server. Setelah Anda membuat koneksi, Anda akan melihat daftar folder dan file

Dengan koneksi FTP, Anda mendapatkan akses penuh ke setiap file dan folder di dalam akun Anda. Untuk menemukan file WordPress Anda, cari direktori bernama public, public_html, atau www. Itu adalah nama paling umum untuk direktori root WordPress

Buka direktori dan cari file yang ingin Anda edit. Klik kanan padanya dan pilih opsi yang bertuliskan Edit. Dalam contoh ini, kami menggunakan FileZilla, jadi menunya bertuliskan View/Edit

Opsi Lihat/Edit akan membuka file menggunakan editor teks default lokal Anda. Tidak seperti cPanel atau WordPress, editor khusus membuat penambahan dan interaksi dengan kode menjadi lebih mudah.  

Dalam contoh ini, kami mengedit wp-config. php, yang merupakan file inti WordPress

Anda dapat menambah atau mengedit semua jenis kode yang Anda inginkan menggunakan editor teks. Itu termasuk HTML, CSS, dan PHP. Satu-satunya batasan adalah pengetahuan Anda tentang setiap bahasa tertentu

Setelah Anda selesai menambahkan atau mengedit kode WordPress, simpan perubahan ke file dan tutup. Klien FTP Anda akan menanyakan apakah Anda ingin mengganti versi file yang ada di server. Pilih Ya, dan hanya itu

8. Menambahkan kelas CSS menggunakan Editor Blok

Jika Anda ingin menggunakan CSS untuk menyesuaikan tampilan blok, Editor Blok memungkinkan Anda menambahkan kelas ke elemen apa pun. Proses ini juga sangat mudah.  

Untuk menambahkan kelas CSS ke blok, klik di atasnya dan buka tab Pengaturan. Kemudian, cari tab Advanced di bagian bawah pengaturan blok

Anda dapat menggunakan kolom kelas CSS tambahan untuk menambahkan satu atau beberapa kelas CSS ke blok tertentu. Efek kelas-kelas tersebut akan bergantung pada CSS khusus WordPress yang Anda tambahkan

9. Cara mengedit CSS di WordPress Customizer

Penyesuai WordPress dapat membuat perubahan di seluruh situs pada gaya dan tata letak situs web Anda melalui antarmuka visual.  

Untuk mengakses Penyesuai, buka Penampilan → Sesuaikan. Di layar berikutnya, Anda akan melihat menu di sebelah kiri dan pratinjau situs Anda di sebelah kanan

Tab CSS tambahan akan memberi Anda akses ke editor dasar untuk menambahkan CSS khusus ke situs web Anda

Menambahkan CSS menggunakan penyesuai WordPress memungkinkan Anda melihat pratinjau perubahan secara instan.  

10. Mengedit CSS menggunakan plugin WordPress

Beberapa plugin WordPress menawarkan metode alternatif untuk menambahkan kode khusus ke WordPress. Dalam kebanyakan kasus, plugin ini berfokus untuk membantu Anda menambahkan CSS atau JavaScript kustom WordPress.  

Salah satu contohnya adalah Simple Custom CSS dan JS. Plugin khusus ini dapat menambahkan kode CSS, JS, dan HTML khusus ke WordPress dari menu sederhana

Memilih opsi Tambahkan Kode CSS akan membuka editor. Anda dapat menggunakan editor itu untuk memasukkan CSS khusus dan memilih ke mana kode akan dimasukkan ke dalam file Anda

Meskipun menambahkan CSS khusus dengan plugin itu sederhana, kami menyarankan untuk tidak menggunakan metode ini. WordPress memberi Anda banyak opsi bawaan untuk menambahkan dan mengedit kode CSS. Jika Anda menginginkan pendekatan yang lebih praktis, Anda selalu dapat menggunakan FTP

Jika Anda mengandalkan plugin untuk menambahkan CSS khusus, kode tersebut mungkin hilang jika Anda menghapus instalan plugin. Selanjutnya, plugin yang berbeda akan menambahkan kode menggunakan metode unik, sehingga hasil Anda akan bervariasi tergantung pada alat yang Anda gunakan

Bisakah Anda menambahkan kode JavaScript ke WordPress?

WordPress tidak menyediakan fungsionalitas bawaan apa pun untuk menambahkan kode JavaScript ke situs web Anda. Berbeda dengan HTML dan CSS, satu-satunya pilihan Anda dengan JavaScript adalah menggunakan plugin atau menambahkan kode secara manual melalui editor tema atau FTP

Biasanya, cara termudah untuk menambahkan kode JavaScript adalah dengan menggunakan plugin. Jika Anda memilih pendekatan manual, Anda dapat menggunakan JavaScript dengan WordPress dengan fungsi “enqueueing” PHP

Untuk mempelajari lebih lanjut, lihat panduan kami tentang cara menambahkan JavaScript ke WordPress

Haruskah Anda mengoptimalkan kode WordPress Anda untuk kinerja yang lebih baik?

Optimalisasi kode adalah istilah luas yang mencakup beberapa praktik. Ini memastikan bahwa kode Anda berjalan semulus mungkin dan tidak memakan banyak ruang server.  

Pada umumnya, cuplikan kode tidak boleh menghabiskan terlalu banyak penyimpanan. Tetap saja, Anda dapat mengurangi ruang yang ditempati menggunakan “minifikasi. ”

Minifikasi mengambil HTML dan CSS khusus Anda dan menghapus spasi kosong atau karakter yang tidak perlu. Sebagai contoh, inilah cuplikan CSS khusus sederhana

p {
  text-align: center;
  color: red;
} 

Jika Anda mengambil kode itu dan mengecilkannya, itu akan terlihat seperti ini

p{text-align:center;color:red}

Keluaran kode tetap sama, tetapi ukuran file yang dihasilkan bisa lebih kecil. Dalam praktiknya, meminimalkan kode HTML dan CSS seringkali tidak memberi Anda hasil yang signifikan.  

Pengecualiannya adalah saat Anda berurusan dengan pustaka kode yang sangat besar. Pengurangan ukuran apa pun akan menyebabkan waktu pemuatan yang lebih singkat bagi pengunjung

Selain itu, pilih sumber kode pihak ketiga dengan hati-hati. Mengandalkan situs web terkemuka dan forum pengembang pakar dapat memastikan bahwa kode Anda efektif, aman, dan fungsional. Sebaliknya, cuplikan acak dari blog yang tidak dikenal cenderung menyebabkan masalah, memperlambat situs Anda, dan berpotensi merusaknya.  

Kustomisasi WordPress menggunakan HTML, CSS, dan PHP

Belajar menambahkan dan mengedit kode di WordPress lebih mudah dari yang Anda kira. Bahkan jika Anda bukan seorang pengembang, Anda sering dapat menemukan kode yang sesuai dengan kebutuhan Anda dengan sedikit Googling. Mengetahui cara memasukkan kode itu dengan aman dapat memungkinkan Anda untuk menyesuaikan situs web Anda dengan cara yang mungkin tidak dapat dilakukan oleh plugin saja

Sebelum Anda mulai membuat perubahan apa pun pada kode situs Anda, sebaiknya buat cadangan lengkap. Jika Anda akan mengedit CSS atau PHP tema Anda, Anda juga ingin menggunakan tema anak. Bergantung pada host web mana yang Anda gunakan, Anda mungkin juga memiliki akses ke fungsi pementasan. Kami merekomendasikan penggunaan situs pementasan saat mengedit kode untuk tujuan keamanan

Catatan ini telah diposting di Pelajari. Tandai permalink

Simon telah bekerja di bidang pemasaran dan pengembangan produk selama lebih dari 10 tahun, sebelumnya di HubSpot, Workday, dan sekarang Automattic (Jetpack). Dia memiliki pendidikan yang bervariasi, dengan gelar di bidang teknik kimia dan master di bidang ilmu komputer atas namanya. Semangatnya adalah membantu orang dan bisnis mereka tumbuh

Bagaimana Anda mengedit konten file HTML?

Bagaimana cara mengedit file konten di WordPress?

Bagaimana cara mengedit halaman HTML yang ada?

Bagaimana cara mengakses file HTML di WordPress?