Eklentiler

WordPress Yazı İçinde Kod Göstermek: Crayon Syntax Highlighter Eklentisi

Kod odaklı içerik üreten bir blog yazarı ya da geliştiriciyseniz, wordpress yazı içinde kod göstermek sizin için olmazsa olmazlardan biridir. Kod parçacıklarını kullanıcıya düzgün ve okunabilir şekilde sunmak, hem profesyonel bir izlenim verir hem de kullanıcı deneyimini artırır.

Bu yazıda, WordPress yazılarınızda kodları nasıl gösterebileceğinizi, Crayon Syntax Highlighter eklentisinin kurulumundan kullanımına kadar tüm detaylarıyla öğreneceksiniz.

WordPress Yazı İçinde Kod Göstermek Neden Önemlidir?

Geliştirici blogları, teknik eğitim siteleri, yazılım notları ya da öğretici içerik yayınlayan platformlar için kod gösterimi büyük bir ihtiyaçtır.

wordpress yazı içinde kod göstermek, şu nedenlerle önemlidir:

  • Kodun doğru biçimde görünmesini sağlar

  • Satır numarası, vurgulama ve biçimlendirme sunar

  • Kopyalanabilir yapılarla kullanıcı kolaylığı sağlar

  • SEO uyumlu kod alanları oluşturur

  • İçeriğin profesyonel görünmesini sağlar

Neden Crayon Syntax Highlighter?

WordPress için onlarca kod gösterimi eklentisi vardır. Ancak Crayon Syntax Highlighter aşağıdaki avantajlarıyla öne çıkar:

  • Geniş dil desteği (HTML, CSS, JS, PHP, Python, vb.)

  • Satır numaraları

  • Renk temaları

  • Otomatik sözdizimi tanıma

  • Kopyalama butonu

  • Mobil uyumlu

Özellikle wordpress yazı içinde kod göstermek isteyen teknik blog yazarları için kullanıcı dostu arayüzüyle ideal bir çözümdür.

Eklenti Kurulumu ve Aktifleştirme

1. Eklentiyi İndirme

Crayon Syntax Highlighter, WordPress eklenti deposundan kaldırılmış olabilir. Bu yüzden aşağıdaki alternatif adımlarla kurulum yapabilirsiniz:

  • Github üzerinden en güncel sürümünü indirin.

  • Dosyayı .zip olarak bilgisayarınıza kaydedin.

  • WordPress panelinize girin: Eklentiler > Yeni Ekle > Eklenti Yükle

2. Eklentiyi Etkinleştirme

Yükleme tamamlandıktan sonra Eklentiler > Yüklü Eklentiler menüsünden Crayon Syntax Highlighter’ı etkinleştirin.

Temel Ayarlar

wordpress yazı içinde kod göstermek için Crayon Syntax Highlighter ayarlarını yapılandırmak önemlidir:

Ayarlar > Crayon yolunu izleyerek yapılandırabilirsiniz.

Öne Çıkan Ayarlar:

AyarAçıklama
ThemeKodu nasıl görüneceği (renk paleti)
FontYazı tipi seçimi
Line NumbersSatır numaraları gösterilsin mi
ToolbarKopyala, genişlet gibi araçlar
WordWrapSatır kaydırma açık mı

Yazı İçinde Kod Göstermek

Crayon Syntax Highlighter ile kod göstermek oldukça basittir. Kodu yazıya eklemek için iki yöntem vardır:

1. Kısa Kod (Shortcode) Yöntemi

plaintext
[crayon language="php"] <?php echo "Merhaba Dünya!"; ?>
[/crayon]

language=”php” kısmını kullandığınız dile göre değiştirebilirsiniz (html, css, js, python, vb.)

2. Görsel Editör Düğmesi

Eklenti, klasik editörde “Crayon” butonu olarak görünür. Butona tıklayarak açılan pencereden:

  • Dil seçimi

  • Tema seçimi

  • Satır numarası ayarı

  • Kod yapıştırma

gibi adımları hızlıca tamamlayabilirsiniz.

