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

WordPress Tema Geliştirme Başlangıcı: Sıfırdan İlk Temanızı Oluşturmak

4 dakika okuma.
2026-03-15
2026-06-04
2,087
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

Herhangi bir kod yazmaya başlamadan önce, uygun bir geliştirme ortamına ihtiyacınız vardır. Bu, bir yerel sunucu ortamı (örneğin XAMPP, Local by Flywheel veya MAMP) ve bir kod editörü (VS Code, Sublime Text veya PHPStorm gibi) içerir. Yerel ortamınızda PHP, MySQL ve Apache/Nginx’in kurulu olduğundan emin olun.

Bundan sonra, yerel sunucunuzda…wp-content/themes/Katalogda yeni bir klasör oluşturun. Bu klasörün adı, konu adınız olacaktır; örneğin…my-first-themeBu, tüm tema dosyalarınızın “evinin” bulunduğu yerdir.

En temel bir WordPress teması yalnızca iki dosyaya ihtiyaç duyar:style.css和index.phpBunlar arasında,style.cssSadece bir stil şeması değil; aynı zamanda bir temanın “kimlik kartı”dır. Üst kısmındaki yorum bloğu, temanın meta bilgilerini içerir. Öncelikle bu dosyayı oluşturalım.

Tavsiye edilen okuma WordPress Tema Geliştirme İle Sıfırdan Başlama: Kişiselleştirilmiş Web Siteleri Oluşturmanın Kapsamlı Rehberi。

“Create a theme information header file”

style.cssDosyanın en üstündeki yorum bloğu, WordPress’in bir temayı tanımasının anahtarıdır. Lütfen temanızın klasöründe bir yorum bloğu oluşturun.style.cssVe aşağıdaki içeriği yazın:

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
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Bu bilgiler, WordPress arayüzünün “Görünüm” -> “Temalar” sayfasında görüntülenecektir.Text DomainUluslararasılaştırma için kullanılır ve çeviri dosyalarının sonradan yüklenmesinde kilit bir tanımlayıcıdır.

Temel indeks şablonu oluşturun.

Ardından, temanın temel dosyasını oluşturun.index.phpBu dosyada geçici olarak sadece bir satır kod olsa bile, WordPress temanızı tanıyıp etkinleştirebilir.

<?php get_header(); ?>
<h1>Merhaba, WordPress Tema Dünyası!</h1>
<?php get_footer(); ?>

get_header()和get_footer()WordPress’in şablon fonksiyonlarıdır; adı geçen dosyaları yüklemeye çalışırlar.header.php和footer.phpBu dosyalar henüz oluşturulmamış olsa da, standart bir yaklaşım olarak önce böyle yazmak gerekir. Şimdi, WordPress arayüzüne girip “Görünüm” -> “Temalar” bölümünden “My First Theme” temasını bulup etkinleştirebilirsiniz. Web sitesinin ana sayfasını yenilediğinizde “Hello, WordPress Theme World!” yazısını göreceksiniz.

Şablon hiyerarşisini anlamak ve temel dosyaları oluşturmak

WordPress, farklı sayfa isteklerine (örneğin ana sayfa, makale sayfası, kategori sayfası) hangi şablon dosyasının içeriği görüntülemek için kullanılacağını belirlemek için “şablon hiyerarşisi” adı verilen bir dizi kural kullanır. Bu mekanizmayı anlamak, temaları verimli bir şekilde geliştirmenin temelidir.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıcı: İlk Özel Temanızı Adım Adım Oluşturun。

En yaygın kullanılan şablon şudur:index.phpO, tüm sayfalar için son çare olarak kullanılır. Ancak farklı sayfaların görünümünü daha ayrıntılı bir şekilde kontrol edebilmek için daha spesifik şablon dosyaları oluşturmamız gerekiyor. Öncelikle, en temel ve en önemli üç dosyayı oluşturalım:header.php、footer.php和functions.php。

Web sitesi başlık şablonu oluşturma

header.phpDosyalar genellikle HTML belgelerinin baş kısmını (header) içerir.<head>) ve web sitesinin üst kısmındaki ortak alanlar, örneğin Logo ve navigasyon menüsü. Bir tane oluşturun.header.phpDosya:

<!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 id="site-header">
        <div class="container">
            <h1><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            <p><?php bloginfo( 'description' ); ?></p>
            <nav>
                'primary',
                    'menu_id'        =&gt; 'primary-menu',
                ) );
                ?&gt;
            </nav>
        </div>
    </header>
    <main id="main-content">

Burada birkaç önemli fonksiyon bulunmaktadır:wp_head()Kancalar, WordPress çekirdeğinin, eklentilerin ve temaların kendi başlarına bağlantılar kurmasına olanak tanır.<head>Gerekli kodu bölgeye ekleyin (örneğin, stil şablonu bağlantısı).body_class()Bir dizi CSS sınıf adı çıkarılacak, böylece farklı sayfalarda stil kontrolü yapmanız kolaylaşır.wp_nav_menu()Bir navigasyon menüsünü göstermek 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.

Web sitesinin alt kısmı için bir şablon oluşturmak

footer.phpDosyalar genellikle web sitelerinin ortak alt kısmını (örneğin telif hakkı bilgilerini) içerir ve belirli bir yerde sona erer.header.phpAçılan etiketler… Oluşturuldu.footer.php：

    </main><!-- #main-content -->
    <footer id="site-footer">
        <div class="container">
            <p>©  . All rights reserved.</p>
        </div>
    </footer>
    <?php wp_footer(); ?>
</body>
\n

wp_footer()与wp_head()Benzer şekilde, bu önemli bir “kancadır” (hook) ve…</body>Etiketin önüne betik veya kod ekleyin.

Şimdi, senin konuna geri dönelim…index.phpBunu, yeni oluşturduğumuz üst ve alt dosyaları kullanacak şekilde güncelleyin:

Tavsiye edilen okuma SEO dostu bir WordPress temasını nasıl seçip özelleştirirsiniz?。

<article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    </article>
<?php endwhile; else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>

Bu kod, WordPress temasının temel döngüsünü (The Loop) oluşturmaktadır. Bu döngü, mevcut sayfada makale olup olmadığını kontrol eder ve ardından her makalenin başlığını ve içeriğini döngüsel olarak görüntüler.

Temaların özelliklerini fonksiyon dosyaları aracılığıyla geliştirin.

functions.phpBu, temanızın “Kontrol Merkezi”dir. Bu bir şablon dosyası değil; temanız başlatıldığında otomatik olarak yüklenen bir PHP dosyasıdır. Buraya temanızın destek özelliklerini ekleyebilir, menü yerleşimlerini ayarlayabilir, sıralama stillerini ve betikleri yönetebilirsiniz.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. 
<?php
/**
 * My First Theme 的功能函数文件
 */

// 主题基础设置
if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让WordPress管理文档标题
        add_theme_support( 'title-tag' );
        // 启用文章和页面的特色图片功能
        add_theme_support( 'post-thumbnails' );
        // 注册一个主导航菜单
        register_nav_menus( array(
            'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
        ) );
        // 为文章摘录添加HTML支持
        add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
    }
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 修改摘录末尾的“更多”链接样式
function my_first_theme_excerpt_more( $more ) {
    return '...';
}

// 注册并加载样式表
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载一个自定义样式表
    wp_enqueue_style( 'my-first-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Bu fonksiyon dosyası birkaç önemli iş yapmıştır: 1)add_theme_support()Modern WordPress temalarının yaygın olarak kullanılan özelliklerini aktive etmek; 2)register_nav_menus()Bir yemek birimi adresi kaydettik; böylece daha önce yaptığımız işlemler...header.phpİçeriden çağrılanprimaryMenü, arka planda “Görünüm” -> “Menü” bölümünden atanabilir; 3) Kullanımı…wp_enqueue_style()Fonksiyon, stil şablonlarını güvenli bir şekilde ve doğru bir şekilde kuyruğa ekler.

Bağımsız makale şablonu oluşturun.

Bir makalenin daha iyi bir şekilde görüntülenmesini sağlamak için, özel bir şablon dosyası oluşturabiliriz.single.phpŞablon hiyerarşisine göre, tek bir makaleye erişildiğinde WordPress öncelikle ilgili şablonu kullanır.single.php…yerineindex.php。

<?php get_header(); ?>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
        <div class="entry-meta">
            <?php 
            printf( 
                esc_html__( '发布于 %s', 'my-first-theme' ), 
                get_the_date() 
            );
            ?>
        </div>
        <?php if ( has_post_thumbnail() ) : ?>
            <div class="post-thumbnail">
                <?php the_post_thumbnail( 'large' ); ?>
            </div>
        <?php endif; ?>
    </header>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
</article>

<?php get_footer(); ?>

Bu şablon, makale bilgilerini daha ayrıntılı bir şekilde göstermektedir; örneğin yayın tarihi ve özel bir görsel (eğer ayarlanmışsa).post_class()Fonksiyon, makale türüne göre uygun CSS sınıflarını çıktı olarak verir.

Temel stilleri ve duyarlı (responsive) tasarımı ekleyin.

Şimdi, temanızın iskeleti ve temel işlevleri hazır; sıra onu daha estetik hale getirmeye geldi.style.cssBazı temel CSS kodlarını içeriye ekleyin ve sitenin responsive (uyumlu) bir tasarıma sahip olduğundan emin olun.

Senin…style.cssDosya (konu bilgilerinin alt kısmında), aşağıdaki stilin eklenmesi gerekmektedir:

/* 基础重置与排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
#site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}
#site-header h1 a {
    color: #333;
    text-decoration: none;
}

/* 导航菜单 */
#primary-menu {
    display: flex;
    list-style: none;
}
#primary-menu li {
    margin-right: 1rem;
}
#primary-menu a {
    text-decoration: none;
    color: #555;
}

/* 主内容区 */
#main-content {
    padding: 2rem 0;
}
article {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 底部样式 */
#site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    #primary-menu {
        flex-direction: column;
    }
    #primary-menu li {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    article {
        padding: 1rem;
    }
}

Bu stiller, net ve modern bir görsel etki sunar ve küçük ekranlı cihazlarda temel bir yanıt veren (responsive) düzen sağlar. Yaratmak isteyebilirsiniz./assets/css/custom.cssDosya, daha fazla özelleştirilmiş stilin saklanması için kullanılıyor ve zaten mevcut.functions.phpYüklenmek üzere sıraya alındı.

Özetle.

Bu makalenin adımlarını takip ederek, boş bir klasörden başlayarak işlevsel ve yapısal olarak bütünlüklü bir WordPress teması oluşturdunuz. Tema geliştirmenin en temel dosyalarını da öğrendiniz.style.css和index.phpŞablon hiyerarşisi kavramını öğrendim ve bir şablon oluşturdum.header.php、footer.php、single.phpVe diğer temel şablon dosyaları. Ayrıca…functions.phpDosya, temanıza işlevsellik ve kaynak yönetimi özellikleri eklemiştir; ardından CSS ile görsel bir görünüm kazandırılmıştır.

Bu sadece bir başlangıç noktası. Daha sonra, daha fazla şablon dosyası oluşturmayı keşfedebilirsiniz (örneğin:page.php、archive.php、404.phpWordPress’in Hook’lar (Kancalar) ve Action’lar/Filtreler (Eylemler) sistemini derinlemesine öğrenin ve temanınızın Widget’ları (Bileşenler) ve Customizer’ı (Özelleştiriciyi) desteklemesini nasıl sağlayacağınızı araştırın. Sürekli pratik yaparak ve keşfederken, olgun bir WordPress tema geliştiricisi olacaksınız.

Sıkça Sorulan Sorular.

Bir temanın logosunu nasıl değiştiririm?

在header.phpDosyada, web sitesinin başlığını gösteren kod satırını bulun. Bunu bir `...` ile işaretleyebilirsiniz.

Etiket Değiştirmebloginfo( ‘name’ )Ve Logo resminize bir bağlantı ekleyin. Daha profesyonel bir yaklaşım ise…functions.phpÇince'de kullanılır.add_theme_support( ‘custom-logo’ )WordPress’ın özelleştiricilerinde (customizers) bulunan Logo yükleme özelliğini desteklemek için…

Neden navigasyon menüm gösterilmiyor?

Öncelikle, lütfen zaten yaptığınızdan emin olun…functions.phpÇin'deregister_nav_menus()Sebze biriminin konumunu kaydettiniz (örneğin)...primaryDaha sonra, WordPress arayüzüne giriş yapmanız gerekiyor. “Görünüm” (Appearance) → “Menüler” (Menus) sayfasına gidin. Yeni bir menü oluşturun, menü öğelerini seçin ve “Görünüm Yeri” (Display Location) bölümünde kaydettiğiniz menü konumunu (örneğin “Ana Menü” – Primary Menu) işaretleyin. Son olarak menüyü kaydedin.

Bir temaya nasıl bir kenar çubuğu eklenir?

Öncelikle,functions.phpÇince'de kullanılır.register_sidebar()Bu fonksiyon, bir kenar çubuğu bileşeni alanı kaydeder. Daha sonra, kenar çubuğunun görüntülenmesini istediğiniz şablon dosyasında (örneğin…)index.php或single.phpİçerikte, kullanılmaktadır.dynamic_sidebar()Bu bölgeye bir fonksiyon çağrısı yapılır. Aynı zamanda, oluşturmanız gerekiyor.sidebar.phpDosya, kenar çubuğunun belirli HTML yapısını tanımlamak için kullanılır.

functions.php dosyasındaki işlemler mutlaka “hook”lar aracılığıyla bağlanmak zorunda mıdır?

Evet, çoğu durumda kodun doğru zamanda çalıştığından emin olmak için işlevsel kodu bir fonksiyon içine yerleştirmeli ve belirli işaretçiler (hook’lar) aracılığıyla bu fonksiyonu tetiklemelisiniz.after_setup_theme、wp_enqueue_scriptsMonte et. Doğrudan yazın.functions.phpKüresel (global) kapsamdaki kodlar, uygun olmayan zamanlarda çalıştırılabilir veya hatalara neden olabilir.

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: