WordPress tema geliştirme hakkında ayrıntılı bilgi: Başlangıçtan ileri düzeye kadar kapsamlı bir rehber.

WordPress temalarının temel yapısını anlamak.

Bir WordPress teması, esasen belirli bir yapıya uyan bir dizi dosyadan oluşur ve bu dosyalar birlikte web sitesinin görünümünü ve işlevlerini belirler. Bu yapıyı anlamak, geliştirme sürecinin ilk adımıdır. Temel dosyalar arasında stil şemaları (style sheets), şablon dosyaları (template files) ve fonksiyon dosyaları (function files) bulunur.

Konunun girişi ve kimlik tanımlayıcısı…style.cssBu dosya yalnızca CSS stil kurallarını içermekle kalmaz; aynı zamanda dosyanın en üst kısmındaki yorumlar, temanın meta verilerini de barındırır. Bu meta veriler arasında tema adı, yazar, açıklama ve sürüm bulunur. WordPress, temanızı tanımak ve arka planda göstermek için bu bilgileri okur.

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: A custom WordPress theme built for learning.
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Şablon dosyaları, bir temanın iskeletidir ve farklı içerik türlerinin nasıl görüntüleneceğini kontrol ederler. Örneğin,header.phpGenellikle web sitesinin başlığını (örneğin Logo ve navigasyon menüsünü) içerir.footer.phpSayfa altı bilgilerini içeren…index.phpBu, varsayılan şablon dosyasıdır; başka daha spesifik bir şablon eşleşmediğinde WordPress bunu kullanır.

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

functions.phpDosya, temanın işlevsel merkezidir. Bu bir şablon dosyası değil; tema başlatıldığında otomatik olarak yüklenen bir PHP dosyasıdır. Geliştiriciler, buraya tema desteği özellikleri ekleyebilir, menüler ve kenar çubuklarını kaydedebilir, betikler ve stil şemalarını yükleyebilir ve çeşitli özel fonksiyonlar tanımlayabilirler. Temanın özelliklerini genişletmenin, çekirdek dosyaları değiştirmeden yapılmasının anahtarıdı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.

Şablon hiyerarşisinin çalışma mekanizması

WordPress’in şablon yapısı, akıllı bir sorgulama sistemidir ve mevcut sayfa türüne göre içeriği renderlemek için en uygun şablon dosyasını otomatik olarak seçer. Örneğin, tek bir makaleye erişildiğinde, WordPress sırasıyla şunları arar:single-post-{slug}.php、single-post-{id}.php、single.phpSon olarak,singular.phpBu hiyerarşik ilişkiyi anlamak, dosyaları doğru yerlere oluşturmanıza ve sayfaları hassas bir şekilde kontrol etmenize olanak tanır.

Temalı fonksiyon dosyalarının temel işlevi

functions.phpDosyalar, “temanın eklentisi” rolünü üstlenir. Tipik bir kullanım örneği şudur:add_theme_support()Bu fonksiyonlar, makale özetlerinin (özel görseller) ve özelleştirilmiş logoların gibi temanın desteklediği özellikleri belirtmek için kullanılır.

function my_theme_setup() {
    // 启用文章和页面中的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 启用自定义Logo功能
    add_theme_support( 'custom-logo' );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Konunun temel şablon dosyasını oluşturma

Bir temanın oluşturulması, en temel şablon dosyasının oluşturulmasıyla başlar. En basit bir tema bile en azından şunlara ihtiyaç duyar:style.css和index.phpAncak, tam özelliklere sahip bir tema, farklı sayfaların görünümünü ayrıntılı bir şekilde kontrol etmek için bir dizi şablon dosyası içerir.

Ana Sayfa Şablonuindex.phpBu bir yedek şablon. Daha profesyonel bir yaklaşım, yeni bir şablon oluşturmaktır.front-page.phpStatik bir ana sayfa olarak kullanılabilir veya oluşturulabilir.home.phpMakale İndeks Sayfası olarak… Makale Sayfası Şablonusingle.phpTek bir makaleyi göstermek için kullanılır ve sayfa şablonudur.page.phpBağımsız sayfaları göstermek için kullanılır. Kategori arşiv sayfaları genellikle…archive.phpVeya daha spesifik olarak…category.phpKontrol.

Tavsiye edilen okuma Derinlemesine Analiz: Tema Geliştirmenin Özü – Sıfırdan Yüksek Verimli Bir WordPress Teması Oluşturmanın Kapsamlı Rehberi。

Başlık ve alt bilgi (footer) şablonları oluşturun.

Başlık ve alt bilgi bölümlerini ayrı dosyalar halinde tutmak, kodun tekrar kullanımını ve modülerliği sağlamanın en iyi uygulamalarından biridir.header.phpDosyada belge türü beyanı ve HTML başlığı bulunmalıdır.Bölge (yoluyla)wp_head()Kancalar, temel betikleri ve stilleri (script ve styles) ile web sitesinin ana navigasyonunu (main navigation) içerir. Şablonlarda (templates) bunlar kullanılır.get_header()Bunu tanıtmak için bir fonksiyon kullanacağız.

footer.phpGenellikle telif hakkı bilgilerini, en üste dönme bağlantısını içerir ve sona ermeden önce bir işlem gerçekleştirir.wp_footer()Kancalar (hooks), birçok eklentinin çıktı betiklerinde kritik bir rol oynar. Bunları kullanın.get_footer()Fonksiyon, bunu içerir.

İçeriği döngüler kullanarak gösterin.

WordPress’te “The Loop” (Döngü), tema şablonlarında veritabanından makaleleri almak ve görüntülemek için kullanılan PHP kod yapısıdır. Tüm içeriklerin görüntülenmesinin temelini oluşturur.

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.

<?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><?php _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
<?php endif; ?>

Bu kod şu amaçla kullanılır:have_posts()和the_post()Fonksiyon, sorgulanarak bulunan makaleleri tarar ve bunları kullanır.the_title()、the_content()Şablon etiketleri, makale içeriğini çıktı olarak verir.post_class()Fonksiyon, stil kontrolü için kullanılabilecek bir dizi CSS sınıf adı çıkarır.

Konunuz için stil ve etkileşim özellikleri ekleyin.

Modern WordPress tema geliştirme süreçlerinde, stil şemalarının (CSS) ve betiklerin (JavaScript) doğrudan şablon dosyalarına kodlanarak değil, sırayla yüklenmesi şiddetle önerilir. Bu yaklaşım, doğru bağımlılık yönetimini ve yükleme sırasını sağlar.

在functions.phpÇin'de, kullanılır.wp_enqueue_style()和wp_enqueue_script()Bu fonksiyon, kaynakları kaydetmek ve sıraya koymak için kullanılır. En iyi uygulama, bu işlemin belirli bir sisteme veya altyapıya monte edilmesidir.wp_enqueue_scriptsBu hareket, o kancaya bağlı.

Tavsiye edilen okuma WordPress Tema Geliştirme Pratik Rehberi: Sıfırdan Başlayarak Profesyonel ve Uyarlanabilir Web Siteleri Oluşturma。

function my_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    // 加载Google Fonts
    wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', false );
    // 加载主JavaScript文件，依赖于jQuery，在页脚加载
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Responsive tasarımı ve CSS çerçevelerini uygulamak

Web sitesinin çeşitli cihazlarda iyi bir şekilde görüntülenmesini sağlamak için, duyarlı (responsive) tasarım kullanmak zorunludur. Bu, web sitesinin farklı ekran boyutlarına göre otomatik olarak uyum sağlamasını sağlayarak gerçekleştirilir.style.cssMedya sorguları, web sitelerinin farklı cihazlarda (örneğin mobil telefonlar, tabletler, bilgisayarlar vb.) doğru şekilde görüntülenmesini sağlamak için kullanılır. Bu sorgular, HTML ve CSS kodlarının içine yazılır ve web sitesinin içeriğinin hangi cihazda görüntüleneceğine göre farklı stiller uygulanmasına olanak tanır. Birçok geliştirici, geliştirme sürecini hızlandırmak için Tailwind CSS veya Pure.css gibi hafif CSS çerçevelerini de tercih eder. Bu çerçeveler genellikle npm aracılığıyla indirilebilir ve web sitelerine kolayca entegre edilebilir.functions.phpKuyruğa girerek derlenmiş CSS dosyasını içeri aktarın.

Özel JavaScript özellikleri ekleyin.

Etkileşimli özellikler için, örneğin mobil cihazlarda menü değişiklikleri, slayt gösterileri veya form doğrulamaları gibi işlemler için JavaScript yazmak gereklidir. Daha önceki örnekte de gösterildiği gibi, JS dosyalarını temanın içine yerleştirmelisiniz./jsDosyalar doğru şekilde katalogda sıralanmalıdır. JS kodu yazarken, WordPress’in yerleşik kütüphanelerinden (örneğin jQuery) yararlanabilir ve WordPress’in JavaScript kodlama standartlarına uymalısınız. JavaScript içinde PHP tarafından gönderilen verileri (örneğin site URL’si veya çeviri metinleri) kullanmak için belirli yöntemler kullanılabilir.wp_localize_script()İşlev.

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.

Genişletilmiş Temaların İleri Özellikleri

Temel tema çerçevesi oluşturulduktan sonra, WordPress’in güçlü eklenti mekanizması aracılığıyla ona gelişmiş özellikler ekleyebilirsiniz. Özelleştirilmiş makale türleri ve kategorileri, “makale” ve “sayfa” dışında “ürün”, “portföy” veya “ekip üyeleri” gibi içerik yapıları oluşturmanıza olanak tanır.

Kullanın.register_post_type()Fonksiyonlar yeni makale türleri oluşturabilir. Bu çağrı genellikle…functions.phpOrtaya koyun ve monte edin.initKancada.

function my_register_products() {
    $args = array(
        'public' => true,
        'label'  => 'Products',
        'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'has_archive' => true,
        'menu_icon' => 'dashicons-cart',
    );
    register_post_type( 'product', $args );
}
add_action( 'init', 'my_register_products' );

Özelleştirici ayar seçeneklerini entegre etme

WordPress Özelleştirici (Customizer), kullanıcılara tema ayarlarını değiştirmek için gerçek zamanlı bir önizleme arayüzü sunar. Bu araç sayesinde kullanıcılar, Logo’yu, renk şemasını veya sayfa altı metnini kolayca değiştirebilirler.$wp_customize->add_setting()和$wp_customize->add_control()Metod devam ediyor.functions.phpAyarları ve kontrolleri ekleyin; tüm işlemler bu yapıya monte edilmelidir.customize_registerKancada.

Yeniden kullanılabilir özel şablon bileşenleri geliştirin.

Kenar çubuğu (WordPress’ta “Widget Alanı” olarak adlandırılır), kullanıcıların içerik bloklarını dinamik olarak sürükleyip bırakmalarına olanak tanır.register_sidebar()Fonksiyonlar, yeni araç çubuğu bölgeleri kaydedebilir. Daha sonra, şablon dosyalarında (örneğin…)sidebar.phpİçerikte, kullanılmaktadır.dynamic_sidebar()Bunu göstermek için bir fonksiyon kullanın. Bu, temanıza büyük bir düzenleme esnekliği kazandıracaktır.

Özetle.

WordPress tema geliştirme, temel dosya yapısını ve şablon hiyerarşisini anlamaktan başlayarak, belirli şablon dosyaları oluşturmak, içeriği döngüler kullanarak ekrana yazdırmak ve stil betiklerini standart bir şekilde eklemeye kadar süren sistematik bir süreçtir. Bu temelleri öğrendikten sonra, özel makale türleri oluşturarak, özelleştirici seçeneklerini entegre ederek ve araç çubuğu alanları oluşturarak tema işlevlerini daha da genişletebilirsiniz. WordPress kodlama standartlarına ve en iyi uygulamalarına uyarak, hem verimli hem de güvenli temalar oluşturabilir; aynı zamanda temanın çekirdek sisteme ve çeşitli eklentilere iyi bir uyumluluk sağlarsınız. Geliştirme süreci aynı zamanda WordPress mimarisine dair anlayışınızı derinleştiren bir süreçtir.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için hangi ön bilgi gereklidir?

HTML ve CSS temellerine sahip olmanız gerekiyor; bunlar web sayfalarının yapısını ve görünümünü oluşturmanın temel taşlarıdır. Ayrıca, WordPress’ün çekirdeği ve tema şablonlarının büyük ölçüde PHP ile çalıştığı için PHP konusunda da temel bilgilere sahip olmanız önemlidir. JavaScript ile ilgili temel bilgiler, etkileşimli özellikler eklemenize yardımcı olacaktır. WordPress’ün temel kullanımını, örneğin makale yayınlamayı ve menüleri yönetmeyi bilmek de şarttır.

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

Bir “ana tema” (parent theme), tüm özellikleriyle tam bir ve bağımsız bir temadır. “Alt tema” (subtheme), ana temanın tüm özelliklerini devralır; bu sayede yalnızca bazı dosyaları (örneğin stilleri veya belirli şablonları) değiştirerek görünümü özelleştirebilirsiniz ve bu değişiklikler ana temanın temel dosyalarını etkilemez. Ana tema güncellendiğinde, özelleştirdiğiniz içerikler alt temada korunur. Başlangıç seviyesindeki kullanıcılar için, mevcut bir temanın alt temasını değiştirmek güvenli ve verimli bir öğrenme yöntemidir. Eğer sıfırdan başlayarak tamamen yeni ve benzersiz bir tasarım oluşturmak istiyorsanız, bağımsız bir “ana tema” geliştirmelisiniz.

Neden kaynakları doğrudan `link` etiketleri kullanarak yüklemek yerine `wp_enqueue_style`/`wp_enqueue_script` fonksiyonları ile yüklemek zorundayız?

Kullanın.wp_enqueue_style()和wp_enqueue_script()Fonksiyonlar, WordPress tarafından resmi olarak önerilen standart bir yöntemdir. Kaynak bağımlılıklarını yönetebilir (örneğin, jQuery’nin senin betiğinden önce yüklenmesini sağlar), aynı kaynağın tekrar tekrar yüklenmesini önler ve eklentiler ile diğer tema bileşenlerine kaynakları yönetmek için gerekli araçları (hook’ları) sunar. Bağlantı etiketlerini doğrudan yazmak, bu avantajları kaybettirir ve çatışmalara neden olabilir.

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

Konularınızın uluslararasılaşmasını desteklemek, küresel pazarlara açılmanın anahtarıdır. Öncelikle,style.cssBunun başı vefunctions.phpÇin'deload_theme_textdomain()Metin alanını (Text Domain) doğru şekilde ayarlayın. Daha sonra, temadaki çevrilmeye ihtiyaç duyan tüm metin parçalarında çeviri fonksiyonlarını kullanın.__()、_e()Paketlemeyi gerçekleştirin. Son olarak, Poedit gibi araçları kullanarak dosyaları oluşturun..potŞablon dosyası ve bunun için çeviri içeriği:.po和.moDil dosyası.

Konu geliştirme işlemi tamamlandıktan sonra, nasıl test yapılır?

Kapsamlı testler, bir ürünün piyasaya sürülmeden önce gerçekleştirilmesi gereken önemli bir adımdır. Testleri farklı ortamlarda (örneğin yerel bilgisayar, geçici depolama alanı) yapmanız gerekir. Temanın farklı tarayıcılarda (Chrome, Firefox, Safari, Edge) ve farklı cihazlarda (akıllı telefonlar, tabletler, masaüstü bilgisayarlar) doğru bir şekilde göründüğünden emin olun; yani hem tarayıcılar arası hem de duyarlılık (responsive) testleri yapın. Tüm WordPress temel özelliklerinin (yorumlar, arama, sayfa sıralama vb.) sorunsuz çalıştığından emin olun. PHP hatalarını, uyarıları ve bildirimleri kontrol etmek için WP Debugging gibi eklentiler kullanın. Son olarak, sayfa yükleme hızının belirlenen standartlara ulaştığından emin olmak için performans testleri yapın.