WordPress Kod Bloğu Nasıl Kullanılır

WordPress sayfalarında ve gönderilerinde kod görüntülemek zor olabilir. Yalnızca içeriğin içine kodu göndermek ilginç sonuçlar doğurabilir, özellikle de WordPress kodu yanlış gösteriyorsa veya güvenliğiniz sizi kötü niyetli etkinliklere karşı kilitliyorsa. Neyse ki, WordPress Kod Bloğu, kod parçacıklarının görüntülenmesini kolaylaştırır. Bu bloğu nasıl kullanacağınızı bilmek, içeriğinizdeki kodu hem web siteniz hem de okuyucularınız için en iyi şekilde görüntülemenize yardımcı olacaktır.

Bu yazıda, WordPress Kod Bloğuna bakacağız ve ne yaptığını göreceğiz. Gönderilerinize ve sayfalarınıza nasıl ekleyeceğinizi göreceğiz ve ayarlarına ve seçeneklerine bakacağız. Nasıl kullanılacağına ilişkin ipuçlarını ve en iyi uygulamaları görmek ve sık sorulan soruları görmek için sonuna kadar bekleyin.

Youtube Kanalımıza Abone Olun

Gönderinize veya Sayfanıza Kod Bloğu Nasıl Eklenir?

Kod Bloğu'nu sayfalarınıza ve gönderilerinize eklemek için, bloğu yerleştirmek istediğiniz içerik alanının yanındaki blok yerleştirici aracını seçin veya sayfanın sol üst köşesindeki yerleştiriciyi seçin. Blok adını girin ve göründüğünde seçin veya orada ne olduğunu görmek için bloklar arasında gezinin.

Dilerseniz bloğun görünmesini istediğiniz alana /code yazabilirsiniz. Ardından, sadece enter tuşuna basın veya görünen seçeneklerden bloğu seçin.

Artık içeriğinizde, görüntülemek istediğiniz herhangi bir kod türünü ekleyebileceğiniz bir Kod Bloğunuz var. Kod, kod etiketleriyle otomatik olarak işaretlenir, bu nedenle kod olarak düzgün bir şekilde görüntülenir. Bu, okuyucuların kendi projelerinde öğrenmeleri veya kullanmaları için örnekler sağlamaya yardımcı olur. Bu örnekte, WordPress destek sayfasındaki (çünkü) lazy.level = gelişmiş sözde kodunu kullanıyorum.

Kod Bloğu Ayarları ve Seçenekleri

Kod Bloğu, ayarları ve seçenekleri bulacağınız iki yere sahiptir. Birincisi, bloğun üzerindeki Kod Araç Çubuğudur. İkincisi, sağ kenar çubuğundaki seçeneklerdir. İkisine de bakacağız.

Kod Bloğu Araç Çubuğu

Araç çubuğunu görmek için blokta herhangi bir yeri tıklayın. Tüm araçları görmüyorsanız, farenizi bloğun altına yeni bir blok konumuna getirin ve ardından bloğa tıklayın. Tüm ayarlar görünecektir.

Kod Blok Türünü veya Stilini Değiştirin

İlk ayar sol ve sağ okları kullanır. Bu, bloğu Özel HTML Bloğu, Önceden Biçimlendirilmiş Blok olarak değiştirir, sütunları değiştirir ve arka plan rengini ayarlayabilmeniz, kenarlıkları seçebilmeniz ve diğer seçenekleri ayarlayabilmeniz için bir grup oluşturmanıza olanak tanır. Bunların üzerinde gezinmek, her birinin nasıl görüneceğine dair bir önizleme sağlar. Özel HTML seçeneğinin üzerine geliyorum.

Sürüklemek

Sürükleme aracı altı nokta içerir. Bloğu istediğiniz yere sürüklemek için bu noktaları tutun. Fareyi farklı alanların üzerine getirdiğinizde, olası her konuma yerleştirileceği yerde mavi bir çizgi belirir.

Bıraktığınızda, blok yeni yerine yerleştirilecektir.

Hareket

Yukarı ve aşağı hareket okları, her tıkladığınızda bloğu içerik blokları içinde bir blok yukarı veya aşağı hareket ettirir.

Kalın ve İtalik

Kalın ve italik ayarlar, vurguladığınız koda uygulanır. Bunları birlikte veya ayrı ayrı kullanabilirsiniz. Bu örnekte hem birlikte hem de bağımsız olarak kullanıyorum. Bu, koddaki belirli satırlara veya komutlara dikkat çekmenin iyi bir yoludur.

Bağlantı

Bağlantı, herhangi bir kodu tıklanabilir bir bağlantı yapmanızı sağlar. Vurguladığınız kod bölümünün URL'sini arayabilir veya girebilirsiniz. Bu, komutların her biri, diğer örnekler, kodun nereden geldiği vb. için öğreticilere bağlantı vermek istiyorsanız iyidir. Bağlantıyı aynı sekmede veya yeni bir sekmede açabilirsiniz.

Daha fazla ayar

Kod Bloğunun Diğer Ayarları, çeşitli seçenekler içeren bir açılır kutu açar. Bu örnekteki seçeneklerin her birini uyguladım.

Satır İçi Kod – kod olarak biçimlendirilmiş metni gösterir. Metni kendi başına bir satıra yerleştirir. Her şey kod olarak biçimlendirildiği için yazı tipi aynı görünüyor.

Satır İçi Görüntü – metnin içine fareyi yerleştirdiğiniz yere bir görüntü yerleştirir. Bir görüntü seçebileceğiniz Medya Kitaplığını açar. Resmi tıklarsanız, genişliğini değiştirebileceğiniz bir açılır kutu görürsünüz.

Klavye Girişi – seçtiğiniz koda klavye etiketleri ekler. Kod, tarayıcının varsayılan monospace yazı tipinde görüntülenir.

Üstü çizili – vurguladığınız koda bir satır ekler.

Alt simge – kodu bir alt simge olarak biçimlendirir.

Üst simge – kodu bir üst simge olarak biçimlendirir. Alt simge ve üst simgeyi birlikte kullanabilirsiniz. Bu, yazı tipinin boyutunu küçültür ve kodu yatay olarak ortalar.

Metin Rengi – vurguladığınız kodun rengini değiştirir. Hazır renkler arasından seçim yapın, renk seçme aracında bir renk seçin veya değeri HEX, RBG veya HSL olarak girin.

Seçenekler

Kod Bloğu seçenekleri, araç çubuğunun en sağındaki üç nokta içine yerleştirilir. Seçenekler şunları içerir:

Daha Fazla Ayarı Gizle – size temiz ve geniş bir çalışma alanı sağlamak için sağ kenar çubuğunu gizler.

Kopyala – bloğu kopyalar, böylece içerik alanı içinde herhangi bir yere yapıştırabilirsiniz.

Çoğalt – bloğun kopyası ve orijinalin altına yerleştirir.

Öncesine Ekle – Kod Bloğunun üzerine bir içerik alanı ekler.

Sonraya Ekle – Kod Bloğunun altına bir içerik alanı ekler.

Move To – ok tuşlarıyla yukarı veya aşağı hareket ettirebileceğiniz mavi bir çizgi koyarak bloğu hareket ettirmenizi sağlar. Çizgiyi istediğiniz konuma getirdiğinizde Enter'a basmanız yeterlidir.

HTML olarak düzenle – kodu HTML olarak düzenleyebileceğiniz blok için kod düzenleyicide yapılan değişiklikler. Bloğu tekrar görsel moda değiştirmek için Görsel Olarak Düzenle'yi seçin.

Yeniden Kullanılabilir Bloklara Ekle – bloğu yeniden kullanılabilir bloklarınıza ekler, böylece herhangi bir sayfada veya gönderide yeniden kullanabilirsiniz.

Grup – bloğu bir gruba ekler, böylece onlarda tek bir birim olarak değişiklik yapabilirsiniz.

Bloğu Kaldır – Kod Bloğu'nu siler.

Kod Blok Ayarları

Kod Bloğu ayarları sağ kenar çubuğuna yerleştirilir. Tipografi ve Gelişmiş ayarları içerirler. Bloğun seçilmesi ayarları gösterecektir. Kenar çubuğu görünmüyorsa, sağ üst köşedeki dişli çark simgesini tıklayın.

tipografi

Tipografi, tüm blok için yazı tipi boyutunu seçmenize olanak tanır. 7 boyutlu bir açılır kutudan yazı tipi boyutunu seçin veya alana özel bir boyut girin. Varsayılan yazı tipi boyutuna geri değiştirmek için Sıfırla'yı tıklayın.

ileri

Gelişmiş ayarlar, bir HTML bağlantısı ve ek CSS sınıfları için bir alan içerir. Bağlantı, yalnızca bu blok için bir URL'dir, böylece doğrudan ona bağlanabilirsiniz. Ek CSS sınıfları alanı, bloğa stil vermek için özel bir CSS sınıfı eklemenize olanak tanır.

Kod Bloğunu Etkili Kullanmak için İpuçları ve En İyi Uygulamalar

İçeriğinizde kodu görüntülemek istediğiniz zaman bu bloğu kullanın. Kodun kendisinin blok üzerinde herhangi bir etkisi yoktur.

Bir metin düzenleyiciyle kod oluştururken yaptığınız gibi kodu boşluklarla biçimlendirin. Kodunuzdaki belirli parçacıklara dikkat çekmek için kalın ve italik ayarları kullanın.

Herhangi bir kodda olduğu gibi, anlaşılması kolay olacak şekilde iyi etiketleyin. Kodu yorumlayabilir veya blok içine notlar ekleyebilirsiniz, ancak birinin kodu kopyalamak istemesi ihtimaline karşı bunların kod öğeleri içinde olmadığından emin olun.

Kod Bloğu Hakkında Sıkça Sorulan Sorular

WordPress Kod Bloğunun amacı nedir?

Başkalarının görmesi ve kullanması için kodu görüntülemek. Kodu, aralığınızı koruyan temiz bir düzende görüntüler.

Kod Bloğu kodu çalıştırıyor mu?

Hayır. Okuyucularınızın görebilmesi ve kullanabilmesi için biçimlendirilmiş kodu görüntüler. Kod, HTML kod etiketleri ile otomatik olarak sarılır.

Ne Tür Kodlar Gösterebilir?

Herhangi bir programlama veya komut dosyası dilinden herhangi bir kodu görüntüler. Dil hiç fark etmez.

Kodu biçimlendiriyor mu?

Hayır. Kod düzenleyici olarak çalışmaz, bu nedenle aralığı, renkleri, sayı eklemeyi vb. değiştirmez. Kodu yalnızca yazdığınız şekilde görüntüler.

Kod Bloğunun HTML Bloğundan farkı nedir?

HTML Bloğu, sayfanızın kod düzenleyici görünümüne geçmek zorunda kalmadan HTML oluşturmanıza olanak tanır. HTML'yi ön uçta çalıştıracaktır. Sonuçları arka uçtan önizleyebilirsiniz. Yürütülmesini istemiyorsanız, HTML'yi görüntülemek için Kod Bloğu'nu kullanabilirsiniz.

Önceden Biçimlendirilmiş Bloktan Ne Kadar Farklıdır?

Önceden Biçimlendirilmiş Blok, metni boşluklarınızla birlikte tek aralıklı bir yazı tipinde görüntüler. Kenar çubuğu seçenekleri için yazı tipi ve arka plan renkleri ekler.

Çözüm

WordPress Kod Bloğuna bakışımız bu. Blok basit ve kullanımı kolaydır. Kodu çalıştırmadığından, dilin kendisi önemli değildir. Bu blok, okuyucularınızın kopyalaması veya öğrenmesi için her tür kodu görüntülemenin iyi bir yolunu sağlar.

Senden duymak istiyoruz. WordPress kod bloğunu kullandınız mı? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

Danielala / Shutterstock.com üzerinden Öne Çıkan Görsel