WordPress'te Kod Nasıl Görüntülenir – 3 Yöntem (eklentili ve eklentisiz)

Sitenizde kod parçalarını görüntülemek istiyor ancak bunu yapmanın en iyi yolundan emin değil misiniz? Bu yazı sizin için. Bu kılavuzda, WordPress'te kodu kolayca görüntülemek için size farklı yöntemler göstereceğiz.

WordPress'te kod görüntülemek neden zor?

Kullanıcılarınıza faydalı kılavuzlar yayınladığınız bir siteniz varsa, blog yayınlarınızda kod parçacıkları sergilemeniz gerekebilir. Mesele şu ki, kodu yapıştırmak kadar basit değil. Aslında, örneğin blog yayınınıza bir HTML parçacığı yapıştırırsanız, çalışmaz. Bildiğiniz gibi, WordPress metin düzenleyicisi HTML tabanlı bir düzenleyicidir, bu nedenle kodu otomatik olarak işler ve yazdırır.

Benzer şekilde, bir kısa kodu kopyalayıp yapıştırırsanız, WordPress sadece yazılı kısa kodu göstermek yerine işlevi görüntüler.

Kodu görüntülemek istiyorsanız bu ideal değildir ve hatalı biçimlendirmeye neden olabilir. Örneğin, WordPress klasik düzenleyicisi aracılığıyla makalenize bir HTML kodu yerleştirmek istiyorsanız, düzenleyici kodu işleyecek ve içeriğin içinde görüntüleyecektir.

Bu sorunu düzeltmenin en iyi yolu, kod parçacıklarınız için özel stil kullanmaktır. Ve bu makalede size göstereceğimiz şey bu.

WordPress'te kod nasıl görüntülenir?

WordPress'te kodu görüntülemenin 3 ana yöntemi vardır:

1. WordPress düzenleyicisini kullanma
   1. Gutenberg
   2. Klasik Editör
2. Özel bir WordPress eklentisi kullanma
3. Kodu manuel olarak ekleme

Her bir yönteme bir göz atalım ve adım adım sitenizde kodu nasıl görüntüleyeceğinizi gösterelim.

1) WordPress Düzenleyiciyi Kullanma

WordPress'te kodu görüntülemenin en kolay yolu WordPress Düzenleyici'yi kullanmaktır. Bu bölümde, hem Gutenberg hem de Klasik Düzenleyici kullanarak bunu nasıl yapacağınızı göstereceğiz.

1.1) Gutenberg

İlk olarak, WordPress web sitenize giriş yapın ve kodu görüntülemek istediğiniz gönderiyi açın. Kod adlı bir blok arayın ve seçin.

Kodunuzu orada yazmaya başlayabilir ve işiniz bittiğinde gönderiyi yayınlayabilirsiniz. Ön uçta, kodu göreceksiniz.

Sitenizde kodu görüntülemek için Gutenberg düzenleyicisini bu şekilde kullanabilirsiniz.

1.2) Klasik Düzenleyici

Hâlâ Klasik Düzenleyici'yi kullanıyorsanız, önceden biçimlendirilmiş metin seçeneğini kullanarak kod parçacıklarını da görüntüleyebilirsiniz. İlk olarak, klasik düzenleyiciyi kullanarak kodu eklemek istediğiniz gönderiyi açın.

Ardından, kod parçacığını seçin ve açılır menüden önceden biçimlendirilmiş metin seçeneğini belirleyin.

Metnin nasıl değiştiğini göreceksiniz. Ardından, makaleyi yayınlayın ve sayfayı ön uçtan kontrol edin, kodu aşağıda gösterildiği gibi özel bir kutu içinde göreceksiniz.

Bu şekilde, WordPress web sitenizde herhangi bir kodu görüntüleyebilirsiniz.

Gördüğünüz gibi, WordPress Düzenleyiciyi kullanmak basit ve anlaşılır. Ancak, farklı kod türlerini görüntülemek için daha fazla seçenek istiyorsanız, başka bir şeye ihtiyacınız olacak.

2) Bir WordPress eklentisi ile kodu görüntüleyin

WordPress'te kodu görüntülemenin başka bir yolu da özel bir eklenti kullanmaktır. Orada birçok seçenek var, ancak bu gösteri için SyntaxHighighter Evolved adlı ücretsiz bir araç kullanacağız.

Öncelikle eklentiyi yüklemeniz gerekiyor, bu nedenle sitenize giriş yaptıktan sonra Eklentiler > Yeni Ekle seçeneğine gidin. SyntaxHighlighter Evolved eklentisini arayın, kurun ve etkinleştirin.

WordPress Ayarları bölümünün altında eklentinin yapılandırma seçeneklerini göreceksiniz.

Eklentinin ayarlar sayfasında birkaç özelleştirme seçeneği göreceksiniz:

• sürüm kontrolü
• Renk teması
• Fırçalar yükleniyor
• Çeşitli
• Ek CSS sınıfları
• Başlangıç ​​satırı numarası
• Satır numarası dolgusu
• Sekme boyutu
• Başlık

Temel bir kullanıcıysanız, varsayılan yapılandırma yeterince iyidir, oysa ileri düzey bir kullanıcıysanız, ayarlara bir göz atmak ve bunları ihtiyaçlarınıza göre ayarlamak isteyebilirsiniz. Ayarları değiştirdikten sonra değişiklikleri kaydedin. Canlı önizleme bölümünün altında, vurgulama efektine sahip örnek bir kod göreceksiniz.

Bu noktada işlem, kullandığınız düzenleyiciye göre değişiklik gösterir. İkisine de bir göz atalım.

2.1) Gutenberg Editörü

Eklentiyi etkinleştirdikten sonra, editörde SyntaxHighlighter Code adlı yeni bir blok göreceksiniz.

Gönderilerinizde farklı kod türlerini görüntülemek için bu bloğu kullanabilirsiniz. Basitçe bloğu seçin ve ayarlar panelinde görüntülemek istediğiniz dili seçme seçeneğini göreceksiniz. Aralarından seçim yapabileceğiniz düzinelerce dil olduğunu göreceksiniz.

Bu örnekte, bir CSS kod parçacığı görüntüleyeceğiz, bu nedenle açılır menüden CSS'yi seçeceğiz.

Ayrıca blok bölümünden kod dilini değiştirebilirsiniz.

Kod dilini seçtikten sonra betiği bloğa yapıştırın.

Ek olarak, eklentinin varsayılan ayarlarını sağ paneldeki Gelişmiş bölümünden ayarlayabilir ve stilini değiştirebilirsiniz.

İşiniz bittiğinde gönderiyi yayınlayın (veya güncelleyin) ve sonuçları görmek için gönderiyi ön uçtan kontrol edin.

Yukarıdaki ekran görüntüsünde de görebileceğiniz gibi, yazımızda CSS kodunu başarılı bir şekilde vurguladık. Bu şekilde, blok ayarlarından doğru kod dilini seçerek WordPress'te istediğiniz herhangi bir kodu görüntüleyebilirsiniz.

2.2) Klasik Düzenleyici

Gutenberg düzenleyicisini kullanmıyorsanız, dil kodunu manuel olarak girmeniz gerekecektir. Klasik düzenleyiciyi kullanarak Syntaxhighlighter kodlarını görüntülemek için kısa kodlar kullanacağız. Kısa kodlara aşina değilseniz, bu kılavuza bir göz atmanızı öneririz.

İlk olarak, herhangi bir gönderiyi açın veya Klasik düzenleyiciyi kullanarak yeni bir gönderi oluşturun. Örneğin HTML içeriğini görüntülemek için [html] [/html] kısa kodunu kullanın ve aşağıdaki gibi kodu aralarına yapıştırın ve gönderiyi yayınlayın.

[html]
<a href=”quadlayers.com”>Dört Katmanlar</a>
[/html]

Gönderiyi ön uçtan kontrol ederseniz, vurgulanan HTML kodunu göreceksiniz.

HTML gömme özelliğini bu şekilde kullanabilirsiniz, ancak aynısını diğer kod dilleri için de yapabilirsiniz. Örneğin, bir PHP parçacığını görüntülemek için [php] [/php] kısa kodlarını, CSS'yi göstermek için [css] [/css] kısa kodlarını vb. kullanın.

Bu şekilde kısa kodları değiştirebilir ve istediğiniz kod parçacıklarını görüntüleyebilirsiniz. Bir makalede örnek bir PHP kod parçacığını gösterelim:

[php]
<?php
?>
[/php]

Gördüğünüz gibi, kodları değiştirebilir ve herhangi bir snippet'i WordPress sitenizde görüntüleyebilirsiniz.

NOT: Kodunuzun yazı tipini, yazı tipi boyutunu ve yazı tipi ağırlığını değiştirmek istiyorsanız, Syntaxhighlighter eklentisi için özel bir CSS sınıfı eklemeniz gerekir. Bunu eklentinin ayarlarından yapabilir ve ardından özelleştirmek için WordPress özelleştirici veya tema düzenleyici aracılığıyla CSS kodu ekleyebilirsiniz.

3) Kodu manuel olarak görüntüleyin

Kodlama becerileriniz varsa, kodu WordPress'te manuel olarak görüntüleyebilirsiniz. Bu daha gelişmiş bir yöntemdir ve size çok fazla esneklik sağlar. Bu gösteri için, bir gönderide kodu görüntülemek için <pre> ve <code> etiketlerini kullanacağız.

İlk olarak, metninizi HTML'ye dönüştürmek için harici bir araç kullanmanız gerekir. Biz MotherEff kullanacağız ama siz istediğiniz başka bir HTML kodlayıcıyı kullanabilirsiniz.

Ardından, HTML snippet'inizi kodu çözülen kutuya yapıştırın ve araç size kodlanmış bir sürüm verecektir.

Bu örnek için kodumuz:

 <p><a href="/quadlayers">Portföyümüzü Ziyaret Edin</a></p>

Ve araç onu şuna dönüştürür:

Kod kolay görünmeyecek, ancak işi yapacak.

Ardından, WordPress kontrol panelinizde Klasik düzenleyiciyi açın ve metin düzenleyiciye geçin.

<pre> ve <code> açık etiketlerini ve bunları kapatmak için </code> ve </pre> kullanarak kodlanmış kodu buraya yapıştırın. Örneğin, örnek kodumuz şöyle görünecektir:

Ardından, gönderiyi yayınlayın ve ön uçta aşağıda gösterildiği gibi vurgulanan kodu göreceksiniz.

Bu şekilde, herhangi bir WordPress gönderisinde kodu manuel olarak görüntüleyebilirsiniz.

NOT : Gutenberg kullanıcıları bu yöntemi kullanamayacaklardır. Bunu yalnızca Klasik Düzenleyiciyi kullanarak yapabilirsiniz.

Bonus: Bir paragrafta kod nasıl görüntülenir?

Bir WordPress gönderisinde kod görüntülemenin yanı sıra, bir başka ilginç alternatif de kodu bir paragrafta görüntülemektir. Bu bölümde size nasıl yapılacağını göstereceğiz. Bunun için biraz CSS ve HTML kullanacağız.

İlk olarak, web sitenize basit bir CSS kodu eklemeniz gerekir. WordPress özelleştiriciyi veya Kod Parçacıkları gibi siteye özel bir eklentiyi kullanabilirsiniz. Bu demo için Görünüm > Özelleştir > Ek CSS'ye gidip kodumuzu buraya yapıştıracağız.

 kod {
 yazı tipi boyutu:1.2em;
 renk: #1e1e1e;
 pozisyon: göreceli;
 sınır yarıçapı: 4 piksel;
 arka plan: #e1e1e1
 } 

Değişiklikleri yayınladıktan sonra düzenlemek istediğiniz herhangi bir gönderiyi açın. Ardından, vurgulamak istediğiniz içeriği seçin. Örneğin, bu paragrafta “bir blog aç” ifadesini kod olarak görüntüleyeceğiz.

Metin düzenleyiciye geçin ve içeriği <code> ve </code> etiketlerinin içine sarın. Örneğimizi takip ederek kodumuz şöyle görünecek:

<code>bir blog başlat</code>

Ardından, değişiklikleri yayınlayın veya güncelleyin ve değişiklikleri görmek için ön ucu kontrol edin.

Bu şekilde, belirli kelimeleri veya cümleleri vurgulayabilirsiniz. Kodun CSS stilini değiştirmek istiyorsanız, burada kullandığımız CSS komut dosyasını düzenlemekten çekinmeyin.

Çözüm

Sonuç olarak, sitenizde kodu sergilemek, komut dosyasını yapıştırmak kadar basit değildir. Ancak bu kılavuzda, WordPress'te kodu görüntülemek için size farklı yöntemler gösterdik:

1. WordPress içerik düzenleyicisini kullanma
2. Özel bir eklenti ile
3. manuel olarak

Hızlı ve kolay bir çözüm istiyorsanız, WordPress içerik düzenleyicisi size herhangi bir gönderide komut dosyalarını sergilemek için araçlar sağlar. Ancak, daha fazla özelleştirme seçeneğine ihtiyacınız varsa, SyntaxHighligher Evolved eklentisi en iyi seçiminizdir. Öte yandan, kodlama becerileriniz varsa, kod snippet'lerinizi manuel olarak ekleyebilir ve ön uçtaki stili biraz CSS ile özelleştirebilirsiniz.

Son olarak, bir paragraftaki belirli cümleleri veya kelimeleri vurgulamak istiyorsanız, metni <code> </code> etiketlerine sarabilirsiniz.

Sitenizdeki kodu nasıl düzenleyeceğiniz hakkında daha fazla bilgi için, WordPress'te HTML'yi düzenlemek için aşağıdaki kılavuza bakın.

Bu gönderiyi faydalı buldunuz mu? Sitenizde kodu görüntülemek için hangi yöntemi tercih edersiniz? Aşağıdaki yorumlar bölümünde bize bildirin.