WordPress tema geliştirmeye yeni başlayanlar için tam bir rehber: ilk temanızı sıfırdan oluşturma.

Ortam hazırlığı ve temel kavramlar.

Kod yazmaya başlamadan önce, uygun bir yerel geliştirme ortamına ihtiyacınız var. Local by Flywheel, XAMPP veya MAMP gibi entegre yerel sunucu yazılım paketlerini kullanmanız önerilir. Yerel sitenizde, WordPress’in temel dosyaları zaten yüklü olmalıdır.

Herhangi bir WordPress teması, iki temel dosyayı içermelidir:style.css 和 index.php。style.css Sadece bir stil şeması değil; aynı zamanda bir temanın “kimlik kartı”dır. Bu kimlik kartı, WordPress’e temanla ilgili bilgileri bir özel dosya başlığı (Theme Header) aracılığıyla iletilir.index.php Bu, temanın varsayılan şablon dosyasıdır ve özel bir şablon belirtilmemiş tüm sayfa isteklerini işler.

Tipik bir tema, katalog yapısında belirgin bir hiyerarşi izler. Çekirdek şablon dosyaları genellikle temanın kök dizininde yer alırken, CSS, JavaScript ve görsel kaynaklar ayrı ayrı belirlenen dizinlerde saklanır. /css、/js 和 /images Böyle bir alt katalogda… Daha karmaşık konular için ise muhtemelen başka şeyler de göreceksiniz. /template-parts Katalog, yeniden kullanılabilir şablon parçalarını saklamak için kullanılır./inc Katalog, işlevsel geliştirmeler içeren dosyaların saklanması için kullanılır.

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Sıfırdan Başlayarak Özel Şablonlar Oluşturma。

WordPress şablon hiyerarşisini anlamak.

WordPress, herhangi bir sayfada hangi şablon dosyasının kullanılacağına karar vermek için “Şablon Hiyerarşisi” (Template Hierarchy) adında akıllı bir sistem kullanır. Bu sistem, tema geliştirmenin temel mantığı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.

Örneğin, bir kullanıcı blogun ana sayfasını ziyaret ettiğinde, WordPress öncelikle “” adında bir dosya olup olmadığını arar. front-page.php Belirtilen dosya yoksa, arama işlemine devam eder. home.phpEğer hala yoksa, sonunda varsayılan ayarları kullanmaya geri dönecektir. index.phpBir makale için WordPress’te arama sırası şu şekildedir:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。

Şablon hiyerarşisini anlamak ve iyi kullanmak, farklı türdeki sayfalar (örneğin blog makaleleri, statik sayfalar, kategori arşivleri, arama sonuç sayfaları vb.) için karmaşık koşul kontrolü mantığı yazmadan son derece özelleştirilmiş düzenler ve görünümler oluşturmanıza olanak tanır.

Konu bilgi beyanı.

style.css Dosyanın başında, temanın meta verilerini tanımlamak için kullanılan bir CSS yorumu formatındaki başlık bilgisi bulunmalıdır. Aşağıda, en basit bir örnek verilmiştir:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是我的第一个 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Burada, “Text Domain” uluslararasılaştırma için kullanılır ve çeviri fonksiyonları çağrılırken mutlaka kullanılması gereken bir tanımlayıcıdır. Bu dosyanın baş kısmı, WordPress’in temanızı tanımasını ve etkinleştirmesini sağlayan tek temeldir.

Tavsiye edilen okuma WordPress Tema Geliştirme: Başlangıçtan Uzmanlığa – Kişiselleştirilmiş Web Siteleri Oluşturmanın Temel Rehberi。

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

En önemli şablon dosyasından başlayarak inşa edelim. Öncelikle… index.php Temel yapıyı burada oluşturun. Standart bir şablon dosyası, başlık bölümüne, ana içerik alanına, kenar çubuğuna ve ayak parçasına yönelik referansları içermelidir.

Temel şablon dosyaları genellikle aşağıdaki WordPress çekirdek fonksiyon çağrılarını içerir:get_header()、get_footer()、get_sidebar() çok get_template_part()Bu fonksiyonlar, sayfa yapısını modüler hale getirmek için ilgili şablon dosyalarını içe aktarır.

Başlık şablonu oluşturun.

header.php Dosya, her sayfanın üst kısmında görünecek içeriği içermektedir. En azından HTML5 belge türü beyanını (document type declaration) içermelidir. <!DOCTYPE html>、<head> Bölge ve sayfa içeriğinin başladığı yer… <body> 及 <header> Etiketler.

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.

在 <head> Bu bölgede, kullanmanın son derece önemli olduğu bir şey var. wp_head() Kancalar (Hooks). Bu kancalar, WordPress çekirdeğinin, eklentilerin ve temanızın kendisinin sayfa başlığına gerekli kodları eklemesine olanak tanır; örneğin stil şablonu bağlantıları, meta etiketler ve betikler. Basit bir başlık şablonu örneği:

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

body_class() Fonksiyon, mevcut sayfa türüne dayalı bir dizi CSS sınıf adı çıkarır ve bu da stil kontrolü açısından büyük bir kolaylık sağlar.

Ana döngüyü ve içerik gösterimini oluşturun.

WordPress, mevcut sorgu sonucunda elde edilen makale listesini göstermek için “The Loop” adı verilen bir mekanizma kullanır. Bu döngü, şablon dosyalarının en temel ve kritik kısmıdır ve genellikle şablonların başında yer alır. index.php、single.php 或 archive.php Orta.

Tavsiye edilen okuma WordPress Tema Geliştirme Konusunda Uzmanlaşın: Sıfırdan Başlayarak Kapsamlı Bir Kurulum ve Uygulama Rehberi。

Tipik bir ana döngü yapısı şu şekildedir:

<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>
    
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

Döngü içinde, “the_” ile başlayan bir dizi şablon etiketi kullanabilirsiniz, örneğin: the_title()、the_content()、the_excerpt() 和 the_post_thumbnail()Makalenin çeşitli bölümlerini çıktı olarak vermek 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.

Sayfaya erişin.

Stil ve özellikler ekleyin.

Konunun görsel sunumu CSS tarafından kontrol edilir. Bunun dışında… style.css Stilleri doğrudan kodda yazmanın yanı sıra, daha profesyonel bir yaklaşım da şu şekildedir: functions.php Dosyalar, stil tablolarının ve betiklerin doğru şekilde yüklenmesini sağlamak için sıraya koyulur; bu sayede doğru bağımlılıklar ve yükleme sırası korunur.

functions.php Bu dosya, temanızın “işlevsel geliştiricisidir” (function enhancer). Bir şablon dosyası değil; temanız başlatıldığında otomatik olarak yüklenen bir PHP dosyasıdır ve fonksiyonlar, sınıflar, kancalar (hooks) ve filtreler (filters) tanımlamak için kullanılır.

Stillerin ve betiklerin doğru bir şekilde dahil edilmesi

Kullanman gereken şey… wp_enqueue_style() 和 wp_enqueue_script() Bu fonksiyonlar, kaynakları eklemek için kullanılır. Bu fonksiyonların belirli bir yere (örneğin bir sistemdeki bir klasöre veya modüle) monte edilmesi gerekir. wp_enqueue_scripts Bu işlem, WordPress’in kaynakları daha iyi yönetmesini sağlar; böylece kaynakların tekrar tekrar yüklenmesi ve bağımlılık çatışmaları önlenir.

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载一个自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

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

WordPress’te menüler ve kenar çubukları (araç çubuğu bölümü), öncelikle belirli adımların izlenmesi gerekmektedir. functions.php Önce “kayıt” olmanız gerekiyor; ardından ilgili şablon dosyasında içeriği “gösterebilirsiniz”.

Kullanın. register_nav_menus() Fonksiyon, yemek birimlerinin konumlarını kaydetmek için kullanılır:

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Sonra, header.php Burada kullanabilirsiniz. wp_nav_menu() Bir fonksiyon, ana menüyü göstermek için kullanılır.

Kullanın. register_sidebar() Bir fonksiyon, araç çubuğu bölgesini kaydetmek için kullanılır:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here.', '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_first_theme_widgets_init' );

Daha sonra, sidebar.php Çin'de, kullanılır. dynamic_sidebar() Bu bölgeyi çağırmak için bir fonksiyon kullanılır.

Konu Testi ve Yayını

Geliştirme işlemi tamamlandıktan sonra kapsamlı bir test yapılması gerekmektedir. Bu, temanın farklı tarayıcılarda (Chrome, Firefox, Safari, Edge) ve farklı cihaz boyutlarında (masaüstü, tablet, telefon) nasıl göründüğünün kontrolünü içerir. Tüm bağlantıların çalıştığından, formların doğru şekilde işlediğinden ve menülerin küçük ekranlarda doğru bir şekilde tepki verdiğinden emin olunmalıdır.

Hata ayıklama modunu etkinleştir

Geliştirme sürecinde, WordPress’in hata ayıklama modunun açılması şiddetle tavsiye edilir. Bu, PHP hatalarını, uyarılarını ve bildirimlerini hızlı bir şekilde tespit etmenize yardımcı olacaktır. wp-config.php Dosyada aşağıdaki satırı bulun ve değiştirin:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误

Aç. WP_DEBUG_LOG Hata bilgilerini bir günlük dosyasına kaydedebilirsiniz; bu sayede hassas bilgilerin web sitesi ziyaretçilerine doğrudan ifşa edilmesini önleyebilirsiniz.

Konu standartlarını kontrol edin.

Yayınlamadan veya kullanıma almadan önce, temanızın mümkün olduğunca “WordPress Tema Geliştirme Standartlarına” uyması gerekir. Bunlar arasında, sayfaya çıkarılan tüm verilerin uygun şekilde dönüştürülmesini (ekstraksiyon işlemlerinin yapılmasını) sağlamak da bulunur. esc_html()、esc_url() (Fonksiyonlar gibi), tüm çevrilebilir metinler kullanılmıştır. __() 或 _e() Fonksiyonlar paketlenmiş durumda ve temalı kodda herhangi bir sabit URL bulunmamaktadır.

Resmi “Theme Check” eklentisini kullanarak temanızın uygunluk durumunu otomatik olarak kontrol edebilirsiniz. Bu eklenti kodunuzu tarar ve olası sorunları, güvenlik açıklarını veya standartlara uymayan yerleri belirtir.

Yayınlamaya hazırlanıyor.

Konu geliştirme, test ve inceleme işlemleri tamamlandıktan sonra, onu WordPress.org’un tema kataloğuna yayınlamayı veya bireyler veya müşteriler tarafından kullanılmak üzere paketlemeyi seçebilirsiniz. Yayın paketi yalnızca temanın gerekli klasörlerini ve dosyalarını içermelidir; tüm sürüm kontrolü dosyaları (örneğin…) kaldırılmalıdır. .gitAyrıca, geliştirme araçlarının yapılandırılmasını ve yedek dosyaların oluşturulmasını da unutmayın. Bunun yanı sıra, tüm bu adımların doğru bir şekilde gerçekleştirildiğinden emin olun. style.css Belirtilen konu bilgileri tam ve doğru olup, ayrıca net bir resim de hazırlanmıştır. screenshot.png(1200x900 piksel) Tema küçük resmi olarak kullanılacak.

Özetle.

Oluşturulduğundan beri… style.css 和 index.php Temel klasörlerden başlayarak, şablon yapılarını anlamaya, temel şablon dosyalarını oluşturmaya, içeriği ana döngü aracılığıyla göstermeye ve sonrasında… functions.php Stil eklemek, betikler yazmak ve yeni özellikler geliştirmek; ardından da kapsamlı testler ve standartlaştırma kontrolleri yapmak, temel bir WordPress teması oluşturmanın tam sürecidir. Bu süreç sadece kullanılabilir bir tema elde etmenizi sağlamakla kalmaz, daha da önemlisi, WordPress teması mimarisine dair derin bir anlayış kazanmanızı sağlar. Bu temel üzerine, özel makale türleri, tema özelleştirme arayüzleri (API’ler), blok düzenleyiciler (örneğin Gutenberg) gibi daha gelişmiş özelliklere sahip temaları keşfetmeye devam edebilir ve zamanla profesyonel bir WordPress tema geliştiricisi olabilirsiniz.

Sıkça Sorulan Sorular.

Bir WordPress temasının en az kaç dosyasına ihtiyacı vardır?

WordPress tarafından tanınabilen ve etkinleştirilebilen bir tema en az iki dosyaya ihtiyaç duyar:style.css 和 index.phpBunlar arasında,style.css Doğru konu bilgilerini içeren başlık yorumlarının bulunması zorunludur.

Neden özelleştirdiğim stiller etkili olmuyor?

Bu durum genellikle CSS seçicilerinin yeterli önceliğe sahip olmaması veya stil şemasının doğru şekilde yüklenmemesinden kaynaklanır. Öncelikle, tarayıcının geliştirici araçlarını kullanarak stil şemanı dosyanızın başarıyla yüklendiğinden ve CSS kurallarınızın daha yüksek önceliğe sahip kurallar tarafından örtülmediğinden emin olun. Ayrıca, stil şemanınızı doğru yöntemlerle yüklediğinizden de emin olun. functions.php Çin'deki wp_enqueue_style() Stilleri doğrudan HTML içinde yazmak yerine, bunları yüklemek için bir fonksiyon kullanılır. <link> Etiketler.

Bir temaya özel sayfa şablonu nasıl eklenir?

Yeni bir PHP dosyası oluşturun, örneğin… page-fullwidth.phpBu dosyanın en üst kısmına, şablon adını belirtmek için aşağıdaki PHP yorumunu ekleyin:<?php /* Template Name: 全宽页面 */ ?>Daha sonra, bu dosyada varsayılan sayfa şablonundan farklı bir şeyler yazabilirsiniz. page.php Sayfanın düzeni ve koduyla ilgili bilgiler burada yer almaktadır. Bir sayfa oluştururken veya düzenlerken, “Sayfa Özellikleri” modülünde bu yeni şablonu seçebilirsiniz.

functions.php ve eklentiler (plugins) arasındaki fark nedir?

functions.php Bu, mevcut temanın bir parçasıdır ve işlevi mevcut temayla derinlemesine entegre edilmiştir. Eğer temayı değiştirirseniz…functions.php Bu kod artık etkili olmayacaktır. Ancak eklentiler tarafından sağlanan özellikler temadan bağımsızdır; hangi tema kullanılırsa kullanılsın, eklenti etkinleştirildiği sürece bu özellikler mevcut olacaktır. Genellikle, web sitesinin görsel görünümüyle yakından ilgili özellikler temalara yerleştirilirken, genel ve bağımsız özelliklerin eklenti olarak oluşturulması daha uygundur.

Nasıl temamı çok dilli (uluslararasılaştırılmış) hale getirebilirim?

İki şeyi iyi yapman gerekiyor: Çeviri dosyalarını hazırlamak ve yüklemek. Öncelikle, kodunuzdaki tüm kullanıcıya yönelik metinlerde (örneğin…) ('Read More', 'my-first-theme')Hepsi, şöyle gibi araçlar kullanmak zorundadır. () 或 _e() Bu tür bir çeviri fonksiyonunu paketleyin ve ikinci parametreyi (metin alanını) bununla birleştirin. style.css Belirtilen “Text Domain” ile tutarlıdır. Daha sonra, Poedit gibi araçlar kullanarak oluşturma işlemi yapılır. .pot Şablon dosyası ve buna karşılık gelen çeviriyi oluşturun. .po 和 .mo Dosya. Son olarak, functions.php Çince'de kullanılır. load_theme_textdomain() Bir fonksiyon, çeviri dosyalarını yüklemek için kullanılır.