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

Hazırlık İşlemleri ve Ortam Kurulumu

Kod yazmaya başlamadan önce, stabil ve profesyonel bir yerel geliştirme ortamına ihtiyacınız var. Tema dosyalarını doğrudan çevrimiçi sunucularda değiştirmemenizi şiddetle tavsiye ederiz; yerel geliştirme ortamı, web sitesinin normal erişimini etkilemeden özgürce test yapmanıza olanak tanır. XAMPP, MAMP (Mac) veya Laragon (Windows) gibi entegre geliştirme ortamı yazılımlarını kullanabilirsiniz; bu yazılımlar Apache, MySQL ve PHP’yi tek tıklamayla kurup yapılandırmanıza yardımcı olur.

WordPress’in kendisinin de yerel ortamınızda kurulması gerekmektedir. WordPress resmi web sitesini ziyaret ederek en yeni kurulum paketini indirin ve bu paketi yerel sunucunuzun web sitesi kök dizinine (örneğin, XAMPP’nin kurulum dizinine) çıkarın. htdocs Daha sonra, tarayıcı aracılığıyla bu klasöre erişin ve ünlü “Beş Dakikalık Kurulum” sürecini tamamlayın. Kurulum sırasında, ayarladığınız veri bilgilerini unutmayın.

Son olarak, elinizin altında rahat kullanabileceğiniz bir kod editörüne veya entegre geliştirme ortamına ihtiyacınız var. Visual Studio Code, PhpStorm veya Sublime Text gibi araçlar mükemmel seçeneklerdir; bunlar sözdizimi vurgulama, kod önerileri ve dosya yönetimi özellikleri sunarak geliştirme verimliliğinizi önemli ölçüde artırır.

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

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

Bir WordPress teması, esasen bir… /wp-content/themes/ Katalog altındaki klasörler, belirli kurallara uyan bir dizi dosya ve klasör içerir. Bu dosyalar birlikte çalışarak, WordPress’e web sitesinin görünümünü ve içeriğini nasıl oluşturacağını söyler.

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.

En temel mekanizması “şablon hiyerarşisidir”. WordPress, ziyaret edilen sayfanın türüne göre içeriği görüntülemek için uygun şablon dosyasını otomatik olarak seçer. Örneğin, bir blog makalesine erişildiğinde, WordPress öncelikle ilgili şablonu arar. single.phpBlogun ana sayfasına erişildiğinde, aranan şeyler bulunur. home.php 或 index.phpBu mekanizma, temalara büyük bir esneklik kazandırır.

Her konu iki temel dosya içermelidir:style.css 和 index.php。style.css Bu dosyanın rolü sadece stil sağlamakla kalmaz; aynı zamanda dosyanın baş kısmındaki yorum blokları, temanın “kimlik kartı” görevi görür ve WordPress’e temanın adı, yazarı, açıklaması gibi meta bilgilerini bildirir.index.php Bu, son güvenlik ağıdır; diğer daha spesifik şablon dosyaları mevcut değilse, WordPress bunu kullanır.

Tipik bir tema başlık yorumu şu şekildedir:

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

Text Domain Uluslararasılaştırma için kullanılır; çeviri fonksiyonları daha sonra çağrıldığında bu tanımlayıcı kullanılır.

Tavsiye edilen okuma Profesyonel bir web sitesi oluşturma: Sıfırdan başlayarak özel WordPress teması oluşturmanın eksiksiz bir rehberi。

Bu iki dosyanın yanı sıra, işlevsel olarak tam bir tema genellikle aşağıdakileri de içerir:header.php(Web sayfasının üst kısmı)footer.php(Web sayfasının alt kısmında),sidebar.php(Sidebar) ve ayrıca functions.php(“Tema Özelliklerinin Geliştirilmesi Dosyası”). Bu temel yapıyı anlayarak, tema geliştirmenin temel çerçevesini öğrenmiş olursunuz.

Çekirdek şablon dosyasını oluşturun.

Şimdi, ilk temamızı oluşturmaya başlayalım. Sizin… /wp-content/themes/ Dizin içinde, örneğin “New Folder” adında bir klasör oluşturun. my-first-themeArdından, bu klasör içinde en temel dosyayı oluşturun.

Öncelikle oluşturun. style.cssVe yukarıda bahsedilen temalı başlık yorumlarını da ekleyin. Ardından, oluşturun. index.phpBu, senin ilk şablon dosyan. En basit olanıdır. index.php Yalnızca makale başlıklarını ve içeriklerini içeren bir döngü kullanılabilir:

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 get_header(); ?>
<main>
  
      <article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
      </article>
    
    <p>Henüz içerik yok.</p>
  <?php endif; ?>
</main>

Bu kod, şablon etiketleri kullanmaktadır. get_header(), get_sidebar(), get_footer(), the_title() 和 the_content()Bunun çalışması için ilgili başlık (header), kenar çubuğu (sidebar) ve alt kısım (footer) dosyalarını oluşturmanız gerekiyor.

Oluştur header.phpBu bölüm, HTML belgesinin başlangıç kısmını ve ana içerik bölgesinin başladığı yere kadar olan kısmı içermelidir.

<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
  <header>
    <h1><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <p><?php bloginfo( 'description' ); ?></p>
    <nav>
      'primary'
        ) );
      ?&gt;
    </nav>
  </header>

Burada,wp_head() Bu, son derece önemli bir mekanizmadır; WordPress çekirdeği, eklentiler ve temaların sayfa başlığına gerekli kodları (örneğin stil şablonu bağlantılarını) eklemesine olanak tanır.body_class() Fonksiyon, detaylı stil kontrolü yapmanızı kolaylaştıracak bir dizi semantik CSS sınıf adı çıkarır.

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

Oluştur footer.php Açılan etiketi kapatmak için:

  <footer>
    <p>©</p>
    <?php wp_footer(); ?>
  </footer>
</body>
\n

Dikkat edin,wp_footer() 是与 wp_head() Karşıt taraftaki kuyruk kancası da aynı şekilde vazgeçilmezdir.

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.

Oluştur sidebar.phpŞimdilik sadece basit bir kontrol elemanı çağrısı yapılabilir:

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

Bu noktada, temanız temel bir “şablon kullanımı” özelliğine sahip olmuştur; arka planda etkinleştirilebilir ve önizlenebilir. Basit olsa da, WordPress’in temel mimarisine uygundur.

Functions.php dosyası aracılığıyla temanın özelliklerini geliştirin.

functions.php Bu dosya, temanızın “kontrol merkezidir”. Bir şablon dosyası değil; temanız başlatıldığında otomatik olarak yüklenen bir PHP dosyasıdır ve işlevler eklemek, bileşenler kaydetmek ve WordPress’in çeşitli API’lerine bağlantılar oluşturmak için kullanılır. Bu, bir temanın profesyonelleştirilmesinin anahtarıdır.

Bu dosyayı temanın kök dizininde oluşturmanız gerekiyor. Öncelikle, temaya bir stil şeması ve betik dosyası ekleyelim. Doğru yöntem, bunları doğrudan HTML içinde yazmak yerine, WordPress tarafından sağlanan fonksiyonlar aracılığıyla “kuyruğa eklemektir”. <link> Etiketler.

<?php
function my_first_theme_scripts() {
    // 添加主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Burada,wp_enqueue_style() 和 wp_enqueue_script() Bu, kaynakları güvenli bir şekilde eklemek için kullanılan bir fonksiyondur.get_stylesheet_uri() Konuya yönelik style.css。add_action() Fonksiyonumuzu şuraya monte edin: wp_enqueue_scripts Bu kancada, doğru zamanda çalıştığından emin olun.

Ardından, navigasyon menüsünü ve kenar çubuğunu (araçlar bölümünü) kaydedin:

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Arka plandaki “Görünüm” -> “Menü” arayüzünde seçilebilecek yemek yerlerinin listesi görünmesini sağlayın.add_theme_support() Bu fonksiyonlar, çeşitli tema özelliklerini etkinleştirmek için kullanılır ve bu, modern tema geliştirme süreçlerinde standart bir uygulamadır. Örneğin, belirli bir özelliğin etkinleştirilmesi için… title-tag Daha sonra, bunu yapmanıza gerek kalmayacak. header.php Ortadaki metin manuel olarak girilmiştir. <title> Etiketlendi.

Son olarak, bir kenar çubuğu araçları bölgesi oluşturun:

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' );

Bu noktada, temanız temel sunumdan işlevsel geliştirmelere kadar olan tam süreci kapsamaktadır. Arka plan ayarları menüsü aracılığıyla ve eklenen araçlar sayesinde, temanızdaki dinamik değişiklikleri görebilirsiniz.

Özetle.

Bir içeren oluşturulmasından itibaren... style.css 和 index.php Belirli bir klasörden başlayarak, ayrı temel bileşenlerin oluşturulmasına kadar…header.php, footer.phpArdından, güçlü yetenekler aracılığıyla… functions.php Dosya kaydı menüsü, kenar çubuğu ve kaynakların güvenli bir şekilde yüklenmesi; özelleştirilmiş bir WordPress teması oluşturmanın temel adımlarını oluşturuyor. Bu sürecin özü, WordPress’in şablon hiyerarşisini ve hook (düğüm) sistemini anlamak ve bunlara uygun hareket etmektir.

Artık sadece bir temanın kullanıcısı değil, aynı zamanda onun yaratıcısısınız. Bu temel bilgileri öğrendikten sonra, daha karmaşık şablon dosyalarını incelemeye devam edebilirsiniz. single.php、page.php、archive.phpWordPress döngülerinin daha fazla olasılığını keşfedin ve koşullu etiketler (örneğin…) gibi araçları kullanın. is_page(), is_single()Daha hassas sayfa kontrolü sağlamak mümkündür. Tema geliştirme dünyası geniş ve ilginçtir; bu sadece sağlam bir başlangıç noktasıdır.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için PHP’de uzman olmak gerekir mi?

需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。

Neden wp_head() ve wp_footer() fonksiyonlarını kullanmak zorundayız?

Bu iki fonksiyon, WordPress’in çekirdek hook’larıdır.wp_head() bulunuyor </head> Etiketin önünde, WordPress çekirdeğinin, eklentilerin ve kendi temanızın sayfa başlığına gerekli kodları eklemesine izin verir; örneğin CSS stil şablonu bağlantıları, meta etiketler, JavaScript değişkenleri vb.wp_footer() bulunuyor </body> Etiketlerin önünde, genellikle analiz kodlarının veya gecikmeli yüklenen JavaScript dosyalarının eklenmesi için kullanılır. Bunlar eksikse, birçok eklenti düzgün şekilde çalışmayabilir ve hatta WordPress’in bazı özellikleri de sorunlar gösterebilir.

Kendi temama nasıl bir sayfa şablonu ekleyebilirim?

Yeni bir PHP dosyası oluşturun, örneğin… page-fullwidth.phpBu dosyanın en üst kısmına, belirli bir şablon adı açıklama bloğu eklemeniz gerekiyor. Örneğin:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的页面模板
 */

Daha sonra, bu dosyada farklı bir şeyler yazabilirsiniz. page.php 的 HTML 结构，比如省略 get_sidebar() Kaydettikten sonra, WordPress arayüzünde sayfa düzenleme sayfasına girdiğinizde, “Sayfa Özellikleri” bölümündeki “Şablon” açılır menüsünde “Tam Genişlikli Sayfa” seçeneği görünecektir ve bunu seçebilirsiniz.

Konu geliştirme sürecinde CSS ve JavaScript’i nasıl ele almanın en iyi uygulama olduğu?

En iyi uygulama, WordPress tarafından sağlanan özellikleri kullanmaktır. wp_enqueue_style() 和 wp_enqueue_script() İşlevler, functions.php Oraya monte edildi. wp_enqueue_scripts 钩子来添加资源。这种方式可以：1）正确处理依赖关系（例如你的脚本依赖 jQuery）；2）避免重复加载同一资源；3）方便插件和其他主题代码进行管理；4）符合 WordPress 编码标准。绝对要避免直接在模板文件中使用 <link> 或 <script> Etiketlerle kaynaklar sabit olarak kodlanmıştır.

Konumun nasıl çok dilli destek (uluslararasılaştırma) sağlanabilir?

İki şey yapman gerekiyor. Öncelikle, style.css Başlık yorumlarında ve çeviri metnini çağırırken, doğru “Metin Alanı”nı (Text Domain) kullanın. Kılavuzda belirtildiği gibi, tanımlamaları yapın. Text Domain: my-first-themeİkincisi, functions.php Tüm şablon dosyalarında, çevrilmeye ihtiyaç duyan tüm kullanıcı arayüzü metinlerini WordPress’in çeviri fonksiyonları ile sarın; en yaygın kullanılan yöntem budur. __()(Çevrilen dizeye geri dön) ve _e()(Dirект olarak çevrilen metni gösterin.) Örneğin:<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>Daha sonra, Poedit gibi araçları kullanarak içeriği dönüştürebilirsiniz. .pot Şablon dosyası, çevirmenlerin farklı dillerde içerikler oluşturması için kullanılır. .po 和 .mo Dosya.