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

WordPress Tema Geliştirme Başlangıç Kursu: Sıfırdan İlk Özel Temanızı Oluşturun

3 dakika okuma.
2026-03-17
2026-06-03
2,588
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 işlemleri: Tam bir tema ortamı oluşturun.

Herhangi bir kod yazmadan önce, yapılandırması net bir geliştirme ortamı oluşturmak başarının anahtarıdır. Öncelikle, WordPress’ü yerel olarak veya uzak bir sunucuda kurmanız gerekmektedir. Temaları saklamak için bir klasör oluşturun; bu klasörün konumu WordPress kurulum dizininin altında olmalıdır. /wp-content/themes/ Evet. Adı “…” olan bir şey oluşturacağız. my-first-theme Yeni oluşturulan bu klasör, özelleştirdiğimiz temanın temel dizinidir.

En temel bir WordPress teması, sistemin tanıyabilmesi için yalnızca iki dosyaya ihtiyaç duyar. İlk dosya, stil şablonları içeren dosyadır. style.cssSadece sitenin görünümünü tanımlamakla kalmaz; aynı zamanda başlık kısmındaki yorum bilgileri, temanın “kimlik kartı” niteliğindedir ve temanın adını, yazarını, açıklamasını ve diğer meta verilerini içerir. İkincisi ise çekirdek şablon dosyasıdır. index.phpBu, WordPress’in varsayılan giriş şablonu dosyasıdır.

Öncelikle bir şeyler oluşturalım. style.css Dosya; gerekli başlık bilgilerinin yazıldığı bir dosyadır.

Tavsiye edilen okuma WordPress Tema Geliştirme: Sıfırdan Özelleştirilmiş Temalar Oluşturmanın Kapsamlı Rehberi。

/*
Theme Name: My First Theme
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是我开发的第一个 WordPress 主题，用于学习和实践。
Version: 1.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
*/

