Kapsamlı bir WordPress teması geliştirmek için, öncelikle temanın temel dosya yapısını anlamak gereklidir. En basitleştirilmiş bir WordPress teması en az iki dosyaya ihtiyaç duyar:style.css 和 index.phpBunlar arasında,style.css Sadece bir stil şeması değil; aynı zamanda bir temanın “kimlik kartı”dır. Dosyanın baş kısmındaki yorum bloğu, temanın tüm meta bilgilerini içerir.
Konu bilgi beyanı dosyası.
style.css Dosyanın başında, WordPress sisteminine temayı tanımlamak için belirli bir yorum bloğu bulunmalıdır. Bu bilgiler arasında tema adı, yazar, açıklama, sürüm numarası vb. yer alır ve bunlar WordPress arayüzündeki temalar listesinde görüntülenir.
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个简洁、响应式的自定义 WordPress 主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/Çekirdek şablon dosyası
index.php Bu, temanın varsayılan şablon dosyasıdır; WordPress daha spesifik bir şablon dosyası bulamadığında bu dosyayı kullanır. Tüm temanın “yedek” ve başlangıç noktasıdır. Geliştirme ilerledikçe, makale sayfaları için kullanılacak gibi daha fazla özel şablon dosyası oluşturacaksınız. single.phpSayfa için kullanılır. page.phpMakale arşivleme listesi için kullanılır. archive.php Bu tür şablon hiyerarşisi yapısı, WordPress temalarının tasarımının temel fikridir.
Tavsiye edilen okuma Sıfırdan başlayarak: WordPress tema geliştirme eksiksiz rehberi ve en iyi uygulamaları.。
Bir temanın temel özelliklerini ve şablonlarını oluşturma
Statik bir HTML sayfa koleksiyonu, WordPress teması olarak adlandırılamaz; asıl mesele, WordPress tarafından sağlanan verilerin ve özelliklerin dinamik olarak çağrılmasıdır. Bu, esas olarak WordPress’in şablon etiketleri ve “The Loop” (Döngü) aracılığıyla gerçekleştirilir.
WordPress ana döngesini anlamak.
“Döngü” (Loop), WordPress’in veritabanından makaleleri alıp sayfada göstermek için kullandığı varsayılan mekanizmadır. Bu, makalelerin olup olmadığını kontrol eden ve varsa bunları döngüsel olarak gösteren bir PHP kod parçasıdır. Neredeyse tüm tema şablonu dosyalarında bu döngünün çeşitleri bulunmaktadır.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php endwhile; else : ?>
<p><?php esc_html_e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
<?php endif; ?>Yukarıdaki kodda,have_posts() 和 the_post() Döngüler, fonksiyonlar tarafından yönlendirilir. the_title() 和 the_content() Bu, döngü içinde çağrılan bir şablon etiketidir ve mevcut makalenin başlığını ve içeriğini görüntülemek için kullanılır.
Kamu bölümlerini dahil edin: Başlık ve alt kısım
DRY (Don’t Repeat Yourself – Kendini Tekrarlama) ilkesine uymak için, WordPress temaları genellikle ortak kısımları ayrı dosyalara ayırır. En önemli bu iki dosya şunlardır: header.php 和 footer.php。
在 index.php Orada, bunları şu şekilde tanıtabilirsiniz:
<?php get_header(); ?>
<!-- 主循环内容在这里 -->
<?php get_footer(); ?>get_header() Fonksiyonlar tanıtılır. header.php Dosya, belge türü beyanını içermelidir.<head> Bölgeler ve web sitesinin üst kısmındaki genel işaretler (örneğin Logo ve navigasyon menüsü). Aynı şekilde…get_footer() Tanıtılacak. footer.phpSayfa altı içeriğini ve kapatma HTML etiketlerini içerir.
Tavsiye edilen okuma WordPress Tema Geliştirme Konusunda Derinlemesine Bilgi: Başlangıçtan Uzmanlığa Kadar Temel Rehber。
WordPress’in temel özelliklerini entegre etmek
Mükemmel bir tema, WordPress’in temel özelliklerini (menüler, araç çubukları ve makale özel görselleri gibi) sorunsuz bir şekilde entegre etmelidir. Bu sayede web sitesi yöneticileri, kodu değiştirmeye gerek kalmadan sitelerini daha kolay bir şekilde özelleştirebilirler.
Kayıt Menüsü
WordPress’in menü sistemi, kullanıcıların arka planda “Görünüm” -> “Menüler” bölümünden navigasyon menülerini oluşturmasına ve yönetmesine olanak tanır. Temaların, menülerin hangi yerlerde desteklendiğini belirtmeleri gerekir.
function my_first_theme_setup() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '页脚菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );Kayıt olduktan sonra, şablon dosyalarında (örneğin…) işlem yapabilirsiniz. header.phpİlgili konuma gidin ve şunu kullanın: wp_nav_menu() Menüyü göstermek için bir fonksiyon kullanıldı.
Widget bölgesini etkinleştir
Küçük Araçlar Bölgesi (veya “Kenar Çubuğu”), kullanıcıların küçük araçları sürükleyerek içerik eklemesine olanak tanır. Öncelikle bir kenar çubuğu kaydetmeniz gerekmektedir:
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );Daha sonra, şablon dosyasında (örneğin…) sidebar.phpİçerikte, kullanılmaktadır. dynamic_sidebar( ‘sidebar-1’ ) Onu çağırmak için…
Makalelere özel görsellerin eklenmesi desteklenmektedir.
Özel görsel (Post Thumbnail), makalenin temsil edici resmidir. Bunu etkinleştirmek için, temanın functions.php dosyasına temaya ait desteği eklemeniz gerekmektedir:
Tavsiye edilen okuma WordPress Tema Geliştirme Üzerine Derinlemesine Analiz: Başlangıçtan Uzmanlığa Kadar Tam Bir Pratik Rehber。
add_theme_support( ‘post-thumbnails’ );Daha sonra, döngü içinde bunu kullanabilirsiniz. the_post_thumbnail() Fonksiyon, bu makalenin öne çıkan görsellerini çıkarmak için kullanılıyor.
Uygulama Stilleri ve Ön Uç Betikleri (Application Styles and Front-End Scripts)
Modern WordPress temalarının responsive (uyumlu mobil cihazlarla çalışan) olması gerekmektedir ve ayrıca stil şemalarını (style sheets) ile JavaScript dosyalarını verimli ve düzenli bir şekilde yükleyebilmelidir.
Stiller ve komut dosyalarını doğru şekilde ekleyin.
Kesinlikle şablon dosyalarında doğrudan kullanılmamalıdır. <link> 或 <script> Etiketlerle kaynakları sabit olarak kodlamak doğru bir uygulama değildir. Doğru yaklaşım, bu kaynakları dinamik olarak yönetmek ve ihtiyaçlara göre değiştirebilmektir. wp_enqueue_style() 和 wp_enqueue_script() İşlevler, functions.php Orada, yüklemek için bir “hook” (düğme/eklem) kullanılır.
function my_first_theme_scripts() {
// 排入主样式表
wp_enqueue_style( ‘my-first-theme-style’, get_stylesheet_uri() );
// 排入自定义 JavaScript 文件
wp_enqueue_script( ‘my-first-theme-navigation’, get_template_directory_uri() . ‘/js/navigation.js’, array(), ‘1.0’, true );
// 如果需要，排入 jQuery（WordPress 默认已包含）
// wp_enqueue_script( ‘jquery’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );Bu yöntem, WordPress’in bağımlılıkları yönetmesine olanak tanır, tekrarlanan yüklemeleri önler ve alt temaların (subthemes) içeriklerini kolayca değiştirmesini sağlar.
Tepkisel düzen oluşturma.
Bunu yapmak için, aşağıdaki adımları izleyin: style.css Medya sorgularını (Media Queries) içererek, düzenin cep telefonundan masaüstüne kadar çeşitli ekran boyutlarına uyum sağlamasını sağlar. Aynı zamanda, header.php 的 <head> Bazı görünüm alanı meta etiketlerinin eklenmesi çok önemlidir:
<meta name="viewport" content="width=device-width, initial-scale=1">En iyi uygulamalara ve güvenlik standartlarına uyun.
Geliştirilen temalar sadece işlevleri yerine getirmekle kalmamalı, aynı zamanda kodun güvenliğini, sürdürülebilirliğini ve WordPress ekosistemiyle uyumluluğunu da sağlamalıdır.
Uluslararasılaştırma ve Yerelleştirme
Metin alanları ve çevrilebilir metinler için en başından itibaren hazırlık yapmak, temanızın dünya genelindeki kullanıcılar tarafından kullanılmasını sağlar. __( ‘文本’, ‘my-first-theme’ ) 或 _e( ‘文本’, ‘my-first-theme’ ) Tüm, kullanıcı tarafından görülebilen ve ön uca (frontend) gönderilen string’leri kapsayacak bir yapı oluşturun. Bunun sağlandığından emin olun. style.css Tüm fonksiyonlara girilen metinlerde “Text Domain” ayarlarının doğru bir şekilde yapıldığından emin olun.
Veri Doğrulama, Kaçınma ve Temizleme
Kullanıcılardan veya veritabanlarından gelen verilere asla güvenmeyin. Verileri dışa aktarırken mutlaka escape (kaçırma) işlemi yapılmalıdır.
-Kullanım esc_html() HTML içeriğini escape et.
-Kullanım esc_url() Eşanlamlı URL (Escape URL).
-Kullanım esc_attr() HTML özniteliklerini escape etmek.
JavaScript içinde kullanılan PHP değişkenleri için… wp_json_encode()。
Performans optimizasyonu için dikkate alınması gereken hususlar:
Tema performansını optimize etmek için aşağıdaki noktalara dikkat edilebilir: Betikler ve stiller dizilirken, bağımlılıkları ve sürüm numaralarını makul bir şekilde ayarlayın; tüm resimlerin optimize edildiğinden emin olun; kritik olmayan resimlerin gecikmeli yüklenmesini düşünün; ve harici kaynaklara yapılan HTTP isteklerini mümkün olduğunca azaltın. Kodu basit ve verimli tutun.
Özetle.
WordPress tema geliştirme, en temel şeyleri anlamaktan başlayarak bir sistem mühendisliği sürecidir. style.css 和 index.php Başlayın ve adım adım şablon seviyelerine, ana döngüye ve temel işlevlerin entegrasyonuna ilerleyin. Önemli olan, WordPress tarafından sağlanan şablon etiketlerini ve fonksiyonlarını dinamik bir şekilde kullanmak ve ortak kod modüllerini modüler hale getirme ilkesine uymaktır. Aynı zamanda, ön uç kaynakların doğru bir şekilde yerleştirilmesine, duyarlı (responsive) tasarıma dikkat etmek ve güvenliği (örneğin veri kaçaklarını önleme) ile uluslararasılaştırmayı (internationalization) geliştirmenin temelleri olarak görmektir. Bu temel süreçlere ve en iyi uygulamalara uyarak, güçlü, güvenli, güvenilir ve kolayca sürdürülebilen modern bir WordPress teması oluşturabilirsiniz.
Sıkça Sorulan Sorular.
Bir WordPress temasının en az kaç dosyasına ihtiyacı vardır?
Bir WordPress temasının en az iki dosyası gereklidir:style.css 和 index.php。style.css Konu bilgilerini ve temel stilleri sağlamak için kullanılır. index.php Varsayılan bir şablon dosyası olarak, web sitesi içeriğini görüntülemek için kullanılır.
Kendi temama özel ayarlar sayfası nasıl eklerim?
Genellikle, bir temaya doğrudan çok sayıda karmaşık ayar sayfası eklenmesi önerilmez; çünkü bu, eklentilerle veya gelecekteki WordPress çekirdek özellikleriyle çakışabilir. Basit seçenekler için WordPress Özelleştirici (Customizer) API’sini kullanmayı düşünebilirsiniz. Daha karmaşık ihtiyaçlar için ise bu özelliklerin ayrı bir eklenti olarak geliştirilmesi daha iyi olacaktır. Eğer yine de bir temaya bu ayarları eklemeniz gerekiyorsa, bunu yapabilirsiniz. add_menu_page() 或 add_theme_page() Fonksiyonlar, API ayarlarıyla birlikte kullanılarak oluşturulur.
Neden temayı değiştirdikten sonra web sitesinin düzeni bozuldu?
Bu genellikle, daha önce kullanılan temada kaydedilen eklentilerin veya menülerin, yeni temanızda bunları barındıracak uygun bir alanın olmamasından kaynaklanır. WordPress bu ayarları korumaya çalışır. Lütfen yeni temanızın bu özelliklere sahip olup olmadığını kontrol edin. functions.php Navigasyon menüsü öğeleri doğru bir şekilde kaydedildi (kullanıldı). register_nav_menus) ve Araçlar Bölgesi (kullanımı) register_sidebarKayıtlı “ID” veya “Konum”’un benzersiz olduğundan emin olun ve şablon dosyasında doğru fonksiyonların (örneğin…) kullanıldığından emin olun. wp_nav_menuOnları çağırmak için bu yöntemleri kullanın.
Nasıl temamın alt temaları desteklemesini sağlayabilirim?
Konunuzun alt konuları desteklemesini sağlamak için, onu mümkün olduğunca modüler ve esnek bir şekilde geliştirmeniz gerekmektedir. Fonksiyonlarda sabit olarak kodlanmış yollar kullanmaktan kaçının; bunun yerine daha dinamik ve yeniden kullanılabilir çözümler tercih edin. get_template_directory_uri() 和 get_stylesheet_directory_uri() Böyle bir fonksiyon için, değiştirilebilen fonksiyonlar kullanılır. if ( ! function_exists( ‘…’ ) ) Kontrol edin ki zaten tanımlanmış mıdır. En önemlisi, eylem kancalarını (action hooks) kullanın (örneğin…) after_setup_theme, wp_enqueue_scriptsBu şekilde, temalara yeni özellikler eklemek kolaylaşır ve bu “hook’lar” (bağlantı noktaları) temadan kolayca kaldırılabilir veya değiştirilebilir.
Geliştirme temaları oluşturulurken belirli bir PHP sürümü kullanılması zorunlu mu?
Her ne kadar kesin bir zorunluluk olmasa da, güvenlik, performans ve uyumluluk açısından WordPress’in resmi PHP sürümü gereksinimlerine uymalısınız. 2026 yılı itibarıyla WordPress çekirdeği, PHP 7.4 veya daha yüksek sürümlerinin kullanılmasını önermektedir. Geliştirme sırasında daha yeni PHP sürümleri kullanılmalı ve kodlarda artık kullanılmayan fonksiyonlardan kaçınılmalıdır. Aynı zamanda… style.css Belgede, konunuzun gerektirdiği en düşük PHP sürümünün ne olduğunu belirtmek iyi bir alışkanlıktır.
Bir sonraki adım, bundan sonra ne yapmalıyım?
Daha fazla okuma ve pratik bilgiler.
Aşağıdaki içerikler bu makalenin konusuyla ilgilidir ve daha fazla okumak için uygundur. Öncelikle mevcut sorununuza en yakın makaleden başlayın, sonra çevresel konulara doğru ilerleyin, genellikle daha iyi sonuçlar alırsınız.
- WordPress Tema Geliştirme: Başlangıçtan Uzmanlığa – Kişiselleştirilmiş Web Siteleri Oluşturma Kılavuzu
- Sıfırdan başlayarak WordPress tema geliştirme: Farklı bir web sitesi arayüzü oluşturma
- WordPress Tema Geliştirme Kılavuzu: Sıfırdan Başlayarak Özelleştirilmiş Web Siteleri Oluşturma
- WordPress Tema Geliştirme Kılavuzu: Sıfırdan Uzmanlığa Pratik Bir Eğitim Kursu
- WordPress Tema Geliştirme Kılavuzu: Sıfırdan Profesyonel Seviyede Web Sitesi Şablonları Oluşturmak
Türkçe