Başlangıçtan Uzmanlığa: WordPress Tema Geliştirme Kapsamlı Rehberi ve Pratik Eğitim Kursu

Konu Geliştirme İçin Ortam Hazırlığı ve Temel Kavramlar

WordPress tema geliştirmeye başlamak için öncelikle uygun bir yerel geliştirme ortamı kurmanız gerekmektedir. Bu, sadece geliştirme verimliliğini artırmakla kalmaz, aynı zamanda çevrimiçi hata ayıklamanın getirebileceği riskleri de önler. Yaygın yerel geliştirme çözümleri arasında XAMPP, MAMP, Local by Flywheel gibi araçlar bulunmaktadır; bunlar PHP, MySQL ve web sunucusunu bir araya getirir ve tek tıklamayla kurulabilirler. Kendinize uygun bir araç seçin ve kullanacağınız aracın PHP sürümünün hedef sunucu ortamınızla uyumlu olduğundan emin olun.

Bir WordPress teması, esasen bir…/wp-content/themes/Katalog altındaki klasörler, bir dizi zorunlu ve isteğe bağlı PHP, CSS, JavaScript ve resim dosyası içermektedir. En temel temalar için yalnızca iki dosya gereklidir:style.css和index.phpBunlar arasında,style.cssSadece stil şablonları değil, aynı zamanda temanın meta veri bilgilerini de içerirler. Bu bilgiler, WordPress’in temayı tanımasında kilit rol oynayan özel bir yorum bloğu aracılığıyla tanımlanır.

Konunun temel dosya yapısını anlamak

style.cssDosyanın en üstündeki yorum bloğu, konunun “kimlik kartı”dır. Standart bir meta veri örneği aşağıdaki gibidir:

Tavsiye edilen okuma WordPress tema geliştirme nedir?。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 开发者名称
Author URI: https://example.com
Description: 这是一个为学习WordPress主题开发而创建的简单主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

index.phpBu, temanın varsayılan şablon dosyasıdır ve tüm sayfa isteklerinin son çözümü olarak kullanılır. Geliştirme ilerledikçe, daha spesifik şablon dosyaları oluşturmaya başlayacaksınız.header.php、footer.php、single.phpBunlar gibi unsurlar, tam bir işlevin oluşmasını 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.

Bir temanın şablon hiyerarşisini ve döngülerini oluşturma

WordPress, farklı içeriklerin nasıl görüntüleneceğine karar vermek için “şablon hiyerarşisi” adı verilen bir akıllı sistem kullanır. Kullanıcı bir sayfayı ziyaret ettiğinde, WordPress ilgili şablon dosyasını belirli bir öncelik sırasına göre arar. Örneğin, bir blog makalesine erişildiğinde, WordPress sırasıyla şu adımları izler:single-post.php、single.phpVe en sonunda…index.phpBu hiyerarşiyi anlamak ve kullanmak, esnek ve güçlü özelliklere sahip temalar oluşturmanın temelidir.

WordPress’taki döngülerin (loops) çalışma prensibini kavramak

Tüm içeriğin gösterilmesinin merkezinde “WordPress döngüsü” bulunmaktadır. Bu, mevcut sayfada gösterilmesi gereken makalelerin olup olmadığını kontrol etmek için kullanılan bir PHP kod yapısıdır; eğer varsa, bu makaleler döngü içinde tek tek gezilerek görüntülenir. En temel döngü yapısı şu şekildedir:

<h2><?php the_title(); ?></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>

Bu döngüde,have_posts()和the_post()Bu, çekirdek bir fonksiyondur.the_title()和the_content()Şablon etiketleri, makalelerin spesifik bilgilerini çıktı olarak kullanılır. Döngüler sayesinde makale listelerini, tek makale sayfalarını ve içeriği sorgulayıp göstermek isteyen her alanı kontrol edebilirsiniz.

Başlık ve alt kısım için şablon dosyaları oluşturun.

Kodun yeniden kullanılabilirliğini ve sürdürülebilirliğini artırmak için, web sayfalarının üst kısmı (Header) ve alt kısmı (Footer) genellikle ayrı şablon dosyaları olarak oluşturulur.header.phpDosya, belge türü beyanını içermelidir.Bölge ve web sitesinin üst kısmındaki genel navigasyon bölümü. Daha sonra,index.phpBu ve diğer dosyalarda kullanılmaktadır.get_header();Bunu tanıtmak için bir fonksiyon kullanacağız.

Tavsiye edilen okuma Sıfırdan Başlayarak: WordPress Tema Geliştirmenin Temel Mimarisi。

Aynı şekilde, oluşturmak…footer.phpBu dosya, web sitesinin genel alt kısmına ait bilgileri, betik referanslarını ve diğer içerikleri içermektedir ve kullanılmaktadır.get_footer();Fonksiyonun tanıtımı.get_sidebar();和get_template_part();Aynı zamanda modüler şablonlar için sıkça kullanılan bir fonksiyondur.

Konu Özellikleri ve Gelişmiş Özelliklerin Uygulanması

Olgun bir WordPress temasının sadece estetik şablonlara ihtiyacı yoktur; aynı zamanda güçlü özellik desteğine de ihtiyacı vardır. Bu, temanın sunduğu özellikler ve işlevler aracılığıyla sağlanır.functions.phpBu işlevleri gerçekleştirmek için bir dosya kullanılır. Bu dosya, temanın “beyni” gibidir; işlevler eklemek, bileşenleri kaydetmek ve varsayılan davranışları değiştirmek için kullanılır.

İşlevsel dosyaya tema desteği ekleyin.

functions.phpBu dosya, WordPress’in temel özelliklerini etkinleştirmek için kullanılır; örneğin makale özetleri, özelleştirilmiş menüler, HTML5 işaretlemeleri desteği gibi. İşte yaygın bir özellik etkinleştirme örneği:

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_theme_setup() {
    // 添加对文章特色图片（缩略图）的支持
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_theme_support()Bu fonksiyon, bir temanın desteklediği çeşitli özellikleri belirtmek için kullanılır.register_nav_menus()Kayıtlı yemek birimlerinin konumları, arka planda “Görünüm” -> “Menü” bölümünde belirlenebilir ve şablonlarda kullanılabilir.wp_nav_menu()Fonksiyon çağrısı.

Stil şemalarını ve betik dosyalarını içe aktarın.

Doğru kaynak sıralaması (enküme – enqueue), profesyonel tema geliştirme konusunda mutlaka öğrenilmesi gereken bir beceridir. CSS veya JS dosyalarına asla doğrudan şablonlarda sabit bağlantılar (hard links) eklemeyin; bunun yerine uygun yöntemleri kullanın.wp_enqueue_style()和wp_enqueue_script()Bu, bağımlılıkların doğru bir şekilde yönetilmesini sağlar ve kaynakların tekrarlanan yüklenmesini veya çakışmalarını önler.

在functions.phpEkleme:

Tavsiye edilen okuma Sıfırdan Başlayın: WordPress Tema Geliştirme Kapsamlı Rehberi ve En İyi Uygulamalar。

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 引入自定义JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

get_stylesheet_uri()Alınan şey…style.cssYolun adı, ve…get_template_directory_uri()Alınan, temanın ana dizininin URL’sidir.

Özel sayfa şablonları ve alt temalar oluşturun.

Belirli sayfa tasarım ihtiyaçlarını karşılamak için özel sayfa şablonları oluşturabilirsiniz. Örneğin, kenar çubuğuna ihtiyaç duymayan, tam genişlikte bir sayfa şablonu oluşturabilirsiniz. Yapmanız gereken, herhangi bir PHP dosyasının en üstüne belirli bir şablon adı yorumu eklemek ve ardından bu dosyayı tema dizinine yüklemektir. Böylece, arka uç sayfa düzenleyicisinin “Şablonlar” açılır menüsünde bu şablonu bulabilirsiniz.

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.

Özel sayfa şablonlarının oluşturulma yöntemi

“Create a named…”template-fullwidth.phpBelgenin başlangıcı şu şekilde olmalıdır:

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽度页面模板
 */

Bu dosyada, bağımsız HTML ve PHP yapılarını yazabilirsiniz; bunlar muhtemelen diğer bileşenleri içermeyebilir.get_sidebar();Bu şablonu sayfa oluştururken seçerseniz, WordPress içeriği görüntülemek için bunu kullanacaktır.

Alt konuları kullanarak güvenli bir şekilde özelleştirmeler ve yükseltmeler yapın.

Üçüncü parti temaları doğrudan değiştirmek tehlikelidir; çünkü tema güncellemeleri yaptığınız tüm değişiklikleri siler. Doğru yöntem, bir alt tema (sub-theme) oluşturmaktır. Alt tema yalnızca kendi özelleştirilmiş dosyalarınızı içerir ve üst temanın (parent theme) tüm özelliklerini devralır. Alt tema için yalnızca bir…style.cssVe biriylefunctions.php。

alt konuyla ilgilistyle.cssBaşlık yorumları mutlaka şunları içermelidir:Template:Belirtilen dizin adı, üst konunun (parent topic) dizin adını temsil eder.

/*
Theme Name: 我的子主题
Template: twentytwentyfour
*/

Alt konuda…functions.phpBurada yeni özellikler ekleyebilir veya üst temanın fonksiyonlarını değiştirebilirsiniz. Eğer sadece stil eklemek istiyorsanız, alt tema bunu yapabilir.style.cssEbeveyn temanın stilinden sonra otomatik olarak yüklenir; bu nedenle kurallarınız ebeveyn temanın kurallarını geçersiz kılacaktır.

Özetle.

WordPress tema geliştirme, temel dosya yapısını anlamakla başlayan, ardından şablon hiyerarşisini ve döngü mekanizmalarını öğrenen ve son olarak işlevsel dosyalar aracılığıyla özel özellikler ekleyen bir süreçtir. Temel nokta, şablonları (örneğin başlık, son, kenar çubukları gibi) modüler bir şekilde oluşturmak ve kaynakları sıralama kurallarına göre yönetmektir. Özel sayfa şablonları oluşturarak özel düzenleme ihtiyaçlarını karşılayabilirsiniz; alt tema (sub-theme) teknolojisini ise güvenli bir şekilde özelleştirmek ve gelecekteki bakımları kolaylaştırmak için önemlidir. Bu süreçte geliştiricilerin PHP, HTML, CSS ve JavaScript bilgilerini, WordPress’e özgü fonksiyonlar ve eklentilerle (hooks) birleştirmeleri gerekmektedir. Böylece hem estetik hem de işlevsel olarak güçlü bir web sitesi arayüzü oluşturulabilir.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için PHP’de ustalaşmak zorunda mıyım?

Evet, sağlam bir PHP temeline sahip olmak gerekiyor. WordPress kendisi PHP ile geliştirilmiştir; temaların şablon dosyaları ve işlevsel mantığı, dinamik içerik üretimi ile veri alışverişi için PHP koduna dayanır. HTML, CSS ve JavaScript, ön uç görünümün temelini oluştururken, PHP bu ön uç öğelerini WordPress’in arka uç veritabanıyla bağlayan köprüdür.

Neden özelleştirdiğim stiller etkili olmuyor?

Bu durum genellikle CSS seçicilerinin önceliğinin (specificity) yetersiz olması veya stil şemasının doğru şekilde yüklenmemesinden kaynaklanır. Öncelikle, tarayıcının geliştirici araçlarını kullanarak CSS kurallarınızın ilgili elementlere uygulandığından ve daha yüksek öncelikli kurallar tarafından örtülmediğinden emin olun. Ayrıca, stil şemasını doğru bir şekilde yüklediğinizden de emin olun.functions.phpÇin'dekiwp_enqueue_style()Stil şemalarını doğrudan HTML başlığında yazmak yerine, bunları yüklemek için fonksiyonlar kullanılır. Alt temalar kullanılırken, üst temanın stil şemasının doğru bir şekilde devralınıp devralınmadığından emin olunmalıdır.

Temanın functions.php dosyası ve eklentiler arasında ne fark var?

functions.phpBu özellikler mevcut temayla sıkı bir şekilde bağlantılıdır ve kullanıcı temayı değiştirdiğinde bu özellikler de devre dışı kalır. Etki alanları yalnızca bu temayı kullanan web siteleriyle sınırlıdır. Öte yandan, eklentiler tarafından sağlanan özellikler temadan bağımsızdır; bu nedenle temayı değiştirdikten sonra eklentilerin işlevleri genellikle hala çalışır ve farklı web siteleri arasında daha kolay bir şekilde yeniden kullanılabilir. İyi bir ilke şudur: Eğer bir özellik yalnızca içeriği görüntülemek için kullanılıyorsa (örneğin düzen, stil), temanın içine yerleştirilmelidir; ancak web sitesinin temel işlevlerini artırmak için kullanılıyorsa (örneğin iletişim formları, SEO optimizasyonu), bu özelliklerin bir eklenti olarak oluşturulması daha iyidir.

Temamı nasıl birden çok dil çevirisine destekleyebilirim?

İki şeyi iyi yapman gerekiyor: Metin alanlarının hazırlanması ve dil dosyalarının oluşturulması. Öncelikle, tüm temada, kullanıcılara yönelik tüm metinler için WordPress’in çeviri fonksiyonlarını kullanın. Örneğin:__('文本', 'my-theme')或_e('文本', 'my-theme')Ve emin olun…style.cssÇin'de tanımlanan.Text DomainBuradaki ‘my-theme’ ile uyumlu olmalı. Daha sonra, Poedit gibi bir araç kullanarak tema dosyalarını tarayın ve gerekli değişiklikleri yapın..potŞablon dosyası..po和.moDosya, konunun içine yerleştirilmiştir./languages/İçindekiler bölümünde. WordPress, web sitesinin dil ayarlarına göre ilgili çevirileri otomatik olarak yükler.