endi WordPress Temanızı Oluşturma Rehberi

WordPress, dünya çapında yaygın olarak kullanılan açık kaynaklı bir içerik yönetim sistemi ve yüzlerce temaya sahip. Eğer bir web geliştiricisi iseniz gün gelecek kendi temanızı hazırlamak isteyeceksiniz. Çok sayıda WordPress teması olsa da, ihtiyacınız olan görünümü ve işlevselliği tam olarak karşılayacak bir tema bulmanız zor olabilir. Bunun yerine kendi temanızı oluşturmak daha cazip gelebilir.

Premium temalardan satın alsanız bile, bu kullanmadığınız onlarca özelliği de satın almak anlamına geliyor. Her bir özellik de siteye ekstra yük demek. Kendi temanızı hazırladığınızda, satın aldığınız bir temanın ışarıdan getirdiğiniz bir temada bulunan tüm gereksiz özelliklerden arındırmış oluyorsunuz. Bu esnekliğe sahip olmama durumu, sitenizin daha hızlı açılmasını, hız testlerinde daha yüksek derecelere sahip olmasını da sağlıyor.

HTML web sitesi yazabiliyorsanız, birkaç temel WordPress eğitimiyle sitenizi kolayca WordPress tema dosyası olarak kullanabilirsiniz. Bilmeniz gereken diller ağırlıklı olarak HTML ve CSS. Siteyi dinamik bir hale getirmek için de temel düzeyde, hatta kopyala yapıştır yapabilecek kadar PHP bilgisine sahip olmanız yeterli.

Statik HTML Siteleri WordPress’e Nasıl Çevrilir?

WordPress’te tema geliştirmek, düşündüğünüz kadar karmaşık bir mesele değil. WordPress içerik yönetim sisteminin kullanım kolaylığı ve çok sayıda özelliği ile herkes kendi ihtiyacına göre tema oluşturabilir. Photoshop ile görselliği hazırlanmış bir web sitesini HTML siteye çevirebilir, HTML sitelerini de bu öğreneceğiniz bilgilerle rahatlıkla WordPress sistemine entegre edebilirsiniz.

Statik bir HTML web sitesini WordPress’e çevirmek, kodlamadaki uzmanlığınıza bağlı olarak kolaylaşır ya da zorlaşır. Bana sorarsanız HTML web sitesi yazabiliyorsanız, birkaç temel WordPress eğitimiyle sitenizi kolayca WordPress tema dosyası olarak kullanabilirsiniz. Bilmeniz gereken diller ağırlıklı olarak HTML ve CSS. Siteyi dinamik bir hale getirmek için de temel düzeyde, hatta kopyala yapıştır yapabilecek kadar PHP bilgisine ihtiyacınız var.

Adım Adım WordPress Teması Nasıl Oluşturulur?

Bilgisayarınızda WordPress’i çalıştırmak için önce yerel bir sunucu kurmalısınız. Bunu XAMPP, WampServer ya da Laragon ile bilgisayarınıza Apache ve MySQL desteği ile yerel sunucu kurabilir ve WordPress’in çalışması için gerekli alt yapıları edinebilirsiniz.

Bu içerik ilginizi çekebilir.

Laragon ile Yerel Sunucu ve WordPress Kurulumu

Kodlayarak Sıfırdan WordPress Teması Oluşturmak

WordPress teması oluşturmak için bilgisayarınıza yerel sunucu kurduktan ve WordPress kurulumunu yaptıktan sonra themes klasöründe yeni bir klasör oluşturmanız gerekiyor. Bu klasör sizin tema klasörünüz olacak. Klasör ismi olarak istediğiniz ismi verebilirsiniz. Sonra, klasörün içine de WordPress temasının ana dosyaları olan style.css, index.php, header.php, footer.php dosyalarını oluşturmak gerekiyor.

Bu dört dosyayı düzenleyerek, WordPress admin panelinden aktifleştirip kullanabileceğiniz bir temaya sahip olabilirsiniz. Ben metin editörü olarak Visual Studio Code (VS Code) kullanıyorum.  (Alternatif olarak Notepad++ ya da Sublime Text gibi programları da kullanabilirsiniz.)

style.css

