WordPress platformunun özü, web sitesinin görünümünü ve ön uç özelliklerini belirleyen güçlü tema sistemindedir. Web sitesi tasarımını tamamen kontrol etmek isteyen geliştiriciler için, piyasadan temalar satın almayı atlayıp doğrudan tema geliştirmeye başlamak kaçınılmaz bir adımdır. Bu, sadece benzersiz bir marka imajı yaratmanıza olanak tanımakla kalmaz; aynı zamanda WordPress’in çalışma prensiplerini daha iyi anlamanıza ve daha detaylı performans optimizasyonları ile özel özellikler eklemenize de olanak tanır. Bu rehber, geliştirme ortamını kurmanıza, temel dosya yapısını anlamanıza ve ilk özel temanızı oluşturmanıza yardımcı olacaktır.
Geliştirme Ortamı ve Araçlarının Hazırlanması
Kod yazmaya başlamadan önce, stabil ve verimli bir yerel geliştirme ortamı çok önemlidir. Bu, çevrimiçi web sitesini etkilemeden testler yapmanıza ve hataları düzeltmenize olanak tanır.
Yerel sunucu ortamı kurmak
En kolay yöntem, Local by Flywheel, XAMPP veya MAMP gibi entegre yerel geliştirme araçlarını kullanmaktır. Bu araçlar, Apache/Nginx sunucularını, PHP’yi ve MySQL veritabanını tek bir tıklamayla kurar ve çevrimiçi sunucu ortamını mükemmel bir şekilde simüle eder. Local örneğini ele alırsak, birkaç dakika içinde yeni bir WordPress sitesi oluşturabilir ve bunun için özel bir alan adı ayarlayabilirsiniz.mytheme.localGeliştirme çalışmaları için hazırlıklı olun.
Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Sıfırdan Başlayarak İlk Özel Temanızı Oluşturun。
Kod Düzenleyicileri ve Gerekli Araçlar
Güçlü özelliklere sahip bir kod editörü, geliştiricilerin temel aracıdır. Visual Studio Code, PHPStorm veya Sublime Text gibi araçlar mükemmel seçeneklerdir. Özellikle Visual Studio Code, PHP Intelephense, WordPress Snippet gibi uygun eklentilerle birleştirildiğinde kodlama verimliliğini önemli ölçüde artırabilir. Ayrıca, tarayıcı geliştirici araçları (örneğin Chrome DevTools), HTML, CSS ve JavaScript’i hata ayıklamak için gereklidir. Sürüm kontrol sistemi Git de öğrenilmesi gereken bir araçtır; kod değişikliklerinin izlenmesine yardımcı olur.
WordPress temalarının dosya yapısını anlamak
Standart bir WordPress teması, belirli işlevlere sahip bir dizi PHP şablon dosyası ve kaynak dosyasından oluşur. Her dosyanın işlevini anlamak, geliştirme sürecinin temelidir.
Çekirdek şablon dosyası
Her konu için en az iki dosya gereklidir: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 adını, yazarını, açıklamasını ve diğer meta bilgilerini içerir. WordPress, temanızı arka planda tanımak ve göstermek için bu bilgileri okur.
Her ne kadarindex.phpEn temel şablon budur; ancak işlevsel bir tema genellikle sayfaları oluşturmak için daha fazla özel şablon içerir.header.php Belgenin baş kısmını oluşturmaktan sorumluyum, bu da şunları içerir:<head>Bölge ve site başlıkları;footer.php Bu kod, sayfa altı (footer) içeriğinin oluşturulmasından sorumludur.sidebar.php Bir kenar çubuğu bölgesi tanımlandı. get_header(), get_footer(), get_sidebar() Bu şablon fonksiyonlarını, diğer şablonlarda kolayca kullanabilirsiniz; yani bu ortak kısımları başka şablonlara rahatça dahil edebilirsiniz.
Şablon Seviyeleri ve Koşullu Etiketler
WordPress, farklı türdeki sayfalar için hangi şablon dosyasının çağrılacağını belirlemek için hassas bir “şablon hiyerarşisi” mekanizması kullanır. Örneğin, bir blog makalesine erişildiğinde, WordPress öncelikle ilgili şablonu arar.single-post.phpEğer yoksa, arayın.single.phpSonunda, geri alma işlemine geçiyoruz.index.phpGeliştiriciler bunları kullanabilirler. is_home(), is_single(), is_page(), is_category() “Eşitlik koşulu etiketleri” (condition tags), farklı sayfalarda farklı içeriklerin görüntülenmesini sağlamak için şablonlarda mantıksal kararlar alır.
Tavsiye edilen okuma Profesyonel bir web sitesi oluşturmak: Sıfırdan başlayarak özelleştirilmiş bir WordPress teması geliştirmek için kapsamlı bir rehber。
İlk temanızı oluşturun.
Şimdi, sıfırdan başlayarak, WordPress tarafından tanınan en basit temayı adım adım oluşturalım.
Temalar dizinini ve stil şablonlarını başlatın.
Öncelikle, WordPress’te…wp-content/themesKatalogda, konunuzun adını taşıyan yeni bir klasör oluşturun. Örneğin:my-first-themeBu klasör içinde, bir dosya oluşturun.style.cssDosyayı açın ve aşağıdaki başlık bilgilerini ekleyin:
/*
Theme Name: 我的第一个主题
Theme URI: https://yourwebsite.com/
Author: 你的名字
Author URI: https://yourwebsite.com/
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/Bu yorum gereklidir. Kaydettikten sonra, WordPress arayüzündeki “Görünüm” -> “Temalar” bölümüne girin; yeni temayı orada görebilirsiniz. Şimdi bu temayı etkinleştirin; ancak site boş bir sayfa gösterecektir, çünkü henüz herhangi bir içerik üretmek için gerekli şablonları oluşturmadık.
Temel sayfa şablonu oluşturma
Sonrasında, oluşturun.index.phpBu, konunun varsayılan şablonudur. En basit HTML yapısından başlayabilir ve ardından WordPress’in başlık ve alt bilgilerini (header ve footer) ekleyebiliriz.
<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
<?php wp_body_open(); ?>
<header>
<h1><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 在这里输出文章内容
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>暂无内容。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Bu kod şu özellikleri kullanmaktadır: bloginfo() Bu fonksiyon, bir sitenin başlığını ve açıklamasını almak için kullanılır. the_title() 和 the_content() Ana döngüde makaleleri çıktı olarak verin. Şimdi temayı etkinleştirin; web sitesinin temel yapısını ve makale listesini görmelisiniz.
İşlevler ekleyin ve görünümü güzelleştirin.
Temel bir tema zaten tamamlandı, ancak daha estetik ve kullanışlı hale getirmek için menü desteği, araç çubuğu bölgesi ve özelleştirilebilir stiller eklenmesi gerekiyor.
Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıcı: Sıfırdan İlk Temanızı Oluşturmak。
Kayıt menüsü ve araç çubuğu bölgesi
WordPress, kullanışlı bir menü yönetim sistemi sunar. Menü öğelerini temamıza “eklememiz” gerekiyor; bunu yaptıktan sonra arka planda “Görünüm” -> “Menüler” bölümünden menüleri düzenleyebiliriz. Menü öğelerini temanın klasörü altında oluşturabilirsiniz.functions.phpBu, temanın işlevsel dosyasıdır. Ana menüyü kaydetmek için aşağıdaki kodu ekleyin:
<?php
function my_first_theme_setup() {
// 注册导航菜单
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
// 为主题添加文章缩略图支持
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );Aynı zamanda, bir araç çubuğu (sidebar) da oluşturabiliriz:
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' );Şablon içinde stil yazımıyla ilgili işlemleri gerçekleştirmek için gerekli kodları kullanın.
Kayıt işlemi tamamlandıktan sonra, bunları şablon içinde çağırmak gerekiyor. Değişiklikler…header.php(Eğer ayrılmışsa) veyaindex.phpHeader bölümüne, menü çağrı kodunu ekleyin:
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>Yan çubukta (örneğin)sidebar.phpOrta) Araç Çağırma Bölgesi:
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside>
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php endif; ?>Son olarak,style.cssCSS yazmaya menü, makale listeleri, kenar çubukları gibi öğeler için stiller ekleyerek başlayın; böylece bunların düzeni mantıklı, estetik ve okunması kolay olur. Temel yazı tiplerini, renkleri ve duyarlı (responsive) tasarımları ayarlayarak işe başlayabilirsiniz.
Özetle.
WordPress tema geliştirme, temanın temel yapısını anlamaktan başlayan bir süreçtir.style.css, functions.php, Şablon seviyelerinden başlayarak, işlevlerin (menüler, araçlar) kademeli olarak oluşturulduğu ve stillerin güzelleştirildiği bir süreçtir. Bu süreçte yerel bir ortam kurulur, temel şablon dosyaları oluşturulur ve eylem kancaları (action hooks) gibi araçlar kullanılır. after_setup_theme Kayıt işlemlerinden, şablonlarda dinamik içeriğin nasıl çağrılacağına kadar, tema geliştirmenin temel süreçlerini öğrenmiş oldunuz. Şablon etiketleri, WP_Query ve daha gelişmiş eklentiler (Action ve Filter) hakkında sürekli öğrenmeye devam ederseniz, işlevsel ve profesyonel olarak tasarlanmış özelleştirilebilir temalar oluşturabileceksiniz.
Sıkça Sorulan Sorular.
Geliştirme konusu için PHP'yi bilmek gerekir mi?
Evet, PHP, WordPress temalarının geliştirilmesi için temel bir dildir. Tüm WordPress şablon dosyaları (.php dosyaları), veritabanı içeriğini çağırmak, mantıksal işlemler yapmak ve dinamik HTML çıkışı oluşturmak için PHP kodunu kullanır. Ön uç gösterimi HTML/CSS/JavaScript’e bağlı olsa da, bunları WordPress verileriyle bağlayan kritik işlemler mutlaka PHP tarafından gerçekleştirilmelidir.
Konumu nasıl çok dilli çeviriye destekli hale getirebilirim?
Bir temanın uluslararasılaştırılmasını (i18n) desteklemesi için, kodunuzdaki çevrilmeye ihtiyaç duyan tüm metinlerde WordPress’in çeviri fonksiyonlarını kullanmanız gerekir. Örneğin: __( ‘文本’, ‘text-domain’ ) 或 _e( ‘文本’, ‘text-domain’ )Aynı zamanda,style.css和functions.phpDoğru şekilde ayarlanmış. Text Domain(Bir metin alanı.) Daha sonra, Poedit gibi bir araç kullanarak .pot şablon dosyasını oluşturun; bu dosya, çevirmenlerin ilgili dil için .po ve .mo dosyalarını oluşturmasına olanak tanır.
Konular ve eklentiler, işlevsellik açısından nasıl ayrılmalıdır?
Basit bir kural şudur: Web sitesinin görünümünü ve düzenini değiştiren özellikler temalarda yer almalı; web sitesinin temel işlevlerini artıran veya değiştiren bağımsız özellikler ise eklentilerde bulunmalıdır. Örneğin, özel makale türleri oluşturma, kısa kodlar kullanma, karmaşık API entegrasyonları gibi işlemler eklenti olarak tasarlanmaya daha uygundur. Bu tasarım yaklaşımının avantajı, kullanıcılar temayı değiştirdiğinde web sitesinin temel işlevlerinin korunması ve kodun bakımının kolaylaşması, aynı zamanda özelliklerin farklı platformlara taşınabilir olmasıdır.
Geliştirme sırasında karşılaşılabilecek PHP hatalarını nasıl ayıklarız?
Öncelikle, yerel veya geliştirme ortamınızda gerekli ayarların yapıldığından emin olun.wp-config.phpWordPress’un hata ayıklama (debugging) modunu dosyada etkinleştirin. WP_DEBUG Constantın değeri şu şekilde ayarlandı:trueBu, tüm PHP hatalarını, uyarılarını ve bildirimlerini sayfada gösterecektir. Aynı zamanda, bunları ayarlamak da mümkündür. WP_DEBUG_LOG 为trueHata bilgilerini kaydedin.wp-content/debug.logDosyada, incelemek için her şey hazır. Geliştirme işlemi tamamlandıktan sonra, lütfen üretim ortamında hata ayıklama (debugging) modunu mutlaka kapatmayı unutmayın.
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