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

Sıfırdan Başlayarak: Kendi WordPress Temanınızı Geliştirmeyi Adım Adım Öğrenin

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

Özelleştirilmiş bir WordPress teması geliştirmek, WordPress çerçevesini derinlemesine anlamanın ve ön uç geliştirme becerilerinizi geliştirmenin en iyi yoludur. Mevcut temaları kullanmaktan farklı olarak, sıfırdan başlamak size tam kontrol sağlar ve projenizin ihtiyaçlarına tam olarak uygun, benzersiz bir web sitesi oluşturmanıza olanak tanır. Bu makale, temel ancak tam özellikli bir WordPress teması oluşturma sürecinin tüm adımlarını size gösterecektir.

Geliştirme Ortamı ve Tema Yapısı Ayarları

Kod yazmaya başlamadan önce, yerel bir geliştirme ortamına ihtiyacınız var. Bu genellikle bir yerel sunucu paketi (örneğin XAMPP, MAMP veya Local by Flywheel), bir kod editörü (örneğin VS Code) ve en yeni sürümde WordPress’ü içerir.

Öncelikle, WordPress’te… <code>wp-content/themes</code> Dizin içinde, yeni temanız için bir klasör oluşturun; örneğin: <code>my-custom-theme</code>En temel bir WordPress temasının en az iki çekirdek dosyası olmalıdır.

Tavsiye edilen okuma WordPress Tema Geliştirme Kapsamlı Kursu: Sıfırdan Başlayarak Özel Temalar Oluşturma。

Bir stil şablonu dosyası oluşturun.

İlk zorunlu dosya şudur: style.cssBu dosya sadece temanın stilini tanımlamakla kalmaz, aynı zamanda dosya başlığındaki yorumlar aracılığıyla WordPress’e temayı tanıtan meta verileri de içerir. Lütfen dosyanın en üstüne aşağıdaki yorumu ekleyin:

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 Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

“Text Domain”, uluslararasılaştırma (internationalization) amacıyla kullanılır ve mutlaka temanızın klasör adıyla uyumlu olmalıdır. Daha sonra, bu dosyaya tüm CSS kurallarınızı yazabilirsiniz.

“Create a core function file”

İkinci gerekli dosya şudur: functions.phpBu, temanın “beyni”dir; stil şemalarını, JavaScript dosyalarını, menüleri, kenar çubuklarını ve diğer özellikleri tanıtmak için kullanılır; ayrıca çeşitli işlevsel destekler de eklenir.

Temel bir functions.php Başlangıç genellikle şu şekildedir ve stil şablonlarını kuyruğa eklemek için kullanılır:

<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );

Şu anda herhangi bir şablon dosyası olmamasına rağmen, temanız WordPress arayüzündeki “Görünüm” -> “Temalar” listesinde görünebilir ve etkinleştirilebilir. Etkinleştirildikten sonra, sayfa yapısını tanımlayacak bir şablon dosyası olmadığı için web sitesinin ön yüzünde boş bir sayfa görüntülenecektir.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Özelleştirilmiş Tema Yapısını ve Şablonlarını Oluşturma。

Çekirdek şablon dosyasını oluşturun.

Şablon dosyaları, web sitesinin farklı bölümlerinin nasıl görüntüleneceğini kontrol eder. WordPress, mevcut istek için hangi şablonun kullanılacağını belirlemek için şablon hiyerarşisini kullanır.

Tüm site için üst ve alt kısımları oluşturun.

En iyi uygulama, ortak başlık (header) ve alt kısım (footer) kodlarını ayrı tutmaktır. header.php Bu dosya genellikle belge türü beyanlarını içerir. Bölge ve açma işlemleri… Etiketler ve ana navigasyon.

<!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>
        <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>
    <main>

Buna göre, oluşturulmalıdır. footer.php Gelip kapatın. header.php Açılan ana konteyner ve etiketler.

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. 
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
\n

wp_head() 和 wp_footer() Bu, kritik bir özelliktir; WordPress çekirdeğinin, eklentilerin ve temaların kendilerinin bu konumlara gerekli kodları (örneğin stiller, betikler) eklemesine olanak tanır.

İndeks oluşturma ve makale şablonları

index.php Bu, şablon hiyerarşisinin son geri dönüş dosyasıdır ve aynı zamanda temamızın başlangıç noktasıdır. Kullanılan… get_header() 和 get_footer() Ayrı modülleri dahil etmek için…

<article>
            <h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div><?php the_excerpt(); ?></div>
        </article>
    
    <p>Henüz herhangi bir makale yok.</p>

Bir makaleyi ayrı ayrı göstermek için oluşturuldu. single.phpYapısı şu şekildedir: index.php Benzer, ancak farklı bir yöntem kullanılarak… the_content() Tüm metni göstermek için…

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıcı – Sıfırdan İlk Özel Temanızı Oluşturun。

<article>
            <h1><?php the_title(); ?></h1>
            <div><?php the_content(); ?></div>
        </article>

Temaların özelliklerini geliştirme

Temel yapı oluşturulduktan sonra, bunu kullanarak devam ediyoruz. functions.php Daha fazla pratik özellik ekleyerek temayı daha profesyonel ve kullanımı daha kolay hale getirebilirsiniz.

Kayıt menüsü ve kenar çubuğu

在 functions.php Aşağıdaki kodu ekleyin; bir ana navigasyon menüsü bölgesi ve bir kenar çubuğu (araç çubuğu bölgesi) oluşturun:

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_custom_theme_register_menus() {
    register_nav_menus( array(
        'primary' =&gt; __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );

// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-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_custom_theme_register_sidebar' );

Kayıt olduktan sonra, bunları şablonlarda kullanmanız gerekecek. Örneğin, header.php Biz zaten bunu kullanıyoruz. wp_nav_menu “primary” menüsü çağrıldı. Kenar çubuğunda araççıklar (gadget’lar) göstermek istiyorsanız, şu adımları izleyebilirsiniz: sidebar.php Burada bir kenar çubuğu şablonu oluşturun ve… index.php 或 single.php Çince'de kullanılır. get_sidebar() Tanıtım.

Konu (tema) özelliğinin desteğini ekleyin.

WordPress, birçok yerleşik özellik sunar; ancak bu özellikler temalarda kullanılabilmek için açıkça desteklenmeleri gerekir. Örneğin, makale özetlerinin (özel görsellerin) eklenmesi, özelleştirilebilir bir logosun kullanılması ve HTML5 işaretlerinin desteklenmesi gibi özellikler için özel ayarlamalar yapılmalıdır.

// 添加主题功能支持
function my_custom_theme_setup() {
    // 支持文章缩略图
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 对搜索表单、评论表单等使用HTML5标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 在管理后台提供<title>标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

“Post Thumbnails” desteği eklendikten sonra, makalelerin döngüsünde bunu kullanabilirsiniz. the_post_thumbnail() Fonksiyon, özel görüntüleri çıkarmak için kullanılıyor.

Stil Tasarımı ve responsive (uyumlu) düzenleme

Güzel görünümlü ve farklı cihazlara uyum sağlayan bir tema çok önemlidir. Bunu şu şekilde yapabilirsiniz: style.css Tüm stiller, belgede (metin dosyasında) yazılmalıdır. Mobil öncelikli bir strateji benimsenmesi önerilir.

Temel Stiller ve Düzenleme

Öncelikle, bazı sıfırlama stillerini ve temel düzenlemeleri ayarlayarak farklı tarayıcılarda tutarlı bir görünüm elde edin.

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
header {
    background: #f8f9fa;
    padding: 2rem 0;
    border-bottom: 1px solid #dee2e6;
}

/* 导航菜单样式 */
.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.main-navigation a {
    text-decoration: none;
    color: #007bff;
}

Responsive tasarımı gerçekleştirmek

Farklı ekran boyutlarına göre düzenlemeler yapmak için medya sorguları kullanın. Örneğin, ekran küçüldüğünde navigasyon menüsünü dikey olarak sıralayın.

/* 移动端样式 */
@media (max-width: 768px) {
    .main-navigation ul {
        flex-direction: column;
        gap: 0.5rem;
    }

.container {
        padding: 0 15px;
    }

article {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #eee;
    }
}

Resimlerin de duyarlı (responsive) olmasını sağlayın:

img {
    max-width: 100%;
    height: auto;
}

Özetle.

Yukarıdaki adımları takip ederek, işlevsel ve tam özellikli bir özel WordPress teması oluşturdunuz. Geliştirme ortamını yapılandırmaktan ve en temel özellikleri içeren bir tema oluşturmaya kadar olan süreci tamamladık. style.css 与 functions.php Dosya başladığında, temel şablon dosyaları adım adım oluşturuldu.header.php, footer.php, index.php, single.phpAyrıca, temanın pratik özelliklerini de geliştirdik; örneğin kayıt menüsü, kenar çubuğu ve özel görseller gibi. Son olarak, temaya temel stiller ve duyarlı (responsive) bir tasarım ekledik ki çeşitli cihazlarda iyi görünebilsin. Bu sadece bir başlangıç; bu temel üzerine daha fazla çalışabilir ve sayfa şablonları oluşturabilirsiniz.page.phpArşivleme şablonları (Archive Templates)archive.phpArama şablonları (Search templates)search.phpHatta alt konuları kullanarak özelleştirmeler yaparak daha güçlü ve profesyonel web siteleri oluşturulabilir.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için hangi tekniklere hakim olunması gerekiyor?

Temel bir WordPress teması geliştirmek için HTML, CSS ve PHP bilgisine sahip olmanız gerekmektedir. HTML, sayfa yapısını oluşturmak için kullanılır; CSS, stil tasarımı ve düzenlemek için kullanılır; PHP ise WordPress’in dinamik içeriğini yönetmek için temeldir. Ayrıca, etkileşimli özellikler eklemek için JavaScript konusunda temel bilgilere sahip olmak faydalıdır. Tema geliştirmede başarılı olmak için WordPress’in temel kavramlarını anlamak önemlidir; bunlar arasında şablon hiyerarşisi, döngüler (The Loop), eklentiler (Plugins) ve fonksiyonlar (Functions) yer alır.

functions.php dosyasının bir temadaki işlevi nedir?

functions.php Dosya, bir WordPress temasının işlevsel merkezidir. Temel görevleri arasında şunlar bulunur: CSS ve JavaScript dosyalarını sıraya koymak, navigasyon menüsünü ve kenar çubuğu araç çubuğu alanlarını kaydetmek, temanın desteklediği özellikleri belirtmek (örneğin makale özetleri, özelleştirilmiş logo), özel fonksiyonlar tanımlamak ve WordPress’in varsayılan davranışlarını eylem kancaları (action hooks) ve filtre kancaları (filter hooks) aracılığıyla değiştirmektir. Bu sayede, WordPress’in çekirdek dosyalarını değiştirmeden temanın işlevlerini büyük ölçüde genişletebilir ve özelleştirebilirsiniz.

Temamı nasıl birden çok dili destekleyebilir hale getirebilirim?

Bir temanın çok dilli (uluslararasılaştırılmış) olmasını sağlamak esas olarak iki adımdan oluşur. İlk olarak, style.css “Text Domain” ve çeviri fonksiyonlarının kullanıldığı tüm yerlerde, tutarlı bir metin alanı (Text Domain) kullanılmalıdır; bu genellikle tema klasörünün adıyla aynı olur. İkincisi, çevrilecek metinleri hazırlarken, WordPress’in çeviri fonksiyonlarından yararlanılmalıdır. __()、_e() 或 _x()Daha sonra, Poedit gibi araçları kullanarak oluşturabilirsiniz. .pot Şablon dosyasını kullanarak ilgili içeriği oluşturun. .po 和 .mo Çeviri dosyasını temanın içine koyun. /languages Katalogda bulunan dosyalar, WordPress tarafından web sitesinin dil ayarlarına göre otomatik olarak yüklenir.

Bir alt konu oluşturmanın, doğrudan üst konuyu değiştirmeye kıyasla avantajları nelerdir?

Alt konu oluşturmak, mevcut üst konunun işlevlerini değiştirmek veya genişletmek için en iyi uygulamalardan biridir. Bunun temel avantajı güvenlik açısındadır: Üst konu bir güncelleme aldığında, üst konuyu güvenli bir şekilde güncelleyebilirsiniz ve alt konuya yaptığınız özelleştirmeler (stil, işlev, şablonlar) kaybolmaz. Alt konunun yalnızca bir… style.css Ve bir seçenekle birlikte… functions.php Dosya çalışacak şekilde hazır. Alt konuda… style.css Orada, yoluyla… @import Veya daha iyi bir sıralama yöntemiyle üst tema stilini kullanın; ardından kendi CSS kurallarınızı ekleyerek bunları geçersiz kılın. Alt temanın… functions.php Ebeveyn konunun aynı adlı dosyasıyla birlikte yüklenir; üzerine yazılmaz. Bu sayede yeni özellikleri güvenle ekleyebilirsiniz.

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: