Uzun zamandır yazmayı planladığım bu yazıya nihayet fırsat bulmuş bulunmaktayım.. Yazımızın konusu başlıkta özetlendiği gibi; WordPress scripti kullanan sitelerde yazıların içine eklenti kullanmadan ve kodları bozmadan ekleme yapmak, kod görüntülemek..
DİKKAT! Yazı, 24 Kasım 2011 tarihinde yayınlanmıştır ve erişim sağladığınız tarihte güncelliğini yitirmiş olabilir.
Daha önce defalarca eklentilerle denediğim ve çok sonra yabancı bir blogda görüp bu kadar mı kolaydı dediğim bu yöntem sayesinde mevcut sistemden faydalanıyor ve yazılarımızda güzel bir şekilde kodları görüntüleyebiliyoruz..
Öncelikle yönteme dair şunu söylemeliyim; yöntem bizim WordPress sistemimizin kendi editöründe geliyor, bizim yapmamız gereken şey ise eğer temamızın stil şablonunda pre ve code etiketleri tanımlanmamışsa onları tanımlamak ve yazı yazarken editörde biçim seçimi yapmak..
Normal şartlarda yazılarımızda bir kod yayınlamaya kalktığımızda şu sorunlarla karşılaşırız, ya kod yazı içerisinde otomatik yorumlanır ve uygulamaya geçer yada kod içerisindeki bazı karakterler (tırnak işareti, virgül gibi) farklı şekilde görüntülenir ve kodu alan kişi bu haliyle kullandığında kod işe yaramaz..
Ancak…
WordPress’in mevcut biçim sistemini kullanarak kodları eklersek kodlar bozulmadan olduğu gibi yazı içinde görüntülenir ve yazımızı okuyanlar kodları rahatlıkla alıp kullanabilir..
Öncelikle işin yazı editöründeki kısmını anlatıp daha sonra temanızda etiketler tanımlanmamış ise ne yapmanız gerektiğini anlatacağım, hazır olun başlıyoruz..
Farz edelim WordPress’de içinde html kodlar geçen bir yazı yayınlayacaksınız, örneğin “bağlantıyı yeni pencerede açan kod”..
Kodu yazı içerisinde normal haliyle eklerseniz kod yorumlanır ve yazıyı yayınladığınızda okuyucular “tıklandığında yeni pencerede açılacak bir bağlantı” görürler..
Ama siz yazıyı yayınlamadan önce editörde kodu ekleyip biçim olarak “önceden biçimli” seçerseniz bu seçime dahil tüm içerik script tarafından yorumlanmadan sizin belirlediğiniz stilin içinde görüntülenir..
Orijinal WordPress Editöründe;
FCKeditör Kullananlarda;
Biçim Seçilerek Eklenmiş Örnek Kod;
<a href="https://www.nays.tr" target="_blank">bağlantı ismi</a>
Belki bir kısmınız bahsi geçen yöntemi uygulamış ve olumlu sonuç alıp “bu kadar mı kolaydı” diyor olabilir ama bazılarınızda yöntemi uyguladıkları halde kodları bozuk görüyor olabilir..Eğer yöntemi uyguladığınızda kodlar hemen yukarıdaki örnek gibi kaydırmalı alanda görünmüyorsa yazıyı okumaya devam edin..
Yazıya başlarken söylemiştim ya eğer temanızın stil dosyasında pre ve code etiketleri tanımlı değilse sonuç olumsuz olacaktır diye..İşte şimdi bu olumsuz görünümü olumluya çeviricez..
Hemen temanızın mevcut stil dosyasını bulup ftp alanından indiriyor, bir yazı editörü yardımı ile (not defteri veya notepad++) açıyor ve içerisinde deneme amaçlı pre ve code kelimelerini aratıyorsunuz…Eğer iki kelimeden birine veya her ikisine rastlarsanız aşağıda verdiğime benziyor mu? eksik varsa neresi eksik? kontrol ediyorsunuz…Eğer arama sonucunda iki kelimeye de rastlamıyorsanız aşağıda vereceğim kodları şablonda uygun bir yere ekliyor ve kaydedip ftp alanına, tema klasörü içine atıyorsunuz..
Stil şablonunda olması gereken kodlar;
pre{ margin-bottom:1.3em; color: #0000f4; background:#fff; border:0.1em solid #ddd; padding:1.5em; overflow:auto;} code{ font:1.1em Monaco,monospace; color: #cf1519; overflow:auto;}
Yukarıdaki kodlardan ilki yani pre yazan, biçimi şekillendiriyor, arkaplan beyaz renk olsun, kenarlıklar olsun, taşma otomatik ayarlansın vs..ikinci kod yani code ise biçimlendirilen alan içindeki özel seçimin yazı stili ve rengini ayarlıyor..
Örnekle anlatmak gerekirse, yazımıza bir kod ekledik ve kod içerisindeki bir komutu farklı renkle işaretlemek istiyoruz, o zaman code etiketini kullanıyoruz ve kodumuz içindeki bu özel seçim stil şablonunda söylendiği renk ve yazı karakteri ile ayrıcalıklı gösteriliyor..
<a href="https://www.nays.tr" target="_blank"
>bağlantı ismi</a>
Yukarıdaki örnek kodu incelediğinizde bahsettiğim şeyin ne olduğunu daha iyi anlayacaksınız, örnekte “bağlantıyı yeni pencerede açmaya yarayan” komutu code etiketleri arasına alıp farklı renkle gösterebildim..
Eğer size code etiketi lazım değilse sadece pre kullanarak devam edebilirsiniz ama code etiketinide kullanıcam diyorsanız size kötü bir haberim var, sanırım standart editörde code etiketi için bir buton konulmamış, bu nedenle code etiketini elle yazmanız yada Dean’s FCKeditör kullanmanız gerekiyor..FCKeditör kullananlar code etiketini hangi buton ile kullanabileceklerini ise aşağıdaki resimde görebilirler..
Resimde de gördüğünüz gibi özel seçimi yapıp ardından Computer Code seçtiğimizde bu seçili alan stil şablonunda (code başlığında) tanımladığınız şekilde görüntülenecek..
Notlar:
1- Eğer standart WordPress editörde code etiketini kullanmaya yarayan bir buton varda ben bulamadıysam lütfen yorum olarak bildirin..
2- Yazıyla ilgili sorularınız varsa konu altından yorum olarak gönderin..
3- Bu yöntemi kullanmak yerine eklenti kullanmak isteyenler var ise uyarayım, bazı eklentiler kodlardaki tırnakları bozuyor kodlar çalışmayabiliyor ve bazı eklentiler html dizimini değiştirdiğinden yazınızda “aşağıdaki kodu aratın” tarzında bir kod verirseniz okuyucularınız kodu kod belgelerinde arattıklarında bulamayabiliyorlar..
4- Ben illaki eklenti kullanacağım diyenler bu bağlantıdaki eklentilere göz atabilir, istediklerini kurup deneyebilirler..
5- Yazıda verdiğim stil kodlarının ikisi de kendi sitemde kullandıklarımdır. İsterseniz renkleri, yazı stilini ve kenarlıkları kafanıza göre değiştirip kullanabilirsiniz..
“Bu sorunu nasıl çözerim” diye 1 saattir Google’da arıyorum. Nihayet burada buldum. :) Özellikle çok basit çözümünün olduğunu görünce çok şaşırdım. “Bu mudur yani?” dedim kendi kendime. :D Allah sizden bin kere razı olsun.
Son olarak ben de şunu söyleyeyim, çorbada benim de tuzum bulunsun. Yazının sonunda “Eğer standart wordpress editörde code etiketini kullanmaya yarayan bir buton varda ben bulamadıysam lütfen yorum olarak bildirin.” diye belirtmişsin. Yazı ekleme sayfasında “Görsel ve Html” yazan yerden html yazan yere tıklayınca code tagı çıkıyor. ;)
@soulmy; Rica ederim. Katkınız içinde teşekkür ederim. Yorumunuzu yeni fark ettim. 5 sene sonra :))
Merhabalar, içine kodları yazdığınız kaydırmalı kutucuğu wordpresste. nasıl oluşturabiliriz. Yardımcı olur musunuz?
@Aile Dergisi; Merhaba. Şuan yorum yazdığınız yazıda zaten nasıl yapacağınızı anlattım. Yazıyı okursanız yapabilirsiniz.
Hocam pekş bu ayarın ücretsiz wordpress kullananlar için nasıl olacağı hakkında bilginiz varmı :D
@Sezer; Merhaba. Blogunuzun tema css dosyalarını düzenleyebiliyorsanız aynısını yapabilirsiniz. Ancak bazı konularda wordpress.com için para ödemek gerekiyor. Bunun içinde gerekiyor olabilir.
pre code etiketleri ile yazdığımızda html taglarını nasıl renklendiririz. mesela div h5 vs. taglar tek bir renk olsun istersek ne yapabiliriz?
@Ersin Koray Gonce; Merhaba. Şuan denemesini yapamıyorum ama css dosyanızda pre altına p etiketi ekleyip “color” komutu ile p etiketi kullandığınız her metni istediğiniz renk gösterebilirsiniz veya bu işi eklenti ile hallederim derseniz bu bağlantıdaki eklentiyi kullanabilirsiniz. Yazımda target=”_blank” için renklendirme yaptım ama rengi gri yaptığımdan anlaşılmıyor belki.