Bloglarımızda şablon kodlarıyla nasıl oynanır...

Canlarım merhaba. 

Hepimizin ortak derdi olan blog şemamızı değiştirdiğimizde yaşadığımız zorlukları bir nebze de olsa aşmak, blog şeklini, yerleşimini, renklerini, kullanılan fontları, font renklerini, fotoğraf yerleşimlerini değiştirme isteriz hep. Ama çoğu zaman bunu beceremeyip, kadere küsüp eski haline döneriz, ya da  istemesekde nasıl bulduysak aynen öyle devam ederiz yeni şemamıza.

Yetenek-sizin arkadaşımızın "Çıldırmak üzereyim, Yardım" yazısını okuyan sevgili eşim, hem bana, hem  Yetenek-sizin arkadaşımıza, hem de bu gibi derdi olan herkese yardımı olabilir diye bir yazı yazmaya karar verdi. Tek endişesi var bir yanlışlıkla "Dimyat'a pirince giderken kimseyi evindeki bulgurundan da ettirme". Benim ısrarımla aşağıdaki yazı ortaya çıkmış olup, onun kelimeleriyle yayınlamayı uygun buldum.

Aman dikkatli olun, O'nu endişelerinde haklı çıkarmayalım. Sözü (yazıyı) sevgili eşime bırakıyorum :))

Görüşmek dileğiyle canlarım.

***************************

Herkese selamlar,

Bizim hemencecik değiştiriverdiğimiz her bir şablon esasında bir yazılımdır. Her bir şablonu oluşturan yazılımda bulunan kodlar da o sayfanın çalışmasını, yerleşimini, renklerini vb. sağlamaktadır. Bunun dışında sitenin ana kodları vardırki, şablonunuza ait kodlar da ana kodlarla birlikte çalışırlar. Zaten çalışmadığında (birbirine uyumlu olmadıklarında sıkıntı çıkar ya, bilirsiniz.

O basit sanılan yazılımın içerisinde o kadar kod vardır ki, eğer bilebilirseniz ya da bulabilirseniz, aynı yazılımda kodları değiştirir ve bambaşka bir görünüm elde edebilirsiniz. Hem sadece size ait, hemde başka kimsede olamayacak özelliklerle.

Bu kodları görebilmek ve üzerinde değişiklikler yapılabilmesi için yapmanız gereken hususları basitce anlatmaya çalışayım.

1) Öncelikle kendi bloğunuzun bağlı olduğu "Kumanda Paneli'"e girmeli, oradan fotoğrafınızın sağ tarafındaki "Yerleşim" butonuna basmalısınız. Açılan sayfada "Yerleşim" sekmesi altında, bloğunuzu şekle sokmak için tüm seçenekler size sunulmuştur.

ÖNEMLİ

2) Herhangi bir işlem yapmadan önce, ne olur ne olmaz diye "HTML'yi düzenle" sekmesinin hemen altında bulunan "Şablonu Yedekle / Geri Yükle" yazısının hemen altında sağda bulunan "Tam Şablonu Yükle" butonunu tıklayın. Mevcut şablonunuzu "xml" dosyası halinde bilgisayarınıza kaydedin. Sonra ismini  örneğin "şablon_yedek_tarih.xml" olarak değiştirin. Bu şekilde hangi tarihe ve hangi şablona ait yedek olduğunu daha rahat hatırlarsınız.

Daha sonra bir hata ya da aksaklık olduğunda aynı yerin bir alt satırında bulunan "Sabit sürücünüzdeki bir dosyadan şablon yükleyin" kısmında "Gözat"ı tıklayıp, daha önce kaydettiğiniz "şablon_yedek_tarih.xml" dosyasını geri yükleyebilesiniz. 

Burada anlatılan yedekleme işlemini yapmadan, herhangi bir değişiklik yapmamanızı şiddetle tavsiye ederim.

3) "Yerleşim" sekmesi altında bulunan "Sayfa Öğeleri" sekmesinde, sayfanızda bulunan öğeleri, içeriklerini, yerlerini belirleyebilir, başka bir ifadeyle sayfa öğelerini ekleyip, yerlerini değiştirerek ve hatta sayfanıza sabit fotoğraflar ekleyerek düzenleyebilirsiniz. Yaptığınız değişiklikleri görmek için "Önizleme", silmek için "İptal",işlemi tamamlamak için de "Kaydet" tuşunu kullanmalısınız.

4) Bloğunuza eklediğiniz eklentilerin kodlarını inceleyiniz. Mesela bir "saat" eklentisinin kodunu internetten buldunuz ve "Sayfa Öğeleri"nde eklerken bazı istemediğiniz ifadeleri çıkartabileceğinizi, yenisiyle değiştirebileceğinizi ya da eklentinin büyüklüğünü değiştirebileceğinizi göreceksiniz.

Eşimin bloğuna eklediğim saat bölümünde firmanın altta çıkan reklamını sildim, saati sayfaya göre ufalttım, üst ve alttaki boşluklarını daralttım. 5 satırlık kod tarifi, böylece 2 satırda tamamlanmış oldu :) Sizde istenmeyen kısımları deneme yanılma ve ön izlemede kontrol ederek deneyebilirsiniz.

5) "Yerleşim" sekmesi altında bulunan "Yazı Tipleri ve Renkleri" sekmesinde, sayfanızda bulunan yazıların tipleri ve renklerini değiştirebilirsiniz. Soldaki pencerede ilk seçenek yazı tipi, diğerleri renk değişikliği ile ilgilidir. Renkler şeklinde ifade edilmektedir (mesela "#ffffff" beyaz, "#oooooo" siyah, "#ff0066" kırmızı, "#0000ff" mavi gibi). Belirgin bir rengin kodunu internetten aratarak bulabilirsiniz. PhotoShop ve benzeri fotoğraf işleme programında istediğiniz herhangi bir rengin kodunu daha da kolay bulabilirsiniz. Bu durumda, kendinize sadece size özel renkler de yaratabilirsiniz.

Esasen çok detaya girmeden, yani kodlarla savaşmak yerine bu kısımdan da bloğunuzun çehresini fazlasıyla değiştirme şansınız var.

Zaten yaptığınız değişikliğin etkisini hemen altta bloğunuzun "Ön İzleme"sinden takip edebilmektesiniz. Değişiklikler sizi memnun ettiyse "Kaydet"meyi, etmediyse "İptal Et"meyi sakın ihmal etmeyin.

6) "Yerleşim" sekmesi altında bulunan "HTML'yi Düzenle" sekmesinde "Şablonu Düzenle" kısmı altındaki pencerede, sayfanızda bulunan ne var ne yoksa hemen hemen hepsinin zelliklerini değiştirebileceğiniz kodları görmektesiniz. Bazı istekleriniz, site ana yazılımıyla alakalı olduğu için, değiştirme şansını bulamayacağınız hususlar da olacaktır.

Eğer bu kodları ilk defa gördüyseniz veya kodlar hakkında bir bilginiz yoksa kesinlikle üzerinde değişiklik yapmamanızı öneririm.

Yinede ısrarcıysanız Madde 2'de belirtilen mevcut şablonunuzun kaydedilmesi işlemini yerine getirdiğinizden emin olunuz. Benim tarifimden, sehven yaptığım hatamdan ya da sizin algınızdan kaynaklanan bir hatadan dolayı bloğunuzun zarar görmesini ve hatta sorumluluğunu da almak istemem.

İlk önce bu kodları yukarıdan aşağıya göz gezdirmeniz ve neyin nerede yazıldığını keşfetmenizi öneririm. Şöyleki; kodlar sayfa içerisindeki tüm detayları içermektedir ve bu detaylar da bir mantık sırasına göre dizilmiştir. İngilizce bilmeniz işinizi çok daha kolay hale getirecektir.

Eşimin sitesine ait kodlara baktığımda; yazılıma ve yazana ait ilk tanıtımdan sonra ana kısım "Variable definitions" ifadesiyle başlıyor. "Group description" bölümleri altında her bir grubun (mesela başlık, arkaplan, widget, vb bölümlerinin) yazılarında hangi karakteri kullanacağı (font), yazı rengi (font colour), arka veya başlık renginin (background, header colour) ne olacağı bu bölümlerde mevcuttur. Siz nereyi değiştirecekseniz, kodların içerisinde önce o kelimenin geçtiği yeri bulup, sonra gerekli değişiklikleri yapmanız gerekmektedir.

Yani neyi değiştirecekseniz ingilizcesini metin içerisinde bulmak için "Ctrl+F"e basarak sol en altta "Bul" penceresini açın. Açılan pencereye arayacağınız kelimeyi yazın, bulduğu yerde sizi ilgilendiren değişikliğe dair bilgi varsa orada, yoksa "Sonrakini Bul"u tıklayarak taki bulana kadar işleme devam edin. Değiştireceğiniz renkse, colour ifadesi yanındaki kodu, fontsa yanındaki font ismini, ölçüyse yanındaki marjin ya da value değerini değiştirin. Önizlemeye yaparak istediğinizin olup oladığına bakın. Olmamış ise ya yanlış değer girilmiş ya da yanlış yerde değişiklik yapılmış demektir. Başka yerde deneyin, çoğu zaman gerçek yeri bulmak sizi sıkacak ve yoracaktır.

Sırasıyla "Content", "Columns", "Header", "Tabs", "Headings", "Widgets", "Posts", "Footer" başlıkları altında ise, içerik, kolonlar, başlık, sekmeler, konu başlıkları, eklentiler, postalar ve dip yazılarla ilgili olarak yerleşimleri ve pozisyonlarıyla ilgili detay bilgiler bulunmaktadır. Burada yapacağınız değişiklikler, sayfanın geri kalan kısmınıda etkileyebileceğini unutmayınız. İngilizce şablonların başlıkları burada aratılarak Türkçeleştirilebilmektedir (mesela "home" yerine "anasayfa"yazmak gibi).

Yaptığınız değişikliğin etkisini hemen altta bloğunuzun ön izlemesinden takip edebilmektesiniz. Değişiklikler sizi memnun ettiyse kaydetmeyi, etmediyse iptal etmeyi ihmal etmeyin.

7) Şablon değişikliklerinde, internetten bulup beğenip bilgisayarınıza indirdiğiniz şablonları yine burada "Sabit sürücünüzdeki bir dosyadan şablon yükleyin" kısmında "Gözat" ı tıklayıp, yine "xml" uzantılı bu şablon dosyasını yüklemelisiniz.

Bu tür yüklemelerde, yeni şablonunuzun eskisindeki pekçok işlevi yerine getirmediğine dair uyarı mesajı alacaksınız. Bu durumda çalışmasa da "Uyarı: Yeni şablonunuz şu widget'ları içermiyor" uyarısı adığınızda, ileride bunu kullanılır hale getirebilme ya da ne olduğunu hatırlayıp, çalışanından edinmeyi sağlamanız amacıya "Widget'ları Tut" butonuna  basmayı ihmal etmeyin. Sonra telafi edebilirseniz birşey olmaz, ya da edemeyip yenisini bulur, eskisini silme hakkınız olur.

Yaptığınız şablon değişikliğinin etkisini hemen altta bloğunuzun ön izlemesinden takip edebilmektesiniz. Değişiklikler sizi memnun ettiyse kaydetmeyi, etmediyse iptal etmeyi burada da ihmal etmeyin.

8) Deneme yanılma en güzel öğrenme metodudur esasında, ama son halinizi ne zaman kaydedip kaydetmeyeceğinizi asla karıştırmamalısınız. Daha önce dediğim gibi, en basit düzenlemenizin nasıl yapılacağını 4. maddede anlatmıştı.

9) Bunun yanı sıra sayfanızda yüklediğiniz fotoğrafların yerinin kayması (Yetenek-sizin arkadaşımızın bir başka problemiydi) sadece o fotoğrafın tanımıyla alakalıdır. Fotoğrafı yüklediğiniz sayfada düzenleme işlemine girdiğinizde, ilgili fotoğrafın üzerini tıkladığınızda hemen altında yerleşim ve boyut seçeneği çıkmaktadır.

Seçeneklerden sol taraftakiler boyutu, sağ taraftakiler yerleşim yerini ifade eter ki her iki grubu da "orta" olarak işaretlemeniz en uygunudur. Böylece hem sayfanızdan taşmayacak, fotoğraf hemde sayfanın ortasında yer alacaktır.

Umarım faydalı olmuşumdur, sürçü lisan ettiysem affola. 

Tekrar ediyorum, benim tarifimden, sehven yaptığım hatamdan ya da sizin algınızdan kaynaklanan bir hatadan dolayı bloğunuzun zarar görmesini ve hatta sorumluluğunu da almak istemem. Bu yazı sadece fikir vermek amacıyla yazılmıştır. 

Kodlara girip, istediğinizi elde etmek öyle sanıldığı kadar olmayıp, esasında burada kısaca anlatmaya çalıştığım kadar bir bilgiyle de altından kalkılabilecek bir husus değildir. Dediğim gibi, en azından bir bilginiz olmasını amaçlayarak yazıyorum.

Saygı ve selamlarımla.

Murat

Dip Not: Değerli eşimin desteğiyle belki bende kendi bloğumu kuracağım, ama sizler gibi faydalı ve igili olabilirmiyim bilemem. Ben Makina Mühendisiyim, hobi uğaşlarım ise evdeki her türlü tamiratlar (en çokta oğluşumun arabalarından söktüğü tekerler ve aksamları), bir takım iş kolaylaştırıcı mekanizma veya icatcıklar (fotoğrafçılıkta kullanmak üzere softbox, ürün çekim çadırı, makro odaklama kızağı vb.), hani icat çıkartma denen türden :))) ve aslen fotoğraf. Eğer lütfederseniz, kurucu ortağı olduğum ARTZEL PHOTOGRAPHY sitesine sizleride beklerim. Orada ismim Muratte'dir. Saygılarımla.