Ada beberapa orang yang masih bingung dengan format tulisan kode program di post wordpress. Beberapa bahkan bingung bagaimana cara menulis kode program di post wordpress. Beberapa dari mereka menuliskannya saat post berada di mode “Visual.” Jika kita ingin menuliskan code program di post wordpress, kita mesti menuliskannya di mode “Text.”

Mode Visual membaca kode program seperti text biasa dan tidak mengeksekusinya. Bahkan, kode < dan > akan dikonversi menjadi &lt; dan &gt;. Sebenarnya, keduanya adalah karakter yang equivalent untuk < dan > tetapi tenttunya tidak akan dibaca oleh web browser sebagai program.

Tetapi, ada yang belum tahu juga bahwa wordpress memiliki fitur “auto correction” jadi teks dikutip sesuai bahasa kita. Masalahnya, kode program tertentu bisa terbaca dan dieksekusi oleh browser. Ini terjadi karena HTML editor tidak mengkonversi karakter semacam ini.

Selain itu, ada juga penmggunaan kode yang membuat penampilan website kita menjadi lucu. Misalnya, kita ingin menunjukan kode diantara text atau paragraf dengan membuat <code></code>.

Seperti:

<code>wp_title()</code>,

<code>wp_content()</code>

<code>wp_footer()</code>

Cara penulisan diatas membuat text terlihat seperti kode komputer.

Tetapi, kita bisa mendapatkan masalah apabila kita salah meletakkan tulisan diatas. Misalnya:

Lihat ke <code><div class=”header”></code> bagian untuk mengganti <code><h1></code> heading.

WordPress sejatinya tidak akan memproses kode diatas. WordPress hanya mengerti bahwa tulisan semacam itu dibuat untuk keperluan membuat format saja. Jadi, cara penulisan diatas akan dibiarkan saja.

Masalahnya, browser membaca <code> yang diikuti <div> sebagai perintah membuat kontainer

Hasilnya adalah:

Kita bisa menghindari hal seperti ini dengan menggunakan apa yang disebut dengan “html entity” dari tanda panah < dan >. Gampangnya, ini merupakan karakter mirip yang dikenal oleh HTML.

Daftarnya antaralain:

< = &lt; atau &#60;

>= &gt; atau &#62;

/ = &#47; ] = &#93;

[ = &#91; ” = &quot; atau &#34;

‘ = &#39;

“ = &ldquo; atau &#8220;

” = &rdquo; atau &#8220;

‘ = &lsquo; atau &#8216;

’ = &rsquo; atau &#8217;

& = &amp; atau &#38;

Jadi, tanda & bisa diganti &amp; Untuk tanda panah < diatas, diganti saja menjadi &lt;

Untuk menulis apa adanya sesuai format yang ditulis dalam suatu file, bisa digunakan element HTML <pre>.

<pre> Kalau ditulis begini

  spasi, titik dan koma...akan 

      sama

     baik letak ataupun          tulisannya

</pre>

Masalah yang cukup sering terjadi adalah masalah di “auto correction” milik wordpress. Fitur ini aktif baik kita menulis secara visual atau menggunakan HTML editor. Fitur ini akan mengkonversi kutipan langsung dengan “tanda kutip” di pembikaan dan penutupannya.

Cara menghindarinya:

gunakan HTML entity seperti

<code>&lt;p class=&#34; blue&#34;&gt;</code>

ketimbang menulis seperti:

<p class=”blue”>

Jika kita ingin mengganti font dan warna:

pre, code{
 direction: ltr;
 text-align: left;
 }
 pre {border: solid 1px blue;
 font-size: 1.3 em;
 color: blue;
 margin: 10px;
 padding:10px;
 background: #FFFFB3}
 code {font-size:1.2em;
     color: #008099}

Hasilnya seperti ini:

Menulis program di post wordpress memang ada tantangannya tersendiri. Terkadang, kita mesti mengesampingkan fitur bawaan wordpress dan membuat fitur kita sendiri untuk “memperbaiki” hasil akhirnya.