Sıfırdan özel bir WordPress teması nasıl geliştirilir: Tam rehber.

Özelleştirilmiş bir WordPress teması geliştirmek, sistematik bir iştir; bu süreç sadece web sitenizin görünümünü ve işlevlerini tamamen kontrol etmenizi sağlamakla kalmaz, aynı zamanda WordPress’in temel çalışma mekanizmalarını derinlemesine anlamanız için de mükemmel bir yoldur. Mevcut temaları kullanmaktan farklı olarak, özelleştirilmiş bir tema geliştirmek, en temel HTML, CSS, PHP ve JavaScript bilgilerinden yola çıkarak, sizin veya müşterinizin ihtiyaçlarına tam olarak uygun özgün bir web sitesi oluşturmayı ifade eder. Bu süreç; planlama, dosya yapısının oluşturulması, şablon geliştirme, işlevlerin entegrasyonu ve son olarak test ile yayınlama adımlarını içerir.

Geliştirme öncesi hazırlık işlemleri

İlk satır kodu yazmadan önce, yeterli hazırlık başarının anahtarıdır. Bu, net hedefler belirlemeyi, uygun bir geliştirme ortamı oluşturmayı ve gerekli araçlara aşina olmayı içerir.

Açık konu ihtiyaçlarını ve planlamasını belirle.

Öncelikle, web sitesinin amacını, hedef kitlesini ve temel işlevlerini netleştirmeniz gerekiyor. Bir blog mu, bir şirketin resmi web sitesi mi yoksa bir e-ticaret sitesi mi? Web sitesi için gereken sayfa türlerini planlayın; örneğin ana sayfa, makale sayfası, arşiv sayfası vb. Aynı zamanda, temanın responsive (uyumlu) tasarımını, tarayıcı uyumluluğunu ve belirli eklentilerle uyumlu olup olmadığını da düşünün. Basit çizimler (wireframe diagramlar) veya tasarım taslakları, sonraki geliştirme sürecine büyük ölçüde yardımcı olacaktır.

Tavsiye edilen okuma Sıfırdan Uzmanlığa WordPress Tema Geliştirme Pratik Rehberi: Özel Web Sitesi Temaları Oluşturma。

Yerel geliştirme ortamını kurmak.

Verimli ve güvenli bir geliştirme süreci için, yerel bilgisayarınızda bir geliştirme ortamı kurmanız şiddetle tavsiye edilir. XAMPP, MAMP, Local by Flywheel veya DevKinsta gibi araçları kullanabilirsiniz; bunlar WordPress, PHP ve MySQL veritabanını yerel olarak hızlı bir şekilde kurmanıza olanak tanır. Yerel ortam, çevrimiçi web sitenizi etkilemeden özgürce test yapmanıza imkan tanı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.

Gerekli geliştirme araçlarına aşina olmak

Kod editörünün yanı sıra, bazı yardımcı araçlara da ihtiyacınız olacak. Tarayıcı geliştirici araçları, CSS ve JavaScript’i hata ayıklamak için kullanılır; Git gibi sürüm kontrol sistemleri, kod değişikliklerini yönetmek için kullanılır; ayrıca, ön uç (frontend) derleme süreçlerini yönetmek amacıyla Node.js ve NPM’ye de ihtiyaç duyabilirsiniz. Örneğin, Sass kullanarak CSS’yi derlemek veya JavaScript’i paketlemek için bunlardan yararlanabilirsiniz.

Bir konunun temel yapısını ve çekirdek dosyalarını oluşturma

Bir WordPress teması, esasen bir…/wp-content/themes/Katalog altındaki klasörler, belirli bir dizi dosya içermektedir. En temel dosyayı oluşturarak başlayalım.

Konu Bilgileri Dosyası

Her konunun mutlaka bir başlığı olmalıdır.style.cssBu dosyanın baş kısmındaki yorum bloğu, temanın meta verilerini tanımlamak için kullanılır. Bu, WordPress’in bir temayı tanımasının başlangıç noktasıdır.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始开发的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

“Text Domain”, uluslararasılaştırma (internationalization) amacıyla kullanılır; bu örnekte ise…my-custom-theme。

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Başlangıçtan Uzmanlığa。

Gerekli şablon dosyaları

En az iki temel dosyaya ihtiyaç vardır:index.php和style.cssAncak, işlevsel bir tema oluşturabilmek için daha ayrıntılı şablon dosyaları oluşturmamız gerekiyor.
* index.phpBu, temanın ana şablonudur ve daha spesifik şablonlar mevcut değilse, WordPress bunu varsayılan olarak kullanır.
* header.phpBelge başlığını içeren…Bölge ve sayfa başındaki HTML kodları.
* footer.phpSayfanın alt kısmında bulunan HTML kodunu ve kapatma etiketlerini içerir.
* functions.phpBu, temanın “işlevsellik” dosyasıdır ve temaya destek, menüler, araç çubuğu alanları, stil şemaları ve betikler gibi özelliklerin eklenmesi için kullanılır.

geçmek (bir fatura veya teftiş vb.)get_header()， get_footer()， get_sidebar()Bu tür şablon etiketleri, diğer şablonlarda da kullanılabilir.

Konu Özellikleri Dosyası

functions.phpDosya, temanızın kontrol merkezidir. Burada, çeşitli özellikler ekleyerek temanızı geliştirebilirsiniz. Örneğin, makale özetlerini etkinleştirebilir, menü yerlerini ayarlayabilir, araç çubuğu alanlarını tanımlayabilir ve stil şemaları ile betik dosyalarını ekleyebilirsiniz.

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.

Aşağıda bir…functions.phpTemel bir örnek:

__( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

// 注册小工具区域
function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '侧边栏', 'my-custom-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

// 排入样式表和脚本
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/script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
?&gt;

Çekirdek şablonları ve döngüleri oluşturma

WordPress, belirli bir sayfa için hangi şablon dosyasının kullanılacağını belirlemek için şablon hiyerarşisini kullanır. Bu şablonları anlamak ve oluşturmak, tema geliştirmenin temelini oluşturur.

Şablon hiyerarşisini anlamak

Şablon hiyerarşisi, WordPress’in şablon dosyalarını seçerken uyguladığı bir dizi kuraldır. Örneğin, bir blog makalesine erişildiğinde, WordPress sırayla şunları arar:single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.phpGenel şablonları, daha spesifik şablon dosyaları oluşturarak geçersiz kılabilirsiniz.

Tavsiye edilen okuma WordPress tema geliştirmeye başlama kılavuzu: Sıfırdan başlayarak gelişmiş bir arayüz oluşturma。

WordPress’ta döngülerin kullanımını öğrenmek

“Döngü”, WordPress’ün veritabanından içerik çekmek ve bunu sayfada göstermek için kullandığı PHP kodudur. Tüm içerik çıktısının temelini oluşturur. Tipik bir döngü yapısı şu şekildedir:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
        <h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </article>
<?php endwhile; else : ?>
    <p><p><strong>Üzgünüm, herhangi bir içerik bulunamadı.</strong></p></p>
<?php endif; ?>

Şablon etiketleri gibi…the_title()， the_content()， the_permalink()Döngü içinde kullanılır ve ilgili makale verilerinin çıktısını sağlar.

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.

Yaygın olarak kullanılan sayfa şablonları oluşturun.

Planınıza göre, belirli şablon dosyalarını oluşturmaya başlayın:
* front-page.phpÖzelleştirilmiş ana sayfa.
* page.phpStatik sayfalar için kullanılır.
* single.phpTek bir blog makalesi için kullanılır.
* archive.phpKategorilendirme, etiketleme, yazar, tarih vb. arşiv sayfaları için kullanılır.
* 404.php404 Hata Sayfası.
* search.phpArama Sonuçları Sayfası.

Her şablon, başlık ve alt bilginin (footer) kullanılmasını içermelidir ve gerektiğinde bir kenar çubuğu (sidebar) da eklenmelidir.

Stil ekleyin, betikler kullanın ve gelişmiş özelliklerden yararlanın.

Altyapı ve şablonlar hazır olduktan sonra, sıradaki adım arayüzü güzelleştirmek, etkileşimler eklemek ve daha karmaşık özellikleri entegre etmektir.

CSS kullanarak duyarlı (reaktif) tasarım gerçekleştirilir.

在style.cssCSS’yi yazarken, temanızın tüm cihazlarda iyi görüntülenmesini sağlayın. Mobil öncelikli bir yaklaşım benimseyin ve tabletler ile masaüstü cihazlar için stiller eklemek amacıyla medya sorguları kullanın. CSS Flexbox veya Grid düzenlemelerini akıllıca kullanarak daha karmaşık, duyarlı (responsive) yapılar oluşturabilirsiniz.

JavaScript’i güvenli bir şekilde kullanmak için aşağıdaki adımları izleyebilirsiniz:

Daha önce de belirtildiği gibi, tüm JavaScript dosyaları şu yolla iletilmelidir:wp_enqueue_script()Fonksiyon çalışıyor.functions.phpBu, bağımlılıkların doğru bir şekilde işlenmesini sağlar ve betiklerin tekrar tekrar yüklenmesini önler. jQuery’ye bağımlı olan betikler için lütfen…wp_enqueue_script()Bağımlılık dizisinde beyan edilir.

Özelleştirilmiş makale türlerini ve sınıflandırmalarını entegre etmek

Daha karmaşık web siteleri için, varsayılan “makale” ve “sayfa” kategorileri yeterli olmayabilir. Bunu aşmak için şu yöntemleri kullanabilirsiniz:register_post_type()和register_taxonomy()Fonksiyonlar, “Ürün”, “Proje” gibi özel makale türleri ve özel kategoriler oluşturur. Genellikle, bu kodlar şu bölümlere eklenir:functions.phpVeya bağımsız bir eklentide.

Temaların özelleştirilmesini destekleyen bir sistem oluşturmak.

Kullanıcıların WordPress arayüzünde temanın renklerini, logosunu ve diğer ayarlarını gerçek zamanlı olarak önizleyip ayarlayabilmeleri için, WordPress Customizer’ı entegre edebilirsiniz. Bunun için şu adımları izlemeniz gerekecektir:WP_Customize_ManagerSınıflar kullanılarak ayarlar, kontroller ve diğer özelikler eklenir. Bu da temanın profesyonelliğini ve kullanım kolaylığını artırır.

Test ve Yayın Konuları

Geliştirme işlemi tamamlandıktan sonra, temanın kalitesini garanti altına almanın kritik bir adımı titiz testlerdir.

Kapsamlı bir işlevsellik testi yapın.

Tüm özellikleri yerel ve geçici sitelerde test edin: navigasyon menüsü, araç çubuğu, makale listesi, sayfa sayacı, arama, yorum formu, sayfa şablonları vb. PHP hataları veya uyarılarının olmadığından emin olun.

Responsive (uyumlu) tasarımın ve tarayıcı uyumluluğunun kontrol edilmesi gerekiyor.

Çeşitli cihazlar (telefon, tablet, bilgisayar) ve popüler tarayıcılar (Chrome, Firefox, Safari, Edge) kullanarak temanın görünümünü test edin. Düzenin ve işlevlerin tüm ortamlarda sorunsuz çalıştığından emin olun.

WordPress kodlama standartlarına ve uluslararasılaşmaya uyun.

Kodunuzun belirlenen kurallara ve standartlara uyduğundan emin olun.WordPress PHP kodlama standartları.Aynı zamanda, kullanıcılara yönelik tüm metinleri kullanın.()或_e()Fonksiyonlar, çok dilli çeviriyi destekleyecek şekilde paketlenir. Örneğin:echo ( ‘阅读更多’， ‘my-custom-theme’ );。

Konunun yayınlanması için hazırlıklar tamamlandı.

Kodu temizleyin, ön uç kaynakları (uygulanabilirse) sıkıştırın ve ayrıntılı bir readme.txt dosyası oluşturun. Eğer temayı WordPress.org’da yayınlamayı planlıyorsanız, tüm gerekliliklere uyduğunuzdan emin olun. Özel projeler için ise, kurulum ve kullanım ile ilgili net dokümanlar sağladığınızdan emin olun.

Özetle.

Sıfırdan başlayarak özelleştirilmiş bir WordPress teması geliştirmek, zorlu ancak sonuçları değerli bir süreçtir. Bu süreçte HTML, CSS, PHP ve JavaScript bilgilerinizi bütünleştirmeniz ve WordPress’in şablon yapısı, döngüleri ve eklenti sistemini derinlemesine anlamanız gerekmektedir. “Planlama -> Temel yapıların oluşturulması -> Şablonların geliştirilmesi -> Stil ve özelliklerin eklenmesi -> Titiz testler” adımlarını izleyerek, stabil, profesyonel ve tam olarak ihtiyaçlarınıza uygun bir tema oluşturabilirsiniz. Bu süreç sadece geliştirme becerilerinizi geliştirmekle kalmaz, aynı zamanda size benzersiz bir dijital eser de kazandırır.

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 şarttır. Çünkü WordPress’ün çekirdeği ve şablon sistemi PHP ile geliştirilmiştir. Dinamik içerikler oluşturmak, işlemleri yönetmek ve WordPress’in çekirdek fonksiyonlarını çağırmak için PHP kullanmanız gerekecektir. Aynı zamanda HTML, CSS ve JavaScript konularında da yüksek düzeyde bilgiye sahip olmanız çok önemlidir.

Functions.php dosyası ve eklentiler (plugins) arasındaki temel farklar nelerdir?

functions.phpDosyalar, bir temanın parçasıdır ve teman etkinleştirildiğinde işlev görür; teman devre dışı bırakıldığında ise işlevsiz hale gelir. Esas olarak, o temanın görsel ve işlevsel özellikleriyle yakından ilgili özelliklerin eklenmesi için kullanılır. Eklentiler ise, temadan bağımsız genel işlevlerin eklenmesi için kullanılır ve temayı değiştirdiğinizde bile eklentilerin işlevleri devam eder. Genellikle, bir işlevin temanın stilinden bağımsız olması ve başka temalarda da kullanılabilir olması durumunda, bu işlevin bir eklenti olarak geliştirilmesi düşünülmelidir.

Mevcut bir temanın üzerine değişiklikler yaparak yeni bir tema oluşturabilir miyim?

Tabii ki, ancak telif hakkı izinlerine dikkat etmek gerekiyor. Birçok tema GPL lisansı kapsamında olup, değiştirilmesine ve yeniden dağıtılmasına izin verir. En iyi uygulama bir “alt tema” (sub-theme) oluşturmaktır. Alt tema, üst temanın tüm özelliklerini devralmanıza olanak tanır; yalnızca alt temanın dosyalarında gerekli değişiklikleri yapmanız yeterlidir.style.cssŞablon dosyasındaki, değiştirmek istediğiniz kısımları geçersiz kılın. Bu, üst temanın güncellenmesi sırasında özelleştirdiğiniz değişikliklerin silinmesini önler.

Nasıl temamı çok dilli (uluslararasılaştırılmış) hale getirebilirim?

İki şeyi iyi yapman gerekiyor. Öncelikle, tema geliştirme sürecinde, kullanıcılara yönelik tüm metinler için çeviri fonksiyonlarını kullanmalısın.__( ‘文本’， ‘text-domain’ )İkincisi, Poedit gibi araçlar kullanarak oluşturma işlemi yapılır..potŞablon dosyasını çevirin ve ardından her dil için ilgili çevirileri oluşturun..po和.moDosyalar: Kullanıcılar, WPML veya Loco Translate gibi eklentiler aracılığıyla çevirileri yönetebilirler.