WordPress Tema Geliştirme Kılavuzu: Sıfırdan Hayata

Günümüz internet dünyasında, benzersiz ve güçlü özelliklere sahip bir web sitesine sahip olmak son derece önemlidir. WordPress kullanan geliştiriciler için tema geliştirme becerilerine hakim olmak, web sitesinin görünümünü ve işlevlerini tamamen kontrol altına almayı ve hazır temaların sınırlamalarından kurtulmayı sağlar. Bu rehber, ortam kurulumundan temanın web sitesinde kullanıma hazır hale getirilmesine kadar olan tüm süreci sistematik bir şekilde adım adım yönlendirecek ve size özelleştirilmiş WordPress dünyasının kapılarını açacaktır.

WordPress Temalarının Temelleri ve Hazırlık İşlemleri

Kod yazmaya başlamadan önce, WordPress temalarının temel yapısını anlamak ve yerel geliştirme ortamını hazırlamak, başarının ilk adımıdır.

Bir konunun temel bileşenlerini anlamak

En temel bir WordPress teması yalnızca iki dosyaya ihtiyaç duyar:index.php 和 style.css。index.php Bu, ana şablon dosyasıdır. style.css Sadece stilleri içermekle kalmaz, aynı zamanda dosyanın başındaki yorumlar aracılığıyla temanın meta bilgilerini de sağlar; örneğin temanın adı, yazarı, açıklaması vb. Bu, WordPress’in bir klasörün geçerli bir tema olup olmadığını belirlemesinde kilit bir rol oynar.

Tavsiye edilen okuma WordPress tema geliştirme tam rehberi: Sıfırdan özel bir tema oluşturma。

Verimli bir yerel geliştirme ortamı kurmak

Geliştirmelerin yerel olarak yapılmasını şiddetle öneririz. XAMPP, MAMP, Local by Flywheel veya Docker tabanlı ortamları kullanabilirsiniz. Bu sayede çevrimiçi web sitenizi etkilemeden özgürce testler yapabilirsiniz. WordPress’i ortama kurduktan sonra, yapmanız gereken… /wp-content/themes/ Katalog içinde konu dizininizi oluşturun, örneğin: my-custom-theme。

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.

Gerekli tema bilgilerini içeren dosyayı oluşturun.

Öncelikle, konu dizininizde bir klasör oluşturun. style.css Dosyayı açın ve aşağıdakine benzer bir bilgi başlığı (header) girin:

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

Text Domain Uluslararasılaştırma amacıyla kullanılır ve tema klasörünüzün adıyla aynı olmalıdır.

Konunun temel şablon dosyasını oluşturma

Şablon dosyaları, web sitesinin farklı bölümlerindeki içeriklerin nasıl görüntüleneceğini kontrol eder. Şablon hiyerarşisini anlamak, verimli geliştirmenin anahtarıdır.

Temel bir sayfa şablonu oluşturun.

Bunun dışında… index.phpDaha ayrıntılı kontrol sağlamak için adım adım daha spesifik şablon dosyaları oluşturmalısınız. Örneğin, şu adımları izleyebilirsiniz: header.php Web sitesinin üst kısmını (LOGO, navigasyon menüsü vb.) saklamak için bir alan oluşturulmalıdır. footer.php Burada sayfa altı (footer) bilgileri saklanır. Daha sonra… index.php Çince'de kullanılır. get_header(), get_footer() Bu fonksiyonları çağırmak için `wait` gibi fonksiyonları kullanabilirsiniz.
Temel bir index.php Muhtemelen şöyle görünecektir:

Tavsiye edilen okuma WordPress Tema Geliştirme Rehberi: Sıfırdan Başlayarak Özelleştirilmiş Web Siteleri Oluşturma。

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 显示文章内容
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

Şablon hiyerarşisini anlamak ve kullanmak

WordPress, mevcut ziyaret edilen sayfa türüne göre en uygun şablon dosyasını otomatik olarak seçer. Örneğin, tek bir makaleye erişildiğinde, şu sırayla arama yapılır:single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.phpBlog makaleniz için bir başlık oluşturun: single.phpBu sayfa için bir şey oluşturmak gerekirse, örneğin bir başlık, bir metin parçası veya bir görsel ekleyebilirsiniz. Lütfen hangi öğenin oluşturulmasını istediğinizi belirtin. page.phpBu sayede her birinin düzenini ayrı ayrı özelleştirebilirsiniz.

Web sitesi menüsünü kaydetmek ve görüntülemek

Kullanıcıların arka planda navigasyon menüsünü yönetebilmeleri için, şunları yapmanız gerekiyor: functions.php Çince'de kullanılır. register_nav_menus() Fonksiyon kaydı menüsü konumu.

function my_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Daha sonra, header.php İlgili pozisyonlarda bunu kullanın. wp_nav_menu( array( 'theme_location' => 'primary' ) ) Menüyü göstermek için…

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.

Konu özellikleri ile gelişmiş özelliklerin entegrasyonu

geçmek (bir fatura veya teftiş vb.) functions.php Dosyalara çeşitli özellikler ve destekler ekleyerek onları daha güçlü ve kullanışlı hale getirebilirsiniz.

Belirli bir konu için temel işlev desteği ekleyin.

WordPress’in birçok gelişmiş özelliği için desteklerinin açıkça belirtilmesi gerekmektedir. Bu genellikle… functions.php Bu işlem, bir dosyadaki bir fonksiyon içinde tamamlanır ve bu fonksiyon aracılığıyla gerçekleştirilir. after_setup_theme Kancalar çalışıyor.

function my_theme_features() {
    // 支持文章摘要
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持HTML5格式的代码标签
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持标题标签动态生成
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_features' );

Özellikle title-tag Destekleniyor; WordPress’in sayfa başlıklarını otomatik olarak oluşturmasına izin veriyor, böylece artık bunu manuel olarak yapmanıza gerek kalmıyor. header.php Hardcoded <title> Etiketler.

Tavsiye edilen okuma Kapsamlı Web Sitesi Kurma Rehberi: Sıfırdan Başlayarak Profesyonel Bir Site Oluşturmanın Adımları ve Püf Noktaları。

Kayıt için kenar çubuğu ve araç çubuğu bölgesi

Küçük araçlar (small tools), WordPress’in klasik özelliklerindendir. Bir kenar çubuğu (sidebar) oluşturmak istiyorsanız, bunun için belirli araçları kullanmanız gerekecektir. register_sidebar() İşlev.

function my_theme_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; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Daha sonra, şablon dosyasında (örneğin…) sidebar.php) içinde kullanılır dynamic_sidebar( 'sidebar-1' ) Gelip onu göster.

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 şemalarını ve betikleri güvenli bir şekilde içe aktarın.

Asla şablon dosyalarında CSS ve JS dosyalarına doğrudan bağlantı (hard link) eklemeyin. Doğru yöntem, bu dosyaları şablon dosyalarına içerik olarak dahil etmektir. wp_enqueue_style() 和 wp_enqueue_script() Fonksiyon ve bunun aracılığıyla… wp_enqueue_scripts Hook yükleniyor.

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

Bu yöntem, bağımlılıkların doğru bir şekilde yönetilmesini sağlar ve WordPress’in güvenlik ile önbellekleme konusundaki en iyi uygulamalarına uygundur.

Konu testi ve yayınlanması.

Geliştirme işlemi tamamlandıktan sonra, sıkı testler ve standart yayın süreçleri, temanın kalitesini garanti altına almanın anahtarıdır.

Çapraz ortam ve uyumluluk testleri yapmak

Yerel ortamınızda temel testleri tamamladıktan sonra, üretim ortamına yakın bir staging (geçiş) sitesinde kapsamlı testler yapmanız gerekmektedir. Kontrol edilmesi gereken hususlar şunlardır: Farklı tarayıcılarda (Chrome, Firefox, Safari, Edge) görünümünün tutarlı olup olmadığı; mobil cihazlarda, tabletlerde ve bilgisayarlarda sitenin duyarlı (responsive) bir şekilde çalışıp çalışmadığı; yaygın olarak kullanılan eklentilerle (örneğin WooCommerce, Yoast SEO, Contact Form 7) uyumlu olup olmadığı; ve sitenin hızının beklentilere uygun olup olmadığı.

Uluslararasılaştırma ve Yerelleştirme İçin Hazırlıklar

Geçici olarak sadece Çince konular yayınlasanız bile, uluslararasılaştırma (i18n) için hazırlıklı olmalısınız; bu, profesyonelliği ve küresel topluluğa gösterilen saygıyı yansıtır. Bu, kullanıcılara yönelik tüm metinlerin WordPress’in çeviri fonksiyonları kullanılarak işlenmesi gerektiği anlamına gelir.
Örneğin, kodda şöyle yazılır:

echo __( '这是一个句子', 'my-custom-theme' );
_e( '这是一个直接输出的句子', 'my-custom-theme' );

Daha sonra, Poedit gibi araçları kullanarak içeriği dönüştürebilirsiniz. .pot Şablon dosyası, çevirmenlerin kullanımı için hazırlanmıştır. .po 和 .mo Çeviri dosyası.

Nihai paketleme ve yayınlama

Yayınlamadan önce, konu klasöründen tüm yedek dosyaları ve IDE ayar dosyalarını (örneğin…) sildiğinizden emin olun. .ideaİlgisiz içerikler such as (.), Node modülleri vb. dikkatlice kontrol edin. style.css Yorum bilgilerinin doğru ve eksiksiz olup olmadığı.
Eğer temanızı WordPress’in resmi tema dizinine göndermeyi planlıyorsanız, son derece katı kodlama standartlarına ve kılavuzlara uymalı ve SVN aracılığıyla değişiklikleri göndermelisiniz. Bağımsız bir şekilde yayınlamak istiyorsanız, temanın dosyalarını bir ZIP dosyası haline getirip, web sitesinin arayüzündeki “Tema Yükleme” özelliği aracılığıyla yükleyebilir veya doğrudan FTP yoluyla sunucuya aktarabilirsiniz. /wp-content/themes/ İçindekiler listesi.
Son olarak, çevrimiçi web sitenizin WordPress arayüzünde “Görünüm” -> “Temalar” bölümüne giderek yeni temanızı etkinleştirin ve sitenin yayınlanmasının ardından son kontrollerini yapın.

Özetle.

WordPress tema geliştirme, PHP programlama, ön uç teknolojileri (HTML/CSS/JavaScript) ve WordPress’in temel bilgilerinin birleştiği bir süreçtir. En temel temaları oluşturmaktan başlayarak… style.css 和 index.php Başlayarak, şablon hiyerarşisini adım adım oluşturmak, entegrasyon özelliklerini desteklemek, kaynakları güvenli bir şekilde yüklemek ve sonunda kapsamlı testler yaparak sitenizi yayınlamak çok önemlidir. Bu becerileri öğrenmek, sadece benzersiz bir web sitesi oluşturmanıza yardımcı olmakla kalmaz, aynı zamanda WordPress’in çalışma mekanizmasını da derinlemesine anlamanızı sağlar ve böylece daha kapsamlı bir geliştirici olmanıza olanak tanır. Unutmayın ki, sürekli öğrenme ve pratik yapmak, geliştirme becerilerinizi geliştirmenin en iyi yoludur.

Sıkça Sorulan Sorular.

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

WordPress temaları geliştirmek için öncelikle PHP, HTML, CSS ve JavaScript bilgilerine sahip olmak gerekmektedir. PHP, dinamik işlemleri gerçekleştirmek ve WordPress çekirdeğiyle etkileşim kurmak için kullanılır; HTML sayfa yapısını oluşturur; CSS ise stil ve düzenlemelerden sorumludur; JavaScript ise ön uç etkileşim efektlerini sağlamak için kullanılır. MySQL hakkında temel bilgilere sahip olmak da veri akışını anlamada yardımcı olur.

Neden `add_theme_support` fonksiyonunu mutlaka `functions.php` dosyasında kullanmalıyız?

add_theme_support() Fonksiyonlar, WordPress temalarının hangi özellikleri desteklediğini belirtmenin standartlaştırılmış bir yoludur. Bu sayede temaların WordPress çekirdeğiyle uyumluluğu ve ileriye dönük uyumluluğu sağlanır. Örneğin, bir makalenin özel görselini etkinleştirmek için fonksiyonlar kullanılır; bu işlem yapıldıktan sonra makale düzenleme sayfasında “Özel Görsel Ayarları” adlı bir bölüm görünür. Bu, özelliklerin açılıp kapatılmasını sağlayan net bir mekanizmadır.

Kendi geliştirdiğim temaları WordPress.org’un resmi dizinine yükleyebilir miyim?

Tabii ki, ancak bazı katı şartların karşılanması gerekiyor. Temanızın tamamen GPL lisansına uygun olması, kodunun WordPress kodlama standartlarına uyması, Theme Check eklentisinin tüm kontrollerinden geçmesi ve herhangi bir şifreleme, karıştırma kodu veya zararlı özelliğin içermemesi gerekiyor. İnceleme süreci uzun ve ayrıntılı olabilir; ancak başarılı olursanız temanınız çok yüksek bir görünürlüğe kavuşacaktır.

Kendi temam için bir ayar seçenekleri sayfası nasıl oluşturabilirim?

Genellikle, temalara doğrudan karmaşık ayar seçenekleri eklenmesi önerilmez; bu tür ayarlar eklentilerin sorumluluğundadır. Temanın ihtiyaç duyduğu az sayıdaki yapılandırmalar (örneğin renk seçimi, düzen değişiklikleri) için WordPress’in çekirdek “Özelleştirici” (Customizer) API’sini kullanmanız önerilir. $wp_customize->add_setting() 和 $wp_customize->add_control() Bu tür yöntemlerle, “Görünüm” -> “Özelleştir” bölümünde kullanıcılara gerçek zamanlı önizleme seçenekleri sunulmaktadır. Bu, mevcut WordPress topluluğu tarafından önerilen en iyi uygulamadır.

Geliştirme sırasında WordPress’in blok düzenleyicisiyle uyumluluğu göz önünde bulundurulmalı mıdır?

Evet, bu çok önemli. WordPress 5.0’da blok editörü (Gutenberg) tanıtıldığından beri, temanın bununla iyi bir şekilde uyumlu olmasını sağlamak temel bir gereklilik haline geldi. Temanıza tam genişlik, geniş kenar boşlukları gibi blok hizalama seçeneklerini destekleyen özellikler eklemeli ve ön uç için gerekli CSS stillerini yazmalısınız. add_theme_support(‘editor-styles’) Ayrıca, editörün stil şemasını da dahil etmek, arka uçtaki editörün önizleme sonuçlarının ön uçla temelde aynı olmasını sağlar ve kullanıcı deneyimini iyileştirir.