WordPress tema geliştirmeyi adım adım öğrenin: Sıfırdan özel bir tema oluşturun.

Kendi web sitelerini derinlemesine özelleştirmek isteyen birçok WordPress kullanıcısı için, mevcut temaların sınırlamaları giderek daha belirgin hale geliyor. WordPress temalarının geliştirilmesini öğrenmek, sitenizi tamamen kendi tasarım fikirlerinize ve işlevsel ihtiyaçlarınıza göre oluşturmanızı sağlar; bu da görünümden etkileşime kadar her yönüyle tam bir özerklik anlamına gelir. Bu, sadece son derece değerli bir beceri değil, aynı zamanda WordPress’in temel çalışma prensiplerini anlamanın da mükemmel bir yoludur. Bu makale, en temel dosya yapısından başlayarak, işlevsel olarak eksiksiz bir özel tema oluşturmanızı adım adım yönlendirecektir.

Geliştirme Ortamı ve Temel Dosya Yapısı

Kod yazmaya başlamadan önce, verimli ve izole bir geliştirme ortamı oluşturmak çok önemlidir. Local by Flywheel, XAMPP veya MAMP gibi yerel sunucu ortamı yazılımlarını kullanmanızı öneririz. Bu araçlar, PHP, MySQL ve Apache/Nginx içeren bir WordPress çalıştırma ortamını kendi bilgisayarınızda hızlı bir şekilde kurmanıza olanak tanır ve bu da çevrimiçi web sitenizi etkilemez.

En temel WordPress temasıdır ve sistemin tarafından tanınabilmesi için yalnızca iki dosyaya ihtiyaç vardır. Bu dosyalar, WordPress’in kurulum dizininizde bulunmaktadır. <code>wp-content/themes</code> Dosya içinde, örneğin “Yeni_Klasör” adında yeni bir klasör oluşturun. <code>my-custom-theme</code>Bu klasörde aşağıdaki iki temel dosyayı oluşturmanız gerekiyor.

Tavsiye edilen okuma WordPress’ın Çekirdek Mimarisi ve Çalışma Prensibi。

İlk dosya bir stil şeması dosyasıdır. style.cssBu dosya yalnızca CSS stillerini saklamak için kullanılmaz; aynı zamanda üst kısmındaki yorum bloğu, temanın “kimlik kartı” niteliğindedir ve temanın adı, yazarı, açıklaması gibi meta bilgileri içerir.

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%).

Sayfaya erişin.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习而创建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

İkinci gerekli dosya şudur: index.phpBu dosya başlangıçta boş olsa bile, WordPress temanızı tanıyabilir. Ancak genellikle, web sitesi içeriğini göstermek için buraya temel PHP kodları ve HTML yapılarını yerleştiririz. Bu aşamadan itibaren, temanız WordPress arayüzündeki “Görünüm” -> “Temalar” listesinde görünmeye başlar ve etkinleştirilebilir hale gelir. Ancak, kullanışlı bir tema için tam sayfa yapısını oluşturmak için daha fazla şablon dosyasına ihtiyaç vardır.

Çekirdek şablon dosyaları ve hiyerarşik ilişkileri

WordPress, belirli bir sayfa isteği için hangi şablon dosyasının içeriği görüntülemek için kullanılacağını belirlemek için bir şablon hiyerarşisi sistemi kullanır. Bu hiyerarşiyi anlamak, tema geliştirmenin temelidir. Sistem, en spesifik şablon dosyasından başlayarak arama yapar; eğer bu dosya mevcut değilse, daha genel bir dosyaya geçer ve son olarak en genel şablon dosyasına geri döner. index.php。

Sayfanın farklı bölümleri genellikle farklı şablon dosyaları tarafından oluşturulur. Web sitesinin tüm sayfalarının ortak başlık ve alt kısımları ayrı ayrı yerleştirilebilir. header.php 和 footer.php Önce burada, ardından diğer şablonlarda bunu kullanarak… get_header() 和 get_footer() Fonksiyonların tanıtımı. Kenar çubuğu buraya yerleştirilebilir. sidebar.php Orada, “用” kelimesi kullanılmıştır. get_sidebar() Tanıtım.

Makale içeriği için en önemli şablon dosyası… single.phpBu, tek bir blog makalesini göstermek için kullanılır. Statik sayfalar için ise başka bir yöntem kullanılır. page.phpMakale listesini (örneğin blog ana sayfası, kategori dizini sayfası, etiket sayfası vb.) gösteren şablonlar ise… archive.phpWeb sitesinin ana sayfası oldukça özeldir; WordPress, bu sayfayı öncelikli olarak bulmaya çalışır. front-page.phpEğer mevcut değilse, o zaman kullanılır. home.phpVe en sonunda… index.php。

Tavsiye edilen okuma WordPress Tema Geliştirme: Başlangıçtan Uygulamaya Kadar Kapsamlı Rehber ve Pratik Eğitim Kursu。

Bu şablon dosyalarını mantıklı bir şekilde bölerek, kodun en üst düzeyde yeniden kullanımını ve verimli bir şekilde yönetilmesini sağlayabilirsiniz. Örneğin, tipik bir… single.php Yapı aşağıdaki gibi olabilir:

<?php get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        while ( have_posts() ) :
            the_post();
            // 加载专门用于文章内容的模板部分
            get_template_part( 'template-parts/content', 'single' );
            // 显示文章导航（上一篇/下一篇）
            the_post_navigation();
            // 如果评论开放，则加载评论模板
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;
        endwhile;
        ?>
    </main>
</div>

Konu özellikleri ve WordPress döngüleri

WordPress’in güçlü yanı, esnek içerik yönetim sistemidir. Temalar ile içerik arasındaki etkileşimin temel mekanizması ise “döngü” (loop) adı verilen bir yapıdır. Döngü, PHP kodundan oluşur ve mevcut sayfada gösterilecek makalelerin olup olmadığını kontrol eder. Eğer makale varsa, bu makaleler döngü içinde tek tek incelenir ve her makalenin içeriği, belirli şablon etiketleri kullanılarak sayfada görüntülenir.

En temel döngü yapısı aşağıda gösterilmiştir. Bu yapı, şu şekilde kullanılır: have_posts() 和 the_post() Döngüyü kontrol etmek ve ilerletmek için fonksiyonlar 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

Sayfaya erişin.

<h2><?php the_title(); ?></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    
    <p>Hiçbir makale bulunamadı.</p>
<?php endif; ?>

Döngü içinde, şunlar gibi şeyler kullanabilirsiniz: the_title()、the_content()、the_excerpt()、the_permalink()、the_post_thumbnail() Şu anki makalenin çeşitli bilgilerini çıkarmak için şablon etiketlerini kullanın. Bu fonksiyonlar içeriği otomatik olarak ekrana yazdırır (Echo). Eğer bu değerleri PHP mantığı için kullanmanız gerekiyorsa, ilgili “get_” fonksiyonlarını kullanın. Örneğin: get_the_title()。

İçeriği göstermenin yanı sıra, bir tema ayrıca şunları da yapmalıdır: functions.php Bu dosya, temanın işlevlerini genişletmek için kullanılır. Bu dosya, özel özellikler eklemenize, menüler ve kenar çubuğu araç çubuklarına izin vermenize, stil şemaları ve betik dosyaları dahil etmenize olanak tanır. Örneğin, aşağıdaki kod bir temaya navigasyon menüsü desteği ve bir kenar çubuğu araç çubuğu ekler ve stil şemalarını doğru bir şekilde içe aktarır.

__( '主导航菜单', 'my-custom-theme' ),
            'footer'  => __( '页脚菜单', 'my-custom-theme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_menus' );

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

// 引入主题样式表
function mytheme_enqueue_styles() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles' );
?&gt;

Stil Tasarımı, responsive (uyumlu mobil ve tablet cihazlar için) ve Performans Optimizasyonu

Mükemmel bir modern tema, çeşitli boyutlardaki cihazlarda iyi bir gezinme deneyimi sunabilen ve duyarlı (responsive) olmalıdır. Bu, esas olarak CSS medya sorguları (CSS media queries) aracılığıyla sağlanır. Mobil öncelikli (mobile-first) bir yaklaşım benimseyebilirsiniz; önce küçük ekranlı cihazlar için temel stilleri oluşturun, ardından medya sorgularını kullanarak büyük ekranlar için gerekli stilleri kademeli olarak ekleyin veya mevcut stilleri değiştirin.

Tavsiye edilen okuma Profesyonel bir web sitesi oluşturmak: Sıfırdan başlayarak özelleştirilmiş bir WordPress teması geliştirmek için kapsamlı bir rehber。

在编写 CSS 时，建议遵循 BEM（块、元素、修饰符）等命名方法论，以保持样式代码的组织性和可维护性。同时，充分利用 WordPress 生成的丰富 body class 和 post class，可以为不同页面类型或文章类别精准地添加样式。例如，body_class() Fonksiyon şunun için kullanılacaktır: <body> Etiket, bir dizi sınıf adı çıkarır, örneğin: .home、.page、.single vs.

Performans, kullanıcı deneyiminin önemli bir parçasıdır. Stil şemaları ve JavaScript dosyaları için mutlaka uygun formatları ve standartları kullanın. wp_enqueue_style() 和 wp_enqueue_script() Fonksiyon çalışıyor. functions.php Bunlar doğru bir şekilde kuyruğa eklenmelidir. Bu, WordPress’in bağımlılıkları yönetmesine ve eklentilerin ile alt temaların üzerine yazılmasını kolaylaştırır. Resimler için ise temanın bunları desteklediğinden emin olunmalıdır. add_theme_support(‘post-thumbnails’)Ayrıca, kullanıcıları uygun boyutlarda resim yüklemeye teşvik edin ve gerekirse “lazy loading” (gecikmeli yükleme) teknolojisinden yararlanmayı düşünebilirsiniz.

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.

Sayfaya erişin.

Ayrıca, temalara temel işlevsel bloklar ve Gutenberg editörüne iyi destek eklemek, 2026 yılı itibarıyla WordPress geliştirmesinde standart bir uygulama haline gelmiştir. functions.php Ekleme: add_theme_support(‘wp-block-styles’) 和 add_theme_support(‘responsive-embeds’) Bu tür beyanlar, temanızın modern editörlerle daha iyi entegre olmasını sağlayabilir.

Özetle.

WordPress tema geliştirme, basitten karmaşığa doğru, adım adım ilerleyen bir süreçtir. İki temel dosya oluşturarak başlayarak, şablon yapılarını derinlemesine anlamaya ve WordPress döngüleri ile eklenti sistemini ustaca kullanmaya kadar her adım, esnek, güçlü ve verimli bir web sitesi oluşturmanın yolları hakkında daha fazla bilgi edinmenizi sağlar. Önemli olan, WordPress’in sayfaları şablon dosyaları aracılığıyla nasıl birleştirdiğini ve bu sürecin nasıl işlediğini anlamaktır. functions.php Güvenli ve yerleşik fonksiyonlar, sistemle etkileşim kurmanıza olanak tanır. responsive tasarım, performans optimizasyonu ve kod organizasyonu gibi en iyi uygulamaları benimseyerek, sadece görünüşüyle değil, aynı zamanda stabil, hızlı ve kolayca bakımı yapılabilecek profesyonel seviyede temalar oluşturabilirsiniz.

Sıkça Sorulan Sorular.

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

Kapsamlı bir özelliklere sahip bir WordPress teması geliştirmek için üç temel programlama dili bilmek gerekmektedir. İlk olarak PHP gelir; bu, WordPress’in sunucu tarafı programlama dili olup mantığı işler, fonksiyonları çağırır, döngüler çalıştırır ve verilerle işlem yapar. İkincisi CSS’tir (ve gerekirse Sass/Less ön işlemcileri); bu dil, temanın görsel görünümünü kontrol eder; düzeni, renkleri, yazı tiplerini ve duyarlı tasarımı içerir. Son olarak HTML kullanılır; web sayfalarının temel iskeletini ve içerik yapısını oluşturmak için kullanılır. Ayrıca, temanın etkileşimli olması için belirli düzeyde JavaScript (ve muhtemelen jQuery) bilgisi de gereklidir.

Konumu nasıl çok dilli çeviriye destekli hale getirebilirim?

Bir temanızın çok dilli (uluslararasılaştırma ve yerelleştirme) olmasını sağlamak için, kodunuzda metin alanları için gerekli hazırlıkları yapmanız ve ilgili araçları kullanarak çeviri dosyaları oluşturmanız gerekmektedir. Öncelikle, style.css Açıklama blokları ve… functions.php Çin'de load_theme_textdomain() Fonksiyon, Text Domain’ı (metin alanını) doğru bir şekilde ayarlar (bu genellikle tema klasör adıyla aynıdır). Daha sonra, temadaki çevrilmeye ihtiyaç duyan tüm metinlerin yerlerinde, WordPress’in çeviri fonksiyonlarını kullanarak bu metinleri sararsınız. Örneğin: __(‘文本’, ‘my-custom-theme’) 或 _e(‘文本’, ‘my-custom-theme’)Geliştirme işlemi tamamlandıktan sonra, Poedit gibi bir yazılım kullanılarak tema dosyalarındaki çevrilebilir metinler taranabilir ve çeviri için gerekli veriler oluşturulabilir. .pot Şablon dosyasını kullanarak farklı diller için gerekli içerikleri oluşturabilirsiniz. .po 和 .mo Dosya.

Sub-topic ve parent-topic arasındaki fark nedir ve bunlar ne zaman kullanılır?

Alt tema, bir üst temaya bağlı olup bağımsız olarak çalışan bir temadır. Üst temanın tüm özelliklerini, stillerini ve şablon dosyalarını devralır; ancak üst temanın kodunu doğrudan değiştirmeden, stil şemaları, şablon dosyaları veya fonksiyonlar gibi belirli bölümlerini güvenli bir şekilde değiştirmenize olanak tanır. Bunun en büyük avantajı, üst tema güncellendiğinde alt temada yaptığınız özelleştirmelerin kaybolmamasıdır. Mevcut bir temayı (özellikle popüler temaları veya framework temalarını) derinlemesine özelleştirmeniz gerektiğinde, geliştirme amacıyla alt tema oluşturmanız şiddetle tavsiye edilir. Bir alt tema oluşturmak için yalnızca gerekli açıklama bilgilerini içeren bir dosya yeterlidir. style.css Dosyayı alın ve içinde… Template: Belirtilen üst konunun klasör adını beyan eder.

Konu geliştirme işlemi tamamlandıktan sonra, nasıl WordPress resmi kataloğuna yüklenir?

Bir temayı WordPress.org’un resmi tema dizinine yayınlamak için sıkı bir inceleme sürecinden geçmesi gerekmektedir. Öncelikle, temanızın GNU GPL lisansına uygun olması gerekmektedir. Ayrıca, kodunuz WordPress’in kodlama standartlarına uygun olmalı ve iyi bir güvenlik, erişilebilirlik ve kod kalitesine sahip olmalıdır. Temanızda sabitlenmiş bağlantılar bulunmamalı, şablon hiyerarşisi kurallarına uygun olmalı, uluslararasılaştırma işlemleri doğru bir şekilde yapılmış olmalı ve artık kullanılmayan fonksiyonlar kullanılmamalıdır. Göndermeden önce, Theme Check eklentisini kullanarak temanızın ön incelemesini yapmanız önerilir. Daha sonra, temanızın sıkıştırılmış dosyasını WordPress.org web sitesine gönderin; inceleme ekibi temanızı manuel olarak inceleyecektir. İncelemeden geçtikten sonra, temanız dünya genelindeki kullanıcılar tarafından aranabilir, indirilebilir ve kullanılabilir hale gelecektir.