Anasayfa./Bilgi./WordPress/İçerik detayları.

WordPress tema geliştirmeye başlama kılavuzu: İlk temanızı sıfırdan oluşturun.

3 dakika okuma.
2026-03-14
2026-06-05
2,372
Aşağıdaki bağlantılar üzerinden alışveriş yaptığınızda, sizin için ek bir maliyet olmadan komisyon kazanıyorum.

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

Kod yazmaya başlamadan önce, WordPress temasının yapısını anlamak çok önemlidir. En temel bir tema en az iki dosyaya ihtiyaç duyar: Bunlardan biri, tema bilgilerini tanımlamak için kullanılan stil sayfasıdır; diğeri ise web sitesi içeriğini göstermek için kullanılan PHP şablon dosyasıdır. Bu dosyalar birlikte temanın omurgasını oluşturur ve belirli bir dizin yapısına ve isim verme kurallarına uyar.

Temel belge şudur:style.cssBu sadece CSS stillerini içermekle kalmıyor, aynı zamanda dosyanın başındaki yorum bloku da temanın “kimlik kartı”dır. Bu blok, temanın adını, yazarını, açıklamasını, sürümünü ve diğer meta bilgilerini WordPress sistemine bildirir. Doğru biçimlendirilmemişsestyle.cssWordPress, temanızı tanıyamayacak ve aktive edemeyecek.

Başka bir gerekli belge deindex.phpBu, temanın ana model dosyasıdır. WordPress daha spesifik bir model dosyası bulamadığında bu dosya kullanılır.single.php或page.phpİkisi de varsa, sayfayı oluşturmak için varsayılan olarak kullanılır. Tüm şablon dosyalarının yedek seçeneğidir.

Tavsiye edilen okuma WordPress tema geliştirmenin sırları: Sıfırdan özel bir web sitesi oluşturmanın temel teknikleri。

Konu bilgi beyanı dosyası.

Konunun stil sayfası.style.cssBaşlık belirli notlar içermelidir. Aşağıda en temel bir örnek verilmiştir:

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%).
UltaHost LOGOSU Sayfaya erişin. 
/*
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şma için, sonraki çeviri sırasında kullanılacak olan bir tanımlayıcıdır. Bu dosya genellikle tüm CSS stil kodlarınızı da içerir.

Çekirdek şablon dosyası

index.phpDosyalar, konunun girişidir. En basit olanıindex.phpYalnızca, makale listesini almak ve göstermek için WordPress çekirdek fonksiyonlarını çağıran temel bir döngü içerebilir.

<!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>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

Bu kodda,wp_head()和wp_footer()İki önemli kanca, WordPress çekirdeğinin, eklentilerin ve diğer komut dosyalarının stil, komut dosyaları ve meta etiketler gibi gerekli kodları sayfanın başına ve sonuna eklemesine olanak tanır.

Yerel geliştirme ortamını kurmak.

Konuyu online sunucuya dağıtmadan önce yerel bir geliştirme ortamı oluşturmak en verimli ve güvenli yöntemdir. Yerel ortam, online web sitesini etkilemeden kodu özgürce test etmenize ve hataları ayıklamanıza olanak tanır.

Tavsiye edilen okuma WordPress tema geliştirmeye hakim olmak: Temellerden ileri düzeye kadar kapsamlı bir rehber.。

Yerel sunucu yazılımını seçin.

Yeni başlayanlar için, entegre yerel sunucu yazılımları en iyi seçimdir. Apache/Nginx, PHP ve MySQL veritabanını birlikte paketlerler ve tek bir tıklamayla kurulup kullanılabilirler. Örneğin, XAMPP, Local by Flywheel veya DevKinsta popüler seçeneklerdir. Bu araçlar gerçek web sunucu ortamını taklit eder ve WordPress'i kendi bilgisayarınızda çalıştırmanıza olanak tanır.

WordPress'i kurun ve bir tema dizini oluşturun.

Yerel sunucu çalıştıktan sonra yeni bir WordPress kurmanız gerekir. En son WordPress sıkıştırma paketini indirin ve yerel sunucunuzun web sitesi kök dizinine (örneğin XAMPP'in htdocs klasörüne) ayıklayın. Ardından tarayıcı üzerinden yerel adrese (örneğin http://localhost) erişin ve ünlü “beş dakika içinde kurulumu” tamamlayın.

Kurulum tamamlandıktan sonra, WordPress'e giriş yapın.wp-content/themesİçerik tablosu. Burada, geliştirmeyi planladığınız tema için yeni bir klasör oluşturun, örneğin “my-first-theme” adını verin. Daha önce oluşturduğunuzstyle.css和index.phpDosyalar bu klasörde bulunmalıdır. Bu noktada, WordPress yönetim paneline giriş yaptığınızda, “Görünüm” -> “Tema” bölümünde temanızı görebilmelisiniz, ancak şu anda oldukça basit bir işlevselliğe sahiptir.

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
hosting.com LOGO Sayfaya erişin.

Temel bir şablon dosya sistemi oluşturun.

Sadeceindex.phpBir temanın konusu yeterli değildir. Tam işlevli bir tema, tek bir makale, bağımsız sayfa, makale arşivi vb. gibi farklı görüntüleme senaryolarına uygun şablon dosyaları gerektirir. WordPress'in şablon hiyerarşisi sistemi, mevcut isteklenen sayfayı oluşturmak için en uygun şablon dosyalarını otomatik olarak seçer.

Makale ve sayfa şablonları.

single.phpŞablonlar, tek bir blog yazısını göstermek için kullanılır. Kullanıcı, bir yazının tam metnini okumak için tıkladığında WordPress bu şablonu kullanır. Genellikle kategoriler, etiketler, yazar ve yorum alanı gibi daha ayrıntılı yazı bilgilerini içerir.

page.phpŞablonlar, bağımsız statik sayfaları (örneğin “Hakkımızda”, “İletişim” sayfaları) göstermek için kullanılır. Makale şablonlarından farklı olarak, genellikle yayınlanma tarihi, kategoriler gibi blog yazılarına ait öğeleri göstermezler.

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

Kafa ve taban şablonları.

DRY (Tekrar Etme) ilkesine uymak için, WordPress temaları genellikle sayfanın üst (Header) ve alt (Footer) kısımlarını ayrı dosyalara ayırır.

header.phpDosya, bölgeler, site tanımlayıcıları, ana navigasyon menüsü vb. dahil olmak üzere, başlangıçtan sayfanın ana içerik alanına kadar tüm kodu içerir.index.php、single.phpDiğer şablonlarda olduğu gibi, bunu da kullanabilirsiniz.get_header()Bunu tanıtmak için bir fonksiyon kullanacağız.

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.
InterServer LOGO. Sayfaya erişin.

Aynı şekilde,footer.phpDosya, telif hakkı bilgileri, yardımcı navigasyon vb. gibi altbilgi içeren tüm öğeleri içerir ve bunlar aracılığıylaget_footer()İşlevin tanıtımı. Ayrıca,sidebar.php(Yan menü) ayrıca sıklıkla ayrılır ve kullanılır.get_sidebar()Çağrı.

Yeniden yapılandırılmış olan.index.phpÇok daha basit olacak:

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

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

Entegre stil ve komut dosyaları.

Modern temalar, CSS stil sayfalarının ve JavaScript komut dosyalarının doğru ve verimli bir şekilde yüklenmesini gerektirir. WordPress, bu kaynakları yönetmek için özel fonksiyonlar sağlar ve bunların doğru bağımlılık sırasına göre yüklenmesini ve aynı zamanda çakışmaları veya yinelen girişleri önlemeyi sağlar.

Stil ekleme için fonksiyon sırasını kullanın.

Doğru yol,wp_enqueue_style()İşlev, stil sayfasını kuyruğa ekler. Konu içinde bir adı vermeniz gerekir.functions.phpBu dosya, temanın işlevsel çekirdeğidir. Bu dosya, çeşitli özellikleri, işlevleri ekleme ve varsayılan davranışları değiştirme için kullanılır.

在functions.phpBurada, bir fonksiyonu 'onun üzerine monte edebilirsiniz.wp_enqueue_scriptsBu hareketin tetikleyicisi:

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()İşlev, otomatik olarak konunun bilgilerini alır.style.cssDosya yolu. Bu şekilde yüklenerek, WordPress kaynakları daha iyi yönetebilir.

fonksiyon kuyruğunu kullanarak komut dosyalarını ekleme

JavaScript komut dosyalarının yüklenmesi de bir sıra kullanmayı gerektirir ve buna karşılık gelen fonksiyonwp_enqueue_script()Bunları aynı fonksiyona ekleyebilirsiniz.

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Burada,array( 'jquery' )Bu komut dosyasının temel jQuery kitaplığına bağımlı olduğunu belirtti ve WordPress, jQuery'nin önce yüklenmesini sağladı. Son parametretrueScrapbook'u sayfanın altına yerleştirmenin (daha önce) sayfanın yükleme hızını artırmaya yardımcı olduğu belirtilmiştir.

Özetle.

Bir WordPress temasını sıfırdan geliştirmek, temel dosya yapısını anlamaktan, yerel ortamı kurmaktan, bir şablon sistemi oluşturmaktan doğru kaynakları entegre etmeye kadar birçok önemli adımı kapsayan sistematik bir öğrenme sürecidir. Kendi başınıza oluşturarakstyle.css、index.php、header.php、footer.phpçokfunctions.phpTemel dosyaları oluşturarak yalnızca çalışan bir tema oluşturmuyorsunuz, aynı zamanda WordPress şablon hiyerarşisinin ve kanca sisteminin çalışma şeklini de daha iyi anlıyorsunuz. Unutmayın ki tema geliştirmenin merkezinde, temanızın uyumlu, verimli ve bakımı kolay olmasını sağlayan WordPress sözleşmelerine ve standartlarına uyma yer alır. Bu noktadan başlayarak, özel yazı tipleri, tema özelleştiricisi, widget alanları gibi daha gelişmiş özellikleri keşfedebilir ve güçlü, kişiselleştirilmiş bir tema oluşturmaya devam edebilirsiniz.

Sıkça Sorulan Sorular.

Geliştirme konusu için PHP'yi bilmek gerekir mi?

Evet, PHP'yi bilmek WordPress tema geliştirme için gereklidir. Çünkü WordPress kendisi PHP ile yazılmıştır ve tüm template dosyaları (örneğinindex.php、single.phpBunların hepsi PHP dosyalarıdır ve WordPress'in temel fonksiyonlarını çağırarak sayfa içeriğini dinamik olarak oluştururlar. Aynı zamanda, işlev ekleme için kullanılırlar.functions.phpDosyalar ayrıca tamamen PHP kodundan oluşur. HTML ve CSS, yapı ve stil tanımlamak için kullanılırken, PHP dinamik işlevsellik ve veri etkileşimi sağlamak için temeldir.

Temanın functions.php dosyasının ne işe yaradığı.

functions.phpDosya, temanızın “işlevsel merkezi”dir. Bir şablon dosyası değildir ve sayfanın belirli bir bölümünü doğrudan oluşturmaz. Bunun yerine, tema işlevselliğini değiştirmek ve genişletmek için kullanılan tüm PHP kodunu depolamak için kullanılır. Yaygın kullanım alanları arasında navigasyon menüsü konumunu kaydetmek, gadget alanlarını tanımlamak ve

etiketleri aracılığıyla öğeleri eklemek bulunur.wp_enqueue_scriptsHooklar, CSS ve JavaScript dosyalarını ekler, temaya tema destek fonksiyonları ekler (örneğin, makale küçük resimleri, özel arka planlar) ve çeşitli özel fonksiyonları tanımlar. Bu dosya, tema aktive edildiğinde otomatik olarak yüklenir.

Temamı nasıl birden çok dili destekleyebilir hale getirebilirim?

Bir temanın çok dilli olmasını (uluslararasılaşma ve yerelleştirme) desteklemek için esasen iki adım gereklidir. İlk adım, temada çevrilmesi gereken tüm metinler için belirli WordPress çeviri fonksiyonlarını kullanmaktır. Örneğin,__('文本', 'text-domain')或_e('文本', 'text-domain')Bunun arasındatext-domainile mutlakastyle.cssÇin'in açıklamasındaText DomainTutarlı. İkinci adım, Poedit gibi araçları kullanarak tema kodunu tarayıp oluşturmaktır..potŞablon dosyaları, tercümanların bunları temel alarak ilgili dilleri (örneğin Çince) oluşturması içindir..poVe derlenen.moDosyayı alın ve konuya ekleyin./languages/Kataloğun altında. WordPress, web sitesinin dil ayarlarına göre otomatik olarak ilgili çevirileri yükleyecektir.

Tema ve eklentiler arasındaki fark nedir?

Tema ve eklentiler, WordPress'te tamamen farklı görevler üstlenir. Tema, esas olarak web sitesinin ön uç görünümünü, yani kullanıcının gördüğü görsel görünüşü, düzeni, stili ve şablon yapısını kontrol eder. Web sitesinin “nasıl göründüğünü” belirler. Eklentiler ise web sitesine belirli işlevler eklemek için kullanılır. Örneğin, tema ne olursa olsun iletişim formları oluşturma, SEO'yu optimize etme ve e-ticaret alışveriş sepetleri ekleme gibi. Web sitesinin “ne yapabileceğini” belirler. İyi bir uygulama ilkesi, görsel sunum ve düzenlemeyle ilgili kodun temada bulunması, temel işlevlerle ilgili kodun ise mümkün olduğunca eklenti olarak oluşturulmasıdır. Böylece temayı değiştirirken web sitesinin önemli işlevleri kaybolmaz.

Bir sonraki adım, bundan sonra ne yapmalıyım?

Eğer bir WordPress web sitesi oluşturuyorsanız veya optimize ediyorsanız, performans optimizasyonu, eklenti yapılandırması ve tema özelleştirmesi ile ilgili konuları okumaya devam etmeniz önerilir.

Daha fazla okuma ve pratik bilgiler.

Aşağıdaki içerikler bu makalenin konusuyla ilgilidir ve daha fazla okumak için uygundur. Öncelikle mevcut sorununuza en yakın makaleden başlayın, sonra çevresel konulara doğru ilerleyin, genellikle daha iyi sonuçlar alırsınız.

Etiketler: