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

Sıfırdan Bir: WordPress Tema Geliştirme Kapsamlı Rehberi ve Pratik Eğitimi

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

WordPress Tema Geliştirme Temelleri ve Ortam Kurulumu

WordPress tema geliştirmeye başlamak için öncelikle temel kavramları anlamanız gerekmektedir. Bir WordPress teması, esasen stil şablonları, tema dosyaları, resimler ve JavaScript dosyalarından oluşan bir dizi dosyadır ve bunlar birlikte web sitesinin görünümünü ve işlevlerini belirler. Bir tema geliştirmek, WordPress’e veritabanındaki içeriği ziyaretçilere nasıl sunacağını söyleyen eksiksiz bir kural seti oluşturduğunuz anlamına gelir.

Geliştirme öncesindeki ortam hazırlığı çok önemlidir. Yerel bir geliştirme ortamına ihtiyacınız var ve bu, XAMPP, MAMP, Local by Flywheel veya Docker gibi araçları kurarak kolayca sağlanabilir. Yerel ortam, çevrimiçi web sitesini etkilemeden geliştirme, test ve hata ayıklama işlemlerini yapmanıza olanak tanır. Ayrıca, Visual Studio Code,PhpStorm veya Sublime Text gibi etkili bir kod editörü de şarttır; bu editörler sözdizimi vurgulama, kod önerileri ve hata ayıklama özellikleri sunarak geliştirme verimliliğinizi büyük ölçüde artırır.

Ardından, konuların dizin yapısını anlamanız gerekiyor. Her konu belirli bir yerde bulunmaktadır./wp-content/themes/Katalogun içinde, ayrı bir klasör olarak bulunur. En temel temalar sadece iki dosyaya ihtiyaç duyar:style.css和index.phpİçeride.style.cssBaşlık yorumlarında, konunun meta bilgilerini sağlamanız gerekmektedir.

Tavsiye edilen okuma WordPress Özel Alanlarının Derinlemesine Analizi: Başlangıçtan İleri Düzey Uygulama Pratiklerine。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习WordPress主题开发的简单主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Bu…style.cssDosyalar sadece stil şablonları değil; aynı zamanda temanın “kimlik kartı”dır. WordPress, bu notları okuyarak arka planda temanızı tanır ve görüntüler.

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.

Çekirdek şablon dosyası ve tema hiyerarşisi

WordPress, belirli bir sayfa isteği için hangi şablon dosyasının içeriği görüntülemek için kullanılacağına karar vermek için “Şablon Hiyerarşisi” adında bir akıllı sistem kullanır. Bu hiyerarşiyi anlamak, tema geliştirmenin anahtarıdır.

En temel şablon dosyasıdır.index.phpTüm sayfalar için nihai yedek şablon olarak kullanılır. WordPress daha spesifik bir şablon bulamadığında bu şablonu kullanır. Ana sayfa genellikle…front-page.php或home.phpKontrol. Makaleler için tek sayfa tercih edilir.single.phpBelirli makale türleri için, örneğin “ürün” için, WordPress ilgili içeriği bulmaya çalışır.single-product.phpSayfa Kullanımıpage.phpEğer sayfada özelleştirilmiş bir şablon varsa, bu şablon kullanılacaktır.page-{slug}.php或page-{id}.phpMakale arşiv sayfaları (kategoriler, etiketler, yazarlar, tarih arşivlemesi gibi) buna karşılık gelir.archive.phpve bunun daha spesifik varyantları, örneğincategory.php、tag.phpvs.

Başlık ve Alt Bölüm Şablonları

DRY (Don’t Repeat Yourself – Kendini Tekrarlama) ilkesine uymak için, WordPress temaları şu yaklaşımı benimser:get_header()、get_footer()和get_sidebar()Ortak kısımları dahil etmek için `include` gibi fonksiyonları kullanmanız gerekiyor. Bu, ortak kod parçalarını oluşturmanız gerektiği anlamına gelir.header.php和footer.phpDosya.

header.phpDosyalar genellikle HTML belge başlıklarını, meta etiketlerini, stil şemalarına ve betiklere yönelik bağlantıları, ayrıca web sitesinin üst navigasyon bölgesini içerir. En önemlisi, içinde bunların hepsinin bulunması gerekir.wp_head()Fonksiyon çağrısı; bu fonksiyon, WordPress çekirdeğinin, eklentilerin ve temaların kendilerinin kullanımına izin verir.<head>Gerekli kodun bir kısmını ekleyin.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Kendi Web Sitenizi Oluşturun。

footer.phpDosya, web sitesinin alt kısmındaki bilgileri, betik referanslarını vb. içermekte ve…wp_footer()Fonksiyon sona erdi; bu durum…wp_head()Benzer bir işlev görür ve sayfanın alt kısmına kod enjekte etmek için kullanılır.

Şablon dosyasında, bunları şu şekilde dahil edebilirsiniz:

<?php get_header(); ?>

<!-- 主内容区 -->

<?php get_footer(); ?>

Konu özellikleri ve WordPress döngüleri

Bir temanın işlevleri yalnızca görünümle sınırlı değildir.functions.phpBu dosya sayesinde temanıza yeni özellikler ekleyebilir, belirli özellikleri etkinleştirebilir ve eklentiler entegre edebilirsiniz. Bu dosya, tema etkinleştirildiğinde otomatik olarak yüklenir ve temanıza özel bir eklenti gibi işlev görü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.

理解WordPress循环

WordPress döngüleri, tema geliştirmenin temel mantığıdır. Bu, mevcut sayfada gösterilmesi gereken makalelerin (veya gönderilerin) olup olmadığını kontrol eden bir PHP kod parçasıdır; eğer varsa, her bir makaleyi döngü içinde tek tek inceleyip görüntüler. Temel döngü yapısı şu şekildedir:

<!-- 在这里输出文章内容 -->
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    
    <p>Hiçbir makale bulunamadı.</p>
<?php endif; ?>

Döngü içinde, makale bilgilerini çıkarmak için bir dizi şablon etiketi kullanabilirsiniz, örneğin:the_title()Çıkış Başlığı:the_content()Lütfen içeriğin tamamını sağlayın, böylece çeviriyi yapabilirim. Eğer metin parçaları varsa, bunları da ayrı ayrı belirtin.the_excerpt()Çıktı özeti,the_permalink()Makale bağlantısını alın.the_post_thumbnail()Özel görüntüleri çıkarın.

Kayıt menüsü ve yan menü.

Modern temalar genellikle kullanıcıların arka planda menü ve eklentileri özelleştirmesine olanak tanır. Bunun için…functions.phpBurada kayıt olun.

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

Kullanın.register_nav_menus()Bir fonksiyon, bir veya daha fazla menü öğesini kaydedebilir:

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

Daha sonra, şablon dosyasında (örneğin…)header.php) içinde kullanılırwp_nav_menu()Menüyü göstermek 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.

Aynı şekilde, kenar çubuğu (eklenti bölgesi) da…register_sidebar()Fonksiyon Kaydı:

function mytheme_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', 'mytheme_widgets_init' );

Şablonda, kullanın.dynamic_sidebar( 'sidebar-1' )Bu bölgeyi çağırmak için…

Stil, betik ve tema özelleştiricilerinin entegrasyonu

Konuyu daha profesyonel ve kullanıcı dostu hale getirmek için, stil ve betiklerin yüklenmesinin doğru bir şekilde yönetilmesi gerekmektedir. Ayrıca, WordPress’in kendi özelleştirme araçlarının mümkün olduğunca entegre edilmesi önemlidir.

Stil ve betiklerin sırayla yüklenmesi

Doğru yöntem, bunu kullanmaktır.wp_enqueue_style()和wp_enqueue_script()Fonksiyonlar, onları ekleyin.functions.phpBu, bağımlılıkların doğru bir şekilde yönetilmesini sağlar ve tekrarlanan yüklemelerin önlenmesine yardımcı olur.

function mytheme_enqueue_assets() {
    // 主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );

// 谷歌字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );

// 主JavaScript文件
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

Entegre Tema Özelleştirici

WordPress’ın özelleştirme araçları, kullanıcıların tema ayarlarını gerçek zamanlı bir önizleme modunda değiştirmesine olanak tanır.$wp_customizeNesnelere ayarlar ve kontroller ekleyebilirsiniz.

Örneğin, bir site başlık rengi seçeneği ekleyin:

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置（存储在数据库中）
    $wp_customize->add_setting( 'header_color', array(
        'default'           => '#333333',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

// 添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label'    => __( '页眉颜色', 'my-first-theme' ),
        'section'  => 'colors',
        'settings' => 'header_color',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Sonra, senin…style.cssVeya dinamik olarak üretilen stillerde bu değeri kullanın:

function mytheme_customizer_css() {
    ?>
    <style type="text/css">
        .site-header {
            background-color: <?php echo esc_attr( get_theme_mod( 'header_color', '#333333' ) ); ?>;
        }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customizer_css' );

Özetle.

WordPress tema geliştirme, tasarımı ve programlamayı bir araya getiren ilginç bir beceridir. Bu süreç, çekirdek dosyalar (örneğin…) hakkındaki bilgilerle başlar.style.css和index.phpBu metnin tamamını çevirmek için daha fazla bilgiye ihtiyacım var, özellikle de hangi konular hakkında olduğu ve hangi kısımların açıklanması gerektiği konusunda. Lütfen metnin devamını sağlayın veya daha spesifik sorular sorun, böylece size daha doğru bir çeviri yapabilirim.functions.phpWordPress’in güçlü özellikleri arasında yer alır. Şablon dosyalarını doğru bir şekilde düzenleyerek, şablon etiketlerini kullanarak, menü ve eklenti alanlarını yöneterek ve kaynakları sırayla yükleyerek yapısal olarak berrak ve performans açısından iyi temalar oluşturabilirsiniz. Daha da ileri giderek, tema özelleştiricilerini entegre ederek son kullanıcılara sezgisel bir özelleştirme deneyimi sunabilirsiniz. Bu temel bilgileri öğrendikten sonra, kendi tasarımlarınızı işlevsel bir WordPress temasına dönüştürebilir ve daha gelişmiş tema yapıları (örneğin Underscores veya Genesis) ile Block temalarının geliştirilmesi için sağlam bir temel oluşturabilirsiniz.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için PHP’ye hakim olmak gerekir mi?

Uzman seviyesine ulaşmanız gerekmesese de, sağlam bir PHP temeli şarttır. PHP dilbilgisini, değişkenleri, fonksiyonları, döngüleri ve koşullu ifadeleri anlamanız gerekmektedir; çünkü WordPress’in çekirdeği ve tema şablon dosyaları PHP ile yazılmıştır. Aynı zamanda, HTML, CSS ve temel JavaScript konularında da iyi bir bilgiye sahip olmanız önemlidir.

Nasıl temamı WordPress’in resmi standartlarına uygun hale getirebilirim?

Temanızın standartlara uygun olması ve WordPress resmi tema kataloğuna alınabilmesi için “WordPress Tema Geliştirme Kılavuzu” ile “Tema İnceleme Gereklilikleri”ne uymanız gerekmektedir. Bu gereklilikler arasında güvenli kodlama uygulamalarının kullanılması, uluslararasılaştırma için hazırlıkların yapılması (metin alanları ve çeviri fonksiyonlarının kullanılması), duyarlı (responsive) tasarımın sağlanması, temanın kritik işlevlerinin doğrudan içine kodlanmaması (alt temalar veya eklentilerin kullanılması önerilir) ve resmi olarak sağlanan Theme Check eklentisi ile testlerin yapılması yer almaktadır.

Neden temamın değişikliğini yeniledikten sonra göremiyorum?

Bu durum genellikle tarayıcı önbelleği veya WordPress’in önbellekleme mekanizması nedeniyle olur. Öncelikle, aynı anda şu tuşlara basmayı deneyin:Ctrl + F5(Windows/Linux) veyaCmd + Shift + R(Mac) Tarayıcı önbelleğini temizlemek için “sert yenileme” (hard refresh) yapın. Sorun hala devam ediyorsa, yerel geliştirme ortamında olduğunuzdan emin olun ve önbellek eklentilerinin yüklü olup olmadığını kontrol edin; bu eklentileri geçici olarak devre dışı bırakmayı deneyin. Son olarak, değiştirdiğinizin doğru şablon dosyası olduğundan ve dosyanın başarıyla kaydedildiğinden emin olun.

Alt konu (subtopic) ve üst konu (parent topic) arasındaki fark nedir? Ne zaman kullanılırlar?

Ana tema, tam özelliklere sahip ve bağımsız bir temadır. Alt tema ise ana temaya bağımlıdır ve yalnızca birkaç dosya içerir (en az bir dosya gereklidir).style.cssAlt temalar, üst temanın stillerini ve özelliklerini örtmek veya genişletmek için kullanılır. Mevcut bir temayı özelleştirmek istediğinizde, ancak üst tema güncellendiğinde bu değişikliklerin kaybolmasını istemediğinizde bir alt tema oluşturmalısınız. Bu, temaları yükseltmek ve özelleştirmek için en iyi uygulamadır.

Kendi temama Gutenberg editörü için tam destek nasıl eklerim?

Gutenberg editörünü daha iyi desteklemek için, şunları yapmanız gerekiyor:functions.phpÇince'de kullanılır.add_theme_support()Bir fonksiyon, bir dizi özelliği tanımlar. Örneğin, eklemek…align-wide和align-fullDesteklenen özellikler arasında özelleştirilebilir renk paletleri, gradyan arka planlar ve yazı tipi boyutu kontrolü bulunmaktadır. Ayrıca, makale ve sayfa düzenleyicileri için ayrı stil şemaları oluşturulmuş ve bunlar kullanılmaktadır.add_editor_style()Bunu ekleyin. Daha derinlemesine özelleştirmeler için, özel bloklar oluşturmayı öğrenmeniz gerekebilir.

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: