İcerikweb
Yetişkin Forum İçerik Editörü
WordPress Tema Kodları: Genel Yapı ve Örnekler
WordPress, dünyanın en popüler içerik yönetim sistemlerinden biridir ve özelleştirilebilir temalarıyla dikkat çeker. Bir WordPress teması, PHP, HTML, CSS ve JavaScript dillerinden oluşur ve web sitenizin tasarımını belirler.Bu yazıda WordPress tema kodlarının genel yapısını, temel dosyalarını ve kullanım örneklerini detaylı bir şekilde inceleyeceğiz.
1. WordPress Temasının Temel Dosyaları
Bir WordPress teması, aşağıdaki temel dosyalardan oluşur:| Dosya Adı | Açıklama |
|---|---|
| style.css | Temanın stil dosyasıdır. Tema adı, açıklama ve CSS kodlarını içerir. |
| index.php | Temanın ana dosyasıdır. WordPress tarafından çağrılan ilk dosyadır. |
| header.php | Sayfanın üst kısmını (menü, logo vb.) içerir. |
| footer.php | Sayfanın alt kısmını (alt bilgi, sosyal medya bağlantıları vb.) içerir. |
| functions.php | Tema özelliklerini tanımlayan özel fonksiyonları içerir. |
| single.php | Tekil yazı sayfalarını oluşturur. |
| page.php | Sayfa şablonlarını belirler. |
| sidebar.php | Kenar çubuğu içeriğini yönetir. |
| comments.php | Yorum formu ve yorum listesini oluşturur. |
2. WordPress Tema Başlangıç Dosyası (style.css)
Her temanın temel özelliklerini tanımlayan style.css dosyasında aşağıdaki kodlar bulunur:
Kod:
css
KopyalaDüzenle
/*
Theme Name: Özgün WordPress Teması
Theme URI: https://ornekwebsitem.com
Author: Adınız
Author URI: https://adiniz.com
Description: Kendi özel WordPress temanız.
Version: 1.0
License: GPLv2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ozgun-tema
*/Bu kod, WordPress’in temayı tanımasını sağlar.
3. WordPress Temasının Ana Yapısı (index.php)
WordPress temalarının temel dosyası index.php’dir. Burada sitenin ana içeriğini ve bileşenlerini çağırabiliriz.
Kod:
php
KopyalaDüzenle
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title('<h1>', '</h1>');
the_content();
endwhile;
else :
echo '<p>İçerik bulunamadı.</p>';
endif;
?>
</main>
<?php get_footer(); ?>
<?php wp_footer(); ?>
</body>
</html>✔ get_header() → header.php dosyasını çağırır.
✔ have_posts() ve the_post() → WordPress döngüsü (Loop) ile yazıları listeler.
✔ get_footer() → footer.php dosyasını çağırır.
✔ wp_head() ve wp_footer() → WordPress'in temel fonksiyonlarını çalıştırır.
4. Header ve Footer Dosyaları
🖥 Header (header.php)
Header dosyası, sitenin üst kısmını ve menüleri içerir.
PHP:
php
KopyalaDüzenle
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<nav>
<?php wp_nav_menu(array('theme_location' => 'main-menu')); ?>
</nav>
</header>✔ bloginfo('name') → Site başlığını çeker.
✔ wp_nav_menu() → WordPress menü sistemini kullanır.
Footer (footer.php)
phpKopyalaDüzenle
PHP:
<footer>
<p>© <?php echo date('Y'); ?> - <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>✔ date('Y') → Güncel yılı dinamik olarak ekler.
✔ bloginfo('name') → Web sitesi adını gösterir.
✔ wp_footer() → WordPress eklentileri ve betikleri çalıştırır.
⚙ 5. Tema Fonksiyonları (functions.php)
functions.php, temaya özel özellikler eklemek için kullanılır.
PHP:
php
KopyalaDüzenle
<?php
// Tema Destekleri
function ozgun_tema_destekleri() {
add_theme_support('title-tag'); // Başlık desteği
add_theme_support('post-thumbnails'); // Öne çıkan görseller
register_nav_menus(array(
'main-menu' => __('Ana Menü', 'ozgun-tema'),
));
}
add_action('after_setup_theme', 'ozgun_tema_destekleri');
// Stil ve Script Dosyaları
function ozgun_tema_stillleri() {
wp_enqueue_style('tema-stili', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'ozgun_tema_stillleri');
?>✔ add_theme_support('post-thumbnails') → Öne çıkan görsel desteği ekler.
✔ register_nav_menus() → WordPress menü desteğini aktif eder.
✔ wp_enqueue_style() → CSS dosyalarını çağırır.
6. Sayfa ve Yazı Şablonları
Single.php (Tekil Yazı Şablonu)
PHP:
php
KopyalaDüzenle
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title('<h1>', '</h1>');
the_content();
endwhile;
endif;
?>
</main>
<?php get_footer(); ?>Bu dosya, blog yazılarının tekil sayfasını oluşturur.
Sonuç: WordPress Tema Kodlarını Kullanarak Kendi Temanızı Geliştirin!
Bu yazıda, WordPress temalarının temel kod yapılarını ve nasıl oluşturulacağını öğrendik. Eğer özel bir WordPress teması geliştirmek istiyorsanız:
Temel dosya yapısını öğrenin. Header, footer ve functions.php dosyalarını kullanın. WordPress döngüsünü (Loop) doğru şekilde kullanarak içeriklerinizi görüntüleyin. CSS ve JavaScript dosyalarını uygun şekilde çağırarak temanızın tasarımını oluşturun. Eğer WordPress temalarıyla ilgili daha fazla bilgi almak veya özel bir tema geliştirmek istiyorsanız, yorum bırakabilirsiniz! 