Sıfırdan başlayarak WordPress tema geliştirmeyi öğrenmeniz için adım adım rehber: Profesyonel web siteleri oluşturmanın kapsamlı yöntemi

Geliştirme ortamınızı ve temel dosyalarınızı oluşturun.

Kod yazmaya başlamadan önce, stabil ve verimli bir geliştirme ortamına sahip olmak çok önemlidir. Local by Flywheel, XAMPP veya MAMP gibi yerel geliştirme ortamı yazılımlarını kullanmanız önerilir; bu yazılımlar, kişisel bilgisayarınızda WordPress için gerekli PHP, MySQL ve sunucu ortamını hızlı bir şekilde kurmanıza olanak tanır. Aynı zamanda, Visual Studio Code gibi uygun bir kod editörü seçin ve PHP algılama özellikleri ile WordPress için hazırlanmış kod parçaları gibi eklentileri yükleyin; bu, geliştirme verimliliğinizi büyük ölçüde artıracaktır.

Bir WordPress teması, esasen bir… /wp-content/themes/ Katalog altındaki klasörler, belirli işlevlere sahip bir dizi PHP şablon dosyası ve stil dosyası içermektedir. En temel temanın en az iki dosyası gerekmektedir:

İlk olanı… style.cssSadece bir temanın stil şeması değil, aynı zamanda temanın “kimlik kartı”dır. Dosyanın baş kısmında, standart bir biçime sahip tema bilgilerini içeren bir açıklama bölümü bulunmalıdır.

Tavsiye edilen okuma Yeni Başlayanlar İçin Nihai Rehber: Sıfırdan Başlayarak Kişiselleştirilmiş Bir WordPress Teması Oluşturma。

/*
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
*/

İkincisi ise… index.phpBu, temanın varsayılan şablon dosyasıdır ve WordPress daha spesifik bir şablon dosyası bulamadığında otomatik olarak başvurulan dosyadır. Başlangıçta yalnızca basit bir HTML parçası içermesine rağmen, temanın WordPress tarafından tanınmasını ve etkinleştirilmesini sağlar.

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.

Şablon hiyerarşisini anlamak ve temel şablonları oluşturmak

WordPress, farklı türdeki sayfalar için hangi şablon dosyasının kullanılacağını belirlemek için özenle tasarlanmış bir “şablon hiyerarşisi” kullanır. Bu kurallar, bir öncelik sistemi gibi işler. Örneğin, tek bir makaleye erişildiğinde, WordPress öncelikle ilgili şablonu arar. single-post.phpEğer yoksa, arayın. single.phpSonunda, geri alma işlemine geçiyoruz. index.phpBu kuralları anlamak, verimli geliştirmenin anahtarıdır; çünkü bu kurallar sayesinde ana sayfa, makale sayfası, sayfa, kategori arşivi gibi çeşitli içerik türleri için hassas ve özelleştirilmiş şablonlar oluşturabilirsiniz.

Şimdi, birkaç temel şablon oluşturarak başlayacağız. İlk olarak ana sayfa şablonu geliyor; genellikle “home” veya “index” olarak adlandırılır. front-page.phpEğer bu dosya mevcutsa, siteye ait statik ana sayfa olarak öncelikli olarak kullanılacaktır. Temel bir ana sayfa şablonu, en yeni makale listesini görüntülemek için kullanılan bir döngü içerecektir.

Makale sayfalarının şablonları genellikle şu amaçlarla kullanılır: single.phpBu şablonun odak noktası, WordPress’in ana döngüsü (The Loop) kullanılarak tek bir makalenin tam içeriğini, başlığını, meta verilerini (yazar, yayın tarihi gibi) ve yorum bölümünü göstermektir.

Sayfa şablonları, “Hakkımızda” veya “Bize Ulaşın” gibi bağımsız sayfaların görüntülenmesi için kullanılır ve ilgili dosyalar şunlardır: page.phpYapısı makale sayfalarına benzer; ancak genellikle kategoriler, etiketler gibi makalelere özgü meta veriler içermez.

Tavsiye edilen okuma Nihai Kılavuz: Güçlü ve Esnek Bir WordPress Teması Nasıl Geliştirilir?。

Arşiv Sayfası Şablonu (örneğin…) archive.phpBu özellik, makalelerin kategoriler, etiketler, yazarlar veya tarihler altında listelenmesi için kullanılır. Birden fazla makalenin özetini veya başlığını döngüsel olarak listeleyerek çalışır.

Temaların özelliklerini fonksiyonlar ve hook’lar kullanarak genişletmek

Sadece şablon dosyaları, içeriğin görünümünü kontrol edebilir. Bir temaya dinamik özellikler eklemek ve WordPress çekirdeğiyle derinlemesine entegre olmak için, WordPress tarafından sağlanan geniş fonksiyonlar ve kancalar (Hooks) kullanılmalıdır. Öncelikle, temanın kök dizininde “functions.php” adında bir dosya oluşturmanız gerekmektedir. functions.php Bu dosya bir şablon değil; bir temanın “işlevsel eklentisi”dir ve tüm özelleştirilmiş PHP kodlarının saklanması için kullanılır.

Temel ve son derece önemli bir işlem, kullanmaktır. add_theme_support() Bu fonksiyonlar, bir temanın desteklediği özellikleri belirtmek için kullanılır. Örneğin, makale özetlerinin (özel görsellerin) ve özelleştirilebilir menülerin etkinleştirilmesi, çoğu modern temanın standart özelliklerindendir.

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.

function my_first_theme_setup() {
    // 支持文章特色图像
    add_theme_support('post-thumbnails');
    // 支持自定义菜单
    add_theme_support('menus');
    // 支持在文章编辑器中输出的HTML5标签
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption'));
    // 动态生成<title>标签
    add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_first_theme_setup');

Yukarıdaki kodda,add_action() Bu, bir “kancanın” kullanımıdır. Kendi özelleştirdiğimiz fonksiyonu kullanmamızı sağlar. my_first_theme_setup WordPress çekirdeğine monte edilmiş after_setup_theme Bu eylem noktasına dikkat edin. Kanca (Hook) iki türe ayrılır: Eylem (Action) ve Filtre (Filter). Eylemler, kodunuzu belirli bir zamanda çalıştırmak için kullanılır (örneğin yukarıdaki örnekte olduğu gibi); filtreler ise WordPress’in işleme sürecinde oluşturduğu verileri değiştirmek için kullanılır.

Bir diğer kritik görev, kullanımı içermektedir. wp_enqueue_style() 和 wp_enqueue_script() Bu fonksiyon, stil şemalarını ve JavaScript dosyalarını doğru bir şekilde içe aktarmak için kullanılır. Bu işlem, ilgili dosyaların belirli bir yere (örneğin, bir web sayfasına) monte edilmesiyle gerçekleştirilir. wp_enqueue_scripts Bunu gerçekleştirmek için “kancalar” (hooks) kullanılır; bu kancalar, kaynakların düzenli bir şekilde yüklenmesini sağlar ve çakışmaların önlenmesine yardımcı olur.

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

Tasarım temalarının stilini belirleme ve duyarlı (responsive) bir düzenin gerçekleştirilmesi

Konunun görsel sunumu tamamen CSS tarafından kontrol edilir. Farklı tarayıcılarda tutarlı bir görünüm elde etmek için öncelikle varsayılan stilleri sıfırlayabilirsiniz. Daha sonra, WordPress tarafından oluşturulan HTML yapısına göre kendi stillerinizi yazabilirsiniz. WordPress, çoğu eleman için belirli CSS sınıfları üretir. .post、.sticky、.widget Bu sınıfları kullanarak elemanları hassas bir şekilde konumlandırabilir ve güzelleştirebilirsiniz.

Tavsiye edilen okuma WordPress Tema Geliştirme Pratik Rehberi: Sıfırdan Yüksek Performanslı Web Siteleri Oluşturma。

Modern web geliştirme sürecinde, duyarlı (responsive) tasarım olmazsa olmazdır. Bu, temanızın cep telefonundan masaüstüne kadar çeşitli ekran boyutlarına uyum sağlayabilmesi gerektiği anlamına gelir. Duyarlı tasarımın gerçekleştirilmesi esas olarak CSS medya sorgularına (CSS media queries) dayanır.

/* 基础移动端样式 */
.container {
    width: 100%;
    padding: 0 15px;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备 */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

CSS yazmanın yanı sıra, ayrıca şunları da yapabilirsiniz: header.php 和 footer.php Şablon dosyaları, web sitesinin başlık ve alt bilgi (footer) bölümlerinin kodlarını modüler hale getirmek için kullanılır. Daha sonra, diğer şablonlarda bu modüler kodlar tekrar kullanılabilir. get_header() 和 get_footer() Fonksiyonlar kullanılarak bunlar çağrılır; bu da kod tekrarını büyük ölçüde önler. Yan menü için de ilgili fonksiyonlar oluşturulabilir. sidebar.phpVe kullanın. get_sidebar() Çağırın. Kenar çubuğu şablonunda kullanın. dynamic_sidebar() Fonksiyonlar ve register_sidebar() Fonksiyonların birleştirilmesiyle, arka planda “Görünüm -> Araçlar” bölümünde dinamik olarak yönetilebilen widget alanları oluşturulabilir.

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.

Özetle.

WordPress tema geliştirme, temel kavramları (örneğin şablon hiyerarşisi) anlamaktan pratik kodlama yapmaya (şablon dosyaları oluşturmak, fonksiyon eklentileri kullanmak) kadar sistematik bir süreçtir. Bir ortam kurarak ve temel şablon dosyalarını oluşturarak başlayan bu süreç, daha sonra temaların geliştirilmesi ve özelleştirilmesiyle ilerler. functions.php Ek özellikler ekleyin ve yapılandırılmış CSS ile modüler şablon bileşenleri (örneğin başlık, altlık) kullanarak estetik ve duyarlı (responsive) bir arayüz oluşturun. Bu temel becerileri öğrendikten sonra, profesyonel ve özelleştirilebilir bir WordPress teması oluşturma yeteneğine sahip olursunuz. WordPress resmi dokümantasyonunu ve topluluk kaynaklarını sürekli olarak incelemek, geliştirme seviyenizi sürekli olarak artırmanın anahtarıdır.

Sıkça Sorulan Sorular.

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

Evet, PHP’yi derinlemesine öğrenmek, WordPress temaları geliştirmek için gereklidir. Tüm WordPress şablon dosyaları PHP dosyaları olduğundan, WordPress’in temel fonksiyonlarını çağırmak, veri işlemlerini yapmak ve içerik çıktısını kontrol etmek için PHP kodu kullanmanız gerekir. Temel stil değişiklikleri sadece CSS ile yapılabilir; ancak her türlü işlevsel özelleştirme ve şablon oluşturma PHP olmadan mümkün değildir.

Konudaki functions.php dosyasının özel bir işlevi var mı?

functions.php Dosyalar, bir temanın işlevsel çekirdeğidir ve temanın etkinleştirilmesiyle birlikte çalışan eklentiler gibi görev görürler. Burada temanın özelliklerini ekleyebilir veya değiştirebilirsiniz; örneğin yemek tariflerinin yerleştirileceği alanları belirleyebilir, araç çubuğu bölümlerini tanımlayabilir, temaya özel seçenekler ekleyebilir, betikleri ve stilleri sırayla yükleyebilir, özel fonksiyonlar oluşturabilir ve WordPress’in varsayılan davranışlarını değiştirmek için çeşitli eylemler ve filtreler kullanabilirsiniz. Bu dosyaların kodu, tema etkinleştirildiğinde otomatik olarak yüklenir.

Konumu nasıl çok dilli çeviriye destekli hale getirebilirim?

Bir temanın çok dilli olmasını sağlamak için iki şey yapmanız gerekiyor: Öncelikle, temanın… style.css Başlık açıklamalarında ve metin dizelerinin kullanıldığı tüm şablon fonksiyonlarında, belirli bir metin alanı (Text Domain) kullanılmalıdır. Örneğin: my-themeTüm çevrilmeye ihtiyaç duyan metinler kullanılmalıdır. __()、_e() WordPress’in fonksiyonlarını sarmalayın. Ardından, Poedit gibi bir araç kullanarak tema dosyalarını tarayın ve gerekli değişiklikleri yapın. .pot Şablon dosyası; çevirmenler bu dosyaya dayanarak farklı dillerde içerikler oluşturabilirler. .po 和 .mo Derleme dosyalarını oluşturun. Dil dosyalarını tema klasörüne yerleştirin. /languages/ Kataloğun altında olabilir.

Geliştirme sürecinde karşılaşılabilecek hataları nasıl ayıklarız?

Geliştirme aşamasında, WordPress’in hata ayıklama modunun açılması şiddetle tavsiye edilir. Web sitesinin kök dizininde bulunan… wp-config.php Dosyayı bulun ve aşağıdaki kod satırını değiştirin:define('WP_DEBUG', true);Aynı zamanda hepsini de açabilirsiniz. WP_DEBUG_LOG Hataları bir günlük dosyasına kaydedin veya bunu etkinleştirin. WP_DEBUG_DISPLAY Hataları sayfada gösterin. Bu, tüm PHP uyarılarını, bildirimlerini ve hatalarını görsel olarak görmenize yardımcı olacak ve kod hatalarını bulmanızı büyük ölçüde kolaylaştıracaktır. Temayı yayınlamadan önce, mutlaka hata ayıklama modunu kapatmayı unutmayın.