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

WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Kendi Özel Web Sitesi Arayüzünüzü Oluşturun

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

Neden kendi WordPress temasınızı geliştirmeyi seçtiniz?

WordPress ekosisteminde, hazır temaları kullanmak elbette kolay ve hızlıdır; ancak tema geliştirme becerilerini öğrenmek size benzeri görülmemiş avantajlar sağlar. Kendi temanızı geliştirmek, web sitenizin görünümünü, performansını ve işlevlerini tamamen kontrol etmenizi sağlar ve iş ihtiyaçlarınıza yüzde yüz uygun bir tasarım oluşturmanıza olanak tanır; üçüncü parti temaların sınırlamalarına ve gereksiz kodlara bağlı kalmazsınız. Sadeleştirilmiş temalar oluşturarak web sitesinin yükleme hızını önemli ölçüde artırabilir ve arama motoru performansını optimize edebilirsiniz. Ayrıca, temaların çalışma prensiplerini derinlemesine anlamak, sitenizi daha esnek bir şekilde özelleştirmenizi ve bakımını yapmanızı sağlar; sorunlarla karşılaştığınızda hızlı bir şekilde sorunu tespit edip çözebilirsiniz. Bu, ileri düzey bir WordPress geliştiricisi veya web sitesi uzmanı olmak için gerekli bir beceridir.

Teknik açıdan bakıldığında, standart bir WordPress teması, belirli bir klasör yapısına ve adlandırma kurallarına uyan bir dizi şablon dosyası, stil dosyası ve betik dosyasından oluşur. Bu temel bilgileri öğrenmek, tema geliştirme yolculuğuna başlamanın ilk adımıdır.

Bir temanın temel dizin yapısını ve çekirdek dosyalarını oluşturma

En temel bir WordPress temasının en az iki çekirdek dosyası olmalıdır. Öncelikle, temasınızın adıyla adlandırılmış bir klasör oluşturmanız gerekmektedir, örneğin… my-first-themeTüm dosyalar bu klasörde saklanacaktır.

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

Konu bilgilerinin beyan edildiği dosya

Konu klasöründe, adı “” olan bir dosya oluşturulmalıdır. style.css Bu dosya sadece bir stil şeması (stylesheet) değil; aynı zamanda dosyanın başındaki yorum blokları, temanın “kimlik kartı” görevi görür ve WordPress sisteminine temanın meta verilerini bildirir. Tipik bir meta veri bildirimi şu şekildedir:

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: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义 WordPress 主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Bunlar arasında,Text Domain Uluslararası çeviriler için kullanılır; konu klasörünün adıyla mutlaka uyumlu olmalıdır.

Web sitesi içeriğinin ana şablon dosyası

Diğer vazgeçilmez bir dosya ise… index.phpBu, temanın varsayılan ana şablonudur ve WordPress daha spesifik bir şablon dosyası bulamadığında bu şablonu kullanır. Bu dosya başlangıçta en basit HTML yapısına sahip olsa bile, mutlaka mevcut olmalıdır.

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
    <?php wp_body_open(); ?>
    <header>
        <h1>Web sitemin başlığı</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>Web sitesi alt kısmı içeriği</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Bu temel şablon, WordPress teması için gerekli olan birkaç temel fonksiyonu içermektedir. wp_head()、wp_body_open() 和 wp_footer()Bu özellikler, eklentilerin ve WordPress’in temel işlevleri için gerekli olan betiklerin ve stillerin doğru bir şekilde yüklendiğinden emin olur.

Konuyu derinleştirelim: Şablon hiyerarşisi ve fonksiyonların kullanımı

Bir konunun tamamı, sadece bu kadarla sınırlı değildir. index.phpWordPress’in şablon hiyerarşisi sistemi, farklı sayfa türleri için özel şablon dosyaları oluşturmanıza olanak tanır ve böylece daha ayrıntılı bir kontrol sağlar.

Tavsiye edilen okuma WordPress Tema Geliştirme ve Özelleştirme Kılavuzu: Başlangıçtan İleri Seviye Uygulamalara。

Bir başlık ve alt bilgi (footer) şablonu oluşturun.

DRY (Don’t Repeat Yourself – Kendini Tekrarlama) ilkesine uymak için, başlık ve alt bilgi (footer) kodlarını ayrı dosyalara ayırmalısınız. Adı “header.php” ve “footer.php” olan iki dosya oluşturun. header.php Bu dosyaları depolamak için kullanılır. <head> Bölge ve web sitesi üst menüsü için gerekli kodlar. Buna göre, ilgili kodları oluşturun. footer.php Bu alan, sayfa altı (footer) bilgilerinin saklanması için kullanılır. Daha sonra bu bilgiler ana şablon (main template) içinde kullanılır. get_header() 和 get_footer() Bu fonksiyonlar, onları içe aktarmak için kullanılır.

// 在 index.php 顶部引入页眉
<?php get_header(); ?>

<!-- 页面主要内容 -->

// 在 index.php 底部引入页脚
<?php get_footer(); ?>

Makaleler ve sayfalar için özel şablonlar oluşturun.

Bir makaleye erişildiğinde, WordPress öncelikle ilgili içeriği bulmaya ve çağırmaya çalışır. single.php Şablonlar. Aynı şekilde, statik sayfalar için de arama yapar. page.phpBu dosyaları, makalelerin ve sayfaların görünümünü özelleştirmek için oluşturabilirsiniz. Bu şablonlarda, içeriği görüntülemek için WordPress’in güçlü ana döngüsünü (main loop) kullanabilirsiniz.

// 在 single.php 中
while ( have_posts() ) :
    the_post();
    the_title( '<h1 class="entry-title">', '</h1>'İçerik kısmı burada.;

Konu özelliklerini geliştiren fonksiyon dosyası

functions.php Dosya, temanızın “kontrol merkezidir”. Bağımsız bir şablon değil; temanız başlatıldığında otomatik olarak yüklenen bir PHP dosyasıdır. Bu dosya, özellikler eklemek, menüler ve kenar çubuklarını yönetmek, ayrıca stilleri ve betikleri dahil etmek için kullanılı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.

Örneğin, bir temaya navigasyon menüsü özelliği eklemek istiyorsanız, şunları yapmanız gerekecektir: functions.php Çince'de kullanılır. register_nav_menus() İşlev.

function my_theme_setup() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '页脚菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Daha sonra, şablon dosyasında (örneğin…) header.phpİçerikte, kullanılmaktadır. wp_nav_menu() Menüyü göstermek için…

Konunuz için stil ve etkileşim özellikleri ekleyin.

Güzel ve kullanıcı dostu bir tema, CSS ve JavaScript’ten ayrılamaz. Bu teknolojileri temaya doğru bir şekilde entegre etmek çok önemlidir.

Tavsiye edilen okuma WordPress tema geliştirme nedir?。

Stil şemasını doğru bir şekilde dahil etmek için aşağıdaki adımları izleyin:

Her ne kadar style.css Dosya zaten mevcut, ancak WordPress onu otomatik olarak ön tarafta bir stil şeması olarak yüklemiyor. Bunun için sizin yapmanız gerekiyor. functions.php Çince'de kullanılır. wp_enqueue_style() Fonksiyonlar, kayıt ve sıra oluşturma işlemleri için kullanılır.

function my_theme_scripts() {
    // 为主题主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义样式
    wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

JavaScript’i güvenli bir şekilde dahil etmek için aşağıdaki adımları izleyin:

JavaScript dosyaları için de aynı yöntemlerin kullanılması gerekir. wp_enqueue_script() Bu fonksiyon, bağımlılıkların doğru bir şekilde işlenmesini sağlar ve betiğin tekrar tekrar yüklenmesini önler.

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. 
function my_theme_scripts() {
    // ... 样式表代码 ...
    // 引入一个自定义脚本，依赖 jQuery
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Son parametre true Bu, betiğin sayfanın en alt kısmına yerleştirileceğini gösterir. <body> Etiketin sonundan önce yükleme işlemi yapılması, sayfa yükleme performansını artırmaya yardımcı olur.

Özetle.

Bu kılavuz sayesinde, WordPress tema geliştirmenin temel adımlarını tamamladınız: Geliştirme amacını anlamaktan, içerik barındıran bir temanın oluşturulmasına kadar… style.css 和 index.php Temel tema yapısının temelleri; şablon hiyerarşisi sistemini öğrenerek başlayın ve ardından oluşturun. header.php、footer.php、single.php Özel şablonlardan, güçlü araçların kullanımına kadar… functions.php Bu dosya, özellikleri, menüleri ve betik stillerini kaydetmek için kullanılır. Unutmayın ki, tema geliştirme iteratif bir süreçtir; en basit yapıdan başlayarak kademeli olarak karmaşıklık ve özellikler eklemek, en verimli öğrenme yöntemidir. Sürekli pratik yapın, resmi dokümantasyona başvurun ve mükemmel temaların kodlarını analiz edin; böylece geliştirme becerileriniz hızla gelişecektir.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için hangi ön koşul bilgilerine ihtiyaç vardır?

HTML ve CSS temellerine sahip olmanız gerekmektedir; bunlar web sayfalarının yapısını ve görünümünü oluşturmanın temelidir. Aynı zamanda, PHP hakkında temel bilgilere sahip olmak da çok önemlidir çünkü WordPress’ün çekirdeği ve şablon sistemi PHP ile yazılmıştır. JavaScript konusunda da temel bir bilgiye sahip olmak, etkileşimli özellikler eklemenize yardımcı olacaktır.

Bir temanın functions.php dosyası ile bir eklentinin (plugin) arasındaki temel farklar nelerdir?

functions.php Dosyalar, bir temanın parçasıdır ve işlevleri temanın görünümü ve performansıyla yakından ilgilidir. Bir temayı değiştirdiğinizde, bu işlevler genellikle devre dışı kalır. Eklentiler ise, hangi tema kullanılırsa kullanılsın, eklenti etkinleştirildiği sürece çalışan, temadan bağımsız genel işlevler (örneğin iletişim formları, SEO optimizasyonu) eklemek için kullanılır. İyi bir kural şudur: Bir işlev görsel sunumla doğrudan ilgiliyse, temanın içine yerleştirilmelidir; genel bir web sitesi işlevi ise, eklenti olarak tasarlanmalıdır.

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

WordPress’in uluslararasılaştırma (i18n) fonksiyonlarını kullanarak temanızı hazırlamanız gerekiyor. Kodunuzda, kullanıcıya yönelik tüm metinler için benzer bir yaklaşım benimsemelisiniz. __( ‘文本’, ‘my-first-theme’ ) 或 _e( ‘文本’, ‘my-first-theme’ ) Bu fonksiyonu sarmak için, içinde... ’my-first-theme’ Bu senin metin alanın (Text Domain). Sonra… style.css Doğru metin alanını belirtin ve Poedit gibi bir araç kullanarak oluşturun. .pot Şablon dosyaları ve bunlara karşılık gelen… .po 和 .mo Çeviri dosyası.

Yerel testler için temaları test etmenin bazı önerilen yolları şunlardır:

Tema geliştirmek için yerel bir geliştirme ortamı kullanılmasını şiddetle öneririm. Local by Flywheel, DevKinsta gibi masaüstü yazılımlarını kullanabilir veya MAMP, XAMPP gibi araçlarla kendi PHP ve MySQL ortamınızı kurabilirsiniz. Yerel geliştirme, çevrimiçi sunuculardaki ağ gecikmelerini önler, daha hızlı hata ayıklama imkanı sunar ve çevrimiçi web sitesinin çalışmasını etkilemez.

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: