WordPress tema geliştirme dünyasına adım atmaya hazırlanmak, sıfırdan başlayarak kişiselleştirilmiş web siteleri oluşturma yeteneğine sahip olacağınız anlamına gelir. Bu sadece kodla ilgili değil; aynı zamanda WordPress’in nasıl çalıştığını anlamak ve tasarım fikirlerinizi etkileşimli, dinamik bir web sitesi çerçevesine dönüştürmeyi de içerir. Mevcut temaları kullanmaktan farklı olarak, özel temalar geliştirmek, web sitenizin her bir pikselini ve her bir veri isteğini tamamen kontrol etmenizi sağlar; ister benzersiz bir marka imajı yaratmak için olsun, ister karmaşık iş mantığı ihtiyaçlarını karşılamak için olsun.

WordPress temalarının temel yapısı

Standart bir WordPress teması, belirli dosyaları ve klasörleri içeren bir dizindir. Bu yapıyı anlamak, geliştirmenin temel taşlarından biridir.

Konunun gerekli dosyaları

Her konu için en az iki dosya gereklidir:style.css和index.phpBunlar arasında,style.cssWordPress temasının işlevi, sadece bir stil şemasından (style sheet) çok daha fazladır. Bu tema, temanın meta verilerini tanımlayan bir stil şeması başlığı (style sheet header) içerir ve bu da WordPress’in bir temayı tanımasının anahtarıdır.

Tavsiye edilen okuma WordPress tema geliştirme hakkında ayrıntılı bilgi: Başlangıçtan ileri düzeye kadar kapsamlı bir rehber.。

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

index.phpBu, temanın ana şablon dosyasıdır ve tüm sayfalar için varsayılan yedek şablon olarak kullanılır. Şablon hiyerarşisinin başlangıç noktasıdır.

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.

Şablon hiyerarşisi.

Şablon hiyerarşisi, WordPress’in en güçlü özelliklerinden biridir. Bu yapı, WordPress’in farklı türdeki sayfa istekleri için hangi şablon dosyasını kullanacağını belirler. Örneğin, bir blog makalesine erişildiğinde, WordPress sırasıyla şunları arar:single-post-{id}.php > single-post.php > single.php > singular.php > index.phpBu hiyerarşiyi anladığınızda, belirli şablon dosyaları oluşturarak…page-about.php、archive.php、single.phpFarklı içeriklerin görüntülenme şeklini hassas bir şekilde kontrol etmek için kullanılır.

Organizasyon Temalı Kaynaklar

İyi yapılandırılmış bir konu dizini genellikle şunları içerir:/assetsKlasör (içinde)/css、/js、/imagesAlt klasörler, statik kaynakların saklanması için kullanılır./template-partsKlasörler, başlık gibi yeniden kullanılabilir şablon parçalarını saklamak için kullanılır.header.phpÜst kısım (Header), Alt kısım (Footer)footer.php) ve kenar çubuğu (sidebar.php). Yoluylaget_header()、get_footer()、get_sidebar()Fonksiyonları, ana şablon içinde kolayca dahil edebilirsiniz.

Konu Özellikleri ve Çekirdek API’ler

Konunun işlevleri şu şekilde gerçekleşir:functions.phpBu dosya, “Kontrol Merkezi” temasınız için kullanılır; işlevler eklemek, özellikleri kaydetmek ve WordPress çekirdek API’si ile entegrasyon yapmak amacıyla tasarlanmıştır.

Konu başlangıcı ve betik stilleri

在functions.phpBir konuşmayı kaydetmek için, kayıt düğmesine basmanız gerekir.wp_enqueue_style()和wp_enqueue_script()Bu fonksiyon, CSS ve JavaScript dosyalarını doğru bir şekilde yüklemek için kullanılır. En iyi uygulama, bu işlemleri belirli bir zaman noktasında (örneğin, sayfa yüklendiğinde) gerçekleştirmektir.wp_enqueue_scriptsBu kancada.

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Başlangıçtan Uzmanlığa。

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

Kayıtlı Konu Özellikleri (Registered Topic Features)

WordPress, bir dizi “tema özelliği” sunar ve bunları kullanarak sitenizin görünümünü ve işlevselliğini özelleştirebilirsiniz.add_theme_support()Fonksiyonlar, temanızın bunları desteklediğini belirtmek için kullanılır. Bu, temanın WordPress editörü ve diğer özelliklerle iletişim kurma şeklidir.

function my_theme_setup() {
    // 支持文章和页面的特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持HTML5标记（用于搜索表单、评论表单等）
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 支持全站编辑器的样式
    add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Menü ve Yan Çubuk

geçmek (bir fatura veya teftiş vb.)register_nav_menus()Fonksiyonlar aracılığıyla, temadaki navigasyon menüsü öğelerinin konumlarını tanımlayabilirsiniz; örneğin “ana navigasyon” ve “alt navigasyon” gibi. Daha sonra, kullanıcılar bu menüleri arka plandaki “Görünüm” -> “Menü” bölümünden yönetebilir ve ön tarafta bunları görüntüleyebilirler.wp_nav_menu()Fonksiyon çağrısı.

Küçük Araçlar Bölgesi (kenar çubuğu) ise şu şekilde…register_sidebar()İşlev kaydı. Bu, kullanıcılara arka plan gadget arayüzü üzerinden bu alanlara dinamik olarak içerik eklemelerine olanak tanı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.

Şablon etiketleri ve döngüler

Şablon etiketleri, WordPress’in yerleşik PHP fonksiyonlarıdır ve şablon dosyalarında içeriği dinamik olarak oluşturmak için kullanılır. “Döngüler” ise, WordPress’in veritabanından makaleleri alıp görüntülemek için kullandığı PHP kod yapılarıdır.

Ana döngüyü anlamak

Döngüler, WordPress temalarının temelini oluşturur. Temel yapısı şu şekildedir:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
        <h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </article>
<?php endwhile; else : ?>
    <p><?php esc_html_e( '抱歉，没有找到任何内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>

Bu döngüde,the_title()、the_content()、the_permalink()Bunlar hepsi şablon etiketleridir ve mevcut makaleye karşılık gelen verileri çıkarır.

Tavsiye edilen okuma Derinlemesine Analiz: Tema Geliştirmenin Özü – Sıfırdan Yüksek Verimli Bir WordPress Teması Oluşturmanın Kapsamlı Rehberi。

Koşullu etiketler (Conditional Tags)

Koşullu etiketler (örneğin…)is_home()、is_single()、is_page()、is_archive()Mevcut sayfa türüne göre farklı kodları çalıştırmanıza izin vermek, şablon mantığı kontrolünün gerçekleştirilmesinde kilit bir unsurdur.

<?php if ( is_front_page() && is_home() ) : ?>
    <!-- 这是博客文章索引页，同时被设置为首页 -->
<?php elseif ( is_front_page() ) : ?>
    <!-- 这是静态首页 -->
<?php elseif ( is_home() ) : ?>
    <!-- 这是博客文章索引页（非首页） -->
<?php endif; ?>

İleri Seviye Geliştirme ve Tüm Site Düzenleme

WordPress’in Gutenberg editörünün gelişmesiyle birlikte, tema geliştirme de “tüm siteyi tek bir yerden düzenleme” (full-site editing) dönemine girmiştir. Bu, geliştiricilerin sadece PHP bilgisine sahip olmalarını değil, aynı zamanda blok editörlerine, blok temalara ve web teknolojilerine de aşina olmalarını gerektirir.

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.

Blok teması oluşturun.

Blok temaları, esas olarak HTML blok şablonları ve şablon bileşen dosyaları kullanılarak oluşturulan temalardır ve Gutenberg editörü ile derinlemesine entegre edilmiştir. Bir blok teması en azından şunları içerir:theme.jsonDosyalar (küresel stiller ve ayarlar için kullanılır),templatesKlasör (içindekiler)index.html(Blok tabanlı şablonlar) vepartsKlasör (içindekiler)header.htmlBu dosyalar, HTML ve blok işaretleri (örneğin…) kullanılarak oluşturulmuştur.

LikaCloud

theme.json dosyasını kullanarak genel stil yönetimi yapılır.

theme.jsonDosyalar, blok temalarının temelini oluşturur. Renk paletleri, yazı tipleri, aralıklar gibi stil ayarlarını merkezi bir şekilde tanımlamanıza olanak tanır ve bu ayarlar otomatik olarak blok düzenleyiciyle senkronize olur, böylece kullanıcılara tutarlı bir düzenleme deneyimi sunulur.

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                { "name": "主色", "slug": "primary", "color": "#1e73be" },
                { "name": "次要色", "slug": "secondary", "color": "#81d742" }
            ]
        }
    }
}

Özel bloklar geliştirme

Özgün özellikler sunabilmek için özel bloklar geliştirmeniz gerekebilir. Bu genellikle, @wordpress/create-block aracını kullanarak bir blok eklenti projesini başlatmayı ve ardından bloğun düzenleyicisini ve ön uç render mantığını yazmak için modern JavaScript (React) kullanmayı içerir. Bu, eklenti geliştirmeye daha yakın olsa da, derin özelleştirilebilir özellikler sunan ticari temalar için giderek daha önemli hale gelmektedir.

Özetle.

WordPress tema geliştirme, temel dosya yapısını anlamaktan başlayarak, çekirdek API’lere, şablon sistemlerine derinlemesine girmeye ve sonunda modern blok düzenleyici teknolojilerini benimsemeye kadar süren bir süreçtir. Yeni başlayanların, klasik PHP temaları oluşturarak şablon hiyerarşisini, döngüleri ve diğer temel konuları sağlam bir şekilde öğrenmeleri gerekir.functions.phpKullanımı. Becerilerin gelişmesiyle birlikte, keşifler…theme.jsonBlok temaları kaçınılmaz hale gelecek ve bu sayede daha güçlü, geleceğin standartlarına daha uygun web siteleri oluşturabileceksiniz. Unutmayın ki, iyi bir tema sadece görünüşle ilgili değildir; aynı zamanda kod kalitesi, performans, erişilebilirlik ve kullanıcı deneyiminin bir kombinasyonudur. Resmi kılavuzları ve geliştirici kaynaklarını sürekli öğrenmek, becerilerinizi güncel tutmanın anahtarıdır.

Sıkça Sorulan Sorular.

WordPress tema geliştirmeyi öğrenmek için hangi ön koşul bilgilerine ihtiyaç vardır?

HTML ve CSS temellerine sahip olmanız gerekmektedir; bunlar bir web sayfasının görsel katmanını oluşturmanın temelidir. Aynı zamanda, WordPress’ın çekirdeğinin ve geleneksel temalarının çoğunlukla PHP ile çalıştırıldığı için PHP konusunda da temel bilgilere sahip olmanız önemlidir. JavaScript (özellikle ES6+) konusunda ne kadar çok bilgiye sahipseniz o kadar iyi olur, özellikle özel bloklar geliştirirken veya Gutenberg editörüyle derinlemesine etkileşimde bulunurken.

Geliştirdiğim WordPress temasını nasıl hata ayıklarım?

Öncelikle, 'den emin olun.wp-config.phpDosyada etkinleştirildi.WP_DEBUG和WP_DEBUG_LOGBu, PHP hatalarını ve uyarılarını sayfada göstermek yerine bir günlük dosyasına (log file) kaydeder. İkincisi, HTML yapısını, CSS stilini ve JavaScript hatalarını incelemek için tarayıcının geliştirici araçlarını (Chrome DevTools veya Firefox Developer Tools) kullanın. Karmaşık mantıklar için ise…error_log()Fonksiyon, değişkenin değerini PHP hata günlüğüne yazarak sorunların araştırılmasını sağlar.

Alt konu (subtopic) ve üst konu (parent topic) arasındaki fark nedir? Hangisini kullanmalıyım?

Bir üst tema, tam özelliklere sahip ve bağımsız bir temadır. Alt temalar, üst temanın tüm özelliklerini, stillerini ve şablon dosyalarını devralır ve ayrıca üst temanın bazı dosyalarını güvenli bir şekilde değiştirmenize olanak tanır.style.css、functions.phpBelirli şablon dosyalarını değiştirebilirsiniz; ancak bu, üst temanın temel dosyalarını etkilemez. Bu, üst temayı güncellerken kendi özelleştirmelerinizi korumanın en iyi yöntemidir. Yeni başlayanlar için, mevcut bir üst temanın (örneğin Twenty Twenty serisi) alt temalarını değiştirmek, güvenli ve etkili bir öğrenme yoludur. Tüm tasarımı sıfırdan kontrol etmeniz gerektiğinde ise, bağımsız bir üst tema geliştirebilirsiniz.

Konumun SEO dostu olmasını nasıl sağlayabilirim?

Konu içeriğinizin semantik HTML5 etiketlerini kullandığından emin olun.add_theme_support( 'html5' )), resme eklemek içinaltÖznitelikleri belirtin ve net, hiyerarşik bir başlık yapısı (h1, h2, h3) oluşturun. Konu, temel SEO özelliklerini desteklemelidir; örneğin, içeriğin arama motorları tarafından daha kolay bulunmasını sağlayacak şekilde yapılandırılmalıdır.add_theme_support( 'title-tag' )WordPress’in sayfa başlıklarını otomatik olarak yönetmesini sağlayın ve web sitenizin mobil cihazlarda tamamen uyumlu çalışmasını garanti edin. Ayrıca, kodunuzu sade tutun; resimlerin ve betiklerin yükleme hızını optimize edin, çünkü sayfa yükleme hızı arama motoru sıralamalarında önemli bir faktördür.