Posted on

Cara Menambahkan Kode HTML Pada Website WordPress

wpjakarta – Cara Menambahkan Kode HTML Pada Website WordPress. Untuk memodifikasi website WordPress, selain menggunakan plugin. Sudah pasti harus menambahkan skrip kode kedalam website itu sendiri. Skrip kode yang digunakan paling umum adalah bahasa pemrograman HTML, CSS, Javascript dan PHP. Tentunya skrip kode tersebut tidak bisa ditempatkan disembarang tempat.

HTML misalnya harus dituliskan secara berurutan sesuai dengan desain, layout atau kustomisasi yang kita inginkan. Lalu CSS juga harus memiliki “selector” yang tepat untuk dapat memberikan style dari sebuah element HTML yang dibuat tersebut. Lalu bagaimana dan dimana menempatkan kode-kode tersebut jika kita ingin memodifikasi atau memberikan sentuhan kustomisasi pada website WordPress ? Paling mudah memang dengan menginstall plugin. Meskipun mudah dan simple namun penggunaan plugin juga dirasa “kurang” leluasa. Cara lainnya adalah dengan menuliskan langsung pada halaman atau dengan menempatkannya didalam skrip PHP. Menuliskan kode “diyakini” lebih leluasa ketimbang harus menggunakan plugin.

Cara menambahkan kode HTML pada website WordPress menggunakan plugin

Beberapa plugin bisa digunakan untuk menuliskan kode HTML, salah satunya WP Coder yang “membawa” tiga kotak snippet “sekaligus” untuk HTML, CSS dan Javascript plus untuk mengupload media seperti gambar atau icon. Sehingga element yang ditambahkan bisa langsung diberikan style dengan kode CSS atau animasi dari kode javascript.

Cara menambahkan kode HTML pada website WordPress secara manual (tanpa plugin)

Selain dengan menggunakan plugin, HTML sudah pasti dapat dituliskan langsung pada halaman atau post dimana ingin ditambahkan element HTML tersebut. Jika menggunakan klasik editor pastikan untuk memilih “mode” penulisan “teks”. Atau pilih blok “HTML khusus” jika menggunakan editor blok “gutenberg”.

Pada blok editor atau mode teks html tersebut kita dapat menambahkan berbagai element HTML sesuai dengan metode penulisan atau patern HTML. Dimana biasanya kode html selalu di tulis dengan tanda baca / tag (< >). Element yang dihasilkan dari kode HTML yang ditambahkan mungkin masih terlihat kaku dan kurang menarik karena mengikuti “stylesheet” bawaan tema website. Untuk membuatnya lebih menarik, element HTML dapat “dihias” dengan menambahkan kode CSS.

Cara menambahkan kode HTML Di Dalam Skrip PHP Pada website WordPress

Metode lainnya memodifikasi atau mengkustomisasi website WordPress adalah dengan menambahkan kode HTML tersebut didalam skrip PHP yang sudah ada atau dari skrip fungsi PHP yang kita buat sendiri. Contohnya pada halaman login WordPress (/wp-login.php) sederhana berikut :

Sebelah kiri adalah form login WordPress secara default. Lalu dengan “merubah” fungsi existing yang sudah ada untuk menghilangkan “Lost your password?” , “Back to” dan menambahkan element HTML “Jaga kerahasiaan password anda. Hati-hati terhadap pihak yang mengatasnamakan kami”. Contoh element HTML di dalam PHP tersebut adalah sebagai berikut :

 function wpj_loginfooter() { ?> // Fungsi php
     <h3 style="text-align:center;">Jaga kerahasiaan password anda<br> // Element HTML
     Hati-hati terhadap pihak yang mengatasnamakan kami.</h3> // Element HTML
   <?php 
 }
 
 add_action('login_footer','wpj_loginfooter');