WordPress Kod Kutusu Ekleme

WordPress Kod Kutusu Ekleme

Arkadaşlar, bu yazımda sizlere WordPress tabanlı sitenize nasıl kayan kod kutusu ekleyebileceğinizi anlatmak istiyorum. Öncelikle şunu söylemekte fayda olduğunu düşünüyorum. Kod kutusu gibi, temanıza ait stil dosyasına birkaç php kodu ekleyerek yapabileceğiniz, son derece basit bir fonksiyonu dahi eklenti kullanarak oluşturmak, sitenize yarardan çok zarar getirecektir, ki bunu aklınızın bir köşesine yazın.

Bilmeyenler için kod kutusu, kodların çalışmasını engelleyerek, yazımızda açık bir şekilde kodu okuyucunuza sunmanızı sağlayan, uzun kodları kaydırmalı yapısıyla görünümü bozmayacak şekilde kaydırarak görüntüleme olanağı sunan kutucuklardır.

Kaydırmalı kod kutusu için aktif wordpress temanıza ait sitil dosyasına, aşağıdaki kodlardan istediğiniz herhangi bir tanesini eklemeniz yeterli olacaltır.

En basit olarak şu kodu kullanabilirsiniz

pre {
overflow: auto;
border: 1px solid;
}

Kullanabileceğimiz 2.kod

pre{
 font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
 color: #000000;
 background-color: #9f87a8;
 font-size: 12px;
 border: 2px dashed #0c0b0c;
 line-height: 14px;
 padding: 5px;
 overflow: auto;
 width: 100%
 }

Kaydırmalı kod kutusu için farklı 3. bir css kodumuz

pre {
 white-space: pre-wrap;
 line-height: 1em;
 margin: 15px -2px;
 overflow: auto; color: #333;
 background: c3d8d7;
 padding: 6px; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 3; -ms-word-break: normal; word-break: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none;
 position: relative;
 border: 1px solid;
 }

İlerleyen günlerde daha farklı sitillerde kaydırmalı kod kutusunu buraya eklemeyi düşünüyorum.

Bu kodları stil.css veya varsa stil.php dosyanıza ekledikten sonra yazılarınızda php kodu paylaşacağınız zaman, aşağıdaki resimde gördüğünüz gibi kodların yazı formatını paragraf değil de prefomatted olarak seçiyoruz.

Eğer yazı panelinizde bu bölüm görünmüyorsa ayarlar–>>yazma ayarları tıklayarak ”WordPress should correct invalidly nested XHTML automatically” yazan kutucuktaki tiki kaldırıyoruz. Bu şekilde kodların çalışmasına engel olarak yazımızda olduğu gibi gösterebiliyoruz.

BU KONUYU SOSYAL MEDYA HESAPLARINDA PAYLAŞ
ZİYARETÇİ YORUMLARI

Henüz yorum yapılmamış. İlk yorumu aşağıdaki form aracılığıyla siz yapabilirsiniz.

BİR YORUM YAZ