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

WordPress Tema Geliştirme Kılavuzu: Sıfırdan Başlayarak Kişiselleştirilmiş Web Siteleri Oluşturma

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

WordPress tema nedir ve temel yapısı nasıldır?

Bir tane.WordPressTemalar, bir web sitesinin görünümünü ve sunum şeklini belirler; bir dizi dosyanın koleksiyonudur ve bu dosyalar şablonlar, stil dosyaları (style sheets) ve PHP kodu aracılığıyla birlikte çalışır. Temanın temel yapısını anlamak, geliştirme sürecinin ilk adımıdır. Temel dosyalar genellikle şunları içerir:
- style.cssTemanın ana stil şeması; aynı zamanda temanın meta bilgilerini (tema adı, yazar, açıklama vb.) de içerir.
- index.phpVarsayılan ana şablon dosyası, bir temanın olmazsa olmazıdır.
- functions.phpKonu özelliklerinin eklenmesi, kayıt betiklerinin ve stillerinin oluşturulması, özel işlevlerin tanımlanması gibi amaçlar için kullanılır.
- header.phpWeb sitesinin üst kısmını (header bölgesini) tanımlayın.
- footer.phpWeb sitesinin alt kısmı (footer) bölgesini tanımlayın.
- page.php 和 single.phpSırasıyla “sayfa” ve “makale”nin renderlanması için kullanılır.

Bu şablon dosyaları şu kurallara uygundur:WordPressŞablon hiyerarşisi sistemi, geliştiricilerin belirli isimlerle dosyalar oluşturarak varsayılan görüntüleme mantığını geçersiz kılmasına ve böylece farklı içerik türlerinin çıktısını hassas bir şekilde kontrol etmesine olanak tanır.

Başlamadan önce, yerel bir geliştirme ortamına (örneğin Local by Flywheel, XAMPP) veya bir test sunucusuna ihtiyacınız olacak. Ayrıca bir kod editörü (örneğin VS Code) ve dağıtım için bir FTP istemcisi de gereklidir.

Tavsiye edilen okuma WordPress tema geliştirmeye başlama rehberi: Sıfırdan kişiselleştirilmiş bir web sitesi oluşturma。

İlk temel temanınızı oluşturun.

Hadi en basit ancak tamamen kullanılabilir bir tema oluşturarak başlayalım. Öncelikle, kendi…wp-content/themesBir dizin altında yeni bir klasör oluşturun, örneğin:my-first-themeBu, tüm tema dosyalarınızın bulunduğu yerdir.

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.

Konu stillerini ve bilgilerini tanımlama

Oluşturstyle.cssDosyayı açın ve dosyanın başına aşağıdaki yorum bloğunu ekleyin. İşte bu.WordPressBir konuyu tanımlamak için gerekli olan şeylerdir.

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Bu yorum bloğu, konunun ne olduğunu açıklamaktadır.WordPressArka plandaki gösterim bilgileri.Text DomainUluslararasılaştırma amacıyla kullanılır ve bir temanın tanımlayıcısıdır.

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

Bundan sonra, en temel olanı oluşturacağız.index.phpBu dosya, tüm sayfalar için varsayılan şablonudur.

<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
    <header>
        <h1><a href="/tr/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
    </header>

<main>
        <?php
        if (have_posts()) :
            while (have_posts()) : the_post();
                ?>
                <article>
                    <h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div><?php the_content(); ?></div>
                </article>
                &lt;?php
            endwhile;
        else :
            echo &#039;<p>没有找到内容。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Bu dosya, birden fazla çekirdek (core) kullanmaktadır.WordPressŞablon etiketleri, örneğin…the_post(), the_title(), the_content()Makaleleri döngüsel olarak çıktı olarak verin.wp_head()和wp_footer()Kancalar çok önemlidir; çünkü onlar…WordPressÇekirdek, eklentiler ve diğer betikler gerekli kodları içerir.

Tavsiye edilen okuma WordPress Tema Geliştirme: Sıfırdan Profesyonel Seviyede Web Sitesi Temaları Oluşturmanın Kapsamlı Rehberi。

Dosyayı sunucuya yükledikten sonra, artık ona erişebilir ve üzerinde işlemler yapabilirsiniz.WordPressArka plandaki “Görünüm” -> “Tema” bölümünde bu temayı gördünüz ve etkinleştirdiniz. Artık web siteniz bu minimalist (sade) tasarımı kullanacak.

Temaların özelliklerini ve esnekliğini artırın.

Temel yapıyı oluşturduktan sonra, modülerliği ve işlevselliği dahil etmemiz gerekiyor; böylece tema daha profesyonel ve daha kolay bakım yapılabilir hale gelir.

Çekirdek işlev dosyalarını içe aktarın.

Oluşturfunctions.phpDosya, temanın “beyni”dir. Burada, tema desteğini, kayıt menüsünü, stil ve betikleri yükleriz.

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. 
<?php
function my_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主导航菜单', 'my-first-theme'),
    ));
    // 为RSS feed链接添加支持
    add_theme_support('automatic-feed-links');
}
add_action('after_setup_theme', 'my_theme_setup');

function my_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style('main-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/script.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>

add_theme_support()Fonksiyon, modern özellikleri etkinleştirdi.WordPressYaygın olarak kullanılan konu (topic) özellikleri. Kullanımı.wp_enqueue_style()和wp_enqueue_script()Bu, kaynakları yüklemenin standart bir yoludur ve bağımlılıkları ve sürüm kontrolünü doğru bir şekilde işleyebilir.

Sayfa başlığı ve sayfa altı şablonlarını ayırın.

将index.phpSayfa başlığı ve sayfa altı kodlarını ayrı dosyalara ayırmak, kodun yeniden kullanılabilirliğini artırabilir. Oluşturun.header.phpİçerir…Açmak için…Tüm kodlar, etiketlerin önünde yer alır. O kodları oluşturun.footer.phpİçerir, kapatıldığından itibaren…Etiketin ardından…Tüm kodu… Sonra,index.phpÇince'de kullanılır.get_header()和get_footer()Fonksiyonlar bunları içerir.

Yan menü şablonu oluşturun.

Oluşturun.sidebar.phpDosya içinde bir araçlar bölgesi (small tools area) yerleştirilebilir. Öncelikle,functions.phpBir araç bölgesi oluşturmak için kayıt olun:

Tavsiye edilen okuma Sıfırdan Uzmanlığa: WordPress Tema Geliştirme Kapsamlı Rehberi ve Pratik Eğitim Kursu。

function my_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_theme_widgets_init');

Sonra,sidebar.phpKüçük araçların çağrıldığı bölge:

<?php if (is_active_sidebar('sidebar-1')) : ?>
    <aside>
        <?php dynamic_sidebar('sidebar-1'); ?>
    </aside>
<?php endif; ?>

Son olarak,index.phpBurada, ana içerik alanının yanında kullanabilirsiniz.get_sidebar()Onu çağırmak için…

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.

Uygulama Stilleri ve responsive (uyumlu) Tasarım

Şekilsiz bir tema çekicilikten yoksundur. CSS kullanarak temayı daha estetik hale getirecek ve farklı cihazlara uyumlu hale getireceğiz.

Temel düzenleme stillerini oluşturun.

在style.cssYorum bloğunun altından itibaren temel stilleri eklemeye başlayın. Öncelikle bazı CSS değişkenleri ve sıfırlama stillerini tanımlayın, ardından temel düzenlemeyi ayarlayın.

:root {
    --primary-color: #0073aa;
    --text-color: #333;
    --background-color: #f5f5f5;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--background-color);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
header {
    background: white;
    padding: 2rem;
    margin-bottom: 2rem;
    border-bottom: 3px solid var(--primary-color);
}
main {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}
article {
    background: white;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

Responsive bir navigasyon menüsü oluşturmak

Regarding the matter of...functions.phpKayıtlı olan navigasyon menüsüne stil eklememiz ve mobil cihazlarda daha kullanışlı hale getirmemiz gerekiyor. Öncelikle,header.phpMenüyü ekrana yazdır:

<nav>
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
    ));
    ?>
</nav>

Daha sonra CSS’ye stiller ekleyin ve mobil cihazlara uyum sağlamak için medya sorguları kullanın:

.primary-menu {
    display: flex;
    list-style: none;
}
.primary-menu li {
    margin-left: 1.5rem;
}
.primary-menu a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
}
.primary-menu a:hover {
    color: var(--primary-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
    main {
        grid-template-columns: 1fr; /* 移除侧边栏 */
    }
    .primary-menu {
        flex-direction: column;
    }
    .primary-menu li {
        margin: 0.5rem 0;
    }
}

Makalenin öne çıkan görsellerini optimize etmek

Çünkü biz etkinleştirdik.post-thumbnailsDestekleniyor, kullanılabilir.index.php或single.phpDöngü içinde, kullanmakthe_post_thumbnail()Bir fonksiyon, özel görselleri görüntülemek ve boyutlarını kontrol etmek için bunlara CSS sınıfları eklemek amacıyla kullanılır.

Özetle.

Bu rehber sizi…WordPressTemaların geliştirilmesindeki temel süreç: Temanın temel dosya yapısını anlamaktan, ilk kullanılabilir temayı oluşturmaya, ve ardından…functions.phpİşlevleri geliştirin, şablonları bölerek modülerlik sağlayın ve son olarak CSS ile estetik ve duyarlı (responsive) tasarım yapın.WordPressKonunun anahtarı, şablon hiyerarşisini, temel fonksiyonları ve “Hook” (Kancalar) sistemini anlamaktır. Bu küçük başlangıç noktasından yola çıkarak, özelleştirilmiş makale türlerini, gelişmiş tema seçeneklerini keşfetmeye devam edebilirsiniz.GutenbergBlok düzenleyicileri, daha karmaşık alanları destekleyerek kişiselleştirilmiş ihtiyaçları gerçekten karşılayan profesyonel web sitelerinin oluşturulmasını sağlar.

Sıkça Sorulan Sorular.

###: Konu geliştirmesi mutlaka sıfırdan mı başlamalı?
Mutlaka öyle değil. Mevcut, hafif yapıdaki bir “Başlangıç Teması” (Starter Theme) veya “Çerçeve” (Framework) kullanarak geliştirme yapmayı seçebilirsiniz; örneğin Underscores (_s) veya Sage gibi. Bu araçlar, iyi bir kod yapısı ve en iyi uygulamalar sunar, böylece temel kurulum sürecinde çok zaman tasarruf edersiniz ve tasarım ile özel özelliklere daha fazla odaklanabilirsiniz.

Nasıl temamın alt temaları desteklemesini sağlayabilirim?

Konunuzun güvenli bir şekilde özelleştirilebilmesi için, onu “ana tema” (parent theme) olarak tasarlayabilirsiniz. Bu sayede kullanıcılar, stilleri ve şablonları değiştirmek için “alt temalar” (subthemes) oluşturabilirler. Temanın iyi bir şablon organizasyon yapısına sahip olduğundan emin olmanız gerekmektedir.style.cssKaynaklara atıfta bulunurken mutlak yol adlarının kullanımından kaçının; bunun yerine…get_template_directory_uri()Bu fonksiyonlar… Alt konu için yalnızca bir tane yeterli.style.cssve isteğe bağlıfunctions.phpBöylece tüm üst temaların özelliklerini devralabilirsiniz.

Geliştirme sırasında yaygın hataları nasıl ayıklarız?

Aç.WordPressHata ayıklama modu son derece önemlidir. Sizin…wp-config.phpDosyada,WP_DEBUGSabit, olarak ayarlandı.trueBu, tüm PHP hatalarının, uyarılarının ve bildirimlerinin ekranda görünmesini sağlayacaktır. Aynı zamanda, CSS ve JavaScript hatalarını kontrol etmek için tarayıcı geliştirici araçlarını (F12 tuşuna basarak) kullanabilir ve konsol ile ağ sekmesine göz atabilirsiniz.

Geliştirme işlemi tamamlandıktan sonra temamı nasıl yayınlayabilirim?

Eğer konuyu resmi kaynaklara göndermek istiyorsanız…WordPressTema dizini, kod kalitesi, güvenlik, uluslararasılaştırma, erişilebilirlik vb. dahil olmak üzere tema inceleme standartlarına sıkı sıkıya uymalıdır. Resmi kılavuzu dikkatlice okumanız gerekir. Kendi başınıza dağıtmak istiyorsanız, tüm tema dosyalarını ZIP formatında paketleyebilirsiniz, böylece kullanıcılar doğrudan bunları indirebilir.WordPressArka plandaki “Temayı Yükle” özelliği kullanılarak kurulum yapılır.

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: