Yazıya Yorum Gönder!
facebook share twittershare

Wordpress Yazılarda Eklentisiz Kod Yazma

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;

Wordpress Yazılarda Eklentisiz Kod Yazma

FCKeditör Kullananlarda;

Wordpress Yazılarda Eklentisiz Kod Yazma

Biçim Seçilerek Eklenmiş Örnek Kod;

<a href="http://www.lordiz.com" 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="http://www.lordiz.com" 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..

Wordpress Yazılarda Eklentisiz Kod Yazma

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..

facebook share twittershare

    soulmy 13 Ekim 2012, 15:25

    “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. ;)

    Lordiz 21 Şubat 2017, 01:56

    @soulmy; Rica ederim. Katkınız içinde teşekkür ederim. Yorumunuzu yeni fark ettim. 5 sene sonra :))

    Aile Dergisi 04 Ağustos 2017, 16:15

    Merhabalar, içine kodları yazdığınız kaydırmalı kutucuğu wordpresste. nasıl oluşturabiliriz. Yardımcı olur musunuz?

    Lordiz 05 Ağustos 2017, 14:25

    @Aile Dergisi; Merhaba. Şuan yorum yazdığınız yazıda zaten nasıl yapacağınızı anlattım. Yazıyı okursanız yapabilirsiniz.

Üyeliksiz Yorum Bırak

Sorularınıza gelen cevapları görmek için sayfayı CTRL+D tuşları ile Yer İmlerine eklemeyi unutmayın.


Lordiz.com © 2008~2017