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

WordPress temalarıyla gelişmeye başlamak, artık hazır temaları kullanmakla sınırlı kalmayacağınız anlamına gelir; belirli ihtiyaçlara göre benzersiz bir web sitesi görünümü ve özellikleri oluşturabilirsiniz. Bu rehber, bir temanın temel yapılarını oluşturmak için gereken adımları size gösterecek ve ortam hazırlığından şablon dosyalarının düzenlenmesine kadar tüm süreci kapsayacaktır.

WordPress temalarının temel yapısı ve dosyaları

En basit WordPress teması, arka planda tanınabilmesi için yalnızca iki dosyaya ihtiyaç duyar. Bu temel dosyaların işlevlerini anlamak, geliştirmenin ilk adımıdır.

Konu stilinin ve bilgi tanım dosyasının özellikleri

İlk zorunlu dosya şudur:style.cssSadece bir tema şablonu değil; aynı zamanda bir “bilgi başlık dosyası”dır. Üst kısmındaki yorum bloğu, temanın meta verilerini tanımlar. Bu bilgiler olmadan WordPress, temanızı tanıyamaz.

Tavsiye edilen okuma Başlangıçtan Uzmanlığa: Profesyonel Seviyede WordPress Temaları Oluşturmak İçin Kapsamlı Bir Geliştirme Kılavuzu。

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

Yorum bloğunun altında, normal CSS yazdığınız gibi stil kuralları ekleyebilirsiniz.

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 indeks şablonu

İkinci gerekli dosya şudur:index.phpBu, temanın varsayılan şablon dosyasıdır; WordPress daha spesifik bir şablon bulamadığında (örneğin…)single.php或page.phpBu araç, sayfaları renderlemek için kullanılır. En basit örnek…index.phpSadece blog makalelerini çağıran bir döngü içerebilir.

Bu iki dosyanın yanı sıra, işlevsel bir tema genellikle aşağıdakileri de içerir:header.php(Başlık)footer.php(Alt Kısım)functions.php(Fonksiyonlar)single.php(Makale Sayfası) vepage.php(Sayfa) vb.

Yerel geliştirme ortamını kurmak.

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

Yerel sunucu yazılımını kullanın.

Entegre yerel sunucu yazılım paketlerinin kullanılması önerilir; örneğin Local by Flywheel, XAMPP veya MAMP. Bu araçlar Apache/Nginx, PHP ve MySQL’i tek tıklamayla kurar ve kullanımı kolay yönetim arayüzleri sunar. Özellikle Local by Flywheel, WordPress için optimize edilmiştir ve sitelerin hızlı bir şekilde oluşturulmasına ve SSL sertifikalarının yapılandırılmasına olanak tanır.

Tavsiye edilen okuma WordPress Eklenti Geliştirme Kılavuzu: Sıfırdan Başlayarak Profesyonel Eklentiler Oluşturma。

WordPress’u ve bir kod editörünü kurmak

Yerel sunucu ortamınızda en yeni WordPress yükleme paketini indirin ve talimatları takip ederek kurulumu tamamlayın. Aynı zamanda, etkili bir kod editörüne ihtiyacınız olacak. Visual Studio Code mükemmel bir seçenektir; PHP Intelephense (kod için akıllı ipuçları), WordPress Snippet (kod parçaları) ve Live Server (gerçek zamanlı önizleme) gibi birçok eklentiye sahiptir ve bu da geliştirme verimliliğinizi büyük ölçüde artırır.

Temalarınızı içeren klasörü (örneğin “my-first-theme” adında) WordPress’in kurulum dizini içine yerleştirin./wp-content/themes/Ortaya koyun ve içine yerleştirin.style.css和index.phpWordPress arayüzündeki “Görünüm” -> “Temalar” bölümünde bu temayı görebilir ve etkinleştirebilirsiniz.

Konunun temel şablon dosyasını oluşturma

Temalar, farklı sayfaların görünüm mantığını düzenlemek için bir dizi şablon dosyası kullanır. Şablonların hiyerarşisini anlamak, bir tema oluşturmanın anahtarıdı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.

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

Genellikle, web sitesinin başlık ve son kısımlarındaki içerikleri yeniden kullanılabilir olması için ayrı dosyalara ayırırız. Oluşturun.header.phpBu dosya, bir HTML belgesinin başlık bilgilerini (header bilgilerini) içermelidir.Bölge (Çağrı)wp_head()Fonksiyonlar ve ayrıca web sitesinin üst kısmındaki ortak bölümler (örneğin Logo ve navigasyon menüsü).

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1002>
    <header id="masthead">
        <h1><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    </header>

Aynı şekilde, oluşturun.footer.phpSayfa altı (footer) içeriğini de içeren ve bunu çağıran…wp_footer()Fonksiyon. Sonra…index.phpÇin'de, kullanılır.get_header()和get_footer()Bu fonksiyonlar, onları içe aktarmak için kullanılır.

Makale döngüsünü ve içerik gösterimini gerçekleştirme

WordPress’ün çekirdeği “The Loop” adlı bir mekanizmadır; bu mekanizma, makale olup olmadığını kontrol etmek ve makale varsa her bir makaleyi sırayla işlemek için kullanılır.index.phpOrtada, temel bir döngü yapısı şu şekildedir:

Tavsiye edilen okuma Nasıl Özelleştirilmiş Bir WordPress Teması Geliştirilir: Başlangıçtan Uzmanlığa Rehber。

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>">
            <h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    &lt;?php endwhile;
else :
    echo &#039;<p>暂无文章。</p>';
endif;
?&gt;

Burada kullanılmıştır.the_title()、the_permalink()和the_excerpt()Metin bilgilerini çıkarmak için şablon etiketlerini kullanın.

İşlevsel dosyalar aracılığıyla temayı geliştirin.

functions.phpDosya, temanızın “kontrol merkezidir”; işlevler eklemek, menüler ve kenar çubuklarını kaydetmek, ayrıca stil şemalarını ve betikleri buraya dahil etmek 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.

Kayıt menüsü ve kenar çubuğu

Konunun arka plandaki görsel menü yönetimini desteklemesi için, şunları yapmanız gerekiyor:functions.phpMutfak biriminin kayıt yerini kullanın.register_nav_menus()Bu işlemi tamamlamak için bir fonksiyon kullanılır.

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Daha sonra, şablon dosyasında (örneğin…)header.php) içinde kullanılırwp_nav_menu( array( 'theme_location' => 'primary' ) )Bu menüyü göstermek için…

Stillerin ve betiklerin doğru bir şekilde dahil edilmesi

Asla doğrudan şu yolla yapmayın.<link>或<script>Etiketler, kaynakları sabit olarak (hard-coded) içermelidir. Bunun için uygun yöntemlerin kullanılması gerekir.wp_enqueue_style()和wp_enqueue_script()Functionu oluşturun ve ardından onu monte edin.wp_enqueue_scriptsBu kancada. Bu, bağımlılık ilişkilerinin doğru bir şekilde yönetilmesini sağlar ve tekrarlanan yüklemelerin önlenmesine yardımcı olur.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入自定义的JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Özetle.

Temel bilgi başlıklarını içeren bir dosya oluşturulduktan sonra…style.cssVe temel döngülerin…index.phpBaşladınız; WordPress tema geliştirmenin ilk adımını attınız. Sayfa başlıklarını ve alt kısımlarını ayırarak, temel şablon dosyalarını oluşturarak ve…functions.phpİşlevleri ve kaynakları sistematik bir şekilde ekleyerek, yapısal olarak açık ve bakımı kolay bir özelleştirilmiş tema oluşturabilirsiniz. Unutmayın ki, tema geliştirme bir iterasyon sürecidir; önce temel işlevleri karşılamakla başlar ve ardından ihtiyaçlara göre sürekli genişletilir ve detaylandırılır.

Sıkça Sorulan Sorular.

WordPress tema yapmak için PHP bilmek zorunda mıyım?

Evet, PHP WordPress’in temel programlama dilidir. Tema geliştirmeye derinlemesine girmek için PHP’nin temel sözdizimini, WordPress’in çekirdek fonksiyonlarını (şablon etiketleri), hook’larını (Hook’lar) ve döngü mekanizmalarını (Loop’lar) anlamak şarttır. Mevcut temaların CSS’ini ve basit şablonlarını değiştirerek başlayabilirsiniz; ancak özelleştirme işlemleri PHP olmadan mümkün değildir.

Kodu değiştirmeden temayı test edebilir miyim?

Tema geliştirme ve testlerinin yerel geliştirme ortamında veya çevrimiçi web sitelerinin geçici/test ortamlarında yapılması şiddetle önerilir. Asla resmi olarak faaliyette olan bir web sitesinde yeni temalar geliştirmeyin veya önemli değişiklikler yapmayın; bu, sitenin geçici olarak işlevsiz hale gelmesine veya görünümünün bozulmasına neden olabilir.

Neden temamın etkinleştirilmesinin arka planda hiçbir etkisi görünmüyor?

Lütfen öncelikle konu klasörünün doğru bir şekilde yerleştirilip yerleştirilmediğini kontrol edin./wp-content/themes/Dizinin içinde. Sonra, doğrulayın.style.cssDosyanın en üstündeki konu bilgileri ile ilgili yorum bloğunun formatı doğru mu? Herhangi bir yazım hatası veya nokta (:) eksikliği, tanıma işleminin başarısız olmasına neden olabilir. Son olarak, bunun doğru olduğundan emin olun.index.phpDosya mevcuttur.

Farklı sayfa türleri için nasıl farklı tasarımlar (düzenler) oluşturulur?

WordPress, belirli şablon hiyerarşisi kurallarına uyar. Örneğin, tek bir blog makalesi sayfası için özgün bir tasarım oluşturmak istiyorsanız, bunu yapmanın yolları vardır.single.phpDosya; statik sayfalar için bir düzen oluşturulacaksa, ilgili düzenin oluşturulması gerekmektedir.page.phpİlgili sayfaya erişildiğinde, WordPress varsayılan şablon dosyaları yerine bu daha spesifik şablon dosyalarını otomatik olarak tercih eder.index.php。