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

WordPress tema geliştirmeye başlama kılavuzu: İlk temanızı sıfırdan oluşturun.

4 dakika okuma.
2026-03-16
2026-06-04
2,803
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, uygun bir geliştirme ortamına ihtiyacınız var. Bu, bir yerel sunucu ortamı (örneğin XAMPP, MAMP veya Local by Flywheel), bir kod editörü (örneğin VS Code veya PhpStorm) ve yepyeni bir WordPress kurulumunu içerir. WordPress’inizin en yeni sürümü olduğundan emin olun; böylece en yeni özelliklerden ve API’lerden yararlanabilirsiniz.

Bundan sonra, WordPress’te yapmanız gerekenler…wp-content/themesKatalogda, konunuzun “slug” adı ile bir yeni klasör oluşturun. Örneğin:my-first-themeBu klasör, tüm tema dosyalarınızın saklandığı yer olacak. Bir WordPress temasının en temel iki dosyası vardır:index.php和style.cssBunlar arasında,style.cssSadece bir stil şeması değil; aynı zamanda temanın meta verilerini de içeren bir “başlık dosyasıdır” ve içindeki yorum bilgileri, WordPress’in temanızı tanımasında çok önemlidir.

Create a basic one.style.cssDosyanın başlık bölümündeki yorumlar aşağıdaki bilgileri içermelidir:

Tavsiye edilen okuma Mükemmel bir WordPress teması oluşturma: Sıfırdan uzmana kadar kapsamlı bir geliştirme rehberi。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Text DomainUluslararasılaştırma amacıyla kullanılmalı ve tema klasörünüzün adıyla uyumlu olmalıdır. Aynı zamanda, en basit şeklini oluşturun.index.phpDosya, yalnızca bir cümle içermelidir.<?php get_header(); ?>Ve biriyle<h1>Merhaba Dünya!</h1>Bu sırada, WordPress arayüzünün “Görünüm” -> “Temalar” bölümünde temanızı görebilir ve onu etkinleştirebilirsiniz. Ancak şu an hiçbir şey göstermiyor (çünkü henüz temayı oluşturmadık).header.phpBu, ilk adımı başarıyla attığınızın bir işareti.

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.

Temel şablon dosyalarını ve şablon hiyerarşisini anlamak

WordPress, belirli bir sayfa isteği için hangi şablon dosyasının içeriği görüntülemek için kullanılacağına karar vermek için “şablon hiyerarşisi” adında bir akıllı sistem kullanır. Bu hiyerarşiyi anlamak, tema geliştirmenin temelini oluşturur. Sistem, en spesifik şablon dosyasından başlayarak arama yapar; eğer bu dosya mevcut değilse, daha genel bir dosyaya geri döner.

En temel şablon dosyaları şunları içerir:
* index.phpSon çare olarak kullanılan bu şablon, daha spesifik bir şablon bulunamadığında tüm istekler için kullanılır.
* header.phpBelgeyi içeren<head>Bazı bölümler ve web sitelerinin başlık alanları.get_header()Fonksiyonun tanıtımı.
* footer.phpWeb sitesinin alt kısmını (footer bölümünü) içerir.get_footer()Fonksiyonun tanıtımı.
* sidebar.phpYan çubuk bileşenlerini içerir.get_sidebar()Fonksiyonun tanıtımı.
* functions.phpBu bir şablon dosyası değil; temanızın “işlev kütüphanesi”dir ve işlevler eklemek, menüler kaydetmek, araççıklar oluşturmak gibi amaçlar için kullanılır.

Farklı türdeki sayfalar için daha spesifik şablonlar mevcuttur:
*Bir makale için: Arama sırası şu şekildedir.*single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php(Özel Şablon) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（博客首页、分类页等）：查找顺序是home.php(Blog makaleleri listesi sayfası için kullanılır) -> front-page.php(Statik bir sayfayı ana sayfa olarak ayarlarken kullanılan “Ana Sayfa” ifadesi) -> index.php。

Başlık ve alt bilgi (footer) şablonları oluşturma

Öncelikle oluşturun.header.php. It must begin with<!DOCTYPE html>Başlayın ve WordPress’in temel fonksiyon çağrılarını içeren bir kod parçası yazın, örneğin:wp_head()。

Tavsiye edilen okuma Özel Geliştirilmiş WordPress Temaları: Tasarım, Geliştirme ve Optimizasyon Uygulamaları Kılavuzu。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/tr/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

Aynı şekilde, oluşturun.footer.phpVe emin olun ki çağrı yapılıyor.wp_footer()İşlev.

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    <?php wp_footer(); ?>
</body>
\n

Şimdi, kendi içeriğini güncelleyebilirsin.index.phpBu şablon bileşenlerini kullanın.

<?php get_header(); ?>

<main>
    <h1>Merhaba Dünya, Main’den!</h1>
    &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>

functions.php dosyası aracılığıyla temanın özelliklerini geliştirin.

functions.phpDosyalar, temanızın “beyni” gibidir. Buraya özellikler eklersiniz, menüler ve araç çubukları gibi WordPress çekirdek bileşenlerini kaydedersiniz ve ayrıca stil şemalarını ile betik dosyalarını düzenlersiniz.

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 desteği ve kayıt menüsü ekleyin.

Öncelikle, bazı temel tema özelliklerini etkinleştirelim. Kullanmak için...add_theme_support()Bu fonksiyon, bir temanın desteklediği özellikleri belirtmek için kullanılır.

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对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');

Ardından, bir navigasyon menüsü pozisyonu kaydedin. Bu, kullanıcıların arka planda “Görünüm” -> “Menü” bölümünden menüyü yapılandırmasına ve şablonlarda bunu kullanmasına olanak tanır.wp_nav_menu()Fonksiyon onu çağırır.

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

Stil tablosuna ve betiğe ekleyin.

Doğru stil ve betik yükleme yöntemi şu şekildedir:wp_enqueue_style()和wp_enqueue_script()İşlevleri, onları monte etmeye yardımcı olacak bir fonksiyon.wp_enqueue_scriptsKancada.

Tavsiye edilen okuma WordPress tema geliştirmenin kapsamlı analizi: Başlangıçtan ileri düzeye kadar pratik bir rehber.。

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/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Döngüler ve içerik şablonları oluşturma

“Döngü” (loop), WordPress’te veritabanından makaleleri alıp görüntülemek için kullanılan PHP kod yapısıdır. Neredeyse tüm şablon (template) dosyalarının temelini oluşturur.

Ana döngünün yapısını anlamak

Yukarıdakiindex.phpÖrnekte, temel bir döngü gördük. Şimdi onu parçalara ayıralım:

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. 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>
<?php endif; ?>

Tek bir makale şablonu oluşturma

Şimdi, tek bir makaleyi göstermek için özel olarak tasarlanmış bir şablon oluşturalım.single.phpListe sayfasındaki döngüden daha ayrıntılıdır.

<?php get_header(); ?>

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1><?php the_title(); ?></h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

Özetle.

Bu rehber sayesinde, sıfırdan başlayarak temel bir WordPress teması oluşturma sürecinin temel adımlarını tamamladınız. Geliştirme ortamı kurmaktan ve temel dosyaları oluşturmaktan başlayarak, esnek temalar oluşturmanın temeli olan WordPress’in şablon hiyerarşisini anlamaya doğru adım adım ilerledik. Nasıl yeniden kullanılabilir kodlar yazılacağını da öğrendiniz.header.php和footer.phpŞablon bileşenleri ve güçlü altyapı sayesinde…functions.phpDosya, temanıza navigasyon menüsü ve stil yüklemesi gibi önemli özellikler ekledi. Son olarak, WordPress’in “döngü” (loop) mekanizmasını inceledik ve makale listelerini ve tek makaleleri görüntülemek için şablonlar oluşturduk.

Bu sadece bir başlangıç noktası. Daha sonra, daha fazla özel şablon oluşturmayı keşfedebilirsiniz (örneğin…).page.php, archive.phpKayıt araçları bölümünde, özel makale türleri ve kategorileri ekleyin; ayrıca daha gelişmiş duyarlı tasarım ve JavaScript etkileşimleri gerçekleştirin. Unutmayın, resmi geliştirici dokümanlarına bakmak ve sürekli pratik yapmak, becerilerinizi geliştirmenin en iyi yoludur.

Sıkça Sorulan Sorular.

Konumum aktive edildikten sonra web sitesi boş bir ekran (beyaz ekran) gösteriyor, ne yapmalıyım?

Bu genellikle PHP’nin ölümcül hatalarından kaynaklanır. Lütfen öncelikle kodunuzu kontrol edin.functions.phpDosyada sembol hataları (örneğin noktalı virgül veya parantez eksikliği) bulunuyor mu? WordPress’i açın…WP_DEBUGBu mod, size belirli hata bilgilerini görmenize yardımcı olabilir.wp-config.phpDosyada,define('WP_DEBUG', false);Değiştirin.define('WP_DEBUG', true);。

Kendi temama özel bir Logo özelliği nasıl eklerim?

Senin…functions.phpDosyalarınadd_theme_supportBazı bölümlere bir satır ekleyin:add_theme_support('custom-logo');Ayrıca, Logo’nun boyutunu ve yüksekliğinin esnek olup olmayacağını belirlemek için bir dizi parametre de geçebilirsiniz. Daha sonra, kullanıcılar “Görünüm” -> “Özelleştir” -> “Site Kimliği” bölümünden Logo’yu yükleyebilir ve şablonlarda bunu kullanabilirler.the_custom_logo();Fonksiyon onu çağırır.

Neden kaydettiğim navigasyon menüsü arka planda (sunucuda) görünmüyor?

Lütfen aşağıdaki noktaları kontrol edin: Birincisi, kayıt kodunuzun geçerli olduğundan emin olun.functions.phpVe zaten doğru şekilde monte edilmiş.initKancalar veya…after_setup_themeİkinci olarak, emin olun ki tanımladığınız şey doğru şekilde çalışıyor.theme_location(Örneğin)'primary') Çağrı yapılırkenwp_nav_menu()Zamanlaması tam olarak uyuşuyor. Üçüncüsü, menü oluşturulduktan sonra, arka planda “Görünüm” -> “Menü” -> “Konum Yönetimi” sekmesinden belirli bir menünün kaydettiğiniz konuma atanması gerekiyor.

Bir küçük araç bölgesi (kenar çubuğu) nasıl oluşturulur?

Öncelikle,functions.phpÇince'de kullanılır.register_sidebar()Bu fonksiyon, bir araç çubuğu bölgesi oluşturmak için kullanılır. ID, ad, açıklama gibi özellikleri tanımlamak için bir dizi parametre sağlamanız gerekmektedir. Daha sonra, araç çubuğunu görüntülemek istediğiniz şablon dosyasında (örneğin…)sidebar.phpİçerikte, kullanılmaktadır.dynamic_sidebar()Fonksiyonu çağırmak için aracın ID’sini de geçirin. Son olarak,index.php或single.phpBu şablonlarda kullanılır.<?php get_sidebar(); ?>Yan menü şablonunu ekleyin.

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: