WordPress tema geliştirmeye başlamak için bir rehber: Sıfırdan özel bir şablon oluşturma.

İnternet dünyasında, WordPress güçlü esnekliği ve kullanım kolaylığı sayesinde çeşitli türdeki web siteleri oluşturmak için tercih edilen bir platform haline gelmiştir. Özel temalar geliştirmek ise, WordPress’ü derinlemesine kontrol etmek ve kişiselleştirilmiş tasarımlar oluşturmanın temel becerisidir. Bu makale, sıfırdan başlayarak, temel ancak tam özellikli bir WordPress özel teması oluşturmak için gereken adımları, dosya yapısını ve temel kavramları öğrenmenize yardımcı olacaktır.

Konunun temel yapısı ve çekirdek dosyaları

En basit bir WordPress temasının en az iki dosyası olmalıdır.style.css和index.phpBunlar arasında,style.cssSadece bir stil şeması değil; aynı zamanda temanın “kimlik kartı”dır. Üst kısmındaki yorum satırı, WordPress’e tema ile ilgili bilgileri bildirmek için kullanılır.

style.cssDosya başlığına eklenen yorum örneği:

Tavsiye edilen okuma Sıfırdan Uzmanlığa WordPress Tema Geliştirme Kılavuzu: Özelleştirilmiş Web Siteleri Oluşturma。

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A simple starter theme for learning WordPress development.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

index.phpBu, temanın ana şablon dosyasıdır ve web sitesinin temel HTML yapısını oluşturmaktan sorumludur. Geliştirmenin ilerlemesiyle birlikte, zamanla bunu daha iyi kullanmayı öğreneceksiniz.index.phpİçerideki mantığı daha spesifik şablon dosyalarına ayırın, örneğin…header.php、footer.phpBu, konunun yapılandırılmasında kritik bir adımdır.

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.

Bir temayı başlatmak için gerekli dosyalar

Yukarıda bahsedilen iki dosyanın yanı sıra, işlevsel olarak eksiksiz bir modern tema genellikle aşağıdaki temel dosyaları da içerir:functions.php、header.php、footer.php和sidebar.php。

functions.phpBu, temanın işlevsel dosyasıdır ve temaya destek ekleyen özelliklerin, kayıt menülerinin, kenar çubuklarının vb. eklenmesi için kullanılır. Örneğin, makalelerde özel görsellerin kullanılmasını sağlayacak kodları buraya ekleyebilirsiniz.

Çekirdek Şablon Yapısı ve Dosya Adlandırma

WordPress, farklı sayfaların nasıl renderleneceğini belirlemek için katı bir şablon hiyerarşisi sistemine sahiptir. Bu kuralları anlamak, verimli geliştirmenin temelidir. Sistem, içeriği göstermek için en uygun şablon dosyasını otomatik olarak bulur.

Örneğin, tek bir makaleye erişildiğinde, WordPress şu sırayla arama yapar:single-{post-type}-{slug}.php、single-{post-type}.php、single.phpVe en sonunda…index.phpBu, belirli makale türleri veya hatta belirli makaleler için özel şablonlar oluşturabileceğiniz anlamına gelir.

Tavsiye edilen okuma WordPress tema geliştirme pratiği: Sıfırdan bire özel bir tema oluşturmanın kapsamlı rehberi。

Yaygın olarak kullanılan şablon dosyalarının analizi

Blog sayfaları için…home.phpBu, ana sayfa şablonudur (eğer blog ana sayfa olarak ayarlanmışsa).front-page.phpBu durumda en yüksek öncelik sahiptir ve özelleştirilmiş site ana sayfası için kullanılır.page.phpTek bir sayfa için kullanılır, ve…page-{slug}.phpBelirli sayfalar için (örneğin “Hakkımızda” sayfası) özgün tasarımlar oluşturulabilir.

Arşiv sayfası buna karşılık gelir.archive.phpDaha ayrıntılı olanlar var.category.php(Kategori dizini) vetag.php(Araç çubuğu). Arama sayfasında kullanılır.search.php404 Hata Sayfası Kullanımı404.php。

Konu özellikleri ve WordPress döngüleri

Konununfunctions.phpDosyalar, genişletilebilir özelliklerin (ekstra işlevlerin) temelidir. Burada, WordPress’in sunduğu çeşitli araçları ve özellikleri kullanabilirsiniz.钩子(Hooks) – Bunları da içerir:动作和过滤器——Çekirdek işlevleri değiştirmek veya geliştirmek 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.

Önemli bir işlem, kullanmaktır.add_theme_support()Bu fonksiyonlar, temanın desteklediği özellikleri belirtmek için kullanılır; örneğin otomatik Feed bağlantıları, makale özel görselleri, özelleştirilebilir Logolar vb.

WordPress’ün çekirdeği “The Loop”tur; bu, şablonlarda makaleleri görüntülemek için kullanılan PHP kod yapısıdır. Makale listelerinin görüntülendiği hemen hemen tüm yerlerde bu yapıya ihtiyaç vardır.

Temel döngü yapıları örnekleri:

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

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    </article>
<?php endwhile; else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Döngü içinde, şunlar gibi şeyler kullanabilirsiniz:the_title()、the_content()、the_excerpt()Metin içeriğini çıkarmak için şablon etiketlerini kullanın.

Kayıt menüsü ve yan menü.

geçmek (bir fatura veya teftiş vb.)register_nav_menus()Fonksiyon, bunu A function, you can do this infunctions.phpKonuların kaydedildiği navigasyon menüsünün konumunu belirleyin. Daha sonra bu bilgiyi ön uç (frontend) şablonlarında kullanın.wp_nav_menu()Fonksiyon çağrısı.

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.

Aynı şekilde, kullanın.register_sidebar()Fonksiyonlar, araç çubuğu (yan panel) bölgesini tanımlayabilir ve daha sonra…sidebar.phpÇince'de kullanılır.dynamic_sidebar()Onları göstermek için.

Stil ve betik dosyalarının dahil edilmesi ile duyarlı (responsive) tasarım

Modern temaların geliştirilmesinde, stil şemaları (CSS) ve JavaScript betiklerinin doğru bir şekilde eklenmesi gerekmektedir. WordPress bunu sağlamaktadır.wp_enqueue_style()和wp_enqueue_script()Bu görevi tamamlamak için bir fonksiyon kullanılır; bu sayede bağımlılıklar doğru bir şekilde yönetilir ve dosyaların tekrar tekrar yüklenmesi önlenir.

En iyi uygulama şudur:functions.phpOrtada bir fonksiyon oluşturun ve bunu kullanın.wp_enqueue_scriptsKancalar, kaynaklarınızı monte etmek için kullanılır.

function my_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Responsive tasarım artık standart hale gelmiştir. HTML kodunuzun ilgili bölümlerine viewport meta etiketlerini eklemeniz gerekmektedir:<meta name="viewport" content="width=device-width, initial-scale=1">Ve farklı ekran boyutlarına uyum sağlamak için CSS’de medya sorguları kullanın.

Ön işleyici ve görev çalıştırıcısı kullanmak

Geliştirme verimliliğini artırmak için birçok geliştirici, Sass/Less gibi CSS öncelikli işleyicileri ve Webpack, Gulp gibi derleme araçlarını kullanır. Bu araçlar, kod sıkıştırma, birleştirme, ön ekler ekleme gibi işlemleri otomatik olarak gerçekleştirebilir. Başlangıçta bunlara ihtiyaç duyulmasa da, projenin karmaşıklığı arttıkça iş akışınızı büyük ölçüde iyileştireceklerdir.

Özetle.

WordPress tema geliştirme, yaratıcılığı gerçeğe dönüştürme sürecidir. En temel şeyleri anlamaktan başlayarak…style.css和index.phpBaşlayın ve şablon yapılarını, temel fonksiyonları ve döngüleri adım adım öğrenin; stil betiklerini düzenli bir şekilde ekleyebilecek ve duyarlı (responsive) tasarımı gerçekleştirebilecek seviyeye ulaşana kadar devam edin. Bu öğrenme yolculuğu, pratik yapma ve zorluklarla doludur. Önemli olan pratik yapmaktır. Basit bir “Hello World” temeliyle başlayın, yeni özellikler ekleyin ve şablonları analiz edin; böylece zamanla güçlü özelliklere ve estetik bir tasarıma sahip özelleştirilmiş bir WordPress teması oluşturabilirsiniz.

Sıkça Sorulan Sorular.

Bir tema geliştirmeden önce yerel bir ortama ihtiyaç var mı?

Evet, yerel geliştirme ortamında çalışmanız şiddetle tavsiye edilir. XAMPP, MAMP, Local by Flywheel veya Docker gibi araçları kullanarak yerel bilgisayarınızda eksiksiz bir WordPress çalışma ortamı oluşturabilirsiniz. Bu sayede, çevrimiçi web sitenizi etkilemeden kodları özgürce test edip hatalarınızı düzeltebilirsiniz.

Bir temanın çok dilli çeviriyi desteklemesini nasıl sağlayabilirsiniz?

WordPress uluslararasılaşması (i18n),gettextTeknik uygulama. Kodda, aşağıdakiler gibi şeyleri kullanmanız gerekir:()、_e()、esc_html()Tüm çevrilmeye ihtiyaç duyan metin dizelerini kapsayacak fonksiyonlar kullanın. Daha sonra, Poedit gibi araçlar yardımıyla çeviri işlemini gerçekleştirebilirsiniz..potŞablon dosyalarını oluşturun ve farklı diller için gerekli içerikleri hazırlayın..po和.moSon olarak,functions.phpÇince'de kullanılır.load_theme_textdomain()Function loading.

Alt konuların ne işe yaradığı ve nasıl oluşturulduğu?

Alt temalar, mevcut bir üst temaya dayanarak değişiklikler yapmanıza ve özelleştirmeler yapmanıza olanak tanır; bunu üst temanın dosyalarını doğrudan değiştirmeden gerçekleştirebilirsiniz. Böylece, üst tema güncellendiğinde özelleştirdiğiniz kodlar korunur. Bir alt tema oluşturmak çok basittir: Yeni bir tema klasörü oluşturun ve içine gerekli dosyaları yerleştirin.Template:Babalar konu dizini adını gösterenstyle.cssVe bir tane daha…functions.phpBu dosya, kendi fonksiyonlarınızı eklemek için kullanılır. Alt temalar, öncelikle kendi şablon dosyalarını yükler; bulunamazsa üst temaya geri dönerler.

Konu geliştirme sürecinde sıkça kullanılan hata ayıklama (debugging) yöntemleri nelerdir?

Aç.WP_DEBUGBu, ilk adımdır.wp-config.phpAyarlar bölümünde…define( 'WP_DEBUG', true );Bu, tüm PHP hatalarını, uyarılarını ve bildirimlerini ekranda gösterecektir. Daha karmaşık hata ayıklama işlemleri için ise başka araçlar kullanılabilir.error_log()Fonksiyon, bilgileri sunucunun hata günlüğüne yazar veya başka bir yöntem kullanır.var_dump()、print_r()HTML ile uyumluEtiketler, sayfada değişken yapılarını güvenli bir şekilde görüntülemek ve kontrol etmek için kullanılır.