WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Kendi Web Sitenizi Oluşturun

Hazırlık İşlemleri ve Ortam Kurulumu

Kod yazmaya başlamadan önce, uygun bir geliştirme ortamına ihtiyacınız var. Bu, bir yerel sunucu ortamı (örneğin XAMPP, MAMP veya Local by Flywheel) ve bir kod editörü (örneğin VS Code, Sublime Text veya PHPStorm) içerir. Yerel sunucu ortamı, çevrimiçi sunucuyu simüle ederek, her değişiklik yaptıktan sonra dosyalarınızı ağ sunucusuna yüklemek zorunda kalmadan kendi bilgisayarınızda temaları güvenli bir şekilde geliştirmenize ve test etmenize olanak tanır.

Çekirdek dosyalar, her WordPress temasının temelini oluşturur. En temel bir tema en az iki dosyaya ihtiyaç duyar:style.css 和 index.phpBunlar arasında,style.css Sadece bir stil şeması değil; daha önemli bir işlevi de bir temanın “bilgi başlığı” (information header) olarak görev yapmasıdır ve bu sayede WordPress sisteminize hangi temayı kullandığınızı bildirir. Bu dosyada, temanın adını, yazarını, açıklamasını, sürümünü ve diğer meta bilgilerini belirlemek için belirli yorum bloklarını kullanmanız gerekir.

Ayrıca, zorunlu olmamakla birlikte, bir tane oluşturulması şiddetle tavsiye edilir.functions.php Bu dosya, “İşlevsellik Geliştirici” (Function Enhancer) adlı temanıza aittir ve özel özellikler eklemek, menüler ve kenar çubuklarını yönetmek, ayrıca diğer betik ve stil dosyalarını dahil etmek için kullanılır. Bu sayede temanın özelliklerini, çekirdek dosyaları değiştirmeden genişletebilirsiniz.

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

Modern WordPress tema geliştirme sürecinde, alt temaların (Child Themes) kullanılması da önerilmektedir. Bu, ana tema dosyalarını doğrudan değiştirmeden temayı özelleştirmek ve yeni özellikler eklemek için güvenli bir yöntemdir. Ana tema güncellendiğinde, alt temada saklanan özelleştirmeleriniz korunur. Bir alt tema oluşturmak için yine yukarıda bahsedilen iki temel dosyaya ihtiyaç duyarsınız ve…style.css Stil başlıkları aracılığıyla…Template:Bu alan, üst konusunu (parent topic) belirtir.

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.

Konunun temel şablon dosyasını oluşturma

WordPress, belirli bir sayfa isteği için hangi PHP şablon dosyasının içeriği renderlaması gerektiğine karar vermek için “Şablon Hiyerarşisi” (Template Hierarchy) sistemini kullanır. Bu kuralları anlamak, temalar geliştirmenin anahtarıdır.

Makale ve Sayfa Görünüm Şablonları

En temel şablon şudur:single.php和page.phpBunlar sırasıyla tek bir blog makalesinin ve bağımsız bir sayfanın görünümünü kontrol etmek için kullanılır. Bu şablonlarda, içeriği döngüsel olarak çıkarmak için bir dizi WordPress çekirdek fonksiyonu kullanırsınız. En önemli döngü yapısı genellikle aşağıdaki gibidir:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
<?php endwhile; endif; ?>

Bu kod, makale olup olmadığını kontrol eder ve ardından bir döngüye girerek makalelerin başlıklarını ve içeriklerini sırayla ekrana yazdırır. Fonksiyon şu şekildedir:the_title()和the_content()İlgili verilerin çıktısını sağlamak için kullanılır.

Makale Listesi ve Arşiv Şablonu

Kullanıcılar blogun ana sayfasına, kategori dizin sayfalarına veya yazar arşiv sayfalarına girdiğinde, WordPress liste şablonlarını kullanır. En yaygın kullanılan liste şablonları şunlardır:index.php(Son çare olarak) vearchive.phpListe şablonlarında, döngüler birden fazla makaleyi tarar; genellikle bunun için belirli bir yöntem kullanırız.the_excerpt()Makalenin özetini, tam metnini değil, lütfen.

Tavsiye edilen okuma WordPress tema geliştirmeyi adım adım öğrenin: Sıfırdan özel bir tema oluşturun.。

// Döngü içinde makale listesi öğelerini ekrana yazdırın.
<article>
    <h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>
</article>

the_permalink()Bu fonksiyon, mevcut makalenin kalıcı bağlantısını almak için kullanılır.

Bir konunun genel bileşenleri

Kodun yeniden kullanılabilirliğini ve sürdürülebilirliğini artırmak için, ortak sayfa bölümlerini bağımsız şablon dosyalarına ayırmalısınız. Bu, kodun daha kolay yönetilmesini ve farklı projelerde tekrar kullanılmasını sağlar.get_header(), get_footer(), get_sidebar()和get_template_part()Bunu gerçekleştirmek için log() ve sin() gibi fonksiyonlar kullanılır.

Örneğin, senin…header.phpDosya, HTML belgesinin başlık bölümünü (header) içermektedir.Bölge ve web sitesinin üst navigasyon menüsü.single.phpBurada, sadece başlangıçta çağırmanız yeterli.get_header()WordPress, bunu otomatik olarak yapacaktır.header.phpİçeriğin.

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.

Aynı şekilde, birden fazla yerde tekrarlanan kod blokları için (örneğin makale meta bilgileri gibi), bunları bir dosyada saklayabilirsiniz.content.php或template-parts/content.phpArdından, ana şablon içinde bunu kullanın.get_template_part('template-parts/content', get_post_format());Onu çağırın. İkinci parametre, makale formatına (görsel galerisi, alıntı vb.) göre farklı varyasyon dosyalarını yüklemenize olanak tanır.content-gallery.php）。

Fonksiyon dosyalarını kullanarak tema özelliklerini geliştirin.

functions.php Dosya, temanın “kontrol merkezidir”; doğrudan HTML çıktısına ait olmayan tüm işlevsel kodlar buraya yerleştirilmelidir. Bu kodlar, tema başlatıldığında WordPress tarafından otomatik olarak yüklenir.

Kayıtlı Konu Özelliği ve Menü

Temel ve gerekli bir işlem, kullanmaktır.add_theme_support() Bu fonksiyonlar, temanızın hangi WordPress özelliklerini desteklediğini belirtmek için kullanılır. Örneğin, makaleler için özel resimlerin etkinleştirilmesi, özelleştirilmiş menülerin kullanılması ve HTML5 işaretlemelerinin desteklenmesi standart uygulamalardır.

Tavsiye edilen okuma WordPress’ın Çekirdek Mimarisi ve Çalışma Prensibi。

function my_theme_setup() {
    // 添加文章和页面特色图片支持
    add_theme_support('post-thumbnails');
    // 为导航菜单功能添加支持
    add_theme_support('menus');
    // 为评论列表、搜索表单等添加HTML5标记支持
    add_theme_support('html5', array('comment-list', 'search-form'));
}
add_action('after_setup_theme', 'my_theme_setup');

Daha sonra, kullanabilirsiniz.register_nav_menus() Bu fonksiyon, “üst ana navigasyon” ve “alt navigasyon” gibi temada kullanılabilir menü konumlarını tanımlamak için kullanılır.

Stil şemalarını ve JavaScript’i içe aktarın.

CSS ve JavaScript dosyalarını doğru bir şekilde kuyruğa eklemek (enqueue), profesyonel geliştirmenin önemli bir parçasıdır. Bu, bağımlılıkların doğru bir şekilde yönetilmesini ve betik çakışmalarının önlenmesini sağlar. Kesinlikle şablon dosyalarında doğrudan bu dosyaları kullanmayın.或Etiketler, kaynakları içeriye dahil eder.

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.

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件，依赖于jQuery
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

kancalarwp_enqueue_scripts Web sitelerinin ön yüzünde (frontend) script’lerin ve stillerin (styles) yüklenmesi için kullanılır.get_stylesheet_uri()和get_template_directory_uri() Bu fonksiyon, tema dizininin doğru URL’sini almanıza yardımcı olabilir.

Bir araç çubuğu bölgesi oluşturun.

Kenar çubuğu veya sayfa altındaki widget alanları (Widget Areas), kullanıcılara arka planda sürükleyip bırakma arayüzü aracılığıyla içeriği özelleştirme olanağı sunar. Kullanımı oldukça kolaydır.register_sidebar() Bir fonksiyon, yeni bir araç çubuğu bölgesi oluşturabilir.

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          => '主侧边栏',
        'id'            => 'sidebar-1',
        'description'   => '此区域的小工具将显示在文章和页面侧边。',
        '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');

Kayıt olduktan sonra, şablon dosyalarında (örneğin…) değişiklikler yapmanız gerekecek.sidebar.php) içinde kullanılırdynamic_sidebar('sidebar-1');Bu bölgeyi çıkarmak için bir fonksiyon kullanılır.

Responsive (uyumlu) tasarımın oluşturulması ve stil kodlarının yazılması

Modern web sitelerinin çeşitli cihazlarda iyi bir şekilde görüntülenmesi gerekmektedir. Bu, kullanılan temanın responsive (uyumlu) olması gerektiği anlamına gelir. Responsive tasarımın gerçekleştirilmesinde esas olarak CSS Media Queries ve Fluid Layouts (akışkan düzenlemeler) kullanılır.

Mobil öncelikli stil stratejisi (Mobile-first style strategy)

“Mobil öncelikli” (mobile-first) bir CSS yazım stratejisi benimsemeniz önerilir. Yani öncelikle mobil cihazlar (küçük ekranlar) için temel stilleri oluşturun ve ardından medya sorguları kullanarak daha büyük ekranlar için stilleri ekleyin veya mevcut stilleri değiştirin.

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}
.article {
    font-size: 16px;
    line-height: 1.6;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* 针对桌面设备 */
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
    .article {
        font-size: 18px;
    }
}

Bu strateji, temel içeriğin tüm cihazlarda erişilebilir olmasını sağlar ve daha büyük ekranlardaki kullanıcı deneyimini kademeli olarak geliştirir.

Resimler ve medyayı esnek bir şekilde işleyin.

Resimlerin ve gömülü içeriklerin (örneğin videoların) kapsamlarından taşmamasını sağlamak, responsive tasarımın temel gerekliliklerindendir. Basit ve genel bir kural şudur:

img,
iframe,
video {
    max-width: 100%;
    height: auto;
}

Bu CSS kuralı, medya öğesinin genişliğinin üst konteynerin genişliğini aşmamasını ve yüksekliğinin orantılı bir şekilde otomatik olarak ayarlanmasını sağlar; böylece düzenin bozulması engellenir.

WordPress yardımcı sınıflarını ve fonksiyonlarını kullanmak

WordPress kendiliğinden birçok kullanışlı CSS sınıfı üretir ve bunları daha hassas stil kontrolü için kullanabilirsiniz. Örneğin,Etiketlere, sayfa veya makale türünü belirten sınıflar eklenir (örneğin:.page, .single-post), ayrıca makale ID sınıfları (örneğin.postid-123Makale listesinin döngüsü sırasında…post_class()Fonksiyon, her makalenin konteyneri için bir dizi sınıf adı (makale formatı, kategori vb.) üretir; bu da detaylı stil tasarımı açısından büyük bir kolaylık sağlar.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- 文章内容 -->
</article>

Stil şemasında, konumlandırmayı şu şekilde yapabilirsiniz:

/* 为所有文章添加通用样式 */
article {
    margin-bottom: 2em;
}
/* 仅为“引语”格式的文章添加特殊样式 */
.format-quote {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding-left: 1em;
}

Özetle.

WordPress tema geliştirme, yaratıcılığı, ön uç teknolojileri (HTML, CSS, JavaScript) ve arka uç teknolojileri (PHP) bir araya getiren bir süreçtir. Bir temanın oluşturulmasıyla başlar ve bu teman, web sitelerinin görünümünü ve işlevselliğini belirler.style.css和index.phpTemel klasörlerden başlayarak, şablon hiyerarşisi sistemini adım adım öğrenin ve uygulayın. Sayfaları tekrar kullanılabilir şablon bileşenlerine ayırın. Temel prensip bu şekildedir.functions.phpDosya, temanızın özelliklerini genişletmek, menüler ve betikleri kaydetmek için kullanılan temeldir. Son olarak, duyarlı (reaktif) CSS tasarımı sayesinde temanızın cep telefonundan masaüstü bilgisayara kadar tüm cihazlarda mükemmel bir kullanıcı deneyimi sunmasını sağlayın. Alt temalar kullanarak değişiklikler yapmak, betikleri ve stilleri doğru bir şekilde sıralamak gibi en iyi uygulamalara uyarak temanızı daha profesyonel, daha güvenli ve daha kolay bakımlı hale getirebilirsiniz.

Sıkça Sorulan Sorular.

PHP bilgisi olmadan WordPress tema geliştirilebilir mi?

Teorik olarak, mevcut bir temanın görünümünü sadece HTML ve CSS ile değiştirmek mümkün olsa da, işlevsel olarak eksiksiz ve WordPress standartlarına uygun bir tema geliştirmek için PHP bilgisi şarttır. Temel PHP sözdizimini, fonksiyon çağrılarını ve WordPress’e özgü şablon etiketlerini (template tags) ile hook sistemini anlamanız gerekmektedir. En azından PHP ve WordPress’in temel şablon etiketlerini öğrenmenizi öneririz.

Bir tema geliştirildikten sonra, başkalarının kullanımına sunmak için nasıl yayınlanır?

Bir temayı WordPress resmi temalar dizinine yayınlamadan veya ticari olarak satmadan önce, sıkı testler yapmanız ve temanın “WordPress Tema Geliştirme Kılavuzu”ndaki kodlama standartlarına uyduğundan emin olmanız gerekir. Bu, kodun güvenlik açısından incelenmesini, temanın tamamen duyarlı (responsive) olmasını ve uluslararasılaştırma (i18n) için hazır olmasını (çeviri fonksiyonlarının kullanılmasını) içerir.__()和_e()Ardından, tüm hata ayıklama (debugging) kodlarını kaldırın. Daha sonra, bunu resmi kataloga göndermeyi veya kendi web siteniz aracılığıyla dağıtmayı seçebilirsiniz.

Alt konular (subtopics) ve üst konular (parent topics) güncellemeleri arasındaki ilişki nedir?

Alt temaların var olma amacı, üst temayı güvenli bir şekilde değiştirmektir. Bir alt tema kullandığınızda, yaptığınız stil ve işlevsel değişiklikler alt temanın dosyalarında saklanır. Üst tema bir güncelleme aldığında, diğer temaları güncellemek gibi üst temayı da güncellemeniz yeterlidir. Alt temanın dosyaları değişmeyecek ve tüm özelleştirmeler korunacaktır. Bu, temel işlevleri (üst temayı) güncellerken kişiselleştirilmiş tasarımın (alt temanın) kaybolmamasını sağlayan en iyi uygulamadır.

Kendi temama özel seçenek sayfaları nasıl eklerim?

İleri düzey temalara özel seçenek sayfaları eklemek genellikle WordPress’in Ayarlar API’si (Settings API) kullanılarak veya Redux, Kirki gibi popüler seçenek çerçevelerinin entegrasyonu yoluyla gerçekleştirilir. Ayarlar API’si, seçeneklerin güvenli bir şekilde oluşturulması, doğrulanması ve kaydedilmesi için WordPress çekirdeği tarafından sağlanan standartlaştırılmış bir arayüzdür. Başlangıç seviyesindeki kullanıcılar için, olgun bir çerçeve kullanmak kullanıcı dostu bir seçenek paneli daha hızlı bir şekilde oluşturmayı sağlar; ancak bu, temanın karmaşıklığını ve dosya boyutunu artırabilir.