WordPress Özel Tema Yapımı

WordPress özel tema yapımı Html, Css ve üst seviye olmasa da Php bilgisi gerektiren bir konudur. Oluşturulacak özel WordPress tema tasarımının ihtiyacına göre Javascript ile desteklenebilir. Tabi ki programlama kadar görsel yetenek de çok önemlidir. Fakat sizlere bu makalede WordPress özel tema yapımı konusunun temel fonksiyonel mantığını aktarmaya çalışacağım.

Yukarıda söz ettiğim kodlamalardan gözümüz korkmadan hemen Bootstrap’den bahsedelim.
Bootstrap wordpress özel tema yapımı konusunda kullanacağımız ücretsiz ve açık kaynak kodlu bir arayüz uygulamasıdır(front-end framework).
Wordpress tema yapımı konusunda ihtiyaç duyulacak bütün bileşenleri(butonlar, menüler, form vb..) içerisinde barındırır ve mobil cihazlara, tabletlere ve bütün tarayıcılara uyumlu websiteler geliştirilebilir(responsive tasarım).

Daha anlaşılır olması, kafa karışıklığı yaratmaması ve uygulamalı olması açısından 3 bölümde anlatmak istiyorum.
1-Wordpress’in temel dosyalarını yaratmak ve Bootstrap kullanarak Html5/css3 arayüzünün temelini oluşturmak.
2-Oluşturduğumuz tema klasörünü zip formatına dönüştürdükten sonra WordPress tabanlı sitemize yeni tema olarak yüklemek ve aktive etmek.
3-Sitemizi tam dinamik hale getirip Bootstrap ve style.css yardımıyla güzel bir görüntüye kavuşturmak.

[AdSense-B]

1.BÖLÜM

Wordress özel tema yapımı konusunu aşağıdaki basit tema üzerinden anlatacağız.

wordpress özel tema yapımı

WordPress tema tasarlamak fonksiyonları oluşturarak başlıyor.Wordpress özel tema yapımı konusunu bir kere öğrendikten sonra hayalinizde ne kurduysanız o temayı yaratabileceksiniz.

Hemen bilgisayarımızda yeni bir klasör yaratıyoruz. İsmi “mavi” olsun. Klasörümüzün içine
style.css, index.php, header.php, footer.php, sidebar.php, functions.php ve page.php isminde yedi adet dosya oluşturalım. Bu dosyaları Notepad++ metin editörü ile oluşturun.Şimdilik bunlar yeterli.

Style.css

Aşağıdaki kodu style.css dosyamıza yapıştırıyoruz. Dikkat ederseniz temamızın ismini, versiyonunu, yazar ismini, yazarın internet sitesi gibi bilgileri burada belirlemiş olduk.

/*
Theme Name: mavi
Theme URI: www.mavitema.com
Description: Kişisel blog teması
Version: 5.2
Author: Alkan Tenik
Author URI: www.wordpressdergisi.com
Tags: kişisel blog
/*

Header.php

Meta charset tagı: Karakter kodlamayı belirtiyor. Standart bir kod.
Meta viewport: Responsive tasarım yaratırken eklediğimiz kod. Bootstrap kullanacağımız için ekliyoruz.
Title tagı: Sitemizin başlığını otomatik olarak alması için eklediğimiz kod. Bilirsiniz WordPress’te ayarlar > genel kısmında site başlığı yazarız. İşte biz ne yazarsak bu kodumuz onu görecektir.
Link rel profile: WordPress’in tavsiye ettiği standart bir kod.
Link rel pingback: Karşılıklı bir backlink alışverişi diyebiliriz. Bir kişi sizin sitenizdeki bir makaleyi kendi sitesinde bir link aracılığı ile tavsiye ettiğinde size bir bildirim geliyor.
Link href stylesheet: Style.css dosyamızın yolunu belirliyoruz.

Bunların altında yeralan ve latest compiled and minified css yorumuyla başlayan kodumuz ise Bootstrap Css dosyalarını sitemize çektiğimiz link. Bu kodu http://getbootstrap.com/getting-started/ adresinden elde ediyoruz.

Php wp head: Fonksiyonların ve eklentilerin doğru çalışabilmesi için eklediğimiz kod.

Head tagının kapandığı yere geldik ve sırada body açılışı var.
body tagının hemen altına header alanımız için bir container açtık.

Bootstrap, container stilini bizim için belirliyor. Her türlü cihaza uygun görünümü sağlıyor. Devamında ise header alanıma özel css verebilmek için bir id belirledim. Örneğin style.css dosyamda #header{background:#FFE399;} yazarak header arka planını belirlemek gibi. Şimdilik header için bu kadar yeterli. Daha sonra geliştireceğiz.

Footer.php

Footer alanımızın kodları da bu şekilde. Yine bir container açıyorum ve id olarak footer veriyorum. Daha sonra footer’a özel css belirleyebilmek için. Burada dikkat ederseniz ve taglarının kapanışları da var.

index.php

Yukarıdaki kodu index.php dosyamıza yapıştırıyoruz. Dikkat ederseniz get_header(); kodu ile header.php dosyanın içindeki herşeyi küçük bir kodla çağırmış olduk. Aynı şekilde get_footer(); kodu ile de footer.php dosyasının içindeki herşeyi küçük bir kodla çağırmış olduk.

İkisinin arasındaki kısım ise main yani makalelerimi yayınlayacağım bölüm olacak. Yan tarafında ise sidebar. Burada sizlere Bootstrap ile ilgili biraz daha detaylı bilgi verme zamanı gelmiş görünüyor. Lütfen aşağıdaki resmi iyi inceleyerek sitemizi nasıl kolonlara böldüğümüzü daha iyi anlayın.

wordpress tema tasarlamak

Bootstrap 12 kolonlu bir yapıdan oluşuyor. Yukarıdaki kodumuzda kullandığımız yapıya bakalım.

12 kolon olan container alanımın col-md-9 yani 3/4’ü main içerikler olacak. Kalan col-md-3 yani 1/4’ü ise sidebar içerikler olacak. Küçük bir matematiksel hesap.

Mavi klasörünün içinde şu anda 7 tane dosyamız var(sidebar.php,functions.php ve page.php şimdilik boş kalsın). Daha anlaşılabilir olması açısından mavi isimli klasörümüzü zip formatına dönüştürüyoruz ve sitemiz.com/wp-admin linkine giderek yönetim paneline giriş yapıyoruz. Görünüm > temalar > yeni tema ekle diyerek zip dosyamızı yüklüyoruz. Temamızı aktive ediyoruz.

WordPress tema tasarımına sitemiz üstünde devam edelim. Sonuçta bu bir bilgilendirme makalesi olduğundan sakınca yok. Uygulamalı şekilde devam etmek daha yaralı olur. Hem de kafamız çok fazla kodla karışmamış olur.

2.BÖLÜM

Aktive ettiğimiz temamızın dosyalarına ulaşmak için hemen Görünüm > Düzenleyici sekmesine gidiyoruz.

image

Style.css dosyasına yukarıda gördüğünüz gibi birkaç tane css kodu ekleyelim.

min-height: En az yükseklik
background:: Arka plan rengi

Sitemizi açtığımızda karşımıza alttaki görünüm çıkıyor.

image

Main içerikler kısmını dinamik hale getirmek istiyorum. Yani WordPress’te bir yazı yayınladığımda bu kısımda otomatik olarak görünmesini istiyorum. Yapmam gereken index.php dosyamda MAIN İÇERİKLERİ metnini silip yerine aşağıda gördüğünüz kodu yapıştırmak.

Siteme gittiğimde WordPress’in örnek yazısı olan Hello World yazısını görüyorum. Bu da bu alanı dinamik hale getirdiğimi gösteriyor.

image

Aynı şekilde sidebar alanımı dinamik hale getirmek istiyorum. Yani yönetim panelinde görünüm > bileşenler kısmına gittiğimde sürükleyip bıraktığımız widget’larımızın burada görünmesini istiyorum.

Bunun için hemen tema klasörümün içine functions.php isminde bir dosya açmam gerekecek. Ftp bağlantısını filezilla gibi bir programla gerçekleştiriyorum ve ana dizinden wp-content > themes > mavi klasörümün içine functions.php dosyamı oluşturuyorum. Oluşturduğum dosyamın içine şu kodu yapıştırıyorum.

Sonrasında ise başlangıçta boş olarak yüklediğimiz sidebar.php dosyama gidiyorum ve şu küçük kodu yapıştırıyorum

Son olarak ise index.php dosyamda yeralan SİDEBAR İÇERİKLERİ metnini silerek yerine şu kodu yapıştırıyorum.

Sitemin son hali sidebar kısmının dinamikleştiğini gösteriyor.

image

Sıra geldi header alanımı dinamikleştirmeye.
Header alanını kolonlara bölüyorum. Sol kısımda logo, sağ kısımda menu olsun istiyorum.

Gördüğünüz gibi yine bootstrap yardımıyla 1/4 sol kısım, 3/4 sağ kısım oldu. Sağ kısma

kodu ile menu ekliyorum. Son olarak ise functions.php dosyama şu kodu yapıştırıyorum.

Sitemin son görüntüsü aşağıda görüldüğü gibi. Style.css den daha sonra düzenleyeceğiz. Fakat şimdilik fonksiyonu yarattık.

image

Dinamikleşmesini istediğim son dosyam ise page.php dosyası. WordPress yönetim panelinden yeni bir sayfa eklediğimde otomatik olarak sayfa yapısının oluşmasını istiyorum. Page.php dosyamı açıyorum ve şu kodu yapıştırıyorum.

Dikkat ederseniz index.php dosyama benziyor. Üstte header alanımı çağırıyorum. Altta footer alanımı çağırıyorum. Ortasına ise dinamik bir kod yerleştiriyorum. Test sayfamı yaratıyorum ve rastgele içerik giriyorum.

3.BÖLÜM

Dinamikleştirdiğim temamı daha güzel bir görüntüye kavuşturmak için biraz css kullanalım.
Wordpress tema yapımı css bilgisi de gerektiriyor. Sizlerin temel css bilgisine sahip olduğunuzu varsayıyorum.

Temel css kodlarını lütfen inceleyin. Fazla zorlanacağınızı zannetmiyorum. Son elde ettiğim görüntü şu şekilde.

image

Google web fonts kullanarak bir font seçiyorum. Source sans pro isimli font güzel. Google web fonts bu font için bize bir kod yaratıyor. tagları arasına yapıştırıyorum.

Style.css dosyama da body için bu font ailesini belirliyorum..

Son görüntüm:

image

WordPress özel tema yapımı konusunun sonuna geldik.Yaratıcılığınızı kullanmaya devam etmenizi istiyorum. Lütfen buraya kadar olan bilgileri baştan gözden geçirin. Sizin de fikirleriniz varsa söyleyin. Tema satarak para kazanmaya başlayanlar olabilir. Projelerinizi paylaşabilirsiniz. Görüşmek üzere.

WordPress hakkındaki bilgilerimizi paylaşarak hep birlikte bilgimizi yükseltelim.

Abone Olun

WordPressdergisi.com'u yakından takip edin.

Teşekkürler.

Birşeyler yanlış gitti.

30 Yorum “WordPress Özel Tema Yapımı

  1. Yazılara yorumlar bölümünü nasıl ekleyebiliriz? Sizin sitenizdekine benzer yorum sistemi yapmak istiyorum.

      1. <meta charset="” />

        <link rel="pingback" href="” />

        <link href="” rel=”stylesheet”>

        Header kısmı bu şekilde.

  2. Merhaba, öncelikle bu güzel içerik için çok teşkkürler. Fakat bir kaç kodu yazmayı unutmuşsunuz tamamlarsanız sevinirim. Aşağıda belirtmiş olduğum yazınızdan sonra kod eklemeyiğ unutmuşsunuz sanırım. Eklerseniz çok iyi olur

    1-Sonrasında ise başlangıçta boş olarak yüklediğimiz sidebar.php dosyama gidiyorum ve şu küçük kodu yapıştırıyorum

    2-Son olarak ise index.php dosyamda yeralan SİDEBAR İÇERİKLERİ metnini silerek yerine şu kodu yapıştırıyorum.

    İyi çalışmalar.

        1. Merhaba, tekrar sanırım bir eksik kodla karşılaştım. Aşağıda belirttiğim alan da “sağ kısımda menu olsun istiyorum.” yazısından sonra bir kod paylaşıcaktınız sanırım. Kolonlara bölmek için. Kontrol ederseniz sevinirim. İyi çalışmalar.

          Sıra geldi header alanımı dinamikleştirmeye.
          Header alanını kolonlara bölüyorum. Sol kısımda logo, sağ kısımda menu olsun istiyorum.

          Gördüğünüz gibi yine bootstrap yardımıyla 1/4 sol kısım, 3/4 sağ kısım oldu. Sağ kısma

          1. Burada şu kullanılabilir.

    1. Header.php kodları sayfanın başında.

  3. WordPress Ekşi Sözlük teması yazacak bir babayiğit yok mu arkadaş? Yıl oldu 2017 hala yok! Kıytırık temalar var piyasada. Birisi adam gibi yapsa şu Wp sözlük temasını ve satışa çıkarsa, paraya para demez vallahi.

  4. Merhaba ben sitemi tasarlarken framework kullanıyorum yani normal style.css dosyasını değilde framework css dosyasını uzaktan yüklemek istiyorum (CDN şeklinde). Bunu daha farklı mı yapmak gerekiyor ve nasıl?

      1. Teşekkür ederim bir sorum daha olacak. Şimdi ben yazılardan sonra
        ve ekledim fakat şunları diyor ama neden çalışmadığını bir türlü anlayamadım?

        Fatal error: Call to undefined function the_comments_template() in C:\inetpub\wwwroot\wordpress\wp-content\themes\webtasarimseo\single.php on line 26

        Fatal error: Call to undefined function the_author() in C:\inetpub\wwwroot\wordpress\wp-content\themes\webtasarimseo\single.php on line 27

        1. single.php dosyasının 27. satırında bir hata var. Notepad++ yı indir ve o kodları notepad ++ ya yapıştırıp 27. satıra bak. Çözemeyeceğin birşeyse single.php dosyasının silip baştan oluştur. İnternette bulursun.. wordpress single.php yazarak..

          1. Ben kendi sitemi tasarladım fakat bunu wp ye aktarmaya çalışıyorum, bir kısmını yaptım fakat döngü kısmını tam olarak anlayamadım.. Neyse artık zamanla öğrenicem 🙂

  5. Öncelikle bilgileriniz için teşekkür ederim. Diyelim ki menülerden biri üye ol/giriş yap olsun kendi yazdığım php,jqery,style kodlarından oluşan bir sayfayı o menü için aktif etmem mümkün mü mümkünse nasıl yapabilirim ya da mesela woocommerce eklentisinde ürün eklediğimizde otomatik olarak mağaza sayafasına ürün ekliyor o mağaza sayfası yerine kendi yazdığım bir sayfaya ekleyebilir miyim ürünleri ürün için ayrılmış olan div içerisine

  6. Bu arada index kodları tam single.php kodları gibi olmuş “the_except olmaması filan”.
    hocam ben aslında “sağlıklı şekilde temaya menuyu nasıl entegre ederim” i ararken düştüm geri de çıkamadım konudan 😀 baya eksiğim varmış listelemede “daha eski yazılar” kodu filan henüz eklememiştim o kısmı şimdi ekliyorum.

    1. Haklısın. Anasayfada yazıların özetlerinin gösterilmesi için < ?php the_excerpt(); ?> kullanmak gerekir. Bütün yazının görünmesi için < ?php the_content(); > kullanmak gerekir.

      index.php için excerpt, single.php için content kullanmak daha doğru tabii ki.
      Teşekkürler.

  7. Kodlarını elden geçirirsen daha iyi olacak. Hevesini kırma insanların 🙂

    Style.css sonraki * işaret içeride olacak. */ şeklinde.

    functions.php kısmından sonra film koptu.

    Saygılar

  8. merhaba… bazı kodları yazmamışsınız:
    1-Sonrasında ise başlangıçta boş olarak yüklediğimiz sidebar.php dosyama gidiyorum ve şu küçük kodu yapıştırıyorum

    2-Son olarak ise index.php dosyamda yeralan SİDEBAR İÇERİKLERİ metnini silerek yerine şu kodu yapıştırıyorum.

    bu ikşsşnin kodlarını göremedim

Bir Cevap Yazın

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