WordPress Tema Geliştirme Kılavuzu: Sıfırdan Başlayarak Özel Temalar Oluşturma

Geliştirme Ortamı ve Araçlarının Hazırlanması

Kod yazmaya başlamadan önce, verimli ve izole bir yerel geliştirme ortamı oluşturmak çok önemli bir ilk adımdır. Bu, yalnızca üretim sitenizi korumakla kalmaz, aynı zamanda geliştirme verimliliğinizi de önemli ölçüde artırır.

Yerel Geliştirme Ortamı Ayarları

Yerel sunucu yazılım paketlerini kullanmanız önerilir; örneğin Local by Flywheel, MAMP veya XAMPP. Bu araçlar, Apache/Nginx, PHP ve MySQL’i tek tıklamayla kurmanıza olanak tanır ve çevrimiçi sunucu ortamını mükemmel bir şekilde simüle eder. PHP sürümünüzün 7.4 veya daha yüksek olduğundan emin olun ve MySQLi, PDO, GD görüntü kütüphanesi gibi gerekli eklentilerin etkinleştirildiğinden emin olun. Ayrıca, Visual Studio Code veya PhpStorm gibi bir kod editörü de kurun ve etkinleştirin; bu editörler WordPress geliştirme için harika sözdizimi vurgulama ve kod ipuçları desteği sunar.

Gerekli Araçlar ve Eklentilerin Tanıtımı

Kod editörünün yanı sıra, kod değişikliklerini yönetmek için bir sürüm kontrol sistemi (örneğin Git) de gereklidir. Tarayıcılarda, geliştirici araçları (Chrome DevTools veya Firefox Developer Tools), HTML, CSS ve JavaScript’i hata ayıklamak için çok kullanışlıdır. WordPress geliştirme işlemleri için, yerel sitenize aşağıdaki geliştirme yardımcı eklentilerini kurmanız önerilir:Query Monitor Veritabanı sorgularını, PHP hatalarını ve eklentileri (hook’ları) izlemek için kullanılır;Show Current Template Mevcut sayfada kullanılan şablon dosyasını gösterebilir.Theme Check Eklentiler, bir tema geliştirildikten sonra bunun WordPress tema geliştirme standartlarına uygun olup olmadığını kontrol etmek için kullanılır.

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

Konu dosyası yapısı ve çekirdek dosyalar

Standart bir WordPress teması, belirli dosyaları içeren ve belirli bir konumda bulunan bir klasördür. /wp-content/themes/ Katalogun içinde yer alan her bir temel dosyanın işlevini anlamak, bir temayı oluşturmanın temel taşlarından biridir.

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.

Şablonlar ve tema bilgilerinin tanımı

style.css Dosya, her WordPress temasının “kimlik kartı” ve stil ayarlarının bulunduğu yerdir. Dosyanın “Stylesheet Header” (Şablon Başlığı) bölümü, sadece temanın stilini tanımlamakla kalmaz; daha da önemlisi, WordPress’un temayı tanıması için gerekli meta verileri de sağlar. İşte temel bir örnek:

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从零开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Metin kısmının altına CSS stilinizi yazın.Text Domain Uluslararasılaştırma amacıyla kullanılır ve sonraki çeviri fonksiyonu çağrılarında kullanılan metin alanlarıyla tutarlı olmalıdır.

İşlevsel Geliştirmeler ve Şablon Dosyalarının Entegrasyonu

functions.php Dosya, bir temanın “beyni” gibidir; işlevler eklemek, özellikler kaydetmek için kullanılır ve temel dosyaları değiştirmeye gerek kalmaz. Burada temaya destek ekleyebilirsiniz (örneğin makale küçük resimleri, özelleştirilmiş menüler), betikler ve stil şemaları dahil edebilir, özel fonksiyonlar tanımlayabilirsiniz.

index.php Bu, temanın varsayılan şablonudur ve aynı zamanda zorunludur. Eğer WordPress daha spesifik bir şablon dosyası bulamazsa… single.php 或 page.phpO zaman tekrar onu kullanmaya geri döneriz. Genellikle…index.php Bir ana döngü içerecek ve bu döngü, makale listesini çıktı olarak verecektir.

Tavsiye edilen okuma WordPress Tema Geliştirme: Sıfırdan Başlayarak Özel Temalar Oluşturmanın Kapsamlı Rehberi。

Şablon hiyerarşisi ve şablon dosyaları

WordPress, belirli bir sayfa için hangi şablon dosyasının yükleneceğine karar vermek için “Şablon Yapısı” (Template Hierarchy) adında bir kural seti kullanır. Bu kuralı anlarsanız, farklı sayfaların görünümünü hassas bir şekilde kontrol edebilecek şablonlar oluşturabilirsiniz.

