WordPress sitenizde nasıl kod gösterebilirsiniz?

WordPress blog içeriğinde kod görüntülemek ister misiniz? Normal metin gibi bir kod eklemeye çalışırsanız, WordPress doğru şekilde görüntülemeyecektir.

WordPress, bir gönderiyi her kaydettiğinizde içeriğinizi birkaç temizleme filtresinden geçirir. Bu filtreler, birisinin web sitenizi hacklemek için içerik aracılığıyla kod enjekte etmediğinden emin olmak için vardır. Bu yazıda, WordPress sitenizde kolayca kod görüntülemek için size farklı yöntemler göstereceğiz ve ihtiyaçlarınıza en uygun olanı seçebilirsiniz.

1 – Varsayılan düzenleyiciyi kullanarak kodu görüntüleme

Bu yöntem, yeni başlayanlar ve çok sık kod görüntülemesi gerekmeyen kullanıcılar için önerilir. Kodu görüntülemek istediğiniz blog yazısını veya sayfasını düzenlemeniz yeterlidir. İçerik düzenleme ekranında, gönderinize yeni bir kod bloğu ekleyin.

Artık kod pasajını blokun metin alanına girebilirsiniz.  Bundan sonra, yazınızı kaydedebilir ve kod bloğunun çalışmakta olduğunu görmek için önizlemesini görüntüleyebilirsiniz.

2 – Bir eklenti kullanarak kod görüntüleme

Bu yöntem için, blog yazılarınızdaki kodu görüntülemek için bir WordPress eklentisi kullanacağız. Bu yöntem, makalelerinde sıklıkla kod görüntüleyen kullanıcılar için önerilir.

Varsayılan kod bloğuna göre size aşağıdaki avantajları sağlar:

  • Herhangi bir kodu herhangi bir programlama dilinde kolayca görüntülemenizi sağlar.
  • Kodu, sözdizimi vurgulaması ve satır numaralarıyla birlikte görüntüler.
  • Kullanıcılarınız kodu kolayca kopyalayabilir.

Öncelikle, SyntaxHighlighter Evolved eklentisini kurmanız ve etkinleştirmeniz gerekir.
Etkinleştirmeden sonra, devam etmek ve kodu görüntülemek istediğiniz blog gönderisini düzenleyebilirsiniz. Yazı düzenleme ekranında, yazınıza “SyntaxHighlighter Code” bloğunu ekleyin.

Şimdi içerik editöründe kodunuzu girebileceğiniz yeni bir kod bloğu göreceksiniz. Kodu ekledikten sonra, blok ayarlarını sağ sütundan seçmeniz gerekmekte.

İlk önce, kodunuz için dili seçmeniz gerekir. Bundan sonra, satır numaralarını kapatabilir, ilk satır numarasını girebilir, istediğiniz herhangi bir satırı vurgulayabilir ve bağlantıları tıklanabilir hale getirmek için özelliği kapatabilirsiniz. İşiniz bittiğinde, gönderinizi kaydedin ve görmek için önizleme düğmesine tıklayın.

Eklenti bir dizi renk şeması ve temasıyla birlikte gelir. Renk temasını değiştirmek için, Ayarlar » SyntaxHighlighter sayfasını ziyaret etmeniz gerekir. Ayarlar sayfasından bir renk teması seçebilir ve SyntaxHighlighter ayarlarını değiştirebilirsiniz. Sayfanın altındaki kod bloğunun bir önizlemesini görmek için ayarlarınızı kaydedebilirsiniz.

Klasik Editör ile SyntaxHighlighter’ı Kullanma
Hala eski klasik WordPress editörünü kullanıyorsanız, WordPress blog yazılarınıza kod eklemek için SyntaxHighlighter eklentisini aşağıdaki şekilde kullanabilirsiniz.
Kodunuzu dil adı ile köşeli parantezlerin etrafına sarın. Örneğin, PHP kodu ekleyecekseniz, bu şekilde ekleyebilirsiniz:

<?php private function get_time_tags() { $time = get_the_time('d M, Y'); return $time; } ?>

Benzer şekilde, bir HTML kodu eklemek istiyorsanız, aşağıdaki gibi HTML kısa kodunun etrafına saracaksınız:

<a href="example.com">A sample link</a>

 3 – Eklenti yada Blok Kullanmadan Manuel Olarak Ekleme

Bu yöntem ileri düzey kullanıcılar içindir çünkü daha fazla çalışma gerektirir ve her zaman istendiği gibi çalışmaz. Hala eski klasik düzenleyiciyi kullanan ve bir eklenti kullanmadan kod görüntülemek isteyen kullanıcılar için uygundur.

Öncelikle, kodunuzu çevrimiçi bir HTML varlık kodlayıcı aracından geçirmeniz gerekir. Kod işaretlemenizi HTML ekleri olarak değiştirir, bu da kodu eklemenizi ve WordPress temizleme filtrelerini atlamanızı sağlar.

Şimdi kodunuzu metin editörüne kopyalayıp yapıştırın ve <pre> ve <code> etiketlerinin etrafına sarın. Artık gönderinizi kaydedebilir ve kodun çalışmasını önizleyebilirsiniz. Tarayıcınız HTML varlıklarını dönüştürür ve kullanıcılar doğru kodu görür.

Site Footer