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

WordPress geliştirmeyi öğrenmeye başladığınızda, kendi temanızı oluşturmak heyecan verici bir dönüm noktasıdır. Bu sadece web sitenizin görünümünü ve işlevlerini tamamen kontrol etmenizi sağlamakla kalmaz, aynı zamanda WordPress’in temel yapısını derinlemesine anlamanın da en iyi yoludur. Bu makale, ortam kurulumundan temel bir tema oluşturmanın tüm sürecine kadar sizi adım adım yönlendirecek ve WordPress geliştiricisi olma yolunda ilk adımınızı atmanıza yardımcı olacaktır.

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

Herhangi bir kod yazmaya başlamadan önce, verimli bir yerel geliştirme ortamı oluşturmak çok önemlidir. Bu, çevrimiçi web sitesini etkilemeden testler yapmanıza ve hataları düzeltmenize olanak tanır.

Yerel geliştirme ortamını kurmak.

Öncelikle yerel sunucu yazılımını kurmamız gerekiyor. XAMPP, MAMP veya Local by Flywheel gibi araçlardan birini seçebilirsiniz. Bu yazılım paketleri Apache sunucusu, MySQL veritabanı ve PHP’yi bir araya getirir ve WordPress’ü çalıştırmak için gereklidir. XAMPP örneğini ele alırsak, kurulumdan sonra Apache ve MySQL servislerini başlattığınızda bilgisayarınız bir yerel sunucuya dönüşür.

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

Ardından, en yeni sürümdeki WordPress’i indirin ve bunu yerel sunucunuzun web sitesi kök dizinine (örneğin, XAMPP’nin kök dizinine) çıkarın.htdocsDaha sonra, erişim yoluyla…http://localhost/your-wordpress-folderÜnlü “Beş Dakikalık Kurulum” sürecini tamamlamak için, kurulum sırasında bir veritabanı oluşturmanız ve web sitesinin yönetici kullanıcı adını ve şifresini ayarlamanız gerekecektir.

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.

Kod düzenleyici ve araçları hazırlayın.

Mükemmel bir kod editörü, geliştirme verimliliğini büyük ölçüde artırabilir. Visual Studio Code, PhpStorm veya Sublime Text gibi araçlar iyi seçeneklerdir. Özellikle Visual Studio Code, PHP Intelephense gibi zengin WordPress ve PHP eklentilerine sahiptir ve akıllı kod tamamlama, sözdizimi kontrolü gibi özellikler sunar.

Ayrıca, geliştirme sürecinin ilerleyen aşamalarında temanın standartlara uygun olup olmadığını kontrol etmek için bir tarayıcı geliştirici araçları eklentisi kurmanız önerilir; örneğin WordPress’in resmi “Theme Check” eklentisi bunun için uygundur. Ayrıca, tarayıcının “Elementleri İncele” (Inspect Elements) özelliğini kullanarak HTML ve CSS kodlarını gerçek zamanlı olarak hata ayıklayabilirsiniz.

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

En basitleştirilmiş bir WordPress teması yalnızca iki dosya gerektirir; ancak işlevsel ve standartlara uygun bir yapı, farklı görevler üstlenen birçok dosyadan oluşur.

Çekirdek stil şablonu dosyası

Her WordPress temasının sahip olması gereken bir şey vardır.style.cssBu dosya, sadece tema stilini tanımlayan bir CSS dosyası değil; aynı zamanda dosyanın baş kısmındaki yorum blokları da temanın “kimlik kartı” niteliğindedir ve WordPress’in temayı tanıması için gereken tüm meta bilgileri içerir. Temel bir başlık yorumu aşağıdaki gibidir:

Tavsiye edilen okuma WordPress Tema Geliştirme: Sıfırdan Özelleştirilmiş Temalar Oluşturmanın Kapsamlı Rehberi。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Bunlar arasında,Text DomainUluslararasılaştırma amacıyla kullanılır; daha sonraki adımlarda çeviri fonksiyonları çağrılmak için kullanılır.__()或_e()Zaman kullanımında kullanılan tanımlayıcılar.

Temel şablon dosyası

Diğer bir gerekli dosya ise…index.phpBu, temanın varsayılan şablonudur; WordPress başka, daha spesifik bir şablon dosyası bulamadığında (örneğin…)single.php或page.phpİlk kez bir sayfayı yüklediğinizde, sayfayı oluşturmak için kullanılır.

Sadece bu iki dosya ile temanız, WordPress arayüzündeki “Görünüm” -> “Temalar” listesinde görünebilir ve etkinleştirilebilir. Elbette, şu an sadece boş bir çerçevedir. Temanın gerçekten çalışabilmesi için birkaç temel şablon dosyası daha oluşturmamız gerekiyor.

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.

Öncelikle oluşturun.header.phpBu, HTML belgesinin baş kısmını (header) içermektedir, örneğin:<doctype>Deklarasyon,<head>Bölge (burada kullanılmalıdır)wp_head()Bu fonksiyon, WordPress’ün çekirdek betiklerini ve stillerini içe aktarır; aynı zamanda web sitesinin başlık bölümüyle ilgili gerekli kodları da yerine getirir.

İkincisi, oluşturun.footer.phpBu, web sitesinin alt kısmındaki (footer) içeriği içermekte ve sona ermeden önce belirli bir işlemi gerçekleştirmektedir.wp_footer()Bu, birçok eklentinin sayfanın alt kısmına kod eklemek için ihtiyaç duyduğu bir “düğümdür” (hook).

Son olarak, oluşturun.functions.phpBu dosya zorunlu değil, ancak temanın “beyni” niteliğindedir. Buraya temanın desteklediği özellikleri, kayıt menüsünü ve kenar çubuğunu ekleyebilir, stil ve betik dosyalarını içe aktarabilir ve çeşitli özel fonksiyonları tanımlayabilirsiniz.

Tavsiye edilen okuma Sıfırdan başlayarak özel bir WordPress teması nasıl geliştirilir?。

Bir temanın temel özelliklerini oluşturma

Temel dosyalarımıza sahip olduktan sonra, temaya hayat katabilir ve bir web sitesinin temel işlevlerini kazandırabiliriz.

Navigasyon menüsünü gerçekleştirme

Modern web sitelerinde genellikle bir navigasyon menüsü bulunur. Öncelikle, sizin yapmanız gereken…functions.phpÇince'de kullanılır.register_nav_menus()Bir fonksiyon, yemek birimlerinin konumlarını kaydetmek için kullanılır.

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_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Bu kod, iki menü konumunu kaydeder: “Ana navigasyon menüsü” ve “Alt menü”. Daha sonra, menüyü göstermek istediğiniz şablonun konumunda (örneğin…)header.phpOrtada), kullanımwp_nav_menu()Fonksiyon onu çağırır.

wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) );

Kullanıcılar artık WordPress arayüzünün “Görünüm” -> “Menüler” bölümünde menüler oluşturabilir ve bunları “Ana Menü” konumuna atayabilirler.

Makale özel görsellerini ve kenar çubuğunu etkinleştirin.

Birçok tema, makale özetlerini (özel görselleri) ve araç çubuklarını desteklemektedir. Aynı şekilde…functions.php的my_first_theme_setupFonksiyona aşağıdaki kodu ekleyerek bu özellikleri etkinleştirin:

add_theme_support( 'post-thumbnails' ); // 启用文章特色图像
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 启用HTML5标记支持

Bir kenar çubuğu araç çubuğu alanı kaydetmek için şunları kullanın:register_sidebar()Function:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在这里添加小工具。', 'my-first-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_first_theme_widgets_init' );

Daha sonra, şablon dosyasında (örneğin:sidebar.php) içinde kullanılırdynamic_sidebar( 'sidebar-1' )Bu bölgeyi göstermek için…

Şablonları entegre etmek ve stil eklemek

Şimdi, çeşitli şablon bölümlerini birbirine bağlayacağız ve temel stiller ekleyeceğiz; böylece web sitesi görsel bir şekil kazanacak.

Şablon kullanarak bir fonksiyonu içe aktarın.

WordPress, diğer şablon dosyalarını içe aktarmak için birkaç temel fonksiyon sunar; bu da kodun modülerliğini ve sürdürülebilirliğini sağlar.index.phpYapının aşağıdaki gibi olması gerekmektedir:

<?php get_header(); ?>

<main id="main" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation(); // 文章导航
    else :
        get_template_part( 'template-parts/content', 'none' ); // 没有找到内容时的模板
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

get_header(), get_sidebar(), get_footer()Fonksiyonlar, ilgili şablon dosyalarını ayrı ayrı içerir.get_template_part()Daha esnek bir fonksiyondur ve tekrar kullanılan içerik bloklarını (örneğin makale özetlerini) ayrı bir yere taşımanızı teşvik eder.template-partsÖrneğin, bir klasörün altındaki bağımsız dosyalarda…content.php。

Temel stiller ve duyarlı (reaktif) tasarım oluşturmak

Şimdi, açın.style.cssKonunuz için stiller eklemeye başlayın. Öncelikle, kutu modeli, yazı tipi ve renkler gibi bazı genel stilleri ayarlayın.

* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Responsive tasarımı gerçekleştirmek için, farklı ekran boyutlarında düzeni ayarlamak amacıyla medya sorguları kullanılır. Örneğin, küçük ekranlarda kenar çubuğunun ana içeriknin altına taşınmasını sağlamak için medya sorguları kullanılabilir.

@media (max-width: 768px) {
    .site-main {
        width: 100%;
    }
    #sidebar {
        width: 100%;
        margin-top: 2rem;
    }
}

Unutmayın ki…header.php的<head>Bazı görünüm alanı meta etiketleri eklenmiştir; bu sayede mobil cihazlarda doğru ölçeklendirme sağlanır:<meta name="viewport" content="width=device-width, initial-scale=1">。

Özetle.

Bir içeren oluşturulmasından itibaren...style.css和index.phpBir dosya klasöründen başlayarak, navigasyon, kenar çubuğu ve duyarlı (responsive) bir tasarıma sahip tam bir WordPress teması oluşturana kadar olan süreç, WordPress tema geliştirmenin temel kavramlarını kapsamaktadır. Nasıl yapılacağını öğrendiniz…functions.phpTemaların özelliklerini genişletmek, kodu şablon hiyerarşisi sistemi kullanarak nasıl düzenleyeceğinizi ve tasarımı ön uç (frontend) için HTML ve CSS dosyalarına nasıl dönüştüreceğinizi öğrenmek önemlidir. Bu sadece bir başlangıç noktasıdır; daha sonra daha gelişmiş şablon dosyalarını (örneğin…) keşfedebilirsiniz.single.php, page.php, archive.phpÖzel makale türleri, tema özelleştirme araçları (API’ler), hatta daha karmaşık ve modern temalar oluşturmak için Sass ve JavaScript çerçeveleri kullanılabilir. Becerilerinizi geliştirmenin en iyi yolu, sürekli pratik yapmak ve resmi geliştirici dokümanlarına başvurmaktır.

Sıkça Sorulan Sorular.

Geliştirme konularında alt konular kullanılmalı mıdır?

Mutlaka öyle değil. Baştan itibaren bağımsız bir tema oluşturmak tamamen mümkündür ve temel prensipleri öğrenmenin en iyi yoludur. Alt temalar genellikle, popüler bir framework teması gibi mevcut bir üst temayı özelleştirmek ve değiştirmek gerektiğinde en iyi uygulamadır; çünkü bu, üst tema güncellendiğinde kendi yaptığınız değişikliklerin silinmemesini sağlar. Yeni bir geliştirme projesi için ise sıfırdan bağımsız bir tema oluşturmak daha yaygındır.

Nasıl temamı çok dilli olarak destekleyebilirim?

Bir konunun çok dilli (uluslararası) olarak desteklenmesini sağlamak esas olarak iki adımdan oluşur. Öncelikle,style.cssBunun başı vefunctions.phpTüm çevrilmeye ihtiyaç duyan metinler, WordPress’in çeviri fonksiyonları ile sarılmıştır; örneğin:__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )İkincisi, Poedit gibi bir araç kullanarak oluşturmanız gerekiyor..potŞablon dosyasını çevirin ve ardından her dil için ilgili çevirileri oluşturun..po和.moDosyayı alın ve konuya ekleyin./languagesKatalogun içinde.

Konu geliştirme işlemi tamamlandıktan sonra nasıl yayınlanır?

Yayınlamadan önce, temanızı “Theme Check” eklentisi kullanarak titizlikle test edin; böylece WordPress temaları kataloğunun tüm kodlama standartlarına ve güvenlik gereksinimlerine uyduğundan emin olursunuz. Tüm hata ayıklama kodlarını ve yorumları temizleyin. Daha sonra, temanızı resmi WordPress.org temaları kataloğuna gönderebilirsiniz (inceleme gerektirir) veya temayı bir ZIP dosyası olarak sıkıştırıp müşterilere doğrudan sağlayabilir, veya kendi web sitenizde dağıtabilirsiniz. Kendi başınıza dağıtıyorsanız, açık ve anlaşılır kurulum talimatları ile dokümantasyon sağladığınızdan emin olun.

Neden özel stilim, arka planda güncellendikten sonra kayboldu?

Bu durumun muhtemel nedeni, kullanmakta olduğunuz üst temanın (parent theme) dosyalarını doğrudan değiştirmenizdir. Üst tema WordPress arayüzü üzerinden güncellendiğinde, tüm temel dosyalar yeni sürümle değiştirilir ve bu da yaptığınız değişikliklerin kaybolmasına neden olur. İşte bu yüzden her türlü özelleştirilmiş geliştirme için alt temaların (subthemes) kullanılması şiddetle tavsiye edilir. Alt temanın stilleri ve fonksiyonları üst temadan bağımsız olarak yüklenir; bu sayede üst tema güncellense bile, alt teman dosyalarınızdaki tüm özelleştirmeler korunur.