Temanıza ait bilgilerin tutulduğu yer style.css’tir. WordPress admin panelinde temanızın adı, versiyonu gibi bilgileri buradan çeker. Dolayısıyla style.css dosyası oluşturduğunuzda yapmanız gereken ilk şey tema bilgilerini girmek.

    /*
    Theme Name: Sanagrafi Theme
    Theme URI: https://www.sanagrafi.com
    Author: Ekin Yalgin
    Author URI: https://www.sanagrafi.com
    Description: Special theme for Sanagrafi
    Version: 1.0
    Text Domain: sgtheme
    */

Bu bilgileri girmeseniz de WordPress tema klasöründeki temayı algılayacak, ancak gerektiği noktalarda yukarıdaki bilgileri temin edemeyeceği için bu bilgiler görünmeyecektir.

header.php

HTML sitenizin logo, navigasyon, menü gibi elemanların bulunduğu üst tarafını yerleştirmeniz gereken sayfadır. stil dosyaları, head ve title etiketleri burada bulunur, body etiketi de burada açılır ancak kapatılmaz.

header.php sayfasına WordPress’in hook adı verilen kodlarının otomatik olarak eklenebilmesi için <?php wp_head(); ?> kodu eklenir. Böylece bir eklenti kurduğunuzda sayfanın üst kısmına eklenmesi gereken kodlar bu kod vasıtasıyla WordPress tarafından buraya eklenir.

<body <?php body_class(); ?>> kodu ise WordPress’in sayfalara özel olarak eklediği sınıf (class) isimlerinin otomatik olarak eklenmesini sağlayan koddur.

footer.php

Sayfanızın footer alanındaki kodların bulunduğu dosyadır. body ve html kapatma etiketlerinin bulunduğu yerdir. Sayfa yüklendikten sonra yüklenen JS dosyaları da buraya konur.

footer.php’ye eklememiz gereken <?php wp_footer(); ?> kodu, WordPress tarafından footer’a otomatik olarak yerleştirilmesi gereken kodları yerleştirmek için kullanabileceğimiz koddur. Bir eklenti kurarsanız ve eklenti sayfanın footer’ına kod eklemesi gerekirse bu kod vasıtasıyla ekler.

index.php

Sayfa içeriklerinin bulunduğu dosya da burası. header ve footer dosyalarını import etmek için de sayfanın açılışına <?php get_header(); ?> ve sayfanın sonuna <?php get_footer(); ?> kodlarını ekliyoruz. Bu iki satırın arasına da sayfa içeriğinde görüntülenecek olan kodlar ekleniyor.

Bu düzenlemeler yapıldıktan sonra WordPress Tema Nasıl Yüklenir? sayfasını ziyaret ederek yükleme işlemini gerçekleştirebilirsiniz. Admin panelinde, Görünüm > Temalar altında yüklediğiniz tema görünecektir.

front-page.php

front-page.php dosyası WordPress’inizin ana sayfasındaki kodların yer aldığı sayfadır. Buraya eklediğiniz kodlar sitenizin sadece ana sayfasında görünür.

page.php

Wordpres ssitenizdeki, iletişim sayfası, hakkımda sayfası gibi statik sayfaların göründüğü sayfaların temaları page.php sayfası üzerinden düzenlenir.

Tüm bu düzenlemeleri yaptıktan sonra admin panelinden yeni bir sayfa oluşturalım ve sayfa içeriğinin sitede görünmesini sağlayalım. Bir sayfada sayfa başlığı ve içeriğin görüntülenmesi için kullanmamız gereken kodlar aşağıdaki gibi.

// Sayfa başlığı

// Sayfa içeriği

archive.php

Blog sayfalarındaki içeriklerin listelendiği sayfalar archive.php üzerinden düzenlenir. Page.php’deki kodları olduğu gibi alabiliriz, ancak bazı düzenlemeler yapmamız gerekir. Archive.php’den blogların detay sayfalarına link sağlamak ve liste sayfalarında içeriğin tamamı yerine özetini görüntülemek gibi.

Kategori adını görüntülemek: <?php single_cat_title(); ?>
İçerik özeti: <?php the_excerpt();?>
Devamını oku linki: <a href="<?php the_permalink(); ?>Devamını Oku</a><?php>

single.php

Blog yazıların Devamını Oku linkine tıkladıktan sonraki sayfalarıdır. Yazıların orijinal içeriğinin görüntülendiği bu sayfaların teması single.php üzerinden düzenlenir. Kodları yine page.php ile benzerlik gösterir. Blog detay sayfasında, yazıların bağlı olduğu kategorileri görüntülemek isterseniz aşağıdaki kodu kullanıyoruz.

    name; ?>

    
        name; ?>
    

Blog yazılarının sonuna yorum alanı eklemek isterseniz de <?php comments_template(); ?> kodunu kullanıyoruz. Sadece bu kod bile WordPress’teki tüm yorum gereksinimlerini karşılamaya yetiyor.

functions.php

WordPress ile tema hazırlarken, WordPress temanızın konfigürasyonu ile ilgili çeşitli kodların bulunduğu, düzenlendiği sayfa ise functions.php sayfasıdır. Örneğin; sayfanızın head etiketleri arasında stil dosyaları veya script dosyaları eklemeniz gerektiğinde, bunu functions.php üzerinden çözümlüyoruz.

functions.php dosyası oluşturmak için <?php ile php kodunu açıyoruz, ama kapatmıyoruz. Sonrasında ne yapmak istiyorsak onu yapıyoruz.

CSS dosyalarını veya JS dosyalarını functions.php üzerinden head etiketleri arasına yüklememiz gerekiyor. Bunu şu şekilde yapıyoruz.

WordPress’te Menü Oluşturmak

Sitenizin birçok özelliğini aktifleştirmek için yine functions.php dosyasını kullanıyoruz. Örneğin; navigasyon menülerini aktifleştirmek ve her birine isim vermek için aşağıdaki kodları kullanıyoruz.

add_theme_support('menus');
register_nav_menus(
    array(
        'top-menu' => __('Top Menu', 'theme'),
        'footer-menu' => __('Footer Menu', 'theme'),
    )
);

Sonra da bu menülerin nerede görüneceğini tema dosyalarında belirlememiz gerekiyor. Mesela yukarıda bulunan menüyü header.php’ye aşağıdaki kod ile tanımlamamız gerekiyor.

 'top-menu',
    'menu_class' => 'navigation' // Menüye sınıf tanımlar.
)) ?>

WordPress’te Öne Çıkan Görseller /Post Thumbnails) Oluşturmak

WordPress’te öne çıkan görselleri (Post Thumbnail) aktifleştirmek için yine functions.php’ye başvuruyoruz. Öne çıkan görselleri aktifleştirdiğimiz gibi, WordPress’teki ortam kütüphanesine yüklenen her görselin otomatik olarak küçük ve büyük olmak üzere iki farklı versiyonun da oluşturulmasını sağlıyoruz.

add_theme_support('post-thumbnails');
add_image_size('small',300,300, true);
add_image_size('large',600,600, true);

Öne çıkan görsellerin single.php üzerinde görüntülenmesi için de aşağıdaki kodları kullanmamız gerekiyor.

WordPress’te Widget (Bileşen) Oluşturmak

Aşağıdaki kodu functions.php’ye yazarak admin paneldeki bileşen kontrolünü aktifleştirebiliyoruz.

register_sidebar (
array(
    'name' => 'Page Sidebar',
    'id' => 'page-sidebar',
    'class' => '',
    'before_title' => '

‘, ‘after_title’ => ‘

',
));

Sonrasında temanızın php dosyaları arasında, bu bileşenin görünmesini istediğimiz yere de aşağıdaki kodu yazıyoruz.

Temanızın bir logo veya web sitenizin önizlemesi şeklinde bir görselinin de görünmesini isterseniz, bu görüntüyü tema klasörünüze screenshot.png adlı bir dosya olarak kaydedin.

WordPress Tema Konusunda Nasıl Gelişirsiniz?

WordPress kolay olduğu kadar özellikleri çok olan bir içerik yönetim sistemi. Tüm özellikleri tek bir derse sığdırmak çok mümkün değil. Bu nedenle hem diğer temaların nasıl yazıldığını incelemelisiniz hem de tema hazırlarken ihtiyacınız olabilecek çözümler için internetten de araştırma yapmanız gerekir. Çok kullanılan bir sistem olduğu için de mutlaka hızlı bir şekilde çözüme ulaşırsınız.