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

WordPress Tema Geliştirme Başlangıcı: İlk Özel Temanızı Adım Adım Oluşturun

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

Hazırlık İşlemleri ve Ortam Ayarları

İlk satır kodu yazmaya başlamadan önce, uygun bir geliştirme ortamına ihtiyacınız var. Bu, bir yerel sunucu ortamı ve bir kod editörünü içerir. XAMPP, MAMP veya Laragon gibi araçları kullanmanız önerilir; bunlar Apache, MySQL ve PHP’yi tek tuşla kurup çalıştırmanıza olanak tanır. Visual Studio Code, Sublime Text veya PHPStorm gibi bir kod editörü seçin; bu editörlerin kod vurgulama ve otomatik tamamlama özellikleri geliştirme verimliliğinizi büyük ölçüde artıracaktır.

Ardından, yerel WordPress kurulumunuzda yeni temanız için bir klasör oluşturmanız gerekiyor. Tüm WordPress temaları burada saklanır. /wp-content/themes/ Katalogun içinde. Bu klasörde, yakında oluşturacağınız konu için yeni bir klasör oluşturun; örneğin adını “my_new_project” olarak belirleyin. my-first-themeBu klasörün adı, temanızın tanımlayıcısıdır ve arka plandaki tema listesinde görünecektir.

Aynı zamanda, WordPress tema geliştirmenin iki temel unsuru olan şablon dosyaları ve stil dosyaları hakkında bilgi sahibi olmanız gerekiyor. En temel WordPress temaları yalnızca iki dosyaya ihtiyaç duyar:style.css 和 index.php。style.css Sadece web sitesinin görsel stilini kontrol etmekle kalmaz; aynı zamanda dosyanın başındaki yorum blokları, temanın “kimlik kartı” niteliğindedir ve temanın adı, yazarı, açıklaması gibi meta bilgileri içerir.index.php Bu, varsayılan ana şablon dosyasıdır.

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Sıfırdan Başlayarak Özel Temalar Oluşturma。

Çekirdek tema dosyasını oluşturun.

Konu stillerini ve bilgilerini tanımlama

Her şey… style.css Başlayın. Bu dosyayı tema klasörünün kök dizininde oluşturun ve dosyanın en üstüne biçimlendirilmiş bir yorum bloğu ekleyin. Bu yorum bloğu, WordPress’in temayı tanımasını ve yüklemesini sağlar. Aşağıdaki kod, temel bir stil şeması başlığını göstermektedir:

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. 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Bunlar arasında,Text Domain Uluslararasılaştırma (i18n) amacıyla kullanılır ve gelecekteki çok dilli çeviriler için hazırlık yapar. Bu dosyayı oluşturduktan sonra, WordPress yönetim paneline giriş yapın ve “Görünüm” -> “Temalar” sayfasına gidin; temanızı orada görmelisiniz, ancak şu an herhangi bir özelliği yoktur.

Temel şablon yapısını oluşturmak

Ardından, temanın iskelet dosyasını oluşturun. index.phpBu en temel şablondur; WordPress daha spesifik bir şablon dosyası bulamadığında… single.php 或 page.phpBu araç, belirli bir durum gerçekleştiğinde kullanılır. En basit örneği şu şekilde açıklanabilir: index.php Yalnızca WordPress başlık dosyasını (header), döngüleri (loops) ve son kısmı (footer) içeren temel fonksiyonları içerebilir.

<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
    <?php wp_body_open(); ?>
    <header>
        <h1><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 文章内容输出
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Bu dosya, WordPress’in çekirdek şablon etiketlerini kullanmaktadır. bloginfo() Web sitesi bilgilerini almak.the_title() 和 the_content() Döngü içinde makale başlıklarını ve içeriklerini ekrana yazdırın.wp_head() 和 wp_footer() Bu, WordPress çekirdeği, eklentiler ve diğer betiklerin sayfalara erişmesine olanak tanıyan çok önemli mekanizmalardır. <head> 和 <footer> Bölgesel kod enjeksiyonu.

Şablonları ayırmak ve yeni özellikleri eklemek

Modüler şablon dosyaları

将 index.php Tüm kodun tek bir dosyada bulunması, kodun bakımını zorlaştırır. En iyi uygulama, kodu birden fazla şablon parçasına (Template Part) ayırmaktır. Kod yapısını düzenlemek için aşağıdaki dosyaları oluşturun:
* header.phpDepolama <head> Bölge ve web sitesinin üst kısmındaki navigasyon gibi ortak başlık içerikleri.
* footer.phpWeb sitesinin alt kısmında telif hakkı bilgileri ve diğer genel içeriklerin saklandığı bölüm.
* sidebar.phpYan çubuk araçlarının saklandığı bölüm (isteğe bağlı).
* functions.phpKonunun işlevsel fonksiyonlarını içeren dosya.

Tavsiye edilen okuma Sıfırdan Başlayarak: Kendi WordPress Temanınızı Geliştirmeyi Adım Adım Öğrenin。

Ardından, kullanın. get_header()、get_footer() 和 get_sidebar() Bu fonksiyonlar… index.php Onları içeriye dahil edin. Dönüştürülmüş hali… index.php Önemli kısım çok daha sade hale gelecek:

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article>
            &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        </article>
    <?php endwhile; else : ?>
        <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

Dikkat edin, biz şunu kullandık: esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) Çevirinin hazır olduğu metni sunmak, uluslararası standartlara uygun bir yaklaşımdır.

Temaların özelliklerini geliştirme

functions.php Dosya, temanızın “kontrol merkezidir”. Temanın desteklediği özellikleri eklemek, menüler ve kenar çubuklarını oluşturmak, stil şemalarını ve betikleri yüklemek için kullanılır. Bu bir şablon dosyası değildir; teman başlatıldığında otomatik olarak yüklenir.

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.

Aşağıda temel bir örnek bulunmaktadır. functions.php Örnek:

__( '主导航菜单', 'my-first-theme' ),
    ) );

// 添加对 HTML5 标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 添加标题标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

// 加载主题的样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?&gt;

Bu dosyada, bir fonksiyon tanımladık. my_first_theme_setupVe bunu şu yolla gerçekleştirin: add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) Bunu WordPress’in başlangıç temasındaki belirli bir eylem kancasına (action hook) monte edin. Aynı şekilde, biz de bunu kullanıyoruz. register_sidebar Fonksiyon, bir araç çubuğu alanı (widget area) kaydetti ve bunu şu şekilde gerçekleştirdi: wp_enqueue_style Fonksiyon, tema stil şemasını doğru bir şekilde içe aktardı.

Özel şablonlar ve stiller oluşturun.

Farklı sayfa türleri için özel şablonlar oluşturmak.

WordPress’in şablon hiyerarşisi, farklı türdeki sayfalar için özel şablon dosyaları oluşturmanıza olanak tanır. Örneğin:
* front-page.phpStatik bir ana sayfa olarak kullanılır.
* home.phpBlog Makaleleri Listesi Sayfası.
* single.phpTek makale detay sayfası.
* page.phpTek sayfa.
* archive.phpKategoriler, etiketler, yazarlar ve diğer arşiv sayfaları.
* search.phpArama Sonuçları Sayfası.
* 404.php404 Hata Sayfası.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Özelleştirilmiş Tema Yapısını ve Şablonlarını Oluşturma。

Oluştur page.php Tüm sayfaların görünümünü bağımsız olarak kontrol etmenize olanak tanır ve makale sayfalarını etkilemez. Yapısı şu şekildedir: index.php Benzer, ancak genellikle makalenin yayınlanma meta verilerinin (tarih, yazar gibi) gösterilmesine gerek yoktur.

Tepki veren (responsive) bir tasarım ve etkileşim oluşturma

Modern WordPress temalarının responsive (uyumlu) olması gerekmektedir. Bu, CSS kodlarınızın cep telefonundan masaüstüne kadar tüm ekran boyutlarına uyum sağlaması gerektiği anlamına gelir. Mobil öncelikli (Mobile First) bir CSS stratejisi kullanmanız önerilir; yani önce küçük ekranlar için temel stilleri oluşturun ve ardından medya sorguları (Media Queries) aracılığıyla büyük ekranlar için geliştirilmiş stiller ekleyin.

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.

Aynı zamanda, temanızın etkileşimli özellikler sağlaması için bazı JavaScript kodlarına ihtiyacı olabilir; örneğin açılır menüler, slayt gösterileri gibi. Doğru yaklaşım, bu JavaScript kodlarını temanın kaynak koduna uygun bir şekilde entegre etmektir. functions.php Çince'de kullanılır. wp_enqueue_script() Bu fonksiyon, betikleri kaydetmek ve sıraya koymak için kullanılır ve jQuery gibi bağımlılıkların doğru bir şekilde tanımlandığından emin olur. Bu sayede betik çakışmaları ve tekrarlanan yüklemeler önlenir ve WordPress’in betik optimizasyon özellikleriyle uyumlu hale gelir.

Özetle.

Yukarıdaki adımları takip ederek, en temel ve çalışan bir WordPress özel teması oluşturdunuz. Tema bilgilerini nasıl tanımlayacağınızı öğrendiniz. style.cssTemel yapıları oluşturmak index.php Şablonları modüler bileşenlere ayırın ve bunları kullanın. functions.php WordPress’ta temaların özelliklerini geliştirmeyi öğrendiniz. Ayrıca, WordPress’in güçlü şablon hiyerarşisini de anladınız; bu da daha karmaşık, özel temalı sayfalar oluşturmanız için zemin hazırlıyor.

