Merhaba, bu yazımda wordpress konusunda oldukça merak edilen WordPress Özel Tema Yapmak konusunu ele alacağım.
WordPress şu anda dünya üzerinde en çok kullanılan CMS sistemlerinden bir tanesidir. Çeşitli eklenti ve temalardan faydalanarak wordpress ile bir çok web sitesi yapmak mümkün hale gelmektedir. E-Ticaret’ten kurumsal firma scriptlerine kadar bir çok web sitesini wordpress ile yapabilmek mümkün.
WordPress’de bir çok web sitesi yapılabiliyor ancak her bir web sitesinin görüntü ve tasarımı farklı olabildiğinden hazır template veya özel tema ihtiyacı doğabiliyor. Sözü fazla uzatmadan wordpress özel tema yapımına geçelim.
1. WordPress Tema Nedir?
WordPress teması, bir WordPress sitesinin ön yüzünü ve genel görünümünü belirleyen dosyalar bütünüdür. Temalar, HTML, CSS, JavaScript ve PHP dosyalarından oluşur. Bu dosyalar WordPress’in çekirdek sistemi ile entegre bir şekilde çalışarak ziyaretçilere görsel olarak tatmin edici bir deneyim sunar.
Bir tema sadece bir “tasarım” değildir. Aynı zamanda işlevsellik sağlar. Örneğin: özel sayfa şablonları, widget alanları, menüler, özel yazı türleri gibi birçok özelleştirme içerir.
2. Neden Özel Tema Yapmalısınız?
Hazır temalar çoğu zaman genel kullanım için uygundur ama aşağıdaki sebepler özel tema yapmayı daha cazip hale getirebilir:
- Kullanıcıya özel çözümler üretmek: Müşterinize özgü ihtiyaçlar için en uygun tasarım ve fonksiyonları sağlamak.
- Performans: Hazır temalar genellikle her ihtimale karşı birçok kod içerir. Bu da sitenizi yavaşlatabilir.
- Temiz Kod Yapısı: Kendi temanızı yazarken sade, optimize ve anlaşılır bir kod yapısı kurabilirsiniz.
- SEO Uyumu: Temanızı sıfırdan yazarken SEO kriterlerini göz önünde bulundurabilir ve daha iyi sıralamalar elde edebilirsiniz.
- Güncellemelerde bozulmaları önlemek: Hazır temalarda yapılan güncellemeler bazen sitenizin görünümünü bozabilir. Özel temalarda kontrol tamamen sizdedir.
3. Tema Geliştirmeye Başlamadan Önce Gerekli Araçlar
WordPress özel tema yapımına başlamadan önce bazı araçlara ve bilgi birikimine sahip olmanız gerekir:
Gerekli Bilgi:
- HTML, CSS, JavaScript (Temel seviyede)
- PHP (Orta seviyede)
- WordPress Tema Yapısı ve Döngüsü (Loop)
Araçlar:
- Bir kod editörü: VSCode, PhpStorm veya Sublime Text
- Yerel geliştirme ortamı: Local by Flywheel, XAMPP, MAMP, WAMP
- WordPress kurulumu (lokalde ya da sunucuda)
- Geliştirici belgeleri: developer.wordpress.org
4. WordPress Tema Dosya Yapısı
WordPress bir temadan en az iki dosya bekler:
style.css– Tema bilgilerini içeren ve stilleri tanımlayan dosya.index.php– Tema için varsayılan şablon dosyası.
Ancak daha gelişmiş temalar için bir çok dosya gerekiyor. Bu dosyaları içeren bir temayı https://underscores.me/ web sitesinden oluşturabilirsiniz.
5. WordPress Temel Dosyaların Açıklaması
style.css
Bu dosya temanızın kimlik kartı ve temamızı CSS’sini düzenleyeceğimiz dosyadır. Dosyanın en üst kısmında özel bir yorum bloğu yer alır:
/*
Theme Name: İlkTemamız
Author: Tuba
Description: Bu özel tema öğrenme amaçlı yapılmıştır.
Version: 1.0
Text Domain: ilk_tema
*/
Özellikle belirtmek isterim ki Text Domain kısmı bizim için çok önemli çünkü daha sonra temada yapacağımız bir çok değişiklikte buradaki ilk_tema yazan kısım bize lazım olacak.
index.php
Tüm sayfalar için genel şablondur. Diğer dosyalar tanımlanmazsa WordPress bu dosyayı kullanır.
header.php
Sayfanın üst kısmı: <head>, <title>, menüler, logolar gibi içerikler burada yer alır.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
<nav><?php wp_nav_menu(); ?></nav>
</header>footer.php
Sayfanın alt kısmını oluşturur:
<footer>
<p>© <?php echo date("Y"); ?> Tüm Hakları Saklıdır.</p>
<?php wp_footer(); ?>
</footer>
</body>
</html>functions.php
Temanızın işlevselliğini burada tanımlarsınız. Örneğin menü, bileşen (widget), tema desteği (thumbnail, logo) gibi özellikleri buraya yazarsınız:
<?php
function ilk_tema_setup() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
register_nav_menus([
'main_menu' => 'Ana Menü'
]);
}
add_action('after_setup_theme', 'ilk_tema_setup');Bunların dışında temanızda göreceğiniz dosyalar şunlardır ;
single.php
archive.php
search.php
page.php
WordPress Özel Tema Yaparken Özel Sayfa Şablonları Oluşturmak
Bu konu WordPress’de özel tema kodlarken son derece önemli olan bir konudur. Temanız yaprak site gibi tek sayfadan oluşmuyorsa, Temanızın farklı sayfaları farklı görüntülere sahiptir. Bu nedenle her farklı tasarıma yeni bir sayfa şablonu yapmak ve bunu kullanmak gerekiyor.
Diyelim ki hakkımızda ve iletişim isminde bir sayfa yapmak istedik bunun için yapılacaklar şu şekildedir
-Temamızın olduğu dizine page-hakkimizda.php ve page-iletisim.php isminde iki dosya oluşturmalıyız
-Aşağıdaki kodları bu dosyaların üst kısmına yapıştırmamız gerek
<?php
/*
* Template Name: Hakkimizda-Page
*Template Post Type : page
*/
get_header();
?>
<?php
/*
* Template Name: Iletisim-Page
*Template Post Type : page
*/
get_header();
?>Daha sonra admin panelden Hakkımızda ve İletişim isminde iki ayrı sayfa oluşturup bu sayfaların kullanacağı şablonları aşağıdaki resimde olduğu gibi seçmelisiniz;
Burada her bir sayfaya kendi şablonunu seçmelisiniz.
Daha sonra ilgili sayfaların HTML kodlarını sayfaların header ve footer kısımlarının arasına yapıştırarak kullanabilirsiniz.
Tavsiyeler ;
WordPress Özel Tema Yapmak basit gibi görünen ancak emek isteyen bir iştir. Bunun için ACF gibi çeşitli eklentiler ve kodlardan faydalanılmaktadır. Benim bu yazım başlangıç için bir referans olmakla birlikte tek yazıda bu kadar detayın sunulabilmesi mümkün değil. Bu nedenle sorularınızı yazı altından bana sormaktan çekinmeyin