Gutenberg Editör ile Kullanım

Gutenberg kullananlar için Crayon varsayılan olarak blok desteği sunmaz. Ancak aşağıdaki yöntemlerle yine kullanabilirsiniz:

  1. “Kısa Kod” bloğu ekleyin

  2. Yukarıdaki [crayon]...[/crayon] formatını yapıştırın

Bu şekilde modern WordPress editöründe de wordpress yazı içinde kod göstermek mümkün hale gelir.

Kodları Renkli Göstermek Neden Gerekli?

Bir kod parçasının okunabilirliği, renkli ve düzenli bir yapı ile doğrudan ilişkilidir. Crayon Syntax Highlighter ile şunları kazanırsınız:

  • Renkli sözdizimi: Fonksiyonlar, değişkenler, anahtar kelimeler renkli görünür

  • Daha iyi öğrenme: Okuyucular kodu parça parça kavrayabilir

  • Hataları fark etme: Hatalı yapıların tespiti kolaylaşır

  • Kullanıcı güveni: Blog yazınız profesyonel görünür

SEO Açısından Kod Gösterimi

Google ve diğer arama motorları, sayfa içeriğini analiz ederken HTML elementleri ve düzenlemelere dikkat eder. Bu nedenle:

  • <pre> ve <code> etiketlerinin kullanılması önerilir

  • Kodlar, sayfa hızını etkilemeyecek şekilde yüklenmelidir

  • Crayon Syntax Highlighter gibi eklentiler temiz HTML çıktısı üretir

Yani, wordpress yazı içinde kod göstermek, doğrudan SEO puanınızı artırmasa da kullanıcı deneyimini ve içerik kalitesini artırarak dolaylı fayda sağlar.

Alternatif Kod Gösterim Eklentileri

Crayon dışında şu eklentileri de düşünebilirsiniz:

EklentiAvantajları
SyntaxHighlighter EvolvedHafif, Gutenberg uyumlu
WP Code Highlight.jsHızlı ve modern
PrismJS + ManualEl ile kurulum, çok hafif

Ancak Crayon, kişiselleştirilebilirliği ve kısa kod desteği sayesinde hâlâ en popüler seçeneklerden biridir.

Sıkça Sorulan Sorular (SSS)

WordPress yazı içinde kod göstermek neden özel eklenti gerektiriyor?

Çünkü WordPress varsayılan olarak kodları düzgün biçimde gösterecek HTML formatını sunmaz. Eklentilerle biçim ve okunabilirlik kazanılır.

Crayon Syntax Highlighter ücretsiz mi?

Evet, açık kaynak kodludur. GitHub üzerinden ücretsiz indirilebilir.

Eklenti çalışmıyorsa ne yapmalıyım?

PHP sürümünüzü kontrol edin. Bazı sürümlerle uyumlu olmayabilir. Alternatif eklentileri değerlendirin.

Kodlar neden stil uygulanmadan görünüyor?

Tema veya başka eklentiler Crayon’un stil dosyalarını engelliyor olabilir. Sayfa kaynak kodundan CSS dosyasının yüklendiğini kontrol edin.

Gutenberg desteklemiyor, nasıl çözülür?

“Shortcode” bloğu kullanarak klasik [crayon]...[/crayon] formatında kod yazabilirsiniz.

Sonuç: WordPress Yazılarınızda Kod Göstermek Artık Çok Kolay

wordpress yazı içinde kod göstermek, Crayon Syntax Highlighter gibi araçlarla hem kolay hem de etkili bir hale gelir. Kod odaklı içerik yayınlıyorsanız, ziyaretçilerinizi memnun etmek için bu tür eklentileri mutlaka kullanmalısınız. Hem okunabilirliği artırır hem de blog yazılarınızı daha profesyonel gösterir.

Eklentiyi doğru şekilde yapılandırarak, renkli sözdizimi, satır numaraları ve araç çubuğu gibi işlevlerle harika bir içerik deneyimi sunabilirsiniz.

Başka WordPress Blogları: WordPress ShortCode Kullanımı

Daha Fazla Göster

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı