Cara Menulis Kode Kustom di Postingan WordPress Anda
Ada banyak alasan mengapa Anda ingin menulis atau memasukkan kode tambahan di postingan WordPress Anda. Anda mungkin perlu menampilkan iklan, menerapkan gaya unik pada bagian tertentu di situs web Anda, atau sekadar menandai beberapa teks atau konten untuk menarik perhatian. Namun, Anda dapat menambahkan kode untuk mendapatkan berbagai efek visual guna menawarkan pengalaman pengguna yang lebih baik.
Semua ini dan lainnya adalah alasan yang sah, tetapi apa pun yang ingin Anda capai dengan kode khusus, proses penulisan kode bisa sangat menegangkan atau menantang! Dalam tutorial ini, kita akan membahas bidang-bidang berikut:
- Menambahkan kode yang terlihat seperti kode tetapi tidak berperilaku seperti kode (jika Anda ingin menampilkan baris kode atau meningkatkan tampilan situs web Anda)
- Menambahkan kode yang dimaksudkan untuk berperilaku seperti kode, mis. Iklan bernaskah seperti Iklan Google Adsense
Di bawah dua kategori ini, kita akan mempelajari sedikit kode pemrograman seperti HTML, CSS, Javascript dan menyentuh iklan serta keindahan wadah <div>. Sekarang, tanpa keriuhan lebih lanjut, mari kita langsung ke pokok permasalahan dan menulis beberapa kode.
Menambahkan Kode Yang Terlihat Seperti Kode Namun Tidak Berperilaku Seperti Kode
Jika Anda ingin menampilkan kode (mungkin Anda seorang desainer atau pengembang web) yang dapat disalin dan ditempel oleh pengguna, penting untuk melakukannya dengan benar karena bahkan satu baris saja dapat mengacaukan kode, sehingga mengganggu seluruh pekerjaan Anda. Cara kode Anda ditafsirkan oleh WordPress bergantung pada apakah Anda menggunakan editor HTML atau Visual Post. Memasukkan kode Anda langsung ke editor visual tidak akan memberikan efek yang Anda inginkan, karena editor visual menganggap kode tersebut sebagai teks biasa, artinya browser web tidak akan menafsirkan kode Anda sebagai “kode”, tetapi sebagai teks biasa.
Di sisi lain, HTML Post Editor akan mengenali markup HTML atau CSS apa pun yang Anda gunakan, artinya markup tersebut akan diinterpretasikan oleh browser web, suatu hal yang mungkin mengakibatkan tata letak kacau dan konten tampak funky. Misalnya, <div> di editor visual akan ditafsirkan sebagai teks biasa dan hasilnya hanya <div>. Namun, <div> di editor HTML akan diartikan sebagai markup HTML dan hasilnya adalah pembuatan container.
Latihan HTML
Ini benar-benar latihan yang sia-sia, tetapi Anda dapat mencobanya untuk mendapatkan gambaran yang lebih jelas tentang apa yang saya maksud. Cukup buka editor HTML Anda, ketik <div> dan simpan sebagai draf. Setelah draf Anda disimpan, klik “Pratinjau Postingan” untuk melihat situs web Anda yang rusak. Jangan khawatir, ini tidak permanen dan Anda dapat membuang drafnya begitu saja. Sekarang kembali ke bisnis.
Umumnya, Anda dapat menggunakan kode dengan dua cara. Pertama, Anda dapat menggunakan kode dalam satu baris (atau paragraf) untuk memperjelas suatu hal tentang kode Anda. Kedua, Anda dapat menulis, menyorot, dan meletakkan kode Anda di blok seperti ini:
<html>
<head>
<title>Writing Code in WordPress Posts Tutorial</title>
<link rel="stylesheet" type="text/css" href="somefile.css"/>
</head>
<body>...</body>
</html>
Untuk mencapai efek di atas, kita menggunakan tag kode yang ditulis seperti …kode kita ada di sini . Gantikan tanda panah (<  >) dengan tanda kurung siku ( [ ] ) bergantung pada situs WordPress Anda dan editor postingan yang Anda gunakan (visual atau HTML). Kode yang ingin Anda tampilkan harus berada di antara tag pembuka,  dan tag penutup, . Misalnya, untuk menggunakan kode dalam paragraf:
Tag kode membuat teks non-HTML terlihat seperti kode, namun tidak memerintahkan browser web untuk menafsirkan markup HTML atau menghapusnya dari postingan. Artinya, browser masih dapat menyandikan markup HTML Anda sehingga menyulitkan untuk menampilkan tag HTML dalam kode Anda. Namun, Anda dapat mengatasi masalah ini dengan menggunakan karakter tambahan atau entitas karakter untuk mewakili karakter < >, yang akan menipu setiap browser. Misalnya…
…akan membuat wadah baru (berkat <div>) dan judul ( <h1>), yang akan mengacaukan halaman web Anda. Namun jika Anda menggunakan entitas karakter untuk menggantikan panah < >, Anda akan menghindari perilaku ini dan menampilkan kode sesuai keinginan. Oleh karena itu, kode di atas akan terlihat seperti ini:
Buat Blok Kode yang Disorot
Jika saya ingin menyorot satu blok kode (atau bahkan teks) untuk mendapatkan sesuatu seperti;
Saya mulai dengan meletakkan kode (atau teks) dalam wadah seperti:
Lalu saya menambahkan gaya menggunakan CSS baik secara langsung (seperti pada gambar di atas) atau melalui file style.css yang ada di folder utama tema Anda.
Gaya Tag Kode Anda
Tag kode akan menggunakan ukuran font dari <body> dan meletakkan teks dalam font monospace secara default. Anda dapat mengubah semua itu agar kode Anda terlihat sesuai keinginan Anda. Yang perlu Anda lakukan hanyalah menambahkan…
code{font-size:1.2em; color:#000; font-weight:normal;} …atau sesuatu yang mirip dengan style.css Anda. Ada gaya yang tidak terbatas dan semuanya bergantung pada preferensi pribadi Anda, jadi jangan menahan diri – tinggalkan gaya.
Menambahkan Kode Yang Berperilaku Seperti Kode
Bagian ini sangat berguna jika Anda ingin menampilkan iklan atau skrip lain, misalnya. Cuplikan Javascript dalam postingan Anda. Meskipun ada plugin, seperti Quick Adsense, yang akan membantu Anda mengelola iklan di postingan Anda, Anda mungkin tertarik untuk memasang skrip mandiri yang dapat Anda kendalikan sepenuhnya.
Jika iklan Anda berupa gambar sederhana dan tautan, Anda dapat menambahkan iklan tersebut ke postingan Anda melalui utilitas pengunggahan. Cukup unggah gambar dan masukkan tautan Anda (dan mungkin keterangannya) dan pekerjaan Anda selesai. Namun metode ini terbatas karena Anda hanya dapat menyelaraskan iklan Anda ke kiri, ke kanan, atau ke tengah – seperti gambar pada umumnya. Alternatifnya, Anda dapat membuat wadah di dalam postingan Anda menggunakan editor HTML.
Contoh :
<div id="ad1">
<a href="ad_link"><img src="image_location" height="yy" width="xx" alt="Ad_title"/>
</a>
</div>
Buat wadah ini tepat di tempat yang Anda inginkan untuk beriklan, artinya Anda harus menyiapkan postingan sebelum menambahkan iklan. Setelah wadahnya siap, Anda dapat menatanya sesuka Anda. Anda dapat memindahkannya menggunakan style.css Anda dengan menggunakan properti position. Jika Anda ingin menjalankan iklan Google Adsense dalam postingan Anda, Anda masih dapat menggunakan Quick Adsense – plugin – atau membuat wadah dan menempatkan kode iklan Anda seperti ini:
<div id="ad1">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Catatan 1: Iklan Google berbasis Javascript, dan dapat ditafsirkan oleh semua browser web utama asalkan pengguna telah mengaktifkan Javascript di mesin mereka.
Catatan 2: Anda harus memilih dimensi Iklan yang tepat untuk situs web Anda agar tidak mengacaukan postingan dan situs web Anda.
Jika Anda ingin menambahkan iklan permanen yang akan muncul di semua postingan Anda (postingan saat ini dan yang akan datang) tanpa perlu melakukan pekerjaan tambahan, Anda perlu mengedit template Postingan Tunggal (single.php ). Saya menempatkan iklan berukuran 468px x 60px di bagian atas semua postingan saya dengan menambahkan kode berikut ke single.php tepat setelah < – – END post-entry-meta – ->.
<div id="ad1"> <script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Pastinya harus pakai Google Ads sendiri ? Beginilah tampilan iklan Google Adsense di blog saya:
Untuk menemukan single.php, buka Panel Administrasi –>> Tampilan –>> Editor –>> single.php. Setelah single.php terbuka, gunakan pencarian bilah (Ctrl + F) untuk mencari lokasi < – – END post-entry-meta – ->.
Anda dapat membiarkan penampung apa adanya atau menatanya menggunakan style.css sesuai keinginan Anda. Dan ingatlah untuk menyimpan semua perubahan. Wadah <div> sangat berguna, dan ketika Anda memasangkannya dengan CSS dan sedikit kreativitas, Anda dapat mencapai banyak hal dengan situs WordPress Anda. Ini dapat membantu Anda menempatkan kode apa pun (atau apa pun) di mana pun di situs web Anda.
Kotak Peralatan
Jika Anda ingin mempelajari lebih lanjut tentang menulis kode khusus di postingan WordPress Anda, silakan lihat sumber daya berikut:
- Menulis Kode di Postingan Anda
- Entitas Karakter yang Menyenangkan
- Menggunakan Javascript di Postingan
- Menggunakan HTML di Postingan WordPress
- Menulis Kode WordPress yang Aman (Slideshare)
Ya, itu saja. Kami telah berhasil mencakup area yang kami uraikan di awal. Namun jika Anda belum memahami konsep apa pun dalam postingan ini, atau Anda ingin menambahkan saran atau pandangan, silakan bagikan pemikiran Anda di bagian komentar di bawah!