Uzun zamandan beri istediğim birşeydi kendime ait WordPress temaları yapmak. Şimdiye kadar çalıştığım bütün çalışma arkadaşlarımla da bu konuyu konuşmamıza rağmen, kimse elini taşın altına sokamamış, hazır iş alıp teslim etmektense yeni tema yaratım sürecine kimse cesaret edememişti. Zaten bu kişilerle de uzun süre çalışamadık. Yanımda çalışacak kişinin hayalleri olmalı, bazı riskleri göze almalıydı. Ne yazıkki böyle birini bulamamış olmaktan yakınırken Bülent Sakarya uzun zamandan beri ilettiğim çalışma teklifimi sonunda değerlendirdi ve 3 Ocak 2011 yani yeni yılın ilk iş gününde birlikte çalışmaya başlamıştık. 16pixel olarak bu güne kadar bir çok WordPress teması yaptık, gerek kendi proje sitelerimize, gerek müşterilerimize, gerekse de bize bir A4 kağıdının üzerine taslağını çizerek gelen kişilere hep kaliteli işler sunduk. Ama dediğim gibi hep kendi imzamızı taşıyan bir WordPress teması üretip, bunu ücretli ya da ücretsiz olarak hayata geçirmek istiyordum. Bu süreç Bülent Sakarya ile hızlandı ve zaten hali hazırda ürettiğimiz WordPress temalarında da kalitemiz gözle görünür derecede artarken, işlerden vakit bulduğumuz bir gün kendi temamızı yapmak için kolları sıvadık. 14 Ocak 2011 tarihinde Bülent bir A4 kağıdına basit karalamalarla hayal ettiği bir temayı çizdi, ben de bunun üzerinden Photoshopta temayı çizmeye başlamıştım. Az çok sağı solu, rengi belli olmaya başlamışken temaya vereceğimiz isimi düşünüyordum. Son zamanlarda Adsense Uyumlu WordPress Temaları ve Seo Uyumlu WordPress Temalarına çok rağbet varken logo olarak Adsenseo yazdım, domaine bakmadım bile kesin doludur diye. Çalışmanın yarısına geldiğim zaman mola verdim ve ne olur ne olmaz diye domaini kontrol etmek istedim. Eğer bu konuda üretim yapan biri varsa en azından adı değiştirecektim, hala dolu olduğunu tahmin ediyordum.

adsenseo.net adresinin boş olduğunu gördüm, çok şaşırdım aslında, içinde adsense ve seo kelimeleri geçen bir domain nasıl olur da boş olur, kesin bir pislik vardır diey bir çok yerden kontrol ettim. Arşiv sayfalarına baktım, arama motorlarında aradım en son 2 yıl önce bırakılmış bir domainde ondan sonra kimse elini sürmemişti. Acaba dedim benim hissettiğim gibi güzel bir domain değil mi? Yoksa neden boş kalsın? O sırada sevgili arkadaşım Halit Altunterim‘e adsenseo.net nasıl bir domain sence diye sordum? Bir yandan da elim satın al tuşunda idi :)

Belki o an Halit kötü deseydi böyle birşey hiç olmayacaktı :D

Temanın ana hatları çıktıktan sonra Bülent ile birlikte tasarımdaki son kararları verdik ve artık kodlamaya başlamamız gerekiyordu. Kendim çizdiğim için çok kısa bir sürede xhtml/css ‘e döktüm ve basit olarak wordpress teması olarak kaydedip çalıştırdım. Artık temanın bütün özellikleriyle Bülent ilgilenecekti. Bu konuda kendini geliştirmiş çok iyi biri ve onunla birlikte çalışmaktan dolayı çok mutluyum. Yaklaşık 1 hafta içerisinde neredeyse herşeyi bitirmiş ve artık insanlara duyurmak için heyecanlanıyorduk. Araya giren zamansız işler, müşterilerin acil işleri derken süre epey uzadı. Aslında sürenin uzaması daha iyiydi, çünkü daha çok kontrolden geçti ve daha çok fikir aklımıza geldi.

31 Ocak 2011 tarihinde ise, diğer renklere de karar verip Adsenseo projemizdeki ilk temamızı ücretsiz olarak insanlarla paylaştık. Gerçekten şimdiye kadar gelen tepkiler çok güzel, hiç olumsuz bir düşünce yok, kaliteli bir iş çıkarttığımız için çok mutluyuz. İlk günün ardından tahminlerimizin de üzerinde download sayısı oldu, temayı indirip kullanan kişiler adreslerini paylaştıkları zaman hemen kontrol ettik. Bir kaç kişinin sitesinde kullandığı eklentilerle çatışan sorunlar ve gelişmesi istenilen yerlerin de tespitinden sonra hemen 1 Şubat 2011 tarihinde v1.1′i yayımladık. Ufak bir versiyon geçmişi de olsa gayet hoş özellikler eklendi. 2.versiyonu biz bile tahmin edemiyoruz, bizim ve fikirlerini paylaşan arkadaşlarımızın da katkılarıyla 2. versiyon çok daha güzel olacak. İlk temamız olduğu için bunu ücretsiz olarak paylaştık, bundan sonraki temalarımız ve 2. versiyon temamız ufak bir yıllık ücret karşılığında satın alınabilecek. Yani her temaya tek tek para vermektense ücreti karşılığında aldıkları şifre ile yıl boyunca ürettiğimiz bütün temaları satın almış olacaklar. Bunun için de her ay 1 tema üretmek gibi bir planımız var, bakalım inşallah bir aksilik çıkmazsa bu hızda Adsenseo’yu geliştireceğiz. Sırada film, müzik, sağlık, alfabetik, fotoğraf gibi konularda temalar var, taslakları hazır, çizimlere yakında başlayacağız. Takipte kalın ;)

Öncelikle Bülent Sakarya’ya, Halit Altunterim’e, demo sürecinde fikirlerini paylaşan Serkan Cura ve Soner Tümer‘e ve temayı yayımladıktan sonra fikirlerini bizlerle paylaşan, destekleyen herkese çok teşekkür ederim. O kadar tema dedik buyrun bu da linki :D

Adsenseo Teknoloji Teması

Bilgisayardan seçtiğimiz bir görseli ya da fotoğrafı seçtikten sonra yüklüyoruz.

Ve her yere yayılsın yoksa ortada tek tekrar olsun, arkaplanı sil, ilk ayara dön gibi seçenekleri de ayarladıktan sonra blogumuzun arka planı ortaya çıkacak.

Bu hamle ile wordpress bir kez daha kodlarla uğraşmak istemeyenleri ve bilmeyenleri sevindirmiş oluyor. Tabii ki bu sistem bana göre şimdiye kadar yapılmış temalarda geçerli olmayacak sadece wordpress 3.0 yükledikten sonra güncellenecek olan default temada gerçekleştirilebilecek. Mevcut temalara ise bu arka plan yapısını bu yolla değiştirebilecek kodu eklememiz gerekebilir, sonuçta temamızın css dosyasında bir adet arka plan görseli ya da rengi tanımlıysa bu özellik sonuç vermeyecektir. Tabii o zamana kadar kim öle kim kala, her yeni versiyonla neler değişiyor, ekleniyor, çıkartılıyor, bu yapı için de tema yaparken bu özelliğin kodunu da ekleriz artık.

Sizin de başınıza geldi mi bilmiyorum ama kodları başka bilgisayarlarda başka başka zengin metin editörlerinde açmak kodlar arasında boş satırlar açılmasına sebep oluyor. Bu da dosya boyutunun artmasına, tarayıcının kod okuma süresinin uzamasına, düzenleyen editörün görsel kod satırları alışkanlığına aykırı geliyor…v.s

Clean css ise bu boşluklardan tutun 1.0em olarak yazdığınız bir ölçüdeki nokta ile sıfır ‘ı bile kaldırarak tasaruuf sağlıyor. Renk olarak 6 tane f değeri verdiğimizde bunu 3 tane f değeri ile de halledebileceğimizi belirtiyor ve bu işlemin ne kadar avantaj sağladığını da yazıyor.

Sistemin en çok ilgi çeken kısmı basit olması ve hangi kodları nasıl düzelteceğimizi göstermesine karşın tüm css dosyamızı yeni haliyle vermesidir. Bunu kopyalayarak eski css dosyamızı silip yapıştırdığımızda tekrar ftp’den gönderiyoruz ve optimize ettiğimiz css dosyamızın lüksünü yaşıyoruz.

WordPress Köşe Yazarları bölümü hazırlamak için işte yapmanız gerekenler:

Adım 1) Biraz sonra vereceğim kod satırını eklediğiniz yerde tek kişinin fotoğrafını ve son 3 yazısını basmaya başlar. Örnek sitede index.php ‘de pagenavi eklentisinin kodundan hemen sonra başlatılmıştır.

<a href="http://www.basketligi.com/?feed=rss2&author=2"><img src="<?php bloginfo('stylesheet_directory'); ?>/yazarlar/ismail.jpg" alt="Ismail Biçermen"/></a>
<div class="yazar01"><h2><?php _e('Ismail Biçermen'); ?></h2>
<?php // Get RSS Feed(s)
include_once(ABSPATH . WPINC . '/rss.php');
$rss = fetch_rss('http://www.basketligi.com/?feed=rss2&author=2');
$maxitems = 3;
$items = array_slice($rss->items, 0, $maxitems);
?>
<?php if (empty($items)) echo '<li>Yazısı Yok</li>';
else
foreach ( $items as $item ) : ?>
<li><a href='<?php echo $item['link']; ?>'
title='<?php echo $item['title']; ?>'>
<?php echo $item['title']; ?>
</a></li>
<?php endforeach; ?>
</div>

Bu kodu geliştirmek isterseniz işte bilmeniz gerekenler:

Maksimum yazı başlığı sayısı 3 olarak yazılmıştır. Düzenlemek için

$maxitems = 3;

satırını kullanınız. Hangi yazarın yazılarını yayınlayacaksanız ilk satırdaki

<a href=”http://www.basketligi.com/?feed=rss2&author=2″>

ve

$rss = fetch_rss(‘http://www.basketligi.com/?feed=rss2&author=2&#8242;);

satırındaki =2 rakamı yazar ID ‘sini bildirir. Hangi yazarın yazısını çekecekseniz o yazarın ID ‘sini yazın.

Fotoğrafı değiştirmek için:

bloginfo(‘stylesheet_directory’); ?>/yazarlar/ismail.jpg”

satırını kullanın. Tema dosyanızın içerisine “yazarlar” isminde bir klasör atın ve yazar fotoğraflarını buradan çekin.

Adım 2) style.css dosyanızın içine bu kodları ekleyin:

.yazar { background: #FFF ; border-top: solid 1px #ffffff; padding: 10px 20px 40px 5px; margin-top:-115px; margin-left:115px; }
.yazar h2 { color: #FFF; background:url(images/yazarka.jpg) no-repeat; font-size: 32px; font-weight: bold; line-height: 42px; margin: 0 0 15px 0; }

Bu kodu geliştirmek isterseniz işte bilmeniz gerekenler:

Div aralığının arka plan rengini background belirler. Div’in duracağı yer buradan belirlenir.

.yazar h2 satırı ise yazar adının başlığını şekillendirir. Font büyüklüğü, rengi ve durduğu yer buradan düzenlenebilir.

background:url(images/yazarka.jpg) ise arka fondaki imajımızdır. Örnek sitede mavi buton şeklindedir. İmajı buradan indirebilirsiniz.