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

WordPress Tema Geliştirme Başlangıç Kılavuzu: Acemiden Uzmanlığa Kadar Tam Bir Eğitim

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

WordPress temaları, bir web sitesinin görünümü ve işlevlerinin temelini oluşturur. Kendi temanızı geliştirmek, sadece tamamen özelleştirilmiş bir tasarım elde etmenizi sağlamakla kalmaz; aynı zamanda WordPress’in nasıl çalıştığını daha iyi anlamanıza ve geliştirme becerilerinizi geliştirmenize de yardımcı olur. Bu rehber, sıfırdan başlayarak WordPress standartlarına uygun temel bir tema oluşturmanızı adım adım gösterecektir.

Geliştirme Ortamı ve Altyapı Kurulumu

Kod yazmaya başlamadan önce, uygun bir yerel geliştirme ortamına ihtiyacınız var. XAMPP, MAMP veya Local by Flywheel gibi masaüstü uygulamalarını kullanabilirsiniz. Ortamda PHP, MySQL ve Apache/Nginx’in yüklü olduğundan emin olun.

Bir tema dizini ve temel dosyalar oluşturun.

En temel bir WordPress teması sadece iki dosyaya ihtiyaç duyar. Öncelikle, WordPress kurulum dizininizin altında…wp-content/themesDosya içinde, örneğin “Yeni Klasör” adında yeni bir klasör oluşturun.my-first-theme。

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Sıfırdan Başlayarak Kişiselleştirilmiş Web Siteleri Oluşturma。

Bu klasör içinde, ilk temel dosyayı oluşturun:style.cssBu dosya sadece bir stil şeması değil, aynı zamanda temanın meta bilgilerini de içeriyor. Dosyanın baş kısmında, doğru biçimde yazılmış bir yorum bulunmalı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. 
/*
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: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

İkinci temel dosya şudur:index.phpBu, temanın varsayılan şablon dosyasıdır; WordPress daha spesifik bir şablon bulamadığında bu dosyayı kullanır. Başlangıçta oldukça basit olabilir.

<!DOCTYPE html>
<html no numeric noise key 1010>
<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 1007>
    <header>
        <h1><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Şimdi, temanız WordPress arayüzünün “Görünüm” -> “Temalar” bölümünde görünebilir ve etkinleştirilmiş durumdadır.

Çekirdek şablon dosyası ve şablon hiyerarşisi

WordPress, belirli bir sayfa için hangi şablon dosyasının kullanılacağını belirlemek için “Şablon Yapısı” (Template Hierarchy) adında bir kural seti kullanır. Bu yapıyı anlamak, tema geliştirmenin temel bir parçasıdır.

Makale ve sayfa şablonları.

Bir makaleye erişildiğinde, WordPress öncelikle şunu arar:single.phpEğer mevcut değilse, geri dönülür.index.phpYou can create.single.phpMakale sayfasının görünümünü özelleştirmek için buraya gelin.

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

<?php get_header(); ?>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <div class="entry-meta">
            发布于： | 作者：
        </div>
    </header>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
    <footer class="entry-footer">
        &lt;?php the_tags( &#039;标签：&#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
    </footer>
</article>

Bağımsız sayfalar için WordPress arama yapar.page.phpAyrıca, belirli bir sayfa ID’si veya sayfa takma adı için de şablonlar oluşturabilirsiniz, örneğin…page-about.phpÖzellikle “Hakkında” sayfası için kullanılacaktır.

Arşivleme ve Ana Sayfa Şablonları

Blog makaleleri listesi sayfalarında (örneğin kategoriler, etiketler, yazar arşivleri gibi) kullanılır.archive.phpKullanabilirsiniz.is_category()、is_tag()Belirli koşullara dayalı etiketler, içeride ayrı ayrı işlenir.

Web sitesinin ana sayfası varsayılan olarak şu içeriklerle oluşturulur:index.phpKontrol… Ama yaratmak da mümkün.front-page.phpBir statik ana sayfa tanımlayın veya oluşturun.home.phpEn yeni makaleleri gösteren blog ana sayfasını tanımlayalım.

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.

Konu Özellikleri ve Hook Mekanizması

WordPress’in esnekliği ve genişletilebilirliği, büyük ölçüde Etkinleştiriciler (Hooks) sistemi sayesindedir; bu sistem Eylemler (Actions) ve Filtreler (Filters)’i de içerir. Temalar, bu mekanizmalar aracılığıyla WordPress’in işleyişine kolayca entegre olabilir ve işlevselliğini artırabilirler.functions.phpBu sistemi kullanmak için dosyalar gereklidir.

Konu Başlatma ve Özellik Desteği

functions.phpBu dosyalar, tema özelliklerinin eklenmesi, kayıt menülerinin oluşturulması, kenar çubuklarının düzenlenmesi gibi işlemler için kullanılır. Genellikle öncelikle…after_setup_themeBu eylem hook’u, temanın temel işlevlerini başlatmak için kullanılır.

<?php
function my_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 启用HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Küçük Araçlar Bölümüne Kaydolun

Bir kenar çubuğu, sayfa altı gibi araç çubuğu (Widget Area) alanlarının da hazırlanması gerekiyor.functions.phpKayıt olun ve kullanın.widgets_initKanca.

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

function my_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; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Kayıt olduktan sonra, şablon dosyalarında (örneğin…) işlem yapabilirsiniz.sidebar.php) içinde kullanılırdynamic_sidebar( 'sidebar-1' )Bu bölgeyi çağırmak için geldik.

Şablon bileşenleri ve döngü optimizasyonu

Kodun düzenli ve yeniden kullanılabilir olmasını sağlamak için WordPress, tekrarlanan şablon bölümlerinin (örneğin başlık, altlık, kenar çubukları) ayrı dosyalara bölünmesini önerir.

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.

Şablon bileşenlerini ayırma

Oluşturheader.php、footer.php和sidebar.phpDosya.index.phpİlgili kod parçalarını oraya taşıyın. Daha sonra, orijinal konumda bunları kullanın.get_header()、get_footer()和get_sidebar()Fonksiyonlar, bunları içermek için kullanılır.

Gelişmiş Makale Döngüsü İşlemleri

Temel döngü kullanımıwhile ( have_posts() ) : the_post(); ... endwhile;Ancak arşiv sayfasında genellikle makalenin tamamını değil, özetini göstermeniz gerekir. Bu durumda şu yöntemi kullanabilirsiniz:the_excerpt()İşlev.

Döngüleri, özellikle de özel sorguları daha iyi kontrol edebilmek için bilmeniz gerekenler şunlardır:WP_QuerySınıflar. Örneğin, ana sayfada yalnızca belirli bir kategorideki makalelerin görüntülenmesi:

<?php
$custom_query = new WP_Query( array(
    'category_name' => 'featured',
    'posts_per_page' => 3,
) );
if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) : $custom_query->the_post();
        // 显示文章内容
    endwhile;
    wp_reset_postdata(); // 重置主查询数据
endif;
?>

Unutmayın, özelleştirilmiş bir sorgu gerçekleştirdikten sonra bunu kullanın.wp_reset_postdata()Küresel ayarları geri yüklemek için…$postDeğişkenler çok önemlidir; aksi takdirde sonraki şablon bileşenlerinin (örneğin kenar çubuğunun) doğru şekilde görüntülenmesini etkileyebilirler.

Özetle.

Oluşturulduğundan beri…style.css和index.phpBaşlayarak, şablonların yapısını anlamaya ve bunları kullanmaya kadar…functions.phpBir özellik ekleyerek başlayıp, ardından şablon bileşenlerini ayırıp döngüleri optimize ederek temel ancak eksiksiz bir WordPress tema geliştirme sürecini tamamladınız. Önemli olan, WordPress’in standartlarına ve kurallarına uymaktır; bu, temanızın iyi bir uyumluluk göstermesini ve kolayca bakım yapılabilmesini sağlar. Bir sonraki adımda, makalelere daha zengin meta bilgiler eklemeyi, özel makale türleri entegre etmeyi veya Sass gibi öncelikli işleme araçlarını kullanarak stilleri yönetmeyi deneyebilirsiniz; bu sayede temanız daha profesyonel ve güçlü hale gelecektir.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için PHP bilmek zorunda mıyım?

Evet, PHP WordPress’in temel programlama dilidir. Tema dosyaları (.php dosyaları), HTML içeriğini dinamik olarak oluşturmak, WordPress fonksiyonlarını çağırmak ve verileri işlemek için esas olarak PHP kullanır. Sayfa oluşturucular kullanılsa bile, derinlemesine özelleştirmeler yapmak ve sorunları çözmek için PHP’yi anlamak gereklidir.

Temanın functions.php dosyasının ne işe yaradığı.

functions.phpBu, temanızın “İşlev Merkezi” (Function Center) bölümüdür. Tema özelliklerini (menüler, küçük resimler gibi) etkinleştirmek, araç çubuğu alanlarını ve navigasyon menülerini oluşturmak, betikleri ve stilleri sırayla yüklemek, özel fonksiyonlar tanımlamak ve WordPress’in varsayılan davranışlarını eklentiler (Actions ve Filters) aracılığıyla değiştirmek için kullanılır. Tema başlatıldığında otomatik olarak yüklenir.

Konumu nasıl çok dilli çeviriye destekli hale getirebilirim?

İki şeyi iyi yapman gerekiyor. Öncelikle, çevrilmesi gereken tüm metinlerin etrafına WordPress’in çeviri fonksiyonlarını kullanmalısın; örneğin…__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )Ve ayrıca…style.css和functions.phpÖncelikle, Text Domain’ı doğru bir şekilde ayarlayın. Ardından, Poedit gibi bir araç kullanarak .pot şablon dosyasını oluşturun ve buna karşılık gelen .mo dil dosyasını oluşturun; bu dosyayı temanın içine yerleştirin./languagesKatalogun içinde.

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

Kesinlikle şablon dosyalarında doğrudan kullanmayın veya etiketlerle içe aktarmayın. Doğru yöntem şudur:wp_enqueue_style()和wp_enqueue_script()Fonksiyonları ve bu çağrıları monte edin.wp_enqueue_scriptsBu eylem, bağımlılıkların doğru bir şekilde yönetilmesini, tekrarlanan yüklemelerin önlenmesini ve WordPress’in betik yönetim sistemiyle uyumlu olmasını sağlar.

php
function my_theme_scripts() {
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . 'https://www.likacloud.com/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

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: