Yazı İçinde HTML Kodlarını Kullanmak

Diyelim bir WordPress siteniz var. Bir kodu örnek vermeye çalışıyorsunuz. Yazı içinde bunu kullandığınızda gerçek bir kod gibi işlem görür. Halbuki sizin istediğiniz o örneği vermektir.
Bir örnekle açıklayalım. Siz engelliler ve web standartları için bir resmin üzerine gelindiğinde yazı çıkması gerektiğini anlatıyorsanız. “alt” tagının kullanılması gerektiğini örneklemek istersiniz.

İlgili komutu doğrudan img HTML etiketi ile kullanırsanız sayfada sadece sonuç görünür. Komut görünmez. Bunun için bir kaç metot var. Sitede kullanırken biraz uğraştım, gerekli alternatifleri size de sunmak istedim.

İlk olarak PRE ve CODE isimli etiketler kullanılır. Ancak code içindeki her komut encoding dediğimiz dönüştürmeden geçirilmelidir.
Bu Encoding işlemi için bazı siteler yararlı olacaktır. Mesela: http://centricle.com/tools/html-entities/

Böylece biz sitemize şu kodları yazarız.

<pre>
<code>
&lt;img src=&quot;https://www.gunesintamicinde.com/resim/openofficebutton.jpg&quot; alt=&quot;OpenOffice&quot;&gt;
</code>
</pre>

Görüntülenecek sonuç ise şöyle olur.

<img src="https://www.gunesintamicinde.com/resim/openofficebutton.jpg" alt="OpenOffice">

Bu komutu alıp kullananlar için ise gerçek sonucu ise bu imaj olur.

Ayrıca yazılacak kod eğer sayfa yapısını bozacak şekilde uzunsa siz onu textarea içine de alabilirsiniz.
Bu sefer

<pre>
<code>
<textarea rows="5" cols="80">
&lt;img src=&quot;https://www.gunesintamicinde.com/resim/openofficebutton.jpg&quot; alt=&quot;OpenOffice&quot;&gt;
</textarea>
</code>
</pre>

Sonucu aşağıdaki gibi olur.

<img src="https://www.gunesintamicinde.com/resim/openofficebutton.jpg" alt="OpenOffice">

PEKİ BU İŞ FAZLA SIKICI GELİRSE NE YAPARSINIZ?

Bir WordPress plugini / eklentisi bulursunuz.

http://www.thunderguy.com/semicolon/wordpress/code-markup-wordpress-plugin
adresinde görüldüğü gibi eklenti indirilip eklentiler klasörüne gönderilince işler daha kolaylaşır 🙂

Kaynakça:
http://wordlog.com/archives/2007/05/13/displaying-html-source-code-in-your-blog-posts/