WordPress tema geliştirme eksiksiz rehberi: Başlangıçtan özel tema oluşturma kadar.

Hazırlık İşlemleri ve Ortam Kurulumu

İlk satır kodu yazmaya başlamadan önce, doğru geliştirme ortamı başarının yarısıdır. Verimli bir yerel geliştirme ortamı, çevrimiçi bir sunucuya ihtiyaç duymadan hızlı bir şekilde testler yapmanıza ve yenilikler yapmanıza olanak tanır.

Yerel Geliştirme Ortamı Ayarları

Yerel sunucu yazılım paketlerinin kullanılmasını öneriyoruz, örneğin… Local by Flywheel、MAMP 或 XAMPPBu araçlar tek bir tıklamayla kuruluyor. Apache(Veya) Nginx）、MySQL 和 PHPÇevrimiçi sunucu ortamını mükemmel bir şekilde simüle eder. Yerel ortamı kurduktan sonra, yeni bir WordPress kurulumu oluşturun. Lütfen PHP sürümünüzün 7.4 veya daha yüksek olduğundan emin olun ve gerekli eklentilerin (extensions) etkinleştirildiğinden emin olun. mysqli 和 gd。

Kod Düzenleyicileri ve Araç Seçimi

Güçlü özelliklere sahip bir kod editörü seçmek çok önemlidir.Visual Studio Code、PhpStorm 或 Sublime Text Hepsi mükemmel seçenekler; onlar… PHP、HTML、CSS、JavaScript 和 WordPress Tüm fonksiyonlar, iyi bir sözdizimi vurgulama özelliğine ve kod ipuçlarına sahiptir. Ayrıca, tarayıcı geliştirici araçlarını (örneğin Chrome DevTools) ve sürüm kontrol sistemlerini (örneğin…) kurmanız önerilir. GitAynı zamanda modern geliştirmenin standart bir yapılandırmasıdır.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan İlk Eserinizi Yaratın。

Bir konunun temel yapısını anlamak

En basitleştirilmiş bir WordPress temasının en az iki dosyası olmalıdır:style.css 和 index.php。style.css Sadece stil sağlamakla kalmaz; aynı zamanda dosya başlığındaki yorumlar, konunun meta bilgilerini de içerir. index.php Bu, temanın ana şablon dosyasıdır. Bunun dışında, özellikleri tam bir tema genellikle şunları içerir: header.php、footer.php、sidebar.php Ve farklı içerik türleri için kullanılan şablon dosyaları, örneğin… single.php(Bir makale) ve page.php(Bağımsız sayfa.)

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.

Çekirdek şablon dosyası ve şablon hiyerarşisi

WordPress, belirli bir sayfaya hangi şablon dosyasının yükleneceğine karar vermek için hassas bir şablon hiyerarşisi sistemi kullanır. Bu hiyerarşiyi anlamak, esnek temalar oluşturmanın anahtarıdır.

Şablon dosyalarının işlevi ve oluşturulması

Her şablon dosyası, sayfanın bir bölümünü veya belirli bir türdeki sayfayı renderlamaktan sorumludur. Örneğin, bir blog makalesine erişildiğinde, WordPress sırayla ilgili şablonları arar. single-post-{slug}.php、single-post-{id}.php、single.php、singular.phpSon olarak geri dönün… index.phpBu dosyaları oluşturarak varsayılan görünüm ayarlarını değiştirebilirsiniz. Ana sayfadaki arama sırası ise şu şekildedir: front-page.php、home.phpSonra index.php。

Şablon hiyerarşisi ilişkilerini anlamak

Şablon hiyerarşisi, özel durumlardan genel durumlara doğru ilerleyen bir arama zinciridir. Geliştiricilere büyük esneklik sağlar. Örneğin, ID’si 5 olan bir kategori için özel bir şablon oluşturabilirsiniz; bunu yapmak için yeterli olan tek şey şablonun adını belirtmektir. category-5.phpWordPress, bunu genel kullanımdaki yöntemler yerine tercih edecektir. category.php 或 archive.phpBu seviyeyi öğrenmek, web sitesinin her bir bölümünün nasıl görüntüleneceğini tam olarak kontrol edebileceğiniz anlamına gelir.

Yaygın Kullanılan Temel Şablon Dosyalarının Ayrıntılı İncelenmesi

Hadi, birkaç temel dosyayı daha ayrıntılı olarak inceleyelim.header.php Genellikle belge türü beyanını içerir. Bölge ve web sitesinin baş kısmı (örneğin logo ve navigasyon menüsü). Burada, ilgili öğeleri çağıracaksınız. wp_head() Bu, WordPress çekirdeği ve eklentilerinin önemli kodları ürettiği yerlerdir (yani bu kodların oluşturulduğu noktalardır).footer.php Bu, web sitesinin son kısmını içerir ve bir çağrı yapar. wp_footer() İşlev.functions.php Dosya bir şablon dosyası olmasa da, temanın “beyni” niteliğindedir ve işlevlerin eklenmesi, menülerin ve kenar çubuklarının oluşturulması gibi işlemler için kullanılır.

Tavsiye edilen okuma WordPress Eklenti Geliştirme Kılavuzu: Sıfırdan İleri Seviyelere。

Konu Özellikleri ve Fonksiyon Geliştirme

functions.php Dosyalar, temanızın özelliklerinin merkezidir. Burada, WordPress tarafından sunulan çeşitli araçlar ve özellikler aracılığıyla… Hook(Kancalar) Çekirdek işlevleri genişletmek veya değiştirmek için kullanılır.

Konu başlangıcı ve özellik ekleme

在 functions.php Bir metnin başında, genellikle “…” gibi bir ifade kullanırız. add_action Kancalar, tema özelliklerini başlatmak için kullanılır. Yaygın bir örnek, bunların kullanımıdır. after_setup_theme Konu desteğini eklemek için kullanılan bu “kancalar” (hooks).

function my_custom_theme_setup() {
    // 添加文章和评论的 RSS feed 链接到 head
    add_theme_support( 'automatic-feed-links' );
    // 让 WordPress 管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Küçük Araçlar Bölümüne Kaydolun

Kenar çubuğu veya araç çubuğu, bir temanın yaygın bileşenlerindendir. Bunları kullanabilirsiniz. register_sidebar Bu işlevler, kullanıcıların WordPress arayüzündeki “Eklentiler” bölümünden içerikleri dinamik olarak eklemesine olanak tanır.

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_custom_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_custom_theme_widgets_init' );

Özel stiller ve betikler ekleyin.

Kodun modülerliğini ve performansını korumak için CSS ve JavaScript dosyalarının ayrı olarak tutulması gerekir. wp_enqueue_style 和 wp_enqueue_script Fonksiyonlar sırayla yüklenir. Asla kaynakları doğrudan şablon dosyalarına sabit bağlantı (hard link) olarak eklemeyin. Doğru yöntem, bunları başka dosyalardan çağırmaktır. wp_enqueue_scripts Kanca.

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
    // 加载自定义 JavaScript 文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Döngüler ve Tema Şablon Etiketleri

“Döngü” (loop), WordPress’in temel kavramlarından biridir ve bir sayfada makaleleri göstermek için kullanılan PHP kodudur. Şablon etiketleri (template tags) ise, WordPress tarafından sağlanan ve şablonlar içinde dinamik içerikleri almak için kullanılan PHP fonksiyonlarıdır.

WordPress ana döngesini anlamak.

Döngüler genellikle… if ( have_posts() ) : while ( have_posts() ) : the_post(); Başlayalım. Öncelikle, mevcut sorgunun herhangi bir makale içerip içermediğini kontrol eder; ardından her makaleyi tek tek incelemeye başlar. Döngü içinde, şu tür işlemler yapabilirsiniz: the_title()、the_content()、the_permalink() Belge bilgilerini çıkarmak için şablon etiketlerini kullanın. Döngü bittikten sonra, gerekli işlemleri gerçekleştirmeniz gerekmektedir. endwhile; endif; Kapatmak için buraya gelin.

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

Yaygın Şablon Etiketlerinin Kullanımı

Şablon etiketleri, verilerin görüntülenmesini kolaylaştırır. Örneğin,the_title() Makalenin başlığı doğrudan ekrana yansıtılacak. get_the_title() O zaman başlık metnini işlemek üzere size geri döndürür. Döngünün dışında, bunu kullanabilirsiniz. get_header()、get_footer()、get_sidebar() İçerdiği şeyler, ilgili şablon bileşenlerini de kapsar. Koşullu etiketler gibi… is_home()、is_single()、is_page() Bu özellik, mevcut sayfa türüne göre farklı kodları çalıştırmanıza olanak tanır.

Özelleştirilmiş sorgular ve döngüler

Bazen, ana sorguya uymayan makalelerin listesini göstermeniz gerekebilir; örneğin, ana sayfada belirli bir kategorideki makaleleri göstermek isteyebilirsiniz. Bu durumda şu yöntemi kullanabilirsiniz: WP_Query Sınıf, özel bir sorgu oluşturur.

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.

$custom_query = new WP_Query( array(
    'post_type' => 'post',
    'category_name' => 'featured',
    'posts_per_page' => 3,
) );

if ( $custom_query->have_posts() ) {
    while ( $custom_query->have_posts() ) {
        $custom_query->the_post();
        // 输出文章标题、摘要等
        the_title( '<h3>', '</h3>' );
        the_excerpt();
    }
    wp_reset_postdata(); // 重置全局 $post 数据
}

Kullanım bittikten sonra mutlaka çağrıyı yapın. wp_reset_postdata() Ana sorgudan verileri geri getirerek, sonraki kodlarda hataların oluşmasını önleyin.

Özetle.

WordPress tema geliştirme, tasarımı, front-end teknolojilerini ve PHP programlamayı bir araya getiren bir süreçtir. Öncelikle yerel bir ortam oluşturarak başlanır; ardından tema’nın dizin yapısını, temel şablon hiyerarşisini derinlemesine anlamaya devam edilir ve sonrasında… functions.php Temaların özelliklerini kancalar (hooks) ve fonksiyonlar aracılığıyla genişletin; ardından içeriği dinamik olarak oluşturmak için döngüler ve şablon etiketlerini öğrenin. Bu, tema geliştirmenin temel yolunu oluşturur. WordPress kodlama standartlarına ve en iyi uygulamalarına uymak – örneğin, betiklerin doğru sırayla çalıştırılması, doğrudan veritabanı sorguları yerine şablon etiketlerinin kullanılması – geliştirdiğiniz temanın verimli, güvenli ve kolayca sürdürülebilir olmasını sağlar. Unutmayın ki, mükemmel bir tema sadece güzel görünmekle kalmaz; aynı zamanda kod yapısı açık, işlevleri stabil olmalı ve hem kullanıcılar hem de geliştiriciler için yeterli özelleştirme alanı sunmalıdır.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için hangi programlama dillerini bilmek gereklidir?

Tam özellikli bir WordPress teması geliştirmek için HTML, CSS ve PHP bilgisine sahip olmanız gerekmektedir. HTML, sayfa yapısını oluşturmak için kullanılır; CSS ise stil ve düzenlemelerden sorumludur. PHP ise WordPress’in kendisinin geliştirme dili olup, mantığı işlemek, verileri çağırmak ve dinamik içerik oluşturmak için kullanılır. Ayrıca, etkileşimli özelliklerin gerçekleştirilmesi için biraz JavaScript bilgisi de oldukça faydalıdır (özellikle jQuery, çünkü jQuery WordPress’in çekirdeğinde yer almaktadır).

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

Temaların uluslararasılaştırılmasını (i18n) desteklemek, küresel kullanıcılara yönelik bir önem taşır. Tema geliştirme sürecinde, çevrilmeye ihtiyaç duyan tüm metin dizeleri WordPress’in çeviri fonksiyonları kullanılarak işlenmelidir. Örneğin: () Yansıtım için kullanılır.() Bir dize döndürmek için kullanılır._e() Doğrudan yansıtım için kullanılır. Ayrıca… load_theme_textdomain() Bir fonksiyonda bir metin alanı (Text Domain) ayarlanır; bu metin alanı genellikle temanın adıyla aynıdır. Çevirmenler, temanız için farklı dillerde çeviri paketleri sağlamak amacıyla .po ve .mo dosyalarını kullanabilirler.

Alt konu (subtopic) ve üst konu (parent topic) arasındaki fark nedir ve nasıl bir seçim yapmalıyım?

Ana tema, tam özelliklere sahip ve bağımsız olarak çalışabilen bir WordPress temasıdır. Alt tema ise ana temaya bağımlıdır; ana temanın tüm özelliklerini ve stillerini devralır, ancak sizin ana temanın dosyalarını (örneğin style.css, şablon dosyaları) güvenli bir şekilde değiştirmenize veya yeni özellikler eklemenize olanak tanır. Alt tema kullanmanın temel amacı, özelleştirme yapmaktır. Ana tema güncellendiğinde, alt temada yaptığınız değişiklikler kaybolmaz. Bu, ticari temaları veya framework temalarını (örneğin Genesis, Underscores) özelleştirmek için standart ve önerilen bir yaklaşımdır.

Bir temaya CSS ve JavaScript eklemenin en iyi yolu nedir?

En iyi yöntem, WordPress tarafından sağlanan kuyruk (queue) fonksiyonlarını kullanmaktır:wp_enqueue_style() CSS için kullanılır.wp_enqueue_script() JavaScript için kullanılır. Temanızda bunu yapmanız gerekiyor. functions.php Dosyada bir fonksiyon oluşturun ve bu fonksiyon içinde sıralı işlemleri gerçekleştiren fonksiyonları çağırın; ardından bu fonksiyonu sisteme monte edin. wp_enqueue_scripts Bu eylem, bir “kancaya” (hook) bağlıdır. Bu yöntem, bağımlılıkların doğru bir şekilde işlenmesini sağlar, tekrarlanan yüklemeleri önler ve eklentilerin veya diğer temaların yönetilmesini kolaylaştırır. Kesinlikle şablon dosyalarında doğrudan kullanmayın. 或 Etiketlerin doğrudan kod içine yazılması (hardcoding).