Zortingen WordPress Teması 1.0

zortingenMerhaba, wordpresse merak sardığımdan beri bloğum için bir tema yapmak istiyordum. Geçen sene kötü bir çalışmadan sonra dedim bırak bu iş bana göre değik ve nerdeyse bir sene kadar daha hiç bakmadım. Önceden kullanmış olduğum inove temasına css olarak biraz düzenledim o kadar ve onu kullanmaya devam ettim. Geçen sene ki çalışmamı ise yayınlamadım ve kötü bir anı olarak öylece duruyor. Ama şu da muhakkak ki kimse bu işi anasının karnında öğrenmiyor. Neyse…

[ad#orta]

Artık şu tema işine bir el atsam olur dedim ve Cem Demir arkadaşımın tavsiyesi ve yardımlarıyla da kendime özgün bir tema çizmeye karar verdim. Bu çizim sürecinde Fireworks’u kullandım. Çizimler sırasında bana tema standartlarıyla ilgili yardım eden Cem Demir arkadaşıma da buradan teşekkür ederim.
Temanın çizimini tamamladıktan sonra tabiki iş html ve css’e dökmeye geldi. Fakat bu süre baya uzundu. Dökmeye başlamak bazı nedenlerden biraz geçikti. Neyse geciksin… Yapacak birşeyin olmadığı bir gün dedim kendime, ne duruyorsun bir dene de şunu dök css’e olmadı sonrada wordpress’e giydirriz, dememle işe başladım ve iki güne yakın sürede css’e döktüm. Daha sonrasında wordpress’e giydirmeye çalıştım. Tabiki ilk deneme yine başarısız. Çok kötü bir görünüme geçti wordpresse giydirmeye çalışınca. O gün öylece bıraktım. Dursun dedim boşver eski temamı kullanmaya devam edeyim dedim ama yine içime sinmemiş olacak ki ertesi gün tekrar başına oturdum ve wordpress’e giydirmeye devam ettim. Giydirdikçe eksiklerini gördüm ve css’e girerek eksiklerini düzelttim. Yeni şeyler ekledim. Birazda çizimin dışına çıktım bazı renkler konusunda.
Ortaya pat çat bir şeyler çıktı. Tema çalışmalarını yaparken localhostta çalışıyordum. Bunun üzerine şunu bir de bloğum deneyeyim dedim ve yükledim. Bloğumda da fena durmadı. İki gün felan da wordpress’e giydirme, eksiklerini düzeltme, eklentiler uyumu, twitter takipçi sayısı ve son mesajın gösterilmesi ayarlarını yaptım. Tema çok güzel oldu ve bloğumda aktif ederek kullanayım dedim. Fakat kullandıktan sonra, yazı tipi işi bozuyordu. Çizim yaparken yazı tipini PT Sans kullanmıştım. Kimselerde olmayan bir font. Bu font sorun çıkarcaktı bu yüzden bir kaç yol denedim ve adam akıllı herkeste olan bir font kullanmaya karar verdim. Kullandığım font tabiki Tahoma oldu. Yeni fonta geçtikten sonra tekrardan yazı boyutlarını değiştirmek gerekti ve onlara da bir ayar geçtim. Tema artık son halini almıştı ve kullanmaya hazır duruyordu.

Temanın yapım aşamasından bu kadar bahsetmek yeterli olur sanırsam. Şimdi de birazcık temanın özelliklerinden bahsedelim.Yukarıdan aşağıya doğru…

  1. Kullanılan yazı tipi Tahoma‘dır.
  2. Sosyal ağlar iconları bulunmaktadır. Buraya, header.php dosyasındaki alana kendi sosyal ağ adreslerinizi yazarak takipçilerinize kolaylık sağlamış oluyorsunuz. Değiştirilmesi gerekli olan alanlar sırasıyla: hasanhuseyinisler, hsnhsynisler, #, # ‘dır.
  3. <a href="http://www.facebook.com/hasanhuseyinisler" class="fb"><img src="<?php bloginfo('template_url'); ?>/images/facebook.png" alt="facebook" /></a>
                    <a href="http://www.twitter.com/hsnhsynisler" class="tw"><img src="<?php bloginfo('template_url'); ?>/images/tweet.png" alt="tweet" /></a>
                    <a href="http://friendfeed.com/#" class="ff"><img src="<?php bloginfo('template_url'); ?>/images/ff.png" alt="friendfeed" /></a>
                    <a href="http://www.google.com/profiles/#" class="gg"><img src="<?php bloginfo('template_url'); ?>/images/google.png" alt="google"/></a>
  4. Twitter takipçi sayınızı ve Twitter son mesajınızı gösteren bir alan bulunmaktadır. Buraya yani header.php dosyasındaki alana Twitter kullanıcı adınızı yazarak bu özelliklerden faydalanabiliyorsunuz. Aşağıda hsnhsynisler alanını kendi hesabınızla değiştiriniz.
  5. <div id="ttakip"><?php echo twounter('hsnhsynisler') ?>  kişi takipte!<br /><a href="http://www.twitter.com/hsnhsynisler">Sen de takip et.</a></div>
                </div>
    <div id="twmesaj"><?php twitter_messages('hsnhsynisler', 1, false, true, '&raquo', true, true, false);?></div>
  6. Temam iki kolondan oluşmaktadır.
  7. Sol kolonda yazılan yazılar bulunmaktadır.
  8. Sağ kolonda dört adet sidebar bulunmaktadır. Bunlar üst, sol yan, sağ yan, alt ‘dır. Bunları kullanmak için yönetim panelinizden bileşenler kısmına girmek ve istediğiniz elemanı içine sürüklemek yeterli oluyor.
  9. Footer alanına geldiğimizde FeedBurner kullanıcılarına özel FeedBurner takipçi sayısını gösteren alan bulunuyor. Buraya da footer.php dosyasına girerek gerekli alana kendi hesap adınızı yazdığınızda kendi takipçi sayınızı görebiliyorsunuz. Aşağıda PhpSorunu yazan alanı kendi hesap adınız ile değiştiriniz.
  10. <a href="http://feeds.feedburner.com/PhpSorunu"><img src="http://feeds.feedburner.com/~fc/PhpSorunu?bg=CCCCCC&amp;fg=444444&amp;anim=0&amp;label=listeners" height="24" width="88" style="border:0" alt="feedurner" /></a>
  11. Footer kısımında bulunan Zortingen teması linkide tema yapımcısı olarak benim bloğuma yönlendirmektedir. Temayı kullanan arkadaşlara buradan o linki kaldırmamalarını rica ediyorum.
  12. Temanın kendisinin yorum sistemi olmakla beraber, ben kendi bloğumda intensedebate eklentisini kullanıyorum. Bu eklenti hem spamlara birebir hem de güzel ve kullanışlı olduğu için tercihimdir. Temanın içinde eklentiler diye klasörde eklenti bulunmaktadır.
  13. Sayfalama eklentisi olarak da wp-pagenavi kullanmaktayım.
  14. Twitter takipçi sayısını gösterme için ise twounter eklentisi kullanmaktayım.
  15. Twiiter son mesajımı göstermek için ise twitter-for-wordpress eklentisi kullanmaktayım.
  16. Yazılardaki okunma sayısını göstermek için ise wp-postviews eklentisini kullanmaktayım.
  17. Bahsetmiş olduğum tüm eklentiler tema içerisindeki eklenti klasörü içinde bulunmaktadır. Temanın tam işlevli çalışabilmesi için eklentileri yükleyip etkinleştirmeniz gereklidir.

Temanın demosunu görmek veya temayı indirmek için linkleri tıklayınız.
Temayı kullanan veya deneyen arkaşlardan ricam şudur. Lütfen temanın eksik veya hatalı olarak gördüğünüz kısımlarını bildiriniz.
Temayla ilgili düşüncelerinizi yorum olarak iletirseniz temanın yeni versiyonunda onları da dikkate alırım.

Hasan Huseyin İŞLER hakkında

Lise yıllarında programlama ile tanışan ve Q-Basic, Pascal, C başlangıç seviyesinde öğrenenir. Üniversite de TEF-BSÖ okurken diğer dillerin yanı sıra PHP'de kendini geliştirmeye devam ederek bunların yanında CSS, JS ve Wordpress sistemiyle ilgilenir. www.phpsorunu.com'un da yöneticisi ve yazarlarındandır.
Bu yazı Wordpress kategorisine gönderilmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Zortingen WordPress Teması 1.0 için 38 cevap

  1. Cem Demir der ki:

    Çok güzel olmuş Hasan, kısa sürede çok iyi iş çıkarmışsın. :)
    Ruhum bile duymadı :)

    • hsnhsynisler der ki:

      Sağolasın Cem. Tasarım orada ben burada duruyordum. P.tesi bir başladım, bitti. Biraz zor oldu ama sanırsam ortaya güzel bir ürün çıktı. İnş. devamı güzel olur. Çizimdeki yardımlarım için tekrardan çok teşekkürler.

  2. Mert Canatan der ki:

    Çok başarılı bir çalışma olmuş. Temanın ismi ayrı güzel :D @font-face ile PT Sans fontunu kullanabilirdiniz söylemeden edemeyeceğim. Ama olsun Tahoma'yla da kötü değil :)

  3. Okan Can BOLAYIR der ki:

    Hocam elinize sağlık fakat bi sorum olucak. Yazıya bi resim eklediğimizde sağ veya sola (yani align-left veya align-right) resmin yanında sadece 1 satır yazı gözüküyor. Fakat sizin blogunuzda bu sorun yok. Bunu nasıl çözebilirim.

    İyi çalışmalar.

    • hsnhsynisler der ki:

      <img src="http://www.phpsorunu.com/wp-content/uploads/screenshot.png&quot; alt="zortingen" title="screenshot" style="float:left; padding:5px 10px 5px 0px;width:120px; height:100px">
      Benim kullandığım kod yukarıdaki gibidir. Burada işi gören float left komutudur. Sende resimlerine style yerini kopyalayıp yapıştırarak kullanabilirsin.

      • Okan Can BOLAYIR der ki:

        Çok teşekkürler. Bende hep uğraşmamak için cssye döktüm

        style.css dosyasının en altına

        .icerikgoster img.alignright {float:right; padding:5px 10px 5px 0px;}
        .icerikgoster img.alignleft {float:left; padding:5px 10px 5px 0px;}

        kodlarını eklerlerse sorun çözülmüş olacaktır.

  4. Mert Canatan der ki:

    Ben de temada ufak bir hata buldum, sağ üstte google logosuna tıklayınca kendi profilime gidiyor.

  5. sorularladinimiz der ki:

    sagdaki HABERINIZ OLSUN eklentisini paylasırmısınız

    • hsnhsynisler der ki:

      Eklenti değil, google'nin feedburner'in sağladığı bir sistem. Feedburner'e kayıt olursanız size kod verecektir. Onu da bileşenlerden metin ekle diyerek, o kodu içine yapıştırdığınızda aynı şekilde sizde de gözükecektir.

  6. sorularladinimiz der ki:

    saolasın. bir de ÖZLÜ SÖZ kısmını nasıl yapabiliriz?

    • hsnhsynisler der ki:

      Özlü söz için herhangi bir eklenti veya kod vs. kullanmıyorum. Aklıma gelen sözleri aynı mantık bileşenlerdeki metin ekle kısımından değiştiriyorum. Aklıma geleni yazıyorum yani…

  7. sorularladinimiz der ki:

    Kategoriler olusturdum. bileşenler kısmından kategorileri gostermek içni sdebara kaydırdım. kaydettim fakat Genel kategorisinden baskası gorunmuyor.

  8. Gökhan der ki:

    KANKA HAYIRLI OLSUN :)

  9. sorularladinimiz der ki:

    EVet kategoriler gorunmuyor arkadaslar lütfen yardım.

    • hsnhsynisler der ki:

      Kategoriler gözükmüyor derken? Şu an sitedeki kategoriler gözüküyor gördüğünüz üzere…. Alt kategoriler mi gözükmüyor tam olarak sorununuz nedir?

      • sorularladinimiz der ki:

        site adresim islamiyet.tk
        sağ tarafa bakarsanız sadece Kur'an-ı Kerim kategorisi var. fakat ben wpadminden 10 tane kategori ekledim ama sadece 1 kategori gorunuyor. umarım anlatabildim.

  10. Serhat der ki:

    Tasarım sade ve hoş.Emeğinize sağlık :)

  11. Pisadam der ki:

    Hocam tema'da konuları açarken resimleri otomatik boyutlandırmasını istiyorum anasayfa görünümü için. Bunun için ilave alana gerek var sanırım bunu nasıl yapabilirim yardımcı olur musun

  12. Tunahan der ki:

    Bende tasarımın üst kısmı gözüküyor alt kısmı gözükmüyor.Yardım ederseniz sevinirim.

    • hsnhsynisler der ki:

      Gerekli eklentileri aktif edip tekrar deneyin. Tema klasöründe eklentiler mevcut. Büyük ihtimal sorun budur olmaz ise hata ile lütfen geri bildirim yapın yardımcı olmaya calışacağım.

  13. ahmet der ki:

    Kardeşim ellerine sağlık Allah'ım razı olsun.Allah'ıma emanet ol.Amin

  14. hsnhsynisler der ki:

    Temanın demosunu görmek için http://tema.phpsorunu.com/ adresinizi ziyaret edebilirsiniz.

  15. chat der ki:

    Eklentileri indirebilicegim bir yer varmı ?

  16. ilaçlama der ki:

    Güzel bi tasarıma benziyor.

  17. Webesen der ki:

    Dosya linki gitmiş tekrar yenilermisiniz ?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>