Temaların geliştirilmesi, sürekli iterasyonlar ve derinlemesine çalışmalar gerektiren bir süreçtir. Ardından, mevcut temaları güvenli bir şekilde değiştirmek için “Çocuk Temaları” (Child Themes) geliştirmeyi inceleyebilir, kullanıcıların arka planda tema ayarlarını gerçek zamanlı olarak değiştirebilmelerini sağlamak için WordPress Özelleştirici (Customizer) API’sini kullanmayı öğrenebilir veya WordPress’in REST API’sini derinlemesine inceleyerek ön uç çerçevelerle entegre edilebilen temalar oluşturabilirsiniz. Resmi geliştirici dokümanlarına dikkat etmek ve topluluğa aktif olarak katılmak, sürekli ilerlemenin anahtarıdır.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için PHP’de uzman olmak zorunda mıyım?

Evet, sağlam bir PHP temeline sahip olmak, WordPress temaları geliştirmek için gereklidir. Çünkü WordPress kendisi PHP ile yazılmıştır ve tüm şablon dosyaları (örneğin…) index.php、single.php) ve işlevsel dosyalar (functions.phpHepsi, içeriği dinamik olarak oluşturmak, WordPress fonksiyonlarını çağırmak ve verilerle işlem yapmak için PHP kodu kullanmayı gerektirir.

Aynı zamanda, sayfa yapısını ve stilini oluşturmak için HTML ve CSS’ye aşina olmanız gerekmektedir. Ayrıca, etkileşimli özellikler eklemek için JavaScript’e (özellikle de WordPress çekirdeğinde yer alan jQuery’ye) temel düzeyde hakim olmanız önemlidir.

Neden WordPress arayüzünde temamın değişikliği görünmüyor?

Bu durum genellikle tarayıcı veya sunucu önbelleğinden kaynaklanır. Öncelikle, tarayıcınızda şu adımları deneyin: Ctrl + F5(Windows/Linux) veya Cmd + Shift + R(Mac) Tarayıcı önbelleğini temizlemek için zorla yenileme yapın.

Eğer sorun hala devam ediyorsa, muhtemelen sunucu tarafında veya WordPress için kullanılan önbellekleme eklentileri (örneğin W3 Total Cache, WP Super Cache) eski dosyaları önbelleğe almıştır. Lütfen tüm önbellekleme eklentilerindeki önbelleği temizlemeyi deneyin. Geliştirme aşamasında, sorunlara neden olmamak için bu önbellekleme eklentilerini geçici olarak devre dışı bırakmanız önerilir.

Nasıl temamı çok dilli olarak destekleyebilirim?

Bir temanın çok dilli desteğe sahip olmasını (uluslararasılaştırma ve yerelleştirme, yani i18n ve l10n) sağlamak esas olarak WordPress’in çeviri fonksiyonlarına bağlıdır. Temada, kullanıcılara yönelik tüm metin dizeleri doğrudan yazılmamalı, bunun yerine çeviri fonksiyonları kullanılarak sarılmalıdır.

Örneğin, kullanarak… (‘文本’， ‘my-first-theme’) Çeviri yapın veya kullanın. echo esc_html(‘文本’， ‘my-first-theme’) “Çıktıyı oluşturun ve escape işlemini yapın.” style.css Bunun başı ve load_theme_textdomain() Fonksiyon çağrısında doğru ayarlamalar yapılmalıdır. Text Domain(Bir metin alanı), ardından Poedit gibi bir araç kullanarak oluşturun. .pot Çeviri şablonları ve… .po/.mo Dil dosyası.

Temanın functions.php dosyası ve eklentinin fonksiyonları arasında ne fark var?

functions.php Dosyadaki kodun işlevi, eklenti kodunun işlevine benzer; her ikisi de WordPress’i genişletmek için kullanılabilir. Ana farklar kapsam (scope) ve kullanım amacı açısından ortaya çıkar.

functions.php Bu özellikler, mevcut temayla sıkı bir şekilde bağlantılıdır. Kullanıcı temayı değiştirdiğinde, bu özellikler genellikle artık kullanılamaz hale gelir. Temanın görsel sunumu, düzeni ve şablonlarıyla doğrudan ilgili özelliklerin eklenmesi için uygundur (örneğin, kayıt formunun konumu, tema desteği seçeneklerinin eklenmesi gibi).

Eklentilerin sağladığı özellikler temadan bağımsızdır; hangi tema kullanılırsa kullanılsın, eklenti etkinleştirildiği sürece bu özellikler mevcuttur. Bu özellikler, temanın görünümüyle ilgili olmayan genel amaçlı işlevlerin (örneğin iletişim formları, SEO optimizasyonu, e-ticaret özellikleri) eklenmesi için uygundur. Eğer bir özellik, tema değiştirildikten sonra da korunması gerekiyorsa, o zaman bir eklenti olarak geliştirilmelidir.

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: