WordPress'te kodu etkili bir şekilde sergileme becerisini kazanmak, izleyicilerinin kullanması için sürekli olarak çevrimiçi kod yayınlayan blog yazarları ve içerik oluşturucular için son derece önemlidir. Bilgisayar kodu, amaçlandığı gibi, bir web sitesinin ön ucunda, gerçek kod parçacıklarında bulunan etiketlerden, eğik çizgilerden ve parantezlerden farklı, yeni bir görsel çıktı oluşturur.
Bununla birlikte, geliştirme ve tasarım hakkında yazan kişiler için bir çıkmaza yol açar, çünkü bir düğme oluşturmak veya bir paragraf bloğuna stiller uygulamak gibi amaçlanan işlevselliğini yerine getirmeden kodu uygun şekilde sunmak için bir araca ihtiyaç duyarlar.
Basitçe söylemek gerekirse, örnek olarak bir kod parçacığı içeren bir blog gönderisi oluştururken, kodun yürütülmesini engellemek zorunludur. Bu yaklaşım, okuyucuların kodu orijinal biçiminde algılamasına, iyi biçimlendirilmiş bir blok içinde görüntülemesine ve hatta kendi geliştirme çabaları için içeriğini kopyalamasına olanak tanır.
Bu kılavuz, seçilen WordPress temasından bağımsız olarak, WordPress'te kod görüntülemek için çeşitli yöntemler göstermeyi amaçlamaktadır. Ek olarak, kendi iş akışınız için en uygun yöntemi belirlemenize yardımcı olacaktır.
Harika Web Siteleri Oluşturun
En iyi ücretsiz sayfa oluşturucu Elementor ile
Şimdi başlaWordPress?'de Normal Kod Eklediğinizde Ne Olur?
Herhangi bir özel önlem almadan doğrudan bir WordPress gönderisine veya sayfasına normal kod eklediğinizde, kod istenmeyen sonuçlara neden olabilir. WordPress, güvenliği ve uygun işlevselliği sağlamak için içeriği otomatik olarak işleyen ve temizleyen yerleşik mekanizmalara sahiptir. Sonuç olarak, normal kod eklendiğinde, WordPress tarafından değiştirilebilir veya tamamen çıkarılabilir.
WordPress'te normal kod eklediğinizde olabilecek birkaç şey şunlardır:
- Kod Değiştirme: WordPress, olası güvenlik risklerini veya platformun işlevselliğiyle çakışmaları önlemek için belirli öğeleri kaldırarak veya değiştirerek kodu değiştirebilir. Bu, kodun istendiği gibi çalışmamasına veya hatalar üretmesine neden olabilir.
- Kod Sıyırma: WordPress, güvensiz veya gereksiz olduğu düşünülen belirli kod türlerini kaldırabilecek filtrelere ve güvenlik önlemlerine sahiptir. Bu, önemli kod parçacıklarının veya tüm kod bloğunun kendisinin kaldırılmasına yol açabilir.
- Görsel Bozulma: Kod, tipik olarak, WordPress içeriğinizin görsel sunumunu engelleyebilecek özel karakterler, semboller ve biçimlendirme içerir. Biçimlendirme sorunlarına, yanlış hizalamaya veya kodun kod olarak işlenmek yerine düz metin olarak görünmesine neden olabilir.
- Kodun Yürütülmesi: Bazı durumlarda, kod uygun şekilde temizlenmez veya işlenmezse, amaçlanan işlevselliği yürütebilir ve gerçekleştirebilir. Bunun, düğmeler oluşturmak, içeriğin görünümünü değiştirmek ve hatta web sitenizin genel işleyişini etkilemek gibi istenmeyen sonuçları olabilir.
Bu sorunların üstesinden gelmek ve WordPress'te kodu güvenli bir şekilde görüntülemek için, kod parçacıklarını sergilemek için özel olarak tasarlanmış uygun yöntemlerin veya eklentilerin kullanılması önerilir. Bu yöntemler, kodun uygun şekilde biçimlendirilmesini, korunmasını ve herhangi bir istenmeyen değişiklik veya çalıştırma olmaksızın görüntülenmesini sağlar.
Burada snippet'e aşağıdaki HTML kodunu ekleyeceğiz:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
Bu özel kod alıntısı, yeşil renkle süslenmiş, başlıklar ve paragraflarla tamamlanmış üç içerik bloğu oluşturmak için HTML stil öğeleri kullanır.
Bununla birlikte, işlenmemiş kodu verilen bloklarda işlenmesine izin vermek yerine, bir blog yazısı içinde sunmak istiyoruz.
Kod doğrudan WordPress Gutenberg Block Editor'a yapıştırıldığında aşağıdaki sonuçlar gözlemlenebilir:
Yukarıda bahsedilenler ışığında, WordPress'in kodu birincil işlevi olan içerik üretme işlevi için kullanmaya çalıştığı açıktır. Bununla birlikte, kodun stilini kaldırır, böylece okuyuculara istenen sonucu sunamaz.
Bu tür durumları önlemek için, kodu görüntülemek amacıyla aşağıda sıralanan yöntemlerden birinin kullanılmasını şiddetle tavsiye ediyoruz.
WordPress'te Kod Görüntülemenin 4 Yolu
Aşağıdaki teknikler artan zorluk sırasına göre düzenlenmiştir ve WordPress kullanmak yerine markdown editörlerinde kod ve içerik oluşturmaktan memnuniyet duyan kişilere özel yaklaşımlar sunuyoruz.
Yöntem 1: Gutenberg Blok Düzenleyicisini Kullanma
Gutenberg editörü, biçimlendirmelerini koruyarak ve kodu yürütmeden kod parçacıklarının sunumunu kolaylaştıran önceden var olan bir Kod bloğu içerir.
Başlamak için, WordPress'te bir gönderiye veya sayfaya erişin ve Blok Ekle düğmelerinden birini seçmek için ilerleyin.
Devam etmek için lütfen "Blok Ekle" düğmelerinden birini seçin.
Bunu yaparak, mevcut blok çeşitleri açıklanacaktır. "Kod" bloğunu arama veya arama çubuğuna "kod" gibi bir anahtar kelime girme seçeneğiniz vardır.
Köşeli parantez simgeleriyle tanımlanabilen Kod bloğunu bulduktan sonra, gönderiye bir kod bölümü eklemek için üzerine tıklamaya devam edin.
Şu anda, "Compose code…" işaretini içeren bir alan sizin için gözlemlenebilir olmalıdır.
WordPress Gutenberg editörü, editör içinde "C" veya "Kod" girişinin ardından bir eğik çizgi (/) kullanımı yoluyla Kod bloklarının keşfedilmesini ve eklenmesini sağlayan işaretleme desteği sağlar. WordPress daha sonra ilgili tüm blokları görüntüleyerek daha uygun bir ekleme sürecini kolaylaştıracaktır.
Kod bloğu ile Özel HTML bloğu arasındaki farkı not etmek önemlidir. Özel HTML bloğu, ön uçta oluşturulacak özel HTML kodunun eklenmesi için tasarlanırken, Kod bloğu, görüntüleme amacıyla ham kodun eklenmesi için özel olarak tasarlanmıştır.
Şu anda, istenen kodu çoğaltmak ve "Kod Yaz..." etiketli belirlenmiş alana eklemek için uygun andır.
Sağladığınız kod artık belirlenmiş Kod bloğunun içine alınmıştır.
Kod bloğunun avantajlı bir yönü, orijinal kod parçacığı içindeki boşlukların ve sekmelerin biçimlendirilmesine bağlı kalmasıdır. Sonuç olarak, görüntülenen kod, kopyalandığı kaynakla görsel tutarlılığını korumalıdır.
Kodunuzu WordPress gönderinizde veya sayfanızda sergilemek için "Yayınla" düğmesine tıklayarak işlemi sonlandırın. Ayrıca, "Önizleme"yi seçerek yayınlanmadan önceki görünümünün görsel bir temsilini elde etme seçeneğiniz de vardır.
"Yayınla" düğmesine tıkladıktan sonra, kod parçacığının ham kod olarak görüntülendiğini doğrulamak için gönderinin canlı sürümüne erişmeye devam edin.
Gözlemlendiği gibi, Kod bloğu basitliği ile karakterize edilir, ancak blog gönderilerinde kod sunarken biçimlendirmeyi koruma temel amacına hizmet eder.
Aşağıda verilen ekran görüntüsüne bakın. Bu özel örnekte, orijinal kod parçacığı değiştirilmeden kalır; sadece ön uçta gri bir kutu içinde sunulur.
Kod bloğunun belirginliğini artırmak için, varsayılan görünümünü değiştirmeyi düşünmeniz önerilir.
Bloğun mevcut stil seçeneklerine erişmek için, lütfen Kod bloğunu seçin ve Ayarlar (dişli simgesi) düğmesine tıklayarak devam edin. Bu eylem, Blok sekmesini açacak ve özellikle seçilen bloğa uygulanabilir Blok ayarlarını, yani bu örnekteki Kod bloğunu görüntüleyecektir.
Metin ve arka plan renkleri gibi özellikleri değiştirme seçeneği de dahil olmak üzere, Kod bloğunu kişisel tercihlere göre özelleştirme olanağı vardır.
Yöntem 2: Eklenti Kullanma
Enlighter – Özelleştirilebilir Sözdizimi Vurgulayıcı eklentisini WordPress sitenize dahil etmek için lütfen tercih ettiğiniz eklenti kurulum yöntemini kullanın.
Eklenti etkinleştirildikten sonra tamamen işlevsel olacak ve Gutenberg bloğu veya Klasik Düzenleyici Ekle düğmesi aracılığıyla herhangi bir yazıya/sayfaya kod eklemenize izin verecektir.
WordPress Gutenberg Block Editor kullanıyorsanız, kod sergilemek istediğiniz bir gönderiye erişin. Mevcut blok çeşitlerini ortaya çıkarmak için Blok Ekle düğmelerinden birini ("+" sembolü ile tanımlanır) seçin.
Enlighten Sourcecode bloğuna ilişkin bir anahtar kelimeyi inceleyin veya girin. Gönderiye dahil etmek için ilgili bloğa tıklayarak devam edin.
Enlighter Vurgulayıcı bloğu daha sonra, "Genel Vurgulama" başlıklı belirlenmiş bir başlık ve "Kaynak Kodu Ekle..." etiketli bir metin giriş alanı içeren Blok Düzenleyici arabiriminde görünür.
Lütfen WordPress'te görüntülenmesi amaçlanan istenen kodu "Kaynak Kodu Ekle..." metin alanına girin veya kopyalayıp yapıştırın.
Bir sözdizimi vurgulayıcı kapasitesinde, eklenti tüm biçimlendirme tercihlerini ve tabloları korur. Sonuçtan memnun kaldıktan sonra, lütfen "Yayınla" düğmesini seçmek için ilerleyin.
Bu işlevi kullanarak, site ziyaretçileri ile aynı içeriği gözlemlemek için gönderinizin kullanıcı arayüzüne erişebilirsiniz.
Enlighter eklentisi, yapılandırma ve referans verme sürecine yardımcı olan satır numaralarıyla birlikte kodu görüntülemek için basit bir varsayılan tema sağlar.
Daha önce de belirtildiği gibi, WordPress platformunda kod sergilemek için bir eklenti kullanmak, alternatif yöntemlere kıyasla belirgin avantajlar sunar. Böyle bir avantajın açıklayıcı bir örneği, Enlighter sözdizimi eklentisi tarafından sağlanan ve kullanıcı içerikte gezinirken kod satırlarının dinamik olarak vurgulandığı ön uç işlevselliğidir.
Ayrıca sağ üst köşede yer alan kod kutusu içerisinde kullanıcı deneyimini geliştiren birçok buton yer almaktadır. Özellikle bu butonlardan biri kodun satır numaralarından arındırılmış düz metin formatında sunulmasını sağlıyor.
"Panoya Kopyala" olarak adlandırılan ikinci düğme, kod kutusundaki tüm içeriğin anında çoğaltılmasını kolaylaştırarak, kullanıcıların kodu istenen herhangi bir programa kolayca aktarıp yapıştırmalarına olanak tanır.
Son olarak, üçüncü düğme kodu yeni bir pencerede açarak düz metin olarak biçimlendirilmiş bir tarayıcı penceresinde sunar.
Enlighter eklentisi, kod kutusunun görünümünü tercihlerinize göre uyarlamak için bir dizi tema ve sağlam özelleştirme araçları sunar. Varsayılan temayı kullanmamayı tercih ederseniz, WordPress içindeki gönderinize geri dönebilir ve şu anda etkin olan Enlighter Sourcecode bloğunu seçebilirsiniz.
Bu eylem, WordPress içindeki Blok kenar çubuğunu ortaya çıkaracaktır. Hemen görünmezse, lütfen WordPress penceresinin sağ üst köşesinde bulunan Ayarlar (dişli simgesi) düğmesine tıkladığınızdan emin olun.
Dikkate alınması gereken ilk özelleştirme seçeneği, eklentiye hangi kod dilinin görüntüleneceği talimatını vererek uygun biçimlendirme ve vurgulama özelliklerini etkinleştirdiği için Dil alanıdır.
Dikkate alınması gereken önemli sayıda kodlama dili vardır, bu nedenle listeyi inceleyin ve en uygun olanı seçin.
Özel Satırlar özelliği, kullanıcıların satır numaralarını virgülle ayırarak girmesine izin vererek belirlenmiş satırları vurgular.
Böylece siteye giriş yapan tüm bireyler için belirlediğiniz çizgiler görsel olarak vurgulanır.
Lineoffset parametresi, kodlama snippet'inizi belirli bir satır numarasından başlatmak için bir araç sağlar ve daha büyük bir satır kümesinden bir kod alt kümesi sunarken avantajlı olduğunu kanıtlar.
Görüldüğü gibi Lineoffset alanına "10" değeri girildiğinde kod kutusunun tamamı 10 numaralı satırdan başlamaktadır.
Yöntem 3: Kodlayıcı Aracı Kullanma
Lütfen W3Docs HTML Kodlayıcı web sitesini ziyaret edin. Sayfada, iki bitişik kutu alanı bulacaksınız. Soldaki kodunuzu yapıştırmak için tasarlanmıştır, sağdaki ise kopyalayıp WordPress'e yapıştırabileceğiniz kodlanmış sürümü gösterir.
Devam etmeden önce, istenen kod koruma tipini belirtmek gerekir:
- JavaScript öğeleri içeren kodu yapıştırmayı planlıyorsanız JavaScript Unicode'u seçin.
- HTML ile çalışıyorsanız HTML sembollerini tercih edin.
Lütfen WordPress'te görüntülenmesini istediğiniz kodu soldaki belirlenmiş alana girin. Ardından, yukarıda sağ tarafta bulunan Kodla düğmesini bulun ve seçin.
Nihai sonuç kafa karıştırıcı görünebilir; bununla birlikte, ön uçta istenmeyen herhangi bir etkinleştirme veya alternatif içeriğin görüntülenmesini önlerken, eklenen kodun tamamını korumayı amaçlayan HTML öğelerinin bir karışımıdır.
Lütfen "Kopyala" düğmesine tıklayın.
WordPress'e dönün ve istenen gönderiye veya sayfaya erişin. Sağ üst köşede bulunan Seçenekler (üç dikey nokta ile temsil edilir) menüsünü seçmek için ilerleyin. Ardından, Kod Düzenleyici özelliğini seçin.
Mevcut arayüz, görsel Blok Düzenleyici yerine Kod Düzenleyiciyi sunacaktır. Kod görüntüsü için istenen bölümü bulun ve kodlanmış HTML'nizi düzenleyiciye eklemeye devam edin.
Klasik WordPress düzenleyicisini kullanıyorsanız, Gutenberg Blok Düzenleyici'deki Kod Düzenleyici'ye karşılık gelen Metin sekmesine gitmeniz zorunludur.
Gönderiyi sonlandırmak için lütfen "Güncelle" veya "Yayınla" seçeneğini seçin ve görsel sunumunu gözlemlemek için gönderinin ön ucuna ilerleyin.
HTML kodlama öğeleri dahil edilmeden önce, kodlayıcıya başlangıçta eklenen değiştirilmemiş kodu gözlemleyebileceksiniz. Kodlayıcıların herhangi bir stil yeteneği sağlamadığına dikkat etmek önemlidir, bu da bu yaklaşımı düzenli ve minimalist bir estetik elde etmek için ideal kılar.
Yöntem 4: Özel Kısa Kod Kullanma
Özel bir kısa kodun oluşturulması, manuel kopyalama ve yapıştırmaya gerek kalmadan yeniden kullanılabilir kod blokları ekleme görevini yerine getirir. Özel kısa kodların WordPress platformunda kod görüntüleme için sağlam bir fırsat sağlamasının nedeni tam olarak budur.
Kod sunumu için özel kısa kodlar kullanmanın avantajları şunlardır:
- Özel kısa kodlar, karmaşık kod bölümlerinin gelecekte yeniden kullanılmak üzere kaydedilmesini sağlayarak, uzun kod parçacıklarını tekrar tekrar yazma gerekliliğini ortadan kaldırır.
- Kod vurgulayıcılar ve kapsayıcılar için kişiselleştirilmiş CSS stilleri tanımlamak mümkündür.
- Kısa kodlar herhangi bir kullanıcı tarafından kullanılabilir ve diğer katkıda bulunanların basit bir tıklama ile kod vurgulayıcılarınızı ve bloklarınızı zahmetsizce kullanmasını sağlar.
Özel bir kısa kod oluşturmak, WordPress tema dosyalarını değiştirme, PHP koduyla çalışma ve potansiyel olarak WordPress eklentileri geliştirme konusunda uzmanlık gerektirir. Sonuç olarak, WordPress için özel bir kısa kod oluşturmak, PHP'de yeni olan kişiler için zorluklar yaratabilir.
Bununla birlikte, sonuç, WordPress platformunda kod görüntülemek için oldukça basit bir yaklaşım sunar.
Kişi, özel kısa kod için istenen herhangi bir adı seçme ve çeşitli programlama dillerini barındırmak için [html] [/html] ve [css] [/css] gibi çeşitli alternatifler oluşturma özgürlüğüne sahiptir.
Optimum sözdizimi vurgulaması için, WordPress Gutenberg Block Editor ile çalışırken Metin Düzenleyici (WordPress Classic'te) veya Özel HTML kutusu ile birlikte özel kısa kodların kullanılması tavsiye edilir.
Amaç, kullanıcıların kısa kodun açılış ve kapanış etiketlerinin sınırlandırılmış sınırları içinde kod girmesine veya eklemesine olanak tanıyan ısmarlama bir kısa kod oluşturmaktır.
Amaç, kullanıcıların kısa kodun belirlenmiş açılış ve kapanış etiketleri içine kod girmesine veya eklemesine izin veren uyarlanmış bir kısa kod geliştirmektir.
Sarma
WordPress'te kod görüntülemek, programlama kavramlarını paylaşmak, doğruluğu sağlamak, estetiği geliştirmek ve işbirliğini geliştirmek için çok önemlidir. Geliştiricilerin izleyicilerini eğitmesine, somut kanıtlar sağlamasına, kullanıcı deneyimini geliştirmesine ve topluluk katılımını teşvik etmesine olanak tanır. Kod parçacıklarını sergilemek şeffaflığı, güveni ve güvenilir bilgileri destekler. Özel kısa kodlar veya eklentiler, görsel olarak çekici ve iyi yapılandırılmış kod gösterimi sağlayabilir. Kod paylaşmak tartışmaları, geri bildirimi ve yeniliği kolaylaştırır. Genel olarak, WordPress'te etkili kod görüntüleme, bilginin yayılması, kalite güvencesi ve WordPress geliştirme topluluğunun büyümesi için gereklidir.