/* 以下是正式的样式内容 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

Bundan sonra, en temel olanı oluşturacağız. index.php Bu dosya oldukça basit olabilir ve yalnızca bir konunun doğru bir şekilde tanındığını test etmek için kullanılabilir.

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. 
<!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, dünya! Bu benim ilk temam.</h1>
    <?php wp_footer(); ?>
</body>
</html>

Bu iki dosyayı tamamladıktan sonra, WordPress arayüzüne giriş yapın ve “Görünüm” -> “Temalar” sayfasına gidin. Orada az önce oluşturduğumuz “My First Theme” temamızı görmelisiniz. Temayı etkinleştirin ve ardından web sitenizin ana sayfasını ziyaret edin; en basit çıktıyı göreceksiniz. Bu, temanızın çerçevesinin başarıyla oluşturulduğunu gösterir.

Temel şablon dosyalarını ve bunların hiyerarşik yapısını anlamak.

WordPress, farklı sayfa isteklerine hangi şablon dosyasının kullanılacağını belirlemek için “Şablon Hiyerarşisi” (Template Hierarchy) adı verilen bir sistem kullanır. Bu kuralı anlamak, tema geliştirmenin temelini oluşturur. Basitçe söylemek gerekirse, bir kullanıcı belirli bir sayfayı ziyaret ettiğinde, WordPress eşleşen bir şablon dosyasını bulmak için belirli bir öncelik sırasına göre arama yapar. En temel düzeyde… index.phpO, tüm sayfalar için son geri dönüş seçeneğidir.

Örneğin, bir blog makalesinin belirli bir bölümüne erişildiğinde, WordPress öncelikle… single-post.phpEğer yoksa, arayın. single.phpEğer henüz yoksa, o zaman kullanılır. index.phpMakale listesini gösteren sayfalar için, sistem sırayla arama yapar. home.php、front-page.php、index.php。

Tam özellikli bir blog teması oluşturmak için en azından aşağıdaki temel şablon dosyalarını oluşturmamız gerekmektedir:header.php(Web sitesi başlığı)footer.php(Web sitesi alt kısmı)sidebar.php(Sayfa kenar çubuğu, isteğe bağlı)index.php(Ana İçerik Dizinleri)single.php(Bir makale)page.php(Yalnızca bir sayfa) ve style.css(Şablon dosyası).

Tavsiye edilen okuma Sıfırdan başlayarak özel bir WordPress teması nasıl geliştirilir?。

geçmek (bir fatura veya teftiş vb.) get_header()、get_footer() 和 get_sidebar() Bu şablon fonksiyonları sayesinde genel kodları modüler hale getirebilir ve kod tekrar kullanımını sağlayabiliriz. Ana şablon dosyası şöyledir: index.php Bunun sonucunda yapının çok daha net hale gelmesi beklenir.

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
        endwhile;
    else :
        // 没有找到内容的提示
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Bu modüler yaklaşım, sadece kodun daha kolay bakımını sağlamakla kalmaz, aynı zamanda farklı türdeki sayfalar için özel başlıklar ve altlıklar oluşturmanıza da olanak tanır.

Uygulamalı Geliştirme: Ana Döngü Oluşturma ve Makale İçeriğinin Çağrılması

Herhangi bir blog temasının temelinde “The Loop” (Döngü) bulunur. Bu, WordPress’in veritabanından makale içeriklerini alıp sayfada göstermek için kullandığı PHP kod yapısıdır. Döngü içinde, makale başlığı, içeriği, yazarı, tarihi gibi bilgileri görüntülemek için bir dizi şablon etiketi (Template Tags) kullanabilirsiniz.

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.

Hadi en temel olanını oluşturalım.index.phpDosya, ana döngüde makale listesini gösterir.

<?php get_header(); ?>

<div class="content-area">
    <main class="site-main">
        <?php if ( have_posts() ) : ?>
            <header class="page-header">
                <h1 class="page-title">En Yeni Makaleler</h1>
            </header>
            <?php
            while ( have_posts() ) : the_post();
            ?>
                <article no numeric noise key 1011 id="post-<?php the_ID(); ?>">
                    <h2 class="entry-title">
                        <a href="/tr/</?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </h2>
                    <div class="entry-meta">
                        Yayınlandı:<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time> | 作者：
                    </div>
                    <div class="entry-content">
                        <?php the_excerpt(); // 输出文章摘要 ?>
                    </div>
                </article>
            <?php
            endwhile;
            // 输出分页导航
            the_posts_navigation();
        else :
            ?>
            <p>Üzgünüz, herhangi bir makale bulunamadı.</p>
        <?php endif; ?>
    </main>
    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

Yukarıdaki kodda, have_posts() 和 the_post() Döngü oluşturmak için şu şablon etiketlerini kullanabilirsiniz: the_title()、the_permalink()、the_excerpt() “等” kelimesi, ilgili içeriğin çıktısında kullanılmak üzere kullanılır.post_class() Fonksiyon, makale konteyneri için bir dizi çok kullanışlı CSS sınıfı otomatik olarak oluşturur; bu da stil tasarımımızı kolaylaştırır.

Tek bir makale için, oluşturmamız gereken şeyler… single.phpYapısı indeks sayfalarına benzer; ancak genellikle yalnızca bir makaleyi döngüler ve makalenin tamamını gösterir.the_content())。

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

<?php get_header(); ?>

<main id="primary">
    <?php
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'single' );
    endwhile;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Burada daha güçlü bir fonksiyon tanıtılmıştır. get_template_part()Bu, temanın kataloğunda bulunan başka bir şablon parçası dosyasını yüklemek için kullanılır. Örneğin,get_template_part( 'template-parts/content', 'single' ); Öncelikli olarak yüklenecektir. template-parts/content-single.php Eğer dosya mevcut değilse, yüklenir. template-parts/content.phpBu, kodun düzenliliğini ve yeniden kullanılabilirliğini daha da artırmaktadır.

Konu Özelliklerinin Geliştirilmesi ve En İyi Uygulamalar

Bir temel tema oluşturulduktan sonra, tema işlevsellik dosyalarını ekleyerek ve en iyi uygulamalara uyarak onu daha güçlü ve sağlam hale getirebiliriz. En kritik dosyalardan biri… functions.php。

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.

Konununfunctions.phpDosya zorunlu değildir; ancak temanıza özellikler eklemenize, özellikleri kaydetmenize ve WordPress çekirdek API’siyle etkileşim kurmanıza olanak tanır. Temanızın bir “eklentisi” gibi işlev görür, ancak temaya bağlıdır. Burada yapmanız gereken şey içerikleri doğrudan çıkarmak yerine, özellikleri kaydetmek ve gerekli bilgileri belirtmektir.

Standart bir…functions.phpAşağıdaki bölümleri içermelidir:

1. Kayıt Menüsü: Kullanımı register_nav_menus() İşlev.
2. Kayıt kenar çubuğu: Kullanımı register_sidebar() İşlev.
3. Tema desteği ekleyin: Kullanın. add_theme_support() Bu fonksiyonlar, makale özel görselleri, özelleştirilmiş logolar gibi temel özellikleri etkinleştirmek için kullanılır.
4. Stil ve betiklerin yüklenmesi: Kullanın wp_enqueue_style() 和 wp_enqueue_script() Fonksiyonları doğru bir şekilde kullanın. wp_enqueue_scripts Kanca.

__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载谷歌字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap', array(), null );
    // 加载主 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

// 注册一个右侧边栏
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; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );
?&gt;

Bu en iyi uygulamalara uyun: Örneğin, işlevleri “hook”lar aracılığıyla ekleyin, kaynakları doğru bir sırayla yükleyin ve çeviri fonksiyonlarını kullanın. __() 和 _e() Konuları uluslararası hale getirmek, temanızın güvenli, verimli olmasını ve WordPress’in resmi geliştirme standartlarına uygun olmasını sağlar.

Özetle.

Oluşturulduğundan beri… style.css 和 index.php Temel klasörlerden başlayarak, özelleştirilmiş bir WordPress teması oluşturma sürecinin ana adımlarını tamamladınız. Şablon hiyerarşisi sistemini derinlemesine inceledik ve WordPress’in farklı sayfaları renderlemek için hangi şablon dosyalarını akıllıca seçtiğini anladık. Ana döngünün (main loop) oluşturulmasını uyguladık ve içeriği dinamik olarak oluşturmak için çeşitli şablon etiketlerini kullanmayı öğrendik. Son olarak… functions.php Bu tema, daha güçlü özellikler ve standartlara sahip hale getirildi. Elbette bu sadece bir başlangıç noktası, ancak size yeni olanaklar sunuyor; bu temel üzerine daha fazla şablon dosyası ekleyebilir, daha zengin stiller ve etkileşimli özellikler geliştirebilirsiniz. Böylece hem sizin hem de müşterilerinizin ihtiyaçlarına tam olarak uygun, özgün bir web sitesi oluşturabilirsiniz.

Sıkça Sorulan Sorular.

Konu geliştirme için PHP bilmek zorunda mıyım?

Evet, bir WordPress temasını derinlemesine geliştirmek için belirli düzeyde PHP bilgisine sahip olmak gereklidir. WordPress zaten PHP ile oluşturulmuştur; bu nedenle tüm şablon dosyaları, fonksiyon çağrıları ve veri işleme işlemleri PHP’den ayrılamaz. Başlangıç seviyesindeki kullanıcılar için PHP’nin temel sözdizimini, değişkenleri, dizileri, döngüleri, koşullu ifadeleri ve fonksiyonları öğrenmek şarttır.

Kurulum temamı mobil cihazlara nasıl uyumlu hale getirebilirim?

Bir temanın responsive (uyumlu) tasarıma sahip olması, modern web siteleri için temel bir gerekliliktir. Farklı ekran genişliklerine göre düzenlemeleri ve stilleri ayarlamak için CSS medya sorguları (Media Queries) kullanmanız gerekir. Geliştirme sürecinde her zaman “mobil öncelikli” (mobile-first) bir yaklaşım benimsemelisiniz; önce küçük ekranlar için uygun stilleri yazmalı, ardından medya sorguları aracılığıyla daha büyük ekranlar için yeni stiller eklemeli veya mevcut stilleri değiştirmelisiniz.

Geliştirme ve test konularının en iyi yönetim şekli nedir?

Tema geliştirmelerinin yerel bir geliştirme ortamında yapılması şiddetle tavsiye edilir. Local by Flywheel, XAMPP, MAMP veya Docker gibi araçları kullanarak yerel bir sunucu ortamı kurmak, çevrimiçi web sitenizi etkilemeden hızlı bir şekilde yenileme ve test yapmanıza olanak tanır. Aynı zamanda, WordPress’in bazı özelliklerini de etkinleştirmeniz gerekir. WP_DEBUG Modlar çok önemlidir; PHP hatalarını ve uyarılarını ekranda göstererek koddaki sorunları zamanında fark etmenize ve düzeltmenize yardımcı olurlar.

Hangi ön uç (front-end) teknolojilerini öğrenmem gerekiyor?

PHP’nin yanı sıra, web sayfalarının yapısını ve stilini oluşturmanın temelleri olan HTML ve CSS’yi de ustalıkla bilmelisiniz. Daha karmaşık etkileşimler ve dinamik efektler için JavaScript bilgisi de son derece önemlidir. Özellikle WordPress’ta JavaScript dosyalarını güvenli ve doğru bir şekilde nasıl dahil edeceğinizi ve kullanacağınızı öğrenmek çok önemlidir. wp_enqueue_scriptAyrıca, WordPress’in yerleşik JavaScript kütüphanesini kullanmayı öğrenmek de önemlidir.

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: