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

WordPress tema geliştirmeye başlama kılavuzu: Sıfırdan başlayarak gelişmiş bir arayüz oluşturma

3 dakika okuma.
2026-03-14
2026-06-05
2,299
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 Kurulumu

Kod yazmaya başlamadan önce, stabil ve verimli bir geliştirme ortamı başarının temelidir. Bu, yerel geliştirme ortamının yapılandırılmasını, gerekli araç yazılımlarını ve WordPress temalarının temel yapısını anlamayı içerir.

Öncelikle, yerel bir sunucu ortamı oluşturmanız gerekiyor. XAMPP, MAMP, Local by Flywheel veya DevKinsta gibi entegre araçları kullanabilirsiniz; bunlar Apache, MySQL ve PHP’yi yerel bilgisayarınıza hızlı bir şekilde kurmanıza olanak tanır. Modern geliştirme için, en yeni WordPress özellikleriyle uyumluluğu sağlamak amacıyla PHP 7.4 ve üzeri sürümlerini destekleyen bir ortam kullanmanızı şiddetle öneririz.

Bir sonraki adım kod editörüdür. Visual Studio Code, PhpStorm veya Sublime Text, mükemmel seçeneklerdir. Visual Studio Code, PHP Intelephense, WordPress Snippet gibi zengin eklentileri ve güçlü hata ayıklama özellikleri sayesinde birçok geliştiricinin tercihi haline gelmiştir. Ayrıca, kod değişikliklerini yönetmenize ve takımınızla işbirliği yapmanıza yardımcı olan Git gibi sürüm kontrol sistemleri de şarttır.

Tavsiye edilen okuma WordPress Tema Geliştirme Üzerine Derinlemesine Analiz: Başlangıçtan Uzmanlığa Kadar Tam Kılavuz。

Konunun dizin yapısını anlamak çok önemlidir. En temel bir WordPress temasının en az iki dosyası olmalıdır:style.css和index.php。style.cssSadece bir stil şeması değil; aynı zamanda bir temanın “kimlik kartı”dır. Başlık kısmındaki yorumlar, temanın adını, yazarını, açıklamasını ve diğer meta bilgilerini içerir.index.phpBu, ana şablon dosyasıdır. Geliştirmenin ilerlemesiyle birlikte, daha fazla şablon oluşturacaksınız.header.php、footer.php、functions.phpBu tür dosyalar, net ve modüler bir yapı oluşturur.

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.

Çekirdek şablon dosyaları ve yapısı

WordPress temaları, bir şablon hiyerarşisi sistemine sahiptir. Bu, sistemin mevcut ziyaret edilen sayfa türüne (örneğin ana sayfa, makale sayfası, özel sayfa) göre otomatik olarak uygun şablon dosyasını seçerek sayfayı renderladığı anlamına gelir. Bu temel şablon dosyalarını anlamak, bir temanın iskeletini oluşturmanın temelidir.

Şablon hiyerarşisini anlamak

Şablon hiyerarşisi, genelden öze doğru ilerleyen bir arama kuralıdır. Örneğin, bir blog makalesine erişildiğinde, WordPress sırasıyla şu adımları izler:single-post.php、single.phpSon olarak,index.phpAna sayfada öncelikle arama yapılacaktır.front-page.php或home.phpBu hiyerarşik ilişkiyi anlamak, varsayılan düzenlemeyi doğru yerde değiştirmenize ve sayfayı daha detaylı bir şekilde kontrol etmenize olanak tanır.

Temel şablon dosyasını oluşturun.

Hadi, en temel birkaç dosya oluşturarak başlayalım. İlk olarak…header.phpBelge başlığı, navigasyon menüsü ve site tanımlayıcısı (Logo) içermektedir.

<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
    <header class="site-header">
        <div class="site-branding">
            <?php the_custom_logo(); ?>
            <h1 class="site-title"><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        </div>
        <nav class="main-navigation">
            'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            ) );
            ?&gt;
        </nav>
    </header>

İkincisi…footer.phpSayfa altı bilgilerini ve önemli WordPress eklentilerini (hook’ları) içerir.

Tavsiye edilen okuma Profesyonel seviyede web siteleri oluşturmanın son rehberi: WordPress temalarının geliştirilmesi – Başlangıçtan Uzmanlığa。

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

Son olarak,index.phpBurada, biz…get_header()和get_footer()Bu bölümleri dahil etmek için bir fonksiyon kullanılır.

<?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 :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

Konu özelliklerinin ve stillerinin entegrasyonu

Güçlü bir tema sadece görünüme ihtiyaç duymaz; aynı zamanda işlevselliğe de ihtiyaç duyar.functions.phpDosyalar, işlevler eklemek, menüler oluşturmak, özel görselleri desteklemek gibi amaçlar için kullandığınız “araç kutunuzdur”. Aynı zamanda, stil şemaları (style sheets) aracılığıyla responsive (uyumlu) tasarımın gerçekleştirilmesi, modern temaların standart bir özelliğidir.

Konu özelliklerini geliştiren dosya

在functions.phpBurada bir dizi başlangıç ayarı yapabilirsiniz. Öncelikle, navigasyon menüsü yerlerini kaydedin.

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. 
function my_theme_setup() {
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-theme' ),
    ) );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'title-tag' );
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Bu kod, iki yemek ünitesi konumunu kaydeder ve makale özetlerini, otomatik başlık etiketlerini ve özel Logo özelliklerini etkinleştirir. Ayrıca burada başka ayarlamalar da yapabilirsiniz.add_theme_support()Bu fonksiyonlar, HTML5 desteği, özelleştirilmiş arka planlar gibi daha fazla özelliği etkinleştirmek için kullanılır.

Ana stil şemasını yazın.

style.cssBaşlık bölümündeki yorumlar, temanın meta verileridir. WordPress, bu meta verilere dayanarak temanızı arka planda tanır.

/*
Theme Name: My Advanced Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: A modern, responsive WordPress theme built from scratch.
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-theme
*/

Metadatların ardından CSS yazmaya başlayabilirsiniz. Modern geliştirme uygulamaları, mobil cihazlara öncelik veren ve duyarlı (responsive) tasarımları teşvik etmektedir.

Tavsiye edilen okuma WordPress tema geliştirme: Sıfırdan profesyonel düzeyde tepkisel web siteleri oluşturma.。

/* 基础样式与移动端 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    line-height: 1.6;
    margin: 0;
}

.site-header {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background-color: #f8f9fa;
}

.main-navigation ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
}

/* 平板电脑及以上设备 */
@media (min-width: 768px) {
    .site-main {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }
}

Performans açısından, CSS ve JavaScript dosyalarının ayrı olarak sunulması önerilir.wp_enqueue_style()和wp_enqueue_script()Fonksiyonlar sırayla yüklenir; bu sayede bağımlılıklar doğru bir şekilde ele alınır ve çakışmalar önlenir.

Özelleştirilebilir ve Gelişmiş Özellikler

Temanızın öne çıkmasını ve kullanışlı olmasını sağlamak için bazı gelişmiş özellikleri entegre etmek önemlidir. Bunlar arasında araç çubuğu oluşturma, özel makale türleri belirleme, tema özelleştirme araçlarının kullanımı ve alt temalarla uyumluluk bulunmaktadır.

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.

Bir araç çubuğu bölgesi oluşturun.

Bu küçük araç, kullanıcıların arka planda bileşenleri kolayca kenar çubuğuna veya sayfa alt kısmına sürüklemesine olanak tanır. Bunu kullanabilirsiniz.register_sidebar()Bir fonksiyon, araç çubuğu bölgesini kaydetmek için kullanılır.

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; esc_html__( 'Sidebar', 'my-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; esc_html__( 'Add widgets here.', 'my-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_theme_widgets_init' );

Şablonlarda, şunları kullanabilirsiniz:dynamic_sidebar( 'sidebar-1' )Bu bölgeyi çağırmak için…

Entegre Tema Özelleştirici

Konu özelleştiricisi, kullanıcılara ayarları gerçek zamanlı olarak önizleyebilecekleri bir arayüz sunar. Bunu kullanabilirsiniz.WP_Customize_ManagerNesneler, ayarları ve kontrol öğelerini eklemek için kullanılır.

function my_theme_customize_register( $wp_customize ) {
    // 添加一个“主题颜色”设置
    $wp_customize->add_setting( 'primary_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label'    => __( 'Primary Color', 'my-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );

Sonra,style.cssVeya doğrudan iç stil (inline style) kullanarak.get_theme_mod( 'primary_color' )Bu renk değerini uygulamak için…

Alt konuların uyumluluğunu sağlayın.

Mükemmel temalar, gelecekteki genişlemeler (alt temalar) için hazır olmalıdır. Bu, şablon dosyalarında sabit, mutlak yol adlarının kullanılmasından kaçınılması ve bunun yerine daha esnek yöntemlerin tercih edilmesi anlamına gelir.get_template_directory_uri()Fonksiyonlar. Aynı zamanda, çevrilebilecek tüm metinler kullanılmalıdır.__()或_e()Fonksiyonlar paketlenir ve ardından…load_theme_textdomain()Dil dosyası yükleniyor.

Özetle.

Sıfırdan bir WordPress teması geliştirmek, sistematik bir iştir. Bu süreç, önceden yapılan ortam hazırlıkları ve yapısal planlamayla başlar; ardından temel şablonların ve dosyaların oluşturulmasına kadar devam eder ve son olarak…functions.phpTemalar, işlevsellik ve görünüm özelliklerini stil şemaları aracılığıyla kazanır ve son olarak eklentiler, özelleştiriciler gibi gelişmiş özellikler sayesinde kullanılabilirliği ve profesyonelliği artırılır. Tüm bu süreç boyunca, WordPress kodlama standartlarına uymak, performans optimizasyonuna ve genişletilebilirliğe önem vermek kritik öneme sahiptir. Bu kılavuzdaki adımları uygulayarak, sadece kullanılabilir bir tema oluşturmakla kalmayacak, aynı zamanda bunun arkasındaki prensipleri de anlayacak ve daha karmaşık, özelleştirilebilir arayüzler geliştirmek için sağlam bir temel oluşturacaksınız.

Sıkça Sorulan Sorular.

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

Evet, sağlam bir PHP temeline sahip olmak gereklidir. WordPress’ün çekirdeği ve tema sistemi zaten PHP ile oluşturulmuştur. Verileri etkili bir şekilde işleyebilmek, şablon etiketleri oluşturabilmek ve tema mantığını geliştirebilmek için PHP dilbilgisini, fonksiyonları, döngüleri ve koşullu ifadeleri anlamanız gerekir. Ancak endişelenmeyin; başlamak için bir PHP uzmanı olmanıza gerek yoktur. Mevcut temaları değiştirmek veya bu rehberdeki temel kodları inceleyerek pratik yapmak, öğrenmenin harika bir yoludur.

style.css dosyasında hangi bilgilerin bulunması zorunludur?

style.cssDosyanın baş kısmındaki yorum bloğunda,Theme NameBu, WordPress’un arka planda temanızı tanıyabilmesi için gerekli olan tek bilgidir. Elbette, temanın bütünlüğü ve profesyonelliği açısından bu bilgiyi de doldurmanız önerilir.Author、Description、Version和Text Domain(Uluslararasılaştırma için kullanılır) ve benzeri bilgiler.

Nasıl temamı çok dilli (uluslararasılaştırılmış) hale getirebilirim?

WordPress’in uluslararasılaştırma (i18n) işlevlerini kullanmanız gerekiyor. Öncelikle,functions.phpÇince'de kullanılır.load_theme_textdomain()Fonksiyon, dil dosyasını yükler. Daha sonra, temanın tüm PHP şablon dosyalarında çevrilmesi gereken herhangi bir metin dizesini…__()veya_e()Fonksiyonları bir araya getirin (yani, bir kapsayıcı içine alın). Son olarak, Poedit gibi bir araç kullanarak çeviri sonuçlarını oluşturun..potŞablon dosyaları, çevirmenler tarafından oluşturulur..po和.moDosya.

Neden özel menüm gösterilmiyor?

Genellikle bunun birkaç nedeni vardır. Öncelikle, lütfen “zaten yaptığınızdan” emin olun…functions.phpÇin'deregister_nav_menus()Fonksiyon, menü yerleşimini doğru bir şekilde kaydetti. Daha sonra, WordPress arayüzünün “Görünüm > Menüler” sayfasına girmeniz, yeni bir menü oluşturmanız, bu menüyü kodunuzda kaydettiğiniz “tema yeri”ne (örneğin “Primary Menu”ya) atamanız ve değişiklikleri kaydetmeniz gerekiyor. Son olarak, şablon dosyalarını kontrol edin.header.phpMenü fonksiyonunu (%) içinde çağırın.wp_nav_menu()Parametrelerin doğru olup olmadığını, özellikle de…theme_locationKayıt sırasında belirtilen anahtar adıyla aynı mı?

Konu geliştirme sürecinde, JavaScript ve CSS dosyalarını doğru bir şekilde nasıl dahil edebiliriz?

En iyi uygulama, doğrudan şablon dosyalarında kullanmak yerine, WordPress tarafından sağlanan `enqueue` fonksiyonunu kullanmaktır.<link>或<script>Etiketler.functions.phpÇin'de, kullanılır.wp_enqueue_style()CSS’yi dahil etmek ve kullanmak için aşağıdaki adımları izleyin:wp_enqueue_script()JavaScript’i kullanmanın avantajları, bağımlılıkları yönetebilmek, tekrarlanan yüklemeleri önlemek ve içeriklerin doğru zamanlarda (yani doğru “hook” noktalarında) yüklenmesini sağlamaktır.wp_enqueue_scriptsBu işlem, çekirdek ile veya diğer eklentilerle uyumlu bir şekilde yürütülü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: