Cara Menambahkan Kode HTML Pada Website WordPress

wpjakarta – Menambahkan Kode HTML WordPress. Untuk memodifikasi website WordPress, selain menggunakan plugin. Sudah pasti harus menambahkan skrip kode kedalam website itu sendiri. Skrip kode yang digunakan paling umum untuk “mengconstruct” halaman website 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.

Menambahkan kode HTML 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.

Menambahkan kode HTML 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.

Menambahkan kode HTML WordPress Di Dalam Skrip PHP

Menambahkan Kode HTML 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. Tentunya dengan mengkatrol hook yang sesuai. Contohnya pada halaman login WordPress (/wp-login.php) sederhana berikut :

Pada halaman login tersebut di bagian login header kami tambahkan dengan gambar “wpJakarta.Com”. lalu di bagian bawah (footer)kami tambahkan element HTML teks “Please Dont Hack Me, I’Am Poor. \ (•◡•) / I Just run small business to feed my family”. Mengkatrol hook login_footer. Contoh element HTML di dalam PHP tersebut adalah sebagai berikut :

 function wpj_teks_login_footer() { ?>
     <h3 style="text-align:center;">Please Dont Hack Me, I'Am Poor.<br> 
     \ (•◡•) / <br>
     I Just run small business to feed my family.</h3>
   <?php 
 }
 
 add_action('login_footer','wpj_teks_login_footer()');