Makale ve Sayfa Şablonlarına Detaylı Bir Bakış

Bir makale için WordPress, şablonları aşağıdaki sırayla arar:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.phpÖrneğin, “about-us” adlı bir sayfa (post-türü:…) pageBu durumda, öncelikle aranacak olan şeyler belirlenecektir. page-about-us.phpSonra page.phpSon olarak, index.php。

single.php Genellikle tek bir blog makalesini göstermek için kullanılır. page.php Bağımsız sayfaları görüntülemek için kullanılır. Bu dosyalarda, makalenin başlığını, içeriğini, meta verilerini vb. çıkarmak için ana döngüyü kullanırsınız.

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.

Arşivleme ve Sınıflandırma Şablonları

Kullanıcılar blog makaleleri listesine, kategori dizinlerine veya etiket sayfalarına eriştiğinde, WordPress arşivleme şablonlarını kullanır. Arama sırası şu şekilde olabilir:category-{slug}.php -> category-{id}.php -> category.php -> archive.php -> index.phpYou can create. archive.php Tüm arşiv sayfalarının düzenini kontrol etmek için, veya daha spesifik özellikler içeren sayfalar oluşturmak için… category-news.php “Haber” kategorisi için ayrı bir sayfa tasarlayın.

Diğer önemli şablon ise… front-page.phpEğer mevcutsa, web sitesinin statik ana sayfası olarak kullanılacaktır. Eğer mevcut değilse, WordPress bunun yerine başka bir sayfayı kullanacaktır. home.php En yeni blog makalelerini gösterin, veya geri dönün… index.php。

Konu Özellikleri ve Gelişmiş Fonksiyonlar

Temel şablonlar oluşturulduktan sonra, fonksiyonlar ve işlevler (hook’lar) aracılığıyla temalara güçlü dinamik özellikler ekleyebilir ve böylece statik şablonları, tam özellikli bir uygulama arayüzüne dönüştürebilirsiniz.

Tavsiye edilen okuma WordPress Tema Geliştirme: Başlangıçtan Uzmanlığa – Özelleştirilmiş Temaların Tam Kılavuzu。

Menü ve Araç Çubuğu Bölgesi Kaydı

Modern temalar genellikle özelleştirilebilir bir navigasyon menüsü ve kenar çubuğu araç çubuğu bölgesini destekler. Bunun için… functions.php Belirli bir fonksiyon kullanılarak kayıt işlemi gerçekleştirilir.

Öncelikle, kullanın. register_nav_menus() Fonksiyon kaydı menüsü konumu. Örneğ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.

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

Ardından şablon dosyasında (örneğin…) header.phpİçerikte, kullanılmaktadır. wp_nav_menu() Funcion çağrılır ve menü görüntülenir.

İkinci olarak, kullanın. register_sidebar() Fonksiyon Kaydı Araç Çubuğu Bölgesi (Kenar Çubuğu):

function mytheme_widgets_init() {
    register_sidebar(
        array(
            'name'          => __( '主侧边栏', 'my-custom-theme' ),
            'id'            => 'sidebar-1',
            'description'   => __( '在此添加小工具。', 'my-custom-theme' ),
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
        )
    );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

在 sidebar.php Şablon içinde kullanılır. dynamic_sidebar( 'sidebar-1' ) Gelip onu göster.

Makale özel görselleri ve özelleştirilmiş arka plan desteği mevcuttur.

geçmek (bir fatura veya teftiş vb.) add_theme_support() Bu fonksiyon sayesinde temalara birçok temel özellik kolayca ekleyebilirsiniz. En yaygın olarak kullanılan özellik “Makale Önizleme Resmi” (Post Thumbnail) özelliğidir; bu özellik, kullanıcıların makaleler için küçük resimler (önizleme resimleri) ayarlamasına olanak tanır.

add_theme_support( 'post-thumbnails' );
// 你还可以为特定文章类型启用，或定义缩略图尺寸
set_post_thumbnail_size( 1200, 630, true ); // 设置默认尺寸和裁剪模式
add_image_size( 'mytheme-featured-image', 800, 400 ); // 添加自定义图片尺寸

Şablonda, kullanın. the_post_thumbnail() Özel görüntüleri çıkarmak için bir fonksiyon kullanılır.

Ayrıca, tek bir satır kod ile özel başlıklar, arka plan renkleri veya resimler gibi özellikleri de etkinleştirebilirsiniz. Bu ayarlar, WordPress arayüzündeki “Görünüm” -> “Özelleştir” bölümünde bulunur ve kullanıcılara daha fazla kontrol imkanı sunar.

add_theme_support( 'custom-background' );
add_theme_support( 'custom-header' );

Özetle.

Sıfırdan bir WordPress teması geliştirmek, sistematik bir mühendislik işlemidir ve geliştiricilerin sadece PHP, HTML, CSS ve JavaScript gibi ön uç teknolojileri bilmelerini değil, aynı zamanda WordPress’in temel çalışma mekanizmalarını (örneğin şablon hiyerarşisi, ana döngü ve eklenti sistemini) derinlemesine anlamalarını da gerektirir. Profesyonel bir yerel ortam oluşturarak, temiz ve mantıklı bir tema dosya yapısı planlayarak, şablon hiyerarşisine uygun olarak şablon dosyaları oluşturarak ve gerekli araçları kullanarak bu süreci tamamlayabilirsiniz. functions.php Tema kayıt özelliğini ve gelişmiş özellikleri entegre ederek, tasarım gereksinimlerine tam olarak uygun, kodu açık ve bakımı kolay özel temalar oluşturabilirsiniz. Bu süreç zorluklarla dolu olsa da, web sitesinin görünümü ve işlevleri üzerinde tam kontrol sahibi olmanızı sağlar ve ileri düzey bir WordPress geliştiricisi olmanın kaçınılmaz bir yoludur.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için PHP bilmek zorunda mıyım?

Evet, PHP’yi derinlemesine öğrenmek şarttır. WordPress’ün çekirdeği kendisi PHP ile yazılmıştır ve temaların şablon dosyaları da PHP kullanılarak oluşturulmuştur.header.php, page.php) ve işlevsel dosyalar (functions.phpHer ikisi de içeriği dinamik olarak oluşturmak, WordPress fonksiyonlarını çağırmak ve verilerle işlem yapmak için PHP dilinin özelliklerinden yararlanır. Mevcut bir temayı kopyalayıp yalnızca CSS ve HTML’yi değiştirebilirsiniz; ancak özelleştirilmiş mantık ve işlevler oluşturmak için PHP bilgisi şarttır.

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

Temanızın güvenli, verimli olması ve WordPress resmi tema dizinine eklenmesi için bir dizi standarda uymanız gerekmektedir. Bunlar arasında şunlar yer almaktadır: Güvenli kodlama uygulamalarını kullanmak (örneğin çıktıyı escape etmek, girdiyi doğrulamak), şablon hiyerarşisine uymak ve uluslararasılaştırmayı doğru bir şekilde gerçekleştirmek (uygun araçlar kullanarak).__()和_e()(Fonksiyonlar gibi araçlar kullanarak), ön uç kodunun duyarlı ve erişilebilir olmasını sağlayın; temalarda temel işlevleri doğrudan kodlamayın (bu işlevler için alt temalar veya eklentiler kullanılmalıdır). Daha önce bahsedilen yöntemleri uygulayın.Theme CheckEklentiler kullanarak yapılan taramalar, uygunluğu kontrol etmenin iyi bir yoludur.

Konudaki style.css dosyasının adı değiştirilebilir mi?

Olmaz.style.cssBu dosya adı, WordPress’in bir tema tanımasını zorunlu kılan bir gerekliliktir ve dosyanın başındaki yorum bloğunun mutlaka bulunması ve doğru bilgilerin girilmesi gerekir. WordPress, bu özel dosyadaki meta verileri okuyarak arka planda “Görünüm” -> “Temalar” bölümünde temanızın adını, ekran görüntülerini, açıklamasını ve diğer bilgilerini gösterir. Ancak, ana CSS kodlarınızı diğer dosyalara ayırabilirsiniz..cssDosyada, sonra…functions.phpİçinde kullanılır.wp_enqueue_style()Fonksiyonlar ihtiyaç duyulduğunda yüklenir.

Alt konu (subtopic) nedir ve ne durumlarda kullanılmalıdır?

Alt konu, başka bir konuya (ana konu olarak adlandırılır) bağlı olan bir konudur. Ana konunun tüm özelliklerini, stillerini ve şablon dosyalarını devralır; ancak bunların bir kısmını güvenli bir şekilde değiştirmenize olanak tanır. Yapmanız gereken tek şey, alt konunun…style.cssÖnce üst temanın şablon adını belirtin, ardından sadece değiştirmeniz gereken dosyaları yerleştirin (örneğin, değiştirilmiş dosyaları).style.css、functions.phpVeya belirli bir şablon dosyası). Eğer üst tema güncellenirse, alt temaya yaptığınız özelleştirme değişiklikleri silinmez. Bu, mevcut ve popüler temaları özelleştirmeniz gerektiğinde çok kullanışlıdır ve önerilen en iyi uygulamadır.