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

WordPress tema geliştirme tam rehberi: Web sitenizin görünümünü sıfırdan oluşturun.

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

Konunun temel yapısını ve çekirdek dosyalarını anlamak

Bir standart WordPress temasının çekirdeği, belirli dosyaları içeren bir klasördür ve bu klasör şu adreste bulunur:/wp-content/themes/Katalogda bulunmaktadır. Her bir konunun, WordPress tarafından tanınabilmesi ve etkinleştirilebilmesi için en az iki temel dosyaya ihtiyacı vardır.

İlk olarak…style.cssBu sadece bir temanın stil şeması değil, aynı zamanda bir bilgi dosyasıdır. Dosyanın üst kısmındaki yorum bloğu, temanın adı, yazarı, açıklaması ve sürümü gibi temel bilgilerini tanımlar. Doğru biçimde düzenlenmemiş bu başlık yorumu olmadan, WordPress temalar listesinde temanızı gösteremez.

Diğer bir gerekli dosya ise…index.phpBu, temanın varsayılan şablon dosyasıdır. WordPress, içeriği göstermek için daha spesifik bir şablon bulamadığında bu dosyayı kullanır.

Tavsiye edilen okuma WordPress tema geliştirmeye başlama kılavuzu: Sıfırdan bire özel web sitesi görünümü oluşturma。

Bunun dışında, özellikleri tam bir tema genellikle aşağıdaki dosyaları içerir:header.php、footer.php、sidebar.php和functions.php. Dosyafunctions.phpEn önemlisi, bu özellik temanın “beyni” gibidir; işlevler eklemenize, kenar çubuklarını kaydetmenize, navigasyon menülerini tanımlamanıza vb. olanak tanır ve bunu yaparken çekirdek kodu değiştirmenize gerek kalmaz.

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.

Nasıl standart bir tema bilgi başlığı tasarlanır?

在style.cssDosyada, başlık bilgilerinin formatı kesinlikle belirlenen kurallara uygun olmalıdır. İşte standart bir örnek:

/*
Theme Name: 我的第一个主题
Theme URI: https://www.example.com/my-first-theme/
Author: 你的名字
Author URI: https://www.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 çok önemlidir; bir temayı diğer dillere çevirmeye hazırlanırken bu adım mutlaka atılmalıdır.

Temel bir sayfa şablonu yapısı oluşturun.

Şablon dosyaları, WordPress temalarının iskeletidir ve farklı türdeki içeriklerin nasıl görüntüleneceğini belirler. WordPress’in şablon hiyerarşisini anlamak ve kullanmak, verimli geliştirmenin anahtarıdır.

Sayfa başlık ve sonuç (footer) dosyalarını oluşturun.

Sayfadaki tekrarlayan kısımları ayrı dosyalara ayırmak, kodun düzenli ve sürdürülebilir olmasını sağlamanın en iyi uygulamalarından biridir.header.phpDosyalar genellikle belge türü beyanlarını içerir.<head>Bölgenin tüm etiketleri (örneğin başlıklar, CSS ve JS referansları) ve web sitesinin başlık bilgileri (örneğin Logo ve ana menü).

Tavsiye edilen okuma WordPress Tema Geliştirmeyi Sıfırdan Öğrenin: Özel Web Sitesi Temaları Oluşturmanın Kapsamlı Rehberi。

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

Buna göre,footer.phpDosya, sayfa altı içeriğini (örneğin telif hakkı bilgilerini) içermekte ve bu içerikle birlikte sona ermektedir.header.phpAçılan HTML etiketleriyle birlikte çağrı yapılır.wp_footer()İşlev.

    <footer id="site-footer">
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
\n

wp_head()和wp_footer()Bu iki “kancanın” (hook’un) olması gereklidir; çünkü bu kancalar, eklentilerin ve WordPress çekirdeğinin sırasıyla sayfanın baş kısmına ve son kısmına kod enjekte etmesine olanak tanır.

Ana sayfa ve makale sayfası şablonlarını gerçekleştirin.

Bir konu olarak genel bir kapsayıcı…index.phpDosya, diğer şablon bölümlerini içermek ve makaleleri döngüsel olarak çıkarmak için WordPress şablon etiketlerini kullanmaktadı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. 
<?php get_header(); ?>

<main id="primary">
    
            <article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
                <h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-content">
                    <?php the_content(); ?>
                </div>
            </article>
        
</main>

Tek bir makale sayfası için, aşağıdakileri oluşturmanız gerekecektir:single.phpYapısı şu şekildedir:index.phpBenzer, ancak genellikle çağrılır.the_post_thumbnail()Özel görselleri göstermek için ve bunları kullanmak için…the_category()和the_tags()Kategorileri ve etiketleri göstermek için.

Temalı fonksiyon dosyasında işlevleri genişletin.

functions.phpDosya, WordPress temanıza tüm özel özellikleri ve ayarları eklediğiniz yerdir. Adeta başka bir eklenti gibidir, ancak yalnızca sizin temanınıza özeldir.

Temaları ayarlama ile ilgili temel destek özellikleri

Kullanın.add_theme_support()Fonksiyonlar, makale özel görselleri, özelleştirilmiş logolar, HTML5 işaretleri gibi konu desteğinin sunduğu çeşitli özellikleri tanımlayabilir. Bu genellikle belirli bir yapı içinde yapılır.after_setup_themeİşlem, kancanın tetiklediği fonksiyon içinde tamamlanır.

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Sıfırdan Başlayarak Profesyonel ve Responsive (Duyarlı) Web Siteleri Oluşturma。

function my_theme_setup() {
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );

// 支持HTML5标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Bir kenar çubuğu ve araç çubuğu bölgesi oluşturun.

Küçük araçlar, WordPress’in önemli bir parçasıdır. Bir temaya küçük araç bölgesi (kenar çubuğu) oluşturmak istiyorsanız, şunları yapmanız gerekmektedir:functions.phpÇince'de kullanılır.register_sidebar()İşlev.

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' );

Kayıt olduktan sonra, artık…sidebar.phpŞablon dosyasında kullanılır.dynamic_sidebar( ‘sidebar-1’ )Bu bölgeyi çağırmak için geldik.

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.

Entegre stil şemaları ve betik dosyaları

CSS stil dosyalarını ve JavaScript betiklerini temaya doğru bir şekilde eklemek, performansı ve uyumluluğu sağlamanın anahtarıdır. Asla bağlantıları doğrudan şablon dosyalarına kod olarak eklemeyin; bunun yerine WordPress’in sağladığı kuyruğa ekleme (enqueue) sistemini kullanın.

Ana temanın stil şablonunu tanımlayın.

Her ne kadarstyle.cssGerekli, ancak genellikle yalnızca başlık bilgilerini konu tanımlamak için saklıyoruz; gerçek stil bilgilerini ise başka bir CSS dosyasında tutuyoruz ve bunu başka bir yerden çağırıyoruz.wp_enqueue_style()Fonksiyon yüklendi.

function my_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载一个自定义样式表
    wp_enqueue_style( 'my-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array('my-theme-style'), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

get_stylesheet_uri()Fonksiyon, otomatik olarak temanın kök dizinindeki dosyalara yönlenecektir.style.cssDosya: Kuyruk sistemi kullanarak, eklentilerin veya alt temaların stilinize kolayca bağlanmasına veya bunu değiştirmesine olanak tanır.

Özel betikleri ekleyin ve entegre edin.

JavaScript dosyaları için de benzer bir yaklaşım kullanılır, ancak bazı özel adımlar atmanız gerekebilir.wp_enqueue_script()İyi bir uygulama, sayfanın yükleme hızını artırmak için betiği sayfanın alt kısmında (footer’da) yüklemektir.

function my_theme_scripts() {
    // ... 样式加载代码 ...

// 在页脚加载一个自定义JS文件，并依赖jQuery
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Son parametreye dikkat edin.trueBu, WordPress’e betiği sayfanın alt kısmına (footer) yerleştirmesini söyler. Eğer betiğinizin sayfanın belirli bir bölümünde çalışması gerekiyorsa…<head>Eğer içerik yüklenirse, bunu şu şekilde ayarlayın:false。

Özetle.

WordPress tema geliştirme, tasarım, HTML, PHP ve WordPress çekirdek bilgilerinin bir araya getirilmesi sürecidir. Bir temayı anlamaktan başlayarak…style.css和index.phpBu iki temel dosyadan başlayarak, ayrı şablon dosyaları oluşturarak sayfa yapısını oluşturuyoruz; ardından da güçlü araçları kullanarak sayfaları geliştiriyoruz.functions.phpDosyalar, temanıza çeşitli özellikler ekler ve son olarak stilleri ile betikleri standart bir kuyruk yönetim sistemi aracılığıyla yönetir. WordPress’in kodlama standartlarına ve şablon hiyerarşisine uymak, sadece yapısal olarak net ve bakımı kolay temalar oluşturmakla kalmaz, aynı zamanda temanın tüm WordPress ekosistemiyle uyumlu olmasını da sağlar. Bu beceriyi öğrenmenin en iyi yolu, en basit tema klasörünü oluşturarak başlamak ve ardından özellikleri kademeli olarak eklemektir.

Sıkça Sorulan Sorular.

Bir WordPress teması geliştirmek için hangi programlama dillerini bilmek gerekiyor?

Temel bir WordPress teması geliştirmek için HTML, CSS ve PHP bilgisine sahip olmak gereklidir. HTML, sayfa yapısını oluşturmak için kullanılır; CSS, stil ve düzenlemeyi kontrol etmek için kullanılır; PHP ise WordPress’in sunucu tarafı betik dilidir ve tüm dinamik özelliklerin gerçekleştirilmesinde rol oynar. Daha karmaşık ve etkileşimli temalar için JavaScript bilgisi de şarttır.

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

Bir temanın birden fazla dil desteğine sahip olmasını sağlama sürecine “uluslararasılaştırma” (internationalization) denir. Bunun için gerekli adımları atmanız gerekmektedir.style.cssBaşlık bilgilerinde doğru ayarlamalar yapılmıştır.Text DomainVe ayrıca…functions.phpÇince'de kullanılır.load_theme_textdomain()Fonksiyon, dil dosyasını yüklüyor.

Daha sonra, temanın PHP dosyasında, çevrilmeye ihtiyaç duyan tüm metinler şu şekilde kullanılmalıdır:__('Hello World', 'my-theme-text-domain')Bu tür çeviri fonksiyonlarını bir araya getirin. Son olarak, Poedit gibi araçları kullanarak çeviriyi oluşturun..po和.moDil dosyaları, çevirmenler tarafından kullanılmak üzere hazırlanmıştır.

Responsive tasarım, tema geliştirme sürecinde zorunlu mudur?

2026 yılının bugününde, duyarlı (reaktif) tasarım artık sadece bir “artı puan” değil, tema geliştirmenin zorunlu bir gereksinimidir. Dünya genelinde internet trafiğinin yarısından fazlası mobil cihazlardan gelmektedir ve duyarlı tasarıma sahip olmayan bir tema, kullanıcı deneyimini ciddi şekilde bozar ve web sitelerinin mobil cihazlardaki arama motoru sıralamalarını olumsuz etkiler.

CSS medya sorguları gibi teknolojileri kullanmalısınız ki, temanızın düzeni farklı ekran boyutlarına uyum sağlasın ve masaüstü bilgisayarlardan akıllı telefonlara kadar her cihazda iyi bir kullanıcı deneyimi sunsun. Birçok modern CSS çerçevesi (örneğin Tailwind CSS), yanıt veren (responsive) arayüzlerin hızlı bir şekilde oluşturulmasına da olanak tanır.

Kullanıcılar, temamı arka planda nasıl özelleştirebilirler?

Kullanıcılara arka planda özelleştirme seçenekleri sunmak, esas olarak WordPress’in “Özelleştirici” (Customizer) API’si aracılığıyla gerçekleştirilir. Bunu yapabilirsiniz…functions.phpÇince'de kullanılır.$wp_customize->add_setting()和$wp_customize->add_control()Yapılandırmaları ve kontrolleri eklemek için yöntemler.

Örneğin, kullanıcıların web sitesi başlığının rengini değiştirmesine olanak tanıyan bir seçenek ekleyebilirsiniz. Bu ayarların değerleri, tema şablonu dosyasında belirlenebilir.get_theme_mod()Fonksiyon, temanın görünümünü alır ve çıktı olarak sunar. Bu da kullanıcılara, kodu değiştirmeye gerek kalmadan temanın görünümünü kişiselleştirme imkanı sağlar; bu da temanın kullanım kolaylığını ve profesyonelliğini önemli ölçüde artırı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: