Anasayfa./Bilgi./WordPress/İçerik detayları.

Özel WordPress teması nasıl oluşturulur: Sıfırdan bire kadar tam bir başlangıç rehberi

3 dakika okuma.
2026-03-12
2026-06-03
2,744
Aşağıdaki bağlantılar üzerinden alışveriş yaptığınızda, sizin için ek bir maliyet olmadan komisyon kazanıyorum.

WordPress temalarının altyapısını anlamak

Kodlamaya başlamadan önce, bir WordPress temasının temel yapısını anlamak çok önemlidir. Bir tema sadece bir dizi stil şemasından ibaret değildir; belirli standartlara uygun bir dizi şablon dosyasından oluşan organik bir bütündür. Bu dosyalar birlikte çalışarak, WordPress’e web sitenizin içeriğinin nasıl görüntüleneceğini söyler. Tema dizini genellikle… /wp-content/themes/Oluşturduğunuz her konu için ayrı bir klasör bulunmalıdır.

En temel WordPress temaları yalnızca iki dosyaya ihtiyaç duyar:style.css 和 index.phpBunlar arasında,style.css Sadece stil ile ilgilenmekle kalmaz; aynı zamanda dosyanın başındaki yorum blokları, temanın “kimlik kartı” görevi görür ve WordPress’e temanın adı, yazarı, açıklaması gibi bilgileri bildirir. index.php Bu, varsayılan ana şablon dosyasıdır. Daha spesifik bir şablon eşleşmediğinde, WordPress sayfayı renderlamak için bunu kullanır.

Ancak, özellikleri tam bir özelleştirilmiş tema, her biri belirli bir sayfa veya işlevle eşleşen daha fazla şablon dosyası içerir. Örneğin,header.php Web sitesinin üst kısmını (header bölgesini) tanımlayın.footer.php Alt bölgeyi tanımlayın.single.php Tek bir makaleyi göstermek için kullanılır.page.php Bağımsız sayfaları göstermek için kullanılır.functions.php Bu, temaya özgü özelliklerin eklenmesi ve çeşitli bileşenlerin kaydedilmesi için kullanılır.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan İlk Özel Temanızı Oluşturun。

WordPress, belirli bir istek için hangi şablon dosyasının kullanılacağını belirlemek için bir şablon hiyerarşisi sistemi kullanır. Bu, web sitenizin her sayfası için ayrı ayrı kod yazmanıza gerek kalmadığı anlamına gelir. Farklı seviyelerde şablon dosyaları oluşturarak, makaleler, sayfalar, kategori dizinleri, yazar sayfaları gibi farklı türdeki içeriklerin nasıl görüntüleneceğini hassas bir şekilde kontrol edebilirsiniz. Bu hiyerarşiyi anlamak, etkili bir şekilde temalar oluşturmanın anahtarıdır.

UltaHost WordPress Sunucusu
30 gün iade garantisi, sınırsız bant genişliği ve veritabanı kullanımı, ücretsiz DDoS koruması; 3 yıllık abonelikte indirim (50%).
UltaHost LOGOSU Sayfaya erişin.

Özel bir temanın geliştirme ortamını kurmak

Dosyaları oluşturmaya başlamadan önce, yerel bir geliştirme ortamı oluşturmak profesyonel bir iş akışının ilk adımıdır. Bu, çevrimiçi web sitesini etkilemeden geliştirme ve test yapmanıza olanak tanır. Local by Flywheel, XAMPP, MAMP veya Docker gibi araçları kullanarak, yerel bilgisayarınızda Apache/Nginx, PHP ve MySQL içeren bir WordPress ortamı hızlı bir şekilde kurabilirsiniz.

Yerel ortam hazır olduğunda, WordPress kurulum dizininin içinde bulunan belirli dosyaları değiştirmeniz gerekecektir. wp-content/themes Bir klasörün içinde yeni bir klasör oluşturun. Bu yeni klasörün adı, temanızın tanımlayıcısı olacaktır. Küçük harfler, rakamlar ve tireler kullanmanızı öneririz; ayrıca mevcut temalarla adı çakışmamasına dikkat edin. Örneğin: my-custom-theme。

Şimdi, ilk ve zorunlu dosyayı oluşturun:style.cssLütfen en üste, doğru biçimlendirilmiş bir konu bilgisi notu bloğu ekleyin.

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始创建的自定义 WordPress 主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

Daha sonra, aynı şekilde gerekli olanı oluşturun. index.php Dosya. Başlangıçta çok basit olabilir; hatta sadece bir HTML satırı içerebilir.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kursu: Sıfırdan Özelleştirilmiş Temalar Oluşturmak。

<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1001>
    <h1>Merhaba, WordPress Tema Geliştirme ekibi!</h1>
    <?php wp_footer(); ?>
</body>
</html>

Bu sırada, yerel WordPress arayüzüne giriş yapın ve “Görünüm” → “Temalar” bölümüne gidin. Temanızın orada listelendiğini görmelisiniz. Temayı etkinleştirin, web sitesinin ana sayfasını ziyaret edin ve yukarıdaki kodun ürettiği basit bilgileri göreceksiniz. Bu, özelleştirdiğiniz temanın artık temel olarak çalıştığını gösterir.

Konunun temel şablon dosyasını oluşturma

İşleyebilen bir tema çerçevesine sahip olduktan sonra, bir sonraki adım onu modüler hale getirmek ve dinamik içerikleri işlemek için WordPress’in temel özelliklerinden yararlanmaktır. Modülerliğin anahtarı, tekrar kullanılabilir bölümleri bağımsız şablon dosyalarına ayırmaktır.

Başlık ve alt kısım şablonları oluşturun.

Öncelikle, index.php Başlık ve alt kısmındaki kodları birbirinden ayırın. “” adında yeni bir dosya oluşturun. header.phpBazı toplamların baş kısımlarını içeriye taşıyın.

hosting.com Paylaşımlı Barındırma
AMD EPYC CPU'lar, NVMe SSD depolama ve LiteSpeed ile yüksek performans, 7/24, 7x7 uzman şirket içi destek, SSL, kaba kuvvet, kötü amaçlı yazılım ve DDoS koruması dahil gelişmiş güvenlik önlemleri, 73%'ye kadar tasarruf
hosting.com LOGO Sayfaya erişin. 
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <p class="site-description"><?php bloginfo( 'description' ); ?></p>
</header>

Sonra, oluşturun. footer.php Dosya, sayfa altı içeriğini ve bitirme etiketlerini içermektedir.

<footer id="colophon" class="site-footer">
    <p>©  . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
\n

Daha sonra, değiştirin. index.phpWordPress’in şablonlarını kullanarak, fonksiyonları çağırmak için bu şablonlara fonksiyonları dahil edebilirsiniz.

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 文章内容输出将在这里
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' );
    endif;
    ?&gt;
</main>

Makale ve sayfa şablonları oluşturma

Makalelerin ve sayfaların farklı düzenlerini gerçekleştirmek için, gerekli değişiklikleri yapmak amacıyla özel yapılar oluşturulabilir. single.php Tek bir makaleyi işlemek için… page.php Bağımsız sayfaları işlemek için… Temel yapıları benzer; ancak WordPress’in koşullu etiketlerinden (conditional tags) yararlanılabilir. is_single() 和 is_page() Gerekli olduğunda ayrım yapın.
Oluşturun. functions.php Bu dosya çok önemlidir; tema özelliklerini geliştirmek için kullanılır. Bu dosyada menüler, kenar çubukları (araç çubukları), makale özetleri, özelleştirilmiş başlık etiketleri gibi tema desteği özelliklerini ekleyebilir, ayrıca stil şemalarını ve betik dosyalarını da düzenleyebilirsiniz.

Tavsiye edilen okuma WordPress Temaları İçin Nihai Kılavuz: Seçimden Özelleştirmeye ve Geliştirmeye Kadar Kapsamlı Bir Rehber。

<?php
function my_custom_theme_setup() {
    // 让 WordPress 负责管理文档标题标签
    add_theme_support( 'title-tag' );
    // 启用文章和页面特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

function my_custom_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
    // 排入自定义脚本
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );
?>

Uygulama stilinin belirlenmesi ve etkileşimli özelliklerin eklenmesi

Hatta sadece işlevselliğe odaklanan bir tema bile, kullanılabilirliği ve okunabilirliği sağlamak için temel stillere ihtiyaç duyar. Bunu yapabilirsiniz… style.css Ana stil şemasının temelinde genişleme yaparak, duyarlı (responsive) bir düzen ve estetik bir arayüz oluşturun.

Temel bir yanıt veren tasarım (responsive design) gerçekleştirme

Öncelikle bazı CSS sıfırlama ayarları ve temel stiller belirleyerek başlayın; ardından mobil cihazlara öncelik veren, duyarlı (responsive) bir tasarım için medya sorguları (media queries) oluşturun.

InterServer Paylaşımlı Barındırma
Paylaşımlı hosting aylık $2.50 USD, ilk ay $0.1 USD promosyon kodu tryinterserver, 461 bulut uygulaması komut dosyası, tek tıklamayla yükleme.
InterServer LOGO. Sayfaya erişin. 
/* style.css */
/* 基础重置与样式 */
* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* 移动端响应式 */
.site-header, .site-footer {
    padding: 1rem 0;
    text-align: center;
}
/* 平板及以上设备 */
@media (min-width: 768px) {
    .site-main {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }
}

Navigasyon menüsü oluşturma scripti

Mobil menünün etkileşimli olmasını sağlamak için basit bir JavaScript dosyası oluşturabilirsiniz. Öncelikle, header.php Menü butonları için HTML yapısını ekleyin ve ardından… /js/navigation.js Kontrol mantığını ekleyin.

// /js/navigation.js
document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.querySelector('.menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');

if (menuButton) {
        menuButton.addEventListener('click', function() {
            primaryMenu.classList.toggle('toggled');
            this.setAttribute('aria-expanded', 
                this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
            );
        });
    }
});

Son olarak, WordPress’in özelleştirici API’sini kullanabilir veya tema seçenekleri sayfaları oluşturarak kullanıcılara site rengi veya logo yüklemesi gibi basit özelleştirme seçenekleri sunabilirsiniz. Bu genellikle şu şekilde yapılır: functions.php Çince'de kullanılır. add_theme_support İlgili API fonksiyonları ile gerçekleştirilir.

Özetle.

Sıfırdan başlayarak özel bir WordPress teması oluşturmak, sistematik bir öğrenme sürecidir ve PHP, HTML, CSS, JavaScript temellerine hakim olmanızı ve aynı zamanda WordPress’in temel yapısını ve API’sini anlamanızı gerektirir. Tüm süreç, temel yapıları kurmaktan başlar… style.css 和 index.php Başlayarak, başlık, alt kısım, kenar çubuğu gibi şablon dosyalarını modüler bir şekilde ayırın. Şablon hiyerarşisi sistemini kullanarak içeriğin görünümünü hassas bir şekilde kontrol edin ve… functions.php Temaların özelliklerini entegre edin ve çeşitli bileşenleri kaydedin. Son olarak, duyarlı CSS ve gerekli JavaScript betikleri sayesinde temaları hem estetik hem de kullanıcı dostu hale getirin. Bu yolu izleyerek sadece benzersiz bir web sitesi görünümü oluşturmakla kalmaz, aynı zamanda WordPress’in çalışma mekanizmasını da derinlemesine anlarsınız ve daha gelişmiş temalar ile eklentiler geliştirmek için sağlam bir temel oluşturursunuz.

Sıkça Sorulan Sorular.

WordPress tema oluşturmak için hangi programlama dillerini bilmek gereklidir?

Tam özellikli bir WordPress teması oluşturmak için birkaç temel teknolojiyi öğrenmeniz gerekmektedir. PHP en temel teknolojidir; çünkü WordPress kendisi PHP ile yazılmıştır ve tüm şablon dosyaları ile mantık işlemleri PHP sayesinde gerçekleşir. HTML, sayfa yapısını oluşturmak için kullanılır; CSS ise stil ve düzenlemeyi kontrol eder, böylece tema estetik ve duyarlı (responsive) bir tasarıma sahip olur. JavaScript (genellikle jQuery) ise menü değişiklikleri, slayt gösterileri gibi ön uç etkileşimlerini (frontend interactions) eklemek için kullanılır.

Özel temaları kullanmanın, mevcut temaları veya sayfa oluşturucularını kullanmaktan temel farkları nelerdir?

Özelleştirilmiş temalar, en yüksek derecede esneklik ve benzersizlik sunar. Web sitesinin her satır kodunu, her özelliğini ve performansını tamamen kontrol edebilirsiniz; belirli bir markanın ve iş ihtiyaçlarına tam olarak uygun bir web sitesi oluşturabilirsiniz. Ayrıca, bu temalar genellikle daha sade ve verimli bir kod yapısına sahiptir. Mevcut temaları veya sayfa oluşturucuları kullanmak ise daha hızlı başlamayı sağlasa da, fazla gereksiz kod, sınırlı özelleştirme seçenekleri, potansiyel eklenti bağımlılıkları ve yüksek homojenleşme riskleriyle karşı karşıya kalabilirsiniz. Özelleştirilmiş temalar, benzersiz bir marka imajına, belirli özelliklere veya yüksek performans gereksinimlerine sahip projeler için daha uygundur.

Kendi özelleştirilmiş temamın WordPress’in resmi standartlarına uyum sağlamasını nasıl sağlayabilirim?

Temanızın WordPress çekirdek standartlarına uygun olması ve resmi kataloga eklenme olasılığını artırmak için “WordPress Tema Geliştirme Kılavuzu”na sıkı sıkıya uymalısınız. Bu, doğru şablon hiyerarşisi yapısını kullanmayı, tüm dinamik veri çıktılarını uluslararasılaştırma (i18n) işlemleri için uygun hale getirmeyi ve yerelleştirmeyi, tüm kullanıcı girdilerini ve çıktılarını güvenli bir şekilde işlemeyi, tema kodunun WordPress kodlama standartlarına uygun olmasını sağlamayı, erişilebilirlik (A11y) desteği sunmayı ve temanın hem çekirdek özellikler açık hem de kapalıyken düzgün çalışmasını (tema birim testleri) garanti etmeyi içerir.

Bir tema geliştirirken, functions.php dosyasının ana işlevi nedir?

functions.php Bu dosya, temanızın “işlevsel araç kutusu”dur. Sayfada doğrudan görüntülenmek için kullanılmaz; temanızın işlevlerini ve davranışlarını tanımlamak amacıyla kullanılır. Temel görevleri arasında şunlar bulunur: WordPress çekirdek işlevlerine yeni özellikler eklemek veya mevcut özellikleri değiştirmek için “Hook’lar” kullanmak, navigasyon menüsü ve kenar çubuğu (araç çubuğu) yerlerini ayarlamak, temanıza özel özellikler eklemek (örneğin makale özetleri, özelleştirilmiş logo), ve temanın stil şablonlarını ile JavaScript betik dosyalarını güvenli bir şekilde dahil etmektir. Temanızın görünümü ile WordPress arayüzünün işlevleri arasındaki bağlantıyı sağlayan kilit bir araçtır.

Bir sonraki adım, bundan sonra ne yapmalıyım?

Eğer bir WordPress web sitesi oluşturuyorsanız veya optimize ediyorsanız, performans optimizasyonu, eklenti yapılandırması ve tema özelleştirmesi ile ilgili konuları okumaya devam etmeniz önerilir.

Daha fazla okuma ve pratik bilgiler.

Aşağıdaki içerikler bu makalenin konusuyla ilgilidir ve daha fazla okumak için uygundur. Öncelikle mevcut sorununuza en yakın makaleden başlayın, sonra çevresel konulara doğru ilerleyin, genellikle daha iyi sonuçlar alırsınız.

Etiketler: