Sıfırdan Başlayın: WordPress Tema Geliştirmenin Tam Kılavuzu ve Temel Teknolojileri

WordPress temaları, bir web sitesinin görünümünü ve işlevlerini şekillendiren temel yapıdır. Temaların geliştirilmesi konusunda yetkinlik kazanmak, sitenizin her yönünü tamamen özelleştirebilmeniz anlamına gelir; hazır temaların sınırlamalarından kurtulup benzersiz tasarım fikirlerinizi ve işlevsel ihtiyaçlarınızı gerçekleştirebilirsiniz. Bu yolculuğa, temaların temel kavramlarını ve dosya yapısını anlamakla başlarsınız.

Her WordPress teması, belirli bir konumda bulunan bir dosya koleksiyonudur./wp-content/themes/Katalogdaki klasörler. En temel işlevsel bir tema sadece iki dosyaya ihtiyaç duyar:style.css和index.phpBunlar arasında,style.cssSadece stilleri saklamak için kullanılmaz; aynı zamanda dosyanın baş kısmındaki yorumlar, temanın meta bilgilerini de içerir. Bu, WordPress’in bir temayı tanımasında kritik bir rol oynar.

在style.cssBir başlığın üst kısmında, konuyu tanımlamak için belirli açıklamalar kullanmanız gerekir. Tipik bir örnek aşağıdaki gibidir:

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Başlangıçtan Uzmanlığa Kadar Pratik Bir Eğitim Kitabı。

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

Bu bilgi, WordPress arayüzünün “Görünüm > Temalar” listesinde görünecektir.index.phpBu, temanın ana şablon dosyasıdır ve diğer daha spesifik şablonlar mevcut değilse varsayılan çözüm olarak kullanılır. Geliştirmenin ilerlemesiyle birlikte, zamanla bunu daha spesifik şablon dosyalarıyla değiştirecek veya bunlara eklemeler yapacaksınız.

Konunun şablon hiyerarşik yapısını anlamak

WordPress, her belirli sayfa isteği için hangi şablon dosyasının kullanılacağını belirlemek için özenle tasarlanmış bir şablon hiyerarşisi sistemi kullanır. Bu hiyerarşiyi anlamak, temaları verimli bir şekilde geliştirmenin temelidir; çünkü belirli sayfaları (örneğin makale detayları sayfaları, kategori dizinleri sayfaları) oluştururken dosyalara hangi isimleri vermeniz gerektiğini bilmenizi sağlar.

Ana şablon dosyalarının adlandırma kuralları

Şablon hiyerarşisi “özelden genelge” ilkesine göre düzenlenmiştir. Örneğin, ID’si 123 olan bir blog makalesine erişildiğinde, WordPress şu sırayla arama yapar:single-post-123.php、single-post.php、single.phpSon olarak,singular.phpEğer bunların hiçbiri mevcut değilse, o zaman kullanılır.index.php。

Yaygın olarak kullanılan temel şablon dosyaları şunları içerir:
- front-page.phpWeb sitesinin ana sayfasını ayarlamak için kullanılır.
- home.phpBlog Makaleleri İndeks Sayfası.
- single.phpTek bir blog makalesi veya özel makale türüne ait tek bir makale.
- page.phpTek sayfa.
- archive.phpÇeşitli arşiv sayfaları (kategoriler, etiketler, yazarlar vb.) için genel bir şablon.
- category.phpBelirli bir kategorinin katalog sayfası.
- 404.php404 Hata Sayfası.
- header.php、footer.php、sidebar.phpBunlar genellikle yerel şablon parçalarıdır.

Yerel şablonları çağırmak için kullanılan yaygın fonksiyonlar

Kodun modülerliğini ve sürdürülebilirliğini korumak için WordPress, yerel şablon dosyalarını yüklemek için birkaç temel fonksiyon sunar. En önemlisi…get_header()、get_footer()和get_sidebar()Bunlar sırasıyla içeriği tanıtmak için kullanılır.header.php、footer.php和sidebar.php。

Tavsiye edilen okuma WordPress tema geliştirmenin temel kavramları。

Başka bir hayati öneme sahip fonksiyon ise…get_template_part()Bu, herhangi bir şablon parçasını daha esnek bir şekilde dahil etmenize olanak tanır. Örneğin, bir blog makalesi döngüsünde, makale içeriği için özel bir şablon kullanmak isteyebilirsiniz:

<?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'template-parts/content', get_post_type() ); ?>
<?php endwhile; ?>

Bu kod, öncelikli olarak arama yapacaktır.template-parts/content-post.php(Varsayalım makalenin türü…)postEğer bulunamazsa, yüklenir.template-parts/content.php。

Çekirdek fonksiyonları ve hook (düğüm) mekanizmalarını kullanarak işlevselliği yönlendirin.

WordPress’in güçlü özellikleri, geniş fonksiyon kütüphanesinden ve olay tabanlı “hook” (kancalar) sisteminden kaynaklanmaktadır. Tema geliştirme sürecinde, çekirdek fonksiyonları ve hook’ları ustaca kullanmak, karmaşık özelliklerin gerçekleştirilmesi, performansın ve güvenliğin optimize edilmesi açısından kritik öneme sahiptir.

İçeriği almak ve çıkarmak için temel fonksiyonlar

Şablon dosyalarında, dinamik içerikleri almak ve göstermek için sık sık bir dizi fonksiyon kullanırsınız. Örneğin,the_title()Mevcut makalenin veya sayfanın başlığını çıkarmak için kullanılır.the_content()O zaman, biçimlendirilmiş ana içeriği çıkarın. Doğrudan çıkarılan fonksiyona karşılık gelen şey ise…get_Başlangıçtaki fonksiyonlar, örneğin…get_the_title()Bu veriler, kodunuzda daha ileri işlemler yapabilmeniz için size geri döndürülür.

Blog makalelerinin döngüsü, WordPress şablonlarının temelini oluşturur ve standart kod yapısı şu şekildedir:

<!-- 在这里输出文章内容 -->
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    <?php endwhile; ?>
    <!-- 这里可以放置分页导航 -->
<?php else : ?>
    <!-- 如果没有找到文章，显示的内容 -->
    <p>Henüz içerik yok.</p>
<?php endif; ?>

İşlevsellik genişletmesi için hook’lar kullanılır.

Kancalar “eylem” ve “filtre” olmak üzere iki türe ayrılır. Eylem kancaları, belirli bir olay meydana geldiğinde kendi kodunuzu eklemenize olanak tanır; örneğin, bir kullanıcı bir butona tıkladığında veya bir dosya yüklendiğinde.wp_headDüğümde ek meta etiketler çıktısı oluşturabilirsiniz. Bunu kullanabilirsiniz.add_action()Bir fonksiyon, kendisini başka bir fonksiyona monte etmek için kullanılabilir.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan İlk Özel Temanızı Oluşturun。

Örneğin, bir konuyla ilgili olarak…functions.phpDosyaya Feed bağlantılarına destek ekleyin:

add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
    // 为文章和评论添加Feed链接到head中
    add_theme_support( 'automatic-feed-links' );
}

Filtre hook’ları, verileri değiştirmenize olanak tanır. Örneğin, bunları kullanarak…excerpt_lengthFiltreler, makale özetlerinin uzunluğunu değiştirebilir:

add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );
function mytheme_custom_excerpt_length( $length ) {
    return 30; // 将摘要长度设置为30个单词
}

functions.phpDosya, temanın “işlev merkezidir”; tüm özel fonksiyonlar, hook çağrıları ve tema işlevlerinin tanımları burada bulunmalıdır.

Duyuru: Konu özelliği desteği sağlanmaktadır.

Kullanın.add_theme_support()Fonksiyonlar aracılığıyla temanızın hangi WordPress çekirdek özelliklerini desteklediğini belirtmek, iyi bir geliştirme uygulamasıdır. Bu sadece özellikleri etkinleştirmekle kalmaz, aynı zamanda gelecekteki sürümlerle de uyumluluğu sağlar.

Yaygın işlev açıklamaları arasında şunlar bulunur:

add_action( 'after_setup_theme', 'mytheme_theme_support' );
function mytheme_theme_support() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5语义化标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}

Özelleştirilmiş stilleri ve betik dosyalarını entegre etmek

Modern bir tema, CSS stil şemasını ve JavaScript betiklerini doğru bir şekilde yönetmelidir. Böylece bu dosyaların ihtiyaç duyulduğunda yüklenmesi, çakışmaların önlenmesi ve ön uç performans optimizasyonu için en iyi uygulamalara uyulması sağlanır.

Güvenli kayıt ve kaynak yükleme

Kesinlikle şablon dosyalarında doğrudan kullanmayın.<link>或<script>Kaynakları kodlamak için etiketleri kullanın. Doğru yöntem, kullanmaktır.wp_enqueue_scriptsAction hook, birlikte kullanıldığında…wp_enqueue_style()和wp_enqueue_script()İşlev.

在functions.phpBurada, kaynakların sıralanmasını işlemek için bir fonksiyon tanımlamanız gerekiyor:

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
function mytheme_enqueue_assets() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载Google字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );

// 加载主JavaScript文件，并依赖jQuery，在页脚加载
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );

// 如果需要传递PHP变量到JS，可以使用wp_localize_script
    wp_localize_script( 'mytheme-script', 'myThemeData', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'home_url' => home_url(),
    ));
}

Bu yöntem, bağımlılık ilişkilerinin doğru bir şekilde yönetilmesini sağlar, tekrarlanan yüklemeleri önler ve eklentilerin ve diğer temaların kendi bağımlılık beyanları aracılığıyla yönetilmesine olanak tanır.

Gutenberg editörüne stil desteği ekleyin.

Blok düzenleyicilerinin yaygınlaşmasıyla birlikte, arka uç düzenleyicilere ön uç stil desteği eklemek “gördüğünüz gibi alırsınız” editör deneyimini sağlamak için hayati önem kazanmıştır. Bunu yapmak için şunları kullanabilirsiniz:add_theme_support( ‘editor-styles’ )Ayrıca bir editör stil şeması da sıraya ekleyin.

add_action( 'after_setup_theme', 'mytheme_editor_styles' );
function mytheme_editor_styles() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'assets/css/editor-style.css' );
}

Özetle.

WordPress tema geliştirme, temel dosya yapısını anlamakla başlayan ve ardından şablon seviyelerine, çekirdek fonksiyonlara, eklenti sistemlerine (hook’lara) ve kaynak yönetimine doğru ilerleyen bir süreçtir. En önemli nokta pratiktir: En basit örnekten başlayarak, bilgilerinizi adım adım geliştirin.style.css和index.phpBaşla, sonra oluştur.header.php和footer.phpModüler bir yapıya dönüştürün. Daha sonra, farklı sayfa türleri için şablon seviyelerini kullanarak özel şablonlar oluşturun.single.php或page.phpİçeride.functions.phpOrtada, kancalar ve… aracılığıyla…add_theme_supportİşlevleri güvenli bir şekilde ekleyin ve her zaman bunu yapın.wp_enqueue_scriptsStilleri ve betikleri yönetmek için bu temel ilkeleri ve adımları takip edin. Böylece profesyonel, verimli ve sürdürülebilir bir WordPress teması oluşturabileceksiniz.

Sıkça Sorulan Sorular.

Bir WordPress teması oluşturmak için en az hangi dosyalara ihtiyaç vardır?

Teknik olarak bakıldığında, WordPress tarafından tanınan ve etkinleştirilen bir tema en az iki dosyaya ihtiyaç duyar:style.css和index.php。style.cssDosyanın başlık bölümündeki yorumlar, doğru konu meta bilgilerini içermelidir; örneğin…Theme NameVeindex.phpEn temel şablon dosyası olarak, tüm sayfaların renderlanması için kullanılır.

Kendi temam için özel bir sayfa şablonu nasıl oluşturabilirim?

Özel sayfa şablonları oluşturmak çok basittir. Sadece herhangi bir şablon dosyasında (genellikle…)page.phpBelirli bir PHP yorum bloğunu sayfanın üst kısmına ekleyin. Örneğin, “tam genişlikli sayfa” şablonu oluşturmak için adı “full-width-page” olan yeni bir dosya oluşturabilirsiniz.template-full-width.phpBelgeyi açın ve dosyanın başına şunları yazın:/* Template Name: 全宽页面 */Kaydettikten sonra, WordPress arayüzünde sayfa ayarlarını düzenlerken “Sayfa Özellikleri” bölümündeki “Şablon” açılır menüsünde “Tam Genişlikli Sayfa” seçeneğini görebilir ve bunu seçebilirsiniz.

Neden functions.php dosyasında bir işlev eklemek için `add_action` kullanılır?

Doğrudan…functions.phpFonksiyon kodlarının yanlış zamanda çalıştırılması, hatalara veya işlevlerin etkisiz kalmasına neden olabilir.add_action()或add_filter()Fonksiyonunuzu belirli bir WordPress eklenti düğümüne (hook) bağlamak, kodunuzun doğru ve güvenli bir zamanda çalışmasını sağlar. Örneğin,after_setup_themeKancalar, temanın başlatılması için kullanılır.wp_enqueue_scriptsKancalar, kaynakların yüklenmesi için kullanılır. Bu, WordPress’in eklenti tabanlı mimarisinin en iyi uygulamalarından biridir ve kodun modülerliğini ve uyumluluğunu artırır.

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

Bir temanın çok dilli olmasını sağlamak için birkaç adım atılması gerekmektedir. İlk olarak,style.cssBaşlık kısmında ve tüm şablon dosyalarında kullanılır.__()、_e()Öncelikle, tüm çevrilmeye ihtiyaç duyan metin dizelerini kapsayacak bir çeviri fonksiyonu kullanın. Daha sonra,functions.phpÇince'de kullanılır.load_theme_textdomain()Bir fonksiyon kullanarak çeviri dosyalarını yükleyin. Son olarak, Poedit gibi araçlar kullanarak kaynak koddan metinleri çıkarın ve bunları çeviri dosyalarına dönüştürün..potDosyaları ve lütfen çevirmenin bunlara dayanarak ilgili dillerdeki çevirileri oluşturmasını istiyorum (örneğin:zh_CN.po和.mo“）” ifadesinin çeviri dosyası, belirtilen konu dizininin içine konmalıdır./languages/Dosya, klasörün içinde olabilir.

Ticari temalar geliştirirken hangi izinlere ve standartlara dikkat edilmesi gerekiyor?

Ticari amaçlarla dağıtım veya satış için geliştirilen WordPress temaları, WordPress’in lisans gerekliliklerine sıkı sıkıya uymalıdır. En önemli nokta, temanızın WordPress çekirdeğiyle aynı GPL v2 veya daha yüksek sürüm lisansını kullanmasıdır. Bu, başkalarının temanızın kodunu kullanma, değiştirme ve yeniden dağıtma hakkına sahip olması anlamına gelir. Ayrıca, WordPress’in resmi kodlama standartlarına ve tema inceleme kurallarına uymak, kod kalitesini, güvenliğini ve uyumluluğunu sağlamak önemlidir. Bunun yanı sıra, kullandığınız tüm üçüncü parti kaynakların (örneğin yazı tipleri, ikon kütüphaneleri) lisanslarını doğru bir şekilde belirtmek ve bunların da GPL ile uyumlu veya ticari olarak lisanslanmış olmasını sağlamak çok önemlidir.