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

WordPress tema geliştirmeye başlama rehberi: Sıfırdan kişiselleştirilmiş bir web sitesi oluşturma

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

WordPress Tema Geliştirme Temel Kavramları

Kod yazmaya başlamadan önce, WordPress temalarının temel yapısını anlamak son derece önemlidir. Bir tema esasen, web sitesinin görünümünü ve bazı işlevlerini belirleyen bir dizi dosyayı içeren bir klasördür. WordPress sistemi, web sayfası içeriğini oluşturmak için bu dosyaları okur.

En temel bir tema en az iki dosyaya ihtiyaç duyar:style.css和index.phpBunlar arasında,style.cssSadece stil ile ilgili değil; aynı zamanda dosyanın başındaki yorum blokları, temanın adı, yazarı, açıklaması, sürüm numarası gibi meta bilgileri de içerir. Bu bilgiler, WordPress’in bir temayı tanımasını sağlar.

WordPress, farklı sayfaların hangi şablon dosyasını kullanacağını belirlemek için bir şablon hiyerarşisi sistemi kullanır. Örneğin, tek bir makaleye erişildiğinde, WordPress öncelikle ilgili şablonu arar.single.phpBlog makaleleri listesi sayfasına erişildiğinde, şunlar aranır:index.php或home.phpSayfaya erişildiğinde, arama işlemi başlar.page.phpBu hiyerarşik ilişkiyi anlamanız, kodu doğru yerde yazmanıza yardımcı olacaktır.

Tavsiye edilen okuma Sıfırdan Bir: Modern Web Sitesi Kurma Sürecinin Tüm Aşamalarında Kullanılan Temel Teknolojiler ve En İyi Uygulamalar。

Konu merkezi dosyanın rolü.

functions.phpDosya, bir temanın işlevsel merkezidir. Zorunlu bir dosya değildir; ancak neredeyse tüm modern temalar tarafından kullanılır. Buraya temanın desteklediği özellikleri, kayıt menülerini ve kenar çubuklarını ekleyebilir, betikleri ve stil şablonlarını içe aktarabilir, ayrıca çeşitli özelleştirilmiş fonksiyonlar tanımlayabilirsiniz. Bu dosya, tema başlatıldığında otomatik olarak yüklenir ve temanın özelliklerini genişletmede kilit bir rol oynar.

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.

Diğer bir kritik dosya ise…header.phpGenellikle belge türü beyanlarını, CSS ve JS dosyalarının içeriştirildiği bölümleri ve web sitesi başlığının ortak bileşenlerini içerir.footer.phpBu, sayfa alt kısmında yer alan ortak içeriği ve bitirme etiketlerini içerir. WordPress fonksiyonları aracılığıyla yapılır.get_header()和get_footer()Diğer şablon dosyalarında bunları kolayca dahil edebilir ve kodun modülerliğini ve sürdürülebilirliğini koruyabilirsiniz.

Yerel geliştirme ortamı kurmak ve tema yapısını oluşturmak

Bir temayı çevrimiçi sunucuya dağıtmadan önce, yerel bir geliştirme ortamı oluşturmak en verimli ve güvenli yoldur. XAMPP, MAMP, Local by Flywheel veya Docker gibi araçları kullanarak, yerel bilgisayarınızda hızlı bir şekilde Apache, MySQL ve PHP’yi kurabilir ve WordPress’ü çalıştırabilirsiniz.

Çevre hazır olduğunda, ilk temanızı oluşturmaya başlayabilirsiniz. Öncelikle, WordPress kurulum dizininin altındaki klasöre gidin…wp-content/themesKlasör: Burada yeni bir klasör oluşturun ve ona temanızın adını verin; örneğin “my-first-theme”. Tüm tema dosyaları bu klasörde bulunacaktır.

Şimdi, yukarıda bahsedilen temel dosyaları oluşturalım. İlk olarak…style.cssDosyanın baş kısmında belirli bir stil şeması bilgisinin bulunması gerekmektedir.

Tavsiye edilen okuma Profesyonel Web Siteleri Oluşturma: Kapsamlı WordPress Tema Geliştirme ve Özelleştirme Rehberi。

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Ardından, en temel olanı oluşturun.index.phpDosya. Başlangıçta oldukça basit olabilir; yalnızca konunun WordPress tarafından tanınmasını ve etkinleştirilmesini sağlamak için kullanılır.

<!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, WordPress arayüzünün “Görünüm” -> “Temalar” sayfasına giriş yapın; temanızın orada listelendiğini görmelisiniz. Temayı etkinleştirin ve ardından web sitenizin ana sayfasını ziyaret edin. Bu sayfada, yukarıdaki kodun ürettiği basit bilgileri göreceksiniz. Böylece, ilk boş tema çerçeveniz başarıyla oluşturulmuş olur.

Konu şablonları oluşturma ve döngüler kullanma

Temanın temel görevi içeriği göstermektir ve WordPress’te içeriğin gösterimi “döngülere” bağlıdır. Döngüler, WordPress’te veritabanından makaleleri (sayfalar, özel makale türleri vb. dahil) almak ve bunları sayfada göstermek için kullanılan PHP kod yapılarıdır.

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.

Ana döngüyü anlamak ve gerçekleştirmek.

En temel döngü yapısı aşağıda gösterilmiştir ve genellikle…index.php或single.phpBu şablon dosyasında:

<!-- 在这里输出每篇文章的内容 -->
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    
    <p>Hiçbir makale bulunamadı.</p>
<?php endif; ?>

have_posts()Fonksiyon, görüntülenmesi gereken herhangi bir makale olup olmadığını kontrol eder.the_post()Bu fonksiyon, mevcut makalenin verilerini ayarlar ve bu verilerin şablon etiketleri (örneğin…) tarafından kullanılabilir hale getirir.the_title()、the_content()) Çağrı yapılır.

Yaygın olarak kullanılan şablon dosyaları oluşturun.

Konunun farklı sayfaları profesyonel bir şekilde işleyebilmesi için bir dizi şablon dosyası oluşturmanız gerekiyor.index.phpBu nihai geri dönüş (rollback) şablonu için ayrıca şunlar da oluşturulmalıdır:

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Başlangıçtan Uzmanlığa Kadar Pratik Eğitim Kursu。

  • header.phpOrtak başlık kodunu çıkarın.
  • footer.phpOrtak alt kısmı (common bottom code) çıkarın.
  • single.phpTek bir makaleyi göstermek için kullanılır.
  • page.phpTek bir sayfayı göstermek için kullanılır.
  • archive.phpKategorileri, etiketleri, yazarları ve diğer arşiv sayfalarını göstermek için kullanılır.

Daha sonra, yeniden yapılandırmanız gerekiyor.index.phpWordPress’te modüler bölümleri dahil etmek için fonksiyonlar kullanılır:

<main>
        <?php while ( have_posts() ) : the_post(); ?>
            <article>
                <h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <?php the_excerpt(); ?>
            </article>
        <?php endwhile; ?>
    </main>

Bu şekilde, sayfanın başı ve sonu ayrı dosyalar tarafından yönetilir; ana şablon dosyası ise yalnızca o sayfaya özgü içerik mantığına odaklanır. Bu sayede yapı daha net olur ve bakımı daha kolay hale gelir.

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.

functions.php dosyasını kullanarak temanın özelliklerini geliştirebilirsiniz.

functions.phpBu, “Araç Çantası” adlı konunuzla ilgili bir bölümdür. Buraya kod ekleyerek, WordPress’in temel işlevlerini değiştirebilir ve genişletebilirsiniz; ancak bunu yaparken temel dosyaları değiştirmenize gerek kalmaz.

Kayıtlı konuların desteklediği özellikler:

geçmek (bir fatura veya teftiş vb.)add_theme_support()Bir fonksiyon aracılığıyla, temanın desteklediği çeşitli özellikleri tanımlayabilirsiniz. Örneğin, temanın makale özel görsellerini, özelleştirilmiş bir logosunu ve makale özetlerini desteklemesini sağlayabilirsiniz.

function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );

// 支持文章格式（可选）
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 为文章和页面开启HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Dikkat, fonksiyonu monte ettik.after_setup_themeBu eylem, bir “eylem kancası” (action hook) üzerinde yer alıyor. Bu, WordPress’in bir temayı yükledikten sonra çalıştırdığı standart bir kancadır ve temanın başlatılması için doğru yerdir.

Kayıt menüsü ve stil betikleri

Kayıt menü navigasyonu ayarları, kullanıcıların arka planda “Görünüm” -> “Menü” bölümünden menüleri yönetmelerine olanak tanır.

function my_first_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '底部菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_menus' );

Şablon dosyasında, şunları kullanabilirsiniz:wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) )Bu menüyü göstermek için…

Son olarak, CSS ve JavaScript dosyalarının doğru bir şekilde dahil edilmesi gerekmektedir; bu en iyi uygulamadır.

function my_first_theme_scripts() {
    // 引入主题的主要样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( ‘Version’ ) );

// 引入自定义的JavaScript文件
    wp_enqueue_script( ‘my-first-theme-script’, get_template_directory_uri() . ‘/js/script.js’, array(‘jquery’), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );

Kullanın.wp_enqueue_style()和wp_enqueue_script()Functionu oluşturun ve ardından onu monte edin.wp_enqueue_scriptsKancalar (hooks), WordPress tarafından resmi olarak önerilen bir yöntemdir. Bağımlılıkları yönetmeye, tekrarlanan yüklemeleri önlemeye ve eklentiler gibi ortamlarda uyumluluğu sağlamaya yardımcı olurlar.

Özetle.

Bir içeren oluşturulmasından itibaren...style.css和index.phpBir klasörden başlayarak, şablon yapılarını ve “döngü” mekanizmalarını anlamaya, ardından da bunları kullanmaya kadar ilerleyin.functions.phpDosyaya tema ile ilgili zengin özellikler eklediğinizde, WordPress tema geliştirmenin temel adımlarını zaten atmış olursunuz. Bir temayı geliştirmenin anahtarı modüler düşünceye dayanır: Tekrarlanan kısımları (örneğin başlık ve alt bilgi bölümlerini) bağımsız dosyalar haline getirmek ve bunları temanın diğer bölümleriyle uyumlu bir şekilde birleştirmektir.functions.phpİçeriklerin merkezi bir şekilde yönetilmesini sağlayan özellikler bulunmakta ve içerik gösterim mantığının düzenlenmesi için WordPress’in şablon hiyerarşisi kurallarına uyulmaktadır. Bu temel bilgileri öğrendikten sonra, kişiselleştirilmiş web siteleri oluşturmanın temellerini atmış olursunuz. Daha sonra eklentiler bölümünü, özelleştirilmiş makale türlerini, tema özelleştirici API’sini ve benzeri daha gelişmiş özellikleri keşfedebilir, WordPress geliştirme becerilerinizi sürekli olarak geliştirebilirsiniz.

Sıkça Sorulan Sorular.

Bir konuyu değiştirdikten sonra, web sayfası hemen güncellenmiyorsa ne yapmalıyım?

Bu durum genellikle tarayıcı önbelleği veya WordPress’in önbellekleme mekanizmasından kaynaklanır. Öncelikle, tarayıcınızda Ctrl+F5 (veya Cmd+Shift+R) tuşlarına basarak zorla yenileme yapmayı deneyin. Sorun hala devam ediyorsa, önbellekleme eklentileri veya sunucu tarafı önbelleğini kullanıp kullanmadığınızı kontrol edin ve tüm önbelleği temizlemeyi deneyin. CSS ve JS dosyaları için…wp_enqueue_style和wp_enqueue_scriptBir fonksiyonda, sürüm numarası parametresine dinamik bir değer atayabilirsiniz (örneğin:time()Geliştirme aşamasında önbelleğe almayı önleyin; ancak ürün yayınlanmadan önce sürüm numarasını sabit bir değere değiştirin.

Neden temam arka planda görünmüyor?

Lütfen öncelikle tema klasörünüzün doğru yolda olup olmadığını kontrol edin:wp-content/themes/İkincisi, emin olun…style.cssDosyanın en üstündeki yorum bloğunun formatı tamamen doğru; özellikle “Theme Name:” satırı kesinlikle gereklidir. Son olarak, tema klasörünün ve içindeki dosyaların izin ayarlarının doğru olduğundan emin olun ve web sunucusunun (örneğin Apache) bu dosyaları okuma yetkisine sahip olduğundan emin olun.

Kendi temama nasıl bir kenar çubuğu eklerim?

Bir kenar çubuğu eklemek iki adımda gerçekleştirilir. İlk olarak,functions.phpÇince'de kullanılır.register_sidebar()Fonksiyon, bir veya daha fazla araç çubuğu bölgesi kaydeder. Daha sonra, kenar çubuğunun görüntülenmesini istediğiniz şablon dosyasında (örneğin…)sidebar.phpİçerikte, kullanılmaktadır.dynamic_sidebar()Bir fonksiyon kullanarak onu çağırmanız gerekiyor. Aynı zamanda, ana şablon dosyasında (örneğin…)index.php) içinde kullanılırget_sidebar()Şimdi, kenar çubuğu şablonunu dahil edelim.

Geliştirme konuları sırasında, bir temanın eklentilerle uyumluluğunu nasıl sağlayabiliriz?

WordPress kodlama standartlarına uymak, uyumluluğu sağlamanın temelidir. Eklentilerin ekleyebileceği içerikler için, temanızın bu içerikleri doğru bir şekilde çağırdığından emin olmalısınız.wp_head()和wp_footer()Fonksiyonlar, çünkü birçok eklenti gerekli kodu (örneğin istatistik kodu, CSS/JS) eklemek için bu iki “hook’a” (düğüme) bağımlıdır. Ayrıca, makale içeriğini çıkardığınızda her zaman bunları kullanın.the_content()Veritabanına doğrudan erişmek yerine, bu fonksiyon “the_content” filtresi aracılığıyla eklentiler tarafından yapılan tüm değişiklikleri uygular.

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: