Photoshop tasarımlarını Wordpress temasına dönüştürmek.. Ücretsiz!

Photoshop’da tasarladığınız yeni blogunuzun temasını Wordpress teması haline getirmeyi denediyseniz ve eğer CSS, XHTML bilginiz çok az ya da hiç yoksa bunun bir işkenceden farksız olduğunu görmüşsünüzdür.

Profesyonel web sitesi tasarımcıları web sitelerini önce Photoshop gibi bir grafik uygulamasında layerlar halinde tasarlar. Daha sonra bu tasarımı XHTML halinde kodlayıp, bizim “tema” dediğimiz şeyi ortaya çıkarırlar. Ancak dediğim gibi XHTML, CSS ve PHP bilginiz az ise bu iş hiç de görüldüğü kadar kolay değildir.

İşte bu noktada Photoshop (PSD) tasarımlarını XHTML formatına çeviren servisler giriyor devreye. Her ne kadar blogculukla ciddi anlamda uğraşan bir blogcu için bu servisin ücreti o kadar da önemli olmasa da, bu servisin ücretli bir servis olduğu gerçeğini değiştirmiyor.

Ancak artık bu işi ücretsiz olarak yapabilen bir servis daha doğrusu bir Photoshop plugini var: Divine.

Divine, Photoshop CS3 ve CS4 ile çalışabilen bir Photoshop Plugini. Yaptığı şey Photoshop tasarımınızı Wordpress temasına çevirip kaydetmek. Yani hiç XHTML, CSS bilginiz yoksa bile bu eklenti sayesinde Photoshop tasarımınızı kolayca Wordpress teması haline getirebilirsiniz. Ücretsiz olarak dağıtılan Divine’in bazı kısıtlamaları mevcut ancak basit anlamda tasarımlarınızı Wordpress teması haline getirmenize yetiyor. Eklentinin henüz ücretli bir sürümü yok ancak ileride olacak.

Eklentinin nasıl çalıştığıyla ilgili olarak aşağıdaki videoyu izleyebilirsiniz.

http://www.youtube.com/watch?v=nTd0eLHrHuc

Eklentiyi buradan indirebilirsiniz.

2009 ve Yeni Tasarıma Merhaba

8 Ocak 2008′de açtım Teknoloji Herşeyim’i..

Daha 25 Ocak 2008′de ilk tema değişikliğini gerçekleştirmiştim. İnsan bir işe heyecanla girince gözden kaçırdığı çok fazla nokta oluyor. İşte bu noktalar sayesinde beni yaklaşık 4 ay gibi bir süre taşıyacak olan Wp-Premium temasına geçiş yapmıştım. Yine çok fazla eksikler vardı..

16 Nisan 2008 tarihinde ise, uzun bir süre birlikte devam edeceğimiz TriologyNext adlı temaya geçiş yaptım. Daha sonra bu temayı da çok fazla editledim. Hatta bir süre sonra TriologyNext’in o karanlık yüzünden sıkılıp temayı 2. defa editlemiştim. İyi eleştirilerin yanında bir çok olumsuz eleştiri de almıştım bu son düzenlemeden sonra.

Ve tarih 28.12.2008..

Hem eski temadan çok fazla sıkılmam, hem TriologyNext’in ağır altyapı hataları ile artık başa çıkamamam, hatta “yeni bir tema yazmak, TriologyNext’i editlemekten daha kolay olurdu” şeklinde düşüncelere kapılmam nedeniyle, bir süredir düzenlemek ile uğraştığım yeni temama nihayet geçtim. Bu kez kullandığım tema Revolution Lifestyle. Fakat baya bir mutasyona uğradı kendileri, tanınamaz hale geldi (:

Hazırladığı temaların kod altyapısının kalitesi ve stabilitesi dünyaca kanıtlanmış olan Revolution’ın, Lifestyle adlı magazin temasını editleyerek son haline getirdim. Hem yeni yıl, hem de Teknoloji Herşeyim‘in 1. yıl dönümünün yaklaşması nedeniyle tam isabet oldu sanırım. (: Yeni yıl için de özel bir header hazırladım bu arada..

Temayı düzenlerken nelerle cebelleştiğimi de kısa kısa not almıştım. Aklımda kalanlar:

• Revolution Lifestyle’ın galeri entegrasyonunu kaldırdım.
• Ana indexdeki Revolution Lifestyle’ın magazin stilini, standart blog stiline dönüştürdüm.
• Nav renkleri değiştirildi
• Nav fontlar değişti
• Postarea çerçeve kaldırıldı
• Yeni background atıldı
• Fontlar ve satır aralıkları düzenlendi
• Başlıksız yazılar için permalink ikonu ana indexe eklendi
• Eski temadaki, twitter kategorisine yazı yazılınca başlık altında çıkan twitter ikonu için kod entegre edildi
• Sidebar’a rss üyelik formu tasarlandı
• Google arama formu entegre edildi
• Arrow ikonlar değiştirildi
• Ana indexde, yazıların başlıklarının altını gerçek kalemle çizdim (:
• Reklamlar için fontlar değiştirildi
• Sağ üste rss ve whos amung ve twitter counter yerleştirildi
• Arama kutusunun yanına ikon eklendi
• Yılbaşı ve yeni tasarım için özel header hazırlandı
• Wordpress admin giriş ekranına th logosu atıldı.
• Twitter ve Last.fm için sidebar’a postit tasarlandı
• Saidebar’a “Beni takip et bölümü eklendi”
• Footer’ın boyutları yeniden düzenlendi.
• Header’ın boyutları yeniden düzenlendi.
• Header en üst kısma istatistikler fonksiyonu eklendi.
• Nav alanına mevcut sayfaların linkleri eklendi, otomatik olarak sayfa linklerini gösteren wp fonksiyonu kaldırıldı.
• Her tekil sayfada tekrar yüklenen bazı ağır grafik dosyalarını flickera yükleyip, ayda yaklaşık 15gb bandwidth tasarrufu sağlandı (:
• Tema son şeklini aldıktan sonra tamamen Türkçeleştirildi.
• Wordpress 2.7 entegrasyonu için son düzenlemeler yapıldı.

Bu kez gerçekten içime sinen bir temaya kavuştuğumu düşünüyorum ve uzun bir süre bu temayı kullanacağım sanırım. Eminim bir çok eksikler ve düzenlemeler çıkacak yine ama onları da zamanla hallederiz artık.

Yeni tasarım hakkındaki olumlu ve olumsuz görüşlerinizi belirtirseniz sizlere müteşekkir olurum. (:

Wordpress 2.7 ve yeni yorum alanını entegre etmek

Wordpress 2.7 ile birlikte gelen bir çok özellikten birisi de yorum alanı için yapılan geliştirmeler. Artık yorum alanında, yorumlar sizin istediğiniz sayıda sayfalara bölünebiliyor, otomatik olarak gravatar entegrasyonu yapılıyor ve yorumlarınıza numara veriliyor. Tüm bu geliştirmeler için ise wp_list_comments fonksiyonu kullanılıyor. Wordpress 2.7 ile gelen yeniliklerin bir listesine Teakolik’in yazdığı bu yazıdan ulaşabilirsiniz.

Wordpress 2.7 yorum alanı için yapılan geliştirmelerden en çok dikkat çekeni ise artık yorumların otomatik olarak sayfalara bölünebilmesi. Bu iş için eskiden eklenti kullanmak zorundaydık ancak artık Wordpress 2.7 yi kullanıyor olmamız yeterli. Admin paneli/Ayarlar/Tartışma bölümüne girdiğinizde:

Her sayfada xx yorum olacak şekilde ve xx sayfa gösterilecek şekilde yorumları sayfalara böl

şeklinde yeni bir ayar seçeneğinin geldiğini göreceksiniz. Buradan, yorumları kaçar kaçar ve kaç sayfaya böleceğinizi ayarlayabiliyorsunuz. Eminim hevesle bu ayarı yapıp yorumların sayfalara bölündüğünü görmek istediniz ancak sonuç alamadınız. Bunun için temanızın comments.php dosyasını Wordpress 2.7 ile uyumlu hale getirmeniz gerekiyor. Aksi taktirde yorum sayfalama, yorum numaralandırma gibi fonksiyonlardan mahrum kalıyorsunuz. Zira bazı fonksiyonların isimleri dahi değişmiş durumda.

Wordpress 2.7 mi kurulu?

İlk olarak comments.php dosyanızın başına bu kontrol bloğunu entegre etmeniz gerekiyor. Bu kod yeni fonksiyonumuz olan wp_list_comments fonksiyonunun var olup olmadığına bakıyor ve eğer yoksa (yani Wordpress 2.7 den eski bir versiyon kullanıyorsanız) eski fonksiyonların da sağlıklı bir şekilde çalışmasını sağlıyor. Fonksiyonun çalışabilmesi için eski Wordpress comments.php kodlarını else kısmına, yeninin kodlarını ise ana döngü içerisine yerleştirmeniz gerekiyor. Şunu da hatırlatmalıyım ki bu kod zorunlu bir kod değil. Eğer tema geliştiriyor ve temanızın eskiye de uyumlu olmasını istiyorsanız bu kısmı kullanın.

if (function_exists('wp_list_comments')) :
// new comments.php stuff
else :
// old comments.php stuff
endif;

Parola koruması

Bu bölüm eğer içeriğinize şifre vermişseniz, Wordpress’in bu durumu kontrol etmesine yarıyor. Esasında eski sürüm ile arasında çok büyük bir farklılık yok. Sadece cookieleri direkt kontrol ediyor. Bu kodu temanıza eklediğinizde, temanız artık ileriye doğru uyumlu olacak ve eski Wordpress sürümlerinde hata verecektir.

if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) {
echo 'This post is password protected. Enter the password to view comments.';
return;
}

Yorum döngü alanı (The Comments Loop)

En fazla kod değişikliği bu alanda yapılmış. Eski comments.php dosyanız basit olarak şu şekilde görünüyordu:

if ($comments) :
< ?php $comment_count = get_comment_count($post->ID); echo $comment_count['approved']; ?> Comments
<ul class="commentlist">
< ?php foreach( $comments as $comment ) :
// stuff to display the comment in an LI here
endforeach;
?></ul>
< ?php else :
if ('open' == $post->comment_status) :
// If comments are open, but there are no comments.
else :
// comments are closed
endif;
endif;

Ancak Wordpress 2.7 ile birlikte comments.php loop bölümü aşağıdaki şekli alıyor:

if ( have_comments() ) : ?>
<h4 id="comments">< ?php comments_number('No Comments', 'One Comment', '% Comments' );?></h4>
<ul class="commentlist">
< ?php wp_list_comments(); ?></ul>
<div class="navigation">
<div class="alignleft">< ?php previous_comments_link() ?></div>
<div class="alignright">< ?php next_comments_link() ?></div>
</div>
< ?php else : // this is displayed if there are no comments so far ?>
< ?php if ('open' == $post->comment_status) :
// If comments are open, but there are no comments.
else : // comments are closed
endif;
endif;

Yeni comments.php dosyası bu kadar az koddan meydana geliyor ancak dikkat edilmesi gereken üç önemli noktası var:

• have_comments() fonksiyonu $comments değişkeninin yerini alıyor. Eski temanızdaki $comments değişkeni kullanılan yerleri bu yeni fonksiyonlar değiştirmelisiniz.
• wp_list_comments() yorum bölümünün temel direği olan fonksiyon. Bütün yapılan yorumların çıktısını bu yeni fonksiyon veriyor.
• Bu yeni wp_list_comments() fonksiyonu, yorumları otomatik olarak sayfalara bölüyor. Yani başka bir değişle; yorum sayfalama işini de bu fonksiyon tek başına yapıyor.

En önemli yenilikler bunlar. Bunların dışında comment-reply scripti gibi önemli yenilikler de bulunuyor. Tabi bu scripti de  temanıza entegre etmeniz gerekiyor. Daha detaylı bilgi için Otto‘nun yazdığı detaylı dökümanı inceleyebilirsiniz. Entegrasyonla ilgili problemleriniz için bu başlık altından tartışabiliriz.

Google Chrome Wordpress Teması

Google Chrome hastalık haline geldi ve artarak yayılmaya devam ediyor. Şimdi de karşımızda Google Chrome Wordpress Teması var [via] (: Temanın özellikleri:

• Çift kolonlu
• Widget destekli
• Gravatar entegre
• Wordpress v2.5+ uyumlu
• IE6/7, Firefox, Opera, Safari ve Chrome destekli.
• XHTML & CSS destekli

Temayı buradan indirebilirsiniz.

Wordpress’de ilk yazıdan sonra reklam yayınlamak

Wordpress de blog yazıyorsanız, özellikle adsense reklamlarını yönetip yayınlayabilmek için Might Adsense gibi yararlı pluginler bu işi sizin için rahatlıkla hallediyor ancak “yok abi ben psikopatım, kendim eker kendim biçerim” diyorsanız, ilk yazıdan sonra reklam gösterme işini basit bir kod ile halledebilirsiniz.

Bunun için temanızın index.php dosyası içerisinde;

<?php the_content(‘<br />Yazının devamını okuyun &raquo;’); ?>

satırını bulun ve hemen altına aşağıdaki formatta reklam kodunuzu girin, hepsi bu.

<?php if ($count == 0) : ?>

Reklam kodu buraya.

<?php endif; $count++; ?>

Wordpress sayfa şablonu nasıl yapılır

Gün gelecek herhangi bir nedenden dolayı mutlaka sayfa şablonlarıyla boğuşmak zorunda kalacaksınız. Ben de TH‘de sayfa şablonlarını sıklıkla kullanıyorum. Örneğin sayfa şablonlarını kullanarak blogumdaki tüm etiketleri ve ayrı birer sayfada gösteriyorum. Neden böyle yapıyorum? Çünkü kullandığım Simple Tags eklentisinin etiket bulutu, sadece widget içerisinde etiketleri görüntüleyebiliyor. Ayrı bir sayfada etiketleri yayınlayabilmek için mecburen sayfa şablonu kullanıyorum. Sizin kullanım amacınız çok çok farklı da olabilir. Neyse, uzatmadan Wordpress Sayfa Şablonunu nasıl oluşturacağımızı anlatayım.

Yazının devamı

Neden Wordpress Kullanmalı?

Blog yazmaya niyet eden herkes mutlaka Wordpress‘i bir defa da olsa duymuşlardır. Hiç şüphesiz ki, “Blog yazmayı nasıl daha kolay hale geritebilirim?” sorusunun cevabı Wordpress. Piyasada Wordpress’e alternatif bir çok blog yazılımı ve scripti mevcut ancak Wordpress’i onlardan ayıran çok önemli noktalar var. Eğer ilk defa blog yazacaksanız ya da bu konuda henüz araştırma yapma safhasındasınız Wordpress’in muhteşem özelliklerine mutlaka göz gezdirin.

Açık Kaynak Kod

Wordpress GPL lisansı altında yayınlanan ücretsiz bir CMS (İçerik Yönetim Sistemi) dir. Server’ınıza Wordpress kurmak için hiç bir ücret ödemeniz, ilaçla milaçla uğraşmanız gerekmez. Eğer PHP ve MYSQL hakkında bilgi sahibiyseniz, Wordpress’i ihtiyaçlarınız doğrultusunda geliştirebilirsiniz.

Kullanıcı Dostu

Eğer Wordpress altyapısı ile blog yazmaya başlayacaksanız, ilk kurulum aşamasını hiç dert etmeyin. O kadar basit bir kurulumu var ki, bunu Wordpress’in yapımcıları bile kurulum aşamasında dile getiriyor. Hiç php ve sql bilginiz olmasa bile, Wordpress’i 5 dakikada serverınıza kurabilirsiniz.

Yazının devamı

Yeni tema

Uzun zamandır planladığım tema değişikliğini sonunda gerçekleştirdim. Bu temaya kadar inanın 3-5 tane temayı editledim, eğdim, büktüm en sonunda TriologyNext de karar kıldım. Aslında hayalim baştan sona kendi oluşturduğum bir tema yayınlamaktı. Hatta oldukça fazla bir yol da katettim bu konuda. Ama özellikle IE6 uyumsuzlukları beni çileden çıkardı ve hazır bir temayı editlemeye karar verdim. -bu tema yapımı konusunda ecnebi abilerden daha çok öğreneceğimiz şeyler var-

Daha çok eksik var ama zamanla onları da düzenleyeceğim. Yeni temanın geliştirilmesi gerektiğini düşündüğünüz noktaları hakkında yorumlarınızı bekliyorum dostlar.

Wordpress de RSS okutmak

Wordpress de blog yazıyorsanız, RSS beslemelerinin ne kadar hayati bir önemi olduğunu da biliyorsunuzdur. Bazen Wordpress blogunuz içerisinde her hangi bir yerde, iç ya da dış kaynaklı RSS leri okutup okuyucularınıza paylaşmak isteyebilirsiniz. Bunun bir kaç yöntemi var;

1- Birinci yöntem en basit olanı ve Wordpress içerisinde hali hazırda gelen bir özellik. Eğer temanız widget destekli ise, Admin Paneli/Görünüm/Bileşenler bölümünden yeni bir RSS bileşeni ekleyip, url kısmına da okutmak istediğiniz rss kaynağının adını yazıp (ör: http://www.teknolojiherseyim.com/feed) bunu yan menünüzde gösterebilirsiniz. Bu yöntem kullanışlı olsa da, bazen ilgili bölüme yeni yazı yazdığınıza, bu rss bileşeni yeni içeriği görmeyebiliyor ya da sapıtabiliyor. Dikkatli olun.

Yazının devamı

Wordpress teması yapıyoruz

Blog açtınız ama binlerce tema arasından size hangisinin en uygun olduğuna karar veremiyorsunuz. CSS’e girince çıkmak mümkün değil zaten vs vs.

Gezinirken öyle güzel bir site ile karşılaştımki her Wordpress Blogger’ının aradığı cinsten. Wordpress Theme Generator‘un yaptığı iş aslında çok basit ve bir o kadar da faydalı. Site adı üzerinde, Wordpress için tema oluşturmaya yarıyor. Sol taraftaki menüden, yaratacağınız temanızdaki her alanı özelleştirip renklendirebiliyorsunuz. Yaptığınız değişiklikler de anında sağ taraftaki önizleme ekranında görünüyor. Temanızı istediğiniz gibi özelleştirdikten sonra, “Save” tuşuna basarak bilgisayarınıza kaydedebiliyorsunuz. Servis isterseniz tek bir zip dosyası halinde de sunabiliyor tasarımınızı. Ayrıca hazırladığınız tasarımı dizine ekleyip tüm blog yazarlarının faydalanmasını da sağlayabilirsiniz. Ve bütün bunların hepsi ücretsiz. E ne duruyoruz daha?[tık]