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

İçindekiler ✓
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ı
.zipolarak 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:
| Ayar | Açıklama |
|---|---|
| Theme | Kodu nasıl görüneceği (renk paleti) |
| Font | Yazı tipi seçimi |
| Line Numbers | Satır numaraları gösterilsin mi |
| Toolbar | Kopyala, genişlet gibi araçlar |
| WordWrap | Satı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
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:
“Kısa Kod” bloğu ekleyin
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ı önerilirKodlar, 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:
| Eklenti | Avantajları |
|---|---|
| SyntaxHighlighter Evolved | Hafif, Gutenberg uyumlu |
| WP Code Highlight.js | Hızlı ve modern |
| PrismJS + Manual | El 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ı



