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

WordPress tema geliştirmeyi sıfırdan öğrenin: Kişiselleştirilmiş web siteleri oluşturmanın temel rehberi

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

WordPress tema geliştirmenin temel kavramları

Kodu derinlemesine incelemeye başlamadan önce, bir WordPress temasının temel bileşenlerini anlamak çok önemlidir. Bir tema sadece PHP ve CSS dosyalarından oluşan bir koleksiyon değildir; belirli bir yapıya uyan ve WordPress çekirdeğiyle yakından etkileşimde bulunan bir uygulamadır. Temanın temelini, şablon hiyerarşisi sistemi oluşturur. Bu sistem, WordPress’in hangi şablon dosyasının seçileceğini ve hangisinin renderleneceğini, mevcut sayfa türüne (örneğin ana sayfa, makale sayfası, sayfa, kategori arşivi vb.) göre belirler.

En temel tema iki dosya içermelidir:style.css和index.phpBunlar arasında,style.cssSadece bir stil şeması değil; aynı zamanda bir temanın “kimlik kartı”dır. Dosyanın baş kısmındaki yorum bloğunda, temanın adı, yazarı, açıklaması, sürümü gibi meta bilgiler bulunmaktadır.index.phpBu, varsayılan şablon dosyasıdır; daha spesifik şablon dosyaları mevcut değilse, WordPress bunu kullanmak üzere geri döner.

Konu, içeriği bir dizi standartlaştırılmış şablon dosyası aracılığıyla düzenler. Örneğin…single.phpTek bir makaleyi göstermek için kullanılır.page.phpBağımsız sayfaları göstermek için kullanılır.archive.phpMakale arşiv listesini göstermek için kullanılır. Geliştirmenin anahtarı, WordPress tarafından sağlanan birçok yerleşik fonksiyonu anlamak ve bunları kullanmaktır.the_title()、the_content()、wp_head()和wp_footer()Bu fonksiyonlar, veritabanından verileri çıkarır ve bunları sayfaya güvenli bir şekilde yazar; temanın görünümü ile web sitesi içeriğini birbirine bağlayan bir köprü görevi görürler.

Tavsiye edilen okuma WordPress temanızı nasıl seçer ve özelleştirirsiniz?。

İlk temanızı oluşturun: Temel Dosya Yapısı

Hadi “MyFirstTheme” adında bir minimalist tema oluşturarak geliştirme sürecine aşina olalım. Öncelikle, WordPress’in kurulum dizininde…wp-content/themes/Aşağıda yeni bir klasör oluşturun ve adını “” olarak belirleyin.myfirsttheme。

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.

Bir stil şablonu dosyası oluşturun.

Öncelikle, tema bilgi başlık dosyasını oluşturun.style.cssBu dosya, bir temanın meta verilerini tanımlar.

/*
Theme Name: MyFirstTheme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个用于学习WordPress主题开发的简洁主题。
Version: 1.0
License: GPL v2 or later
Text Domain: myfirsttheme
*/

Text DomainUluslararasılaştırma amacıyla kullanılır ve sonraki çeviri işlemleri için hazırlık yapar. Bundan sonra, web sitesinin CSS stil kodlarını yazmaya başlayabilirsiniz.

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

Sonrasında, temel bir şeyler oluşturun.index.phpDosya. Bu, tüm konunun giriş noktasıdır.

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

<main>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <article>
                <h2><?php the_title(); ?></h2>
                <div><?php the_content(); ?></div>
            </article>
        <?php endwhile; endif; ?>
    </main>

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

Bu kod, tam bir HTML5 sayfa yapısı oluşturur.wp_head()和wp_footer()Hook’lar, eklentilerin ve temaların sayfanın üst kısmına ve alt kısmına kod (örneğin CSS, JS) eklemesine olanak tanır.body_class()Fonksiyon, koşullu stil tasarımı için kullanılabilecek bir dizi CSS sınıf adı döndürür.the_post()Fonksiyon, döngü içinde global değişkenleri ayarlar.$postDeğişkenler, işleri kolaylaştırır.the_title()和the_content()Mevcut makalenin verilerini doğru bir şekilde çıkarabiliyor.

Tavsiye edilen okuma Profesyonel bir web sitesi oluşturma: WordPress temalarını seçme ve özelleştirme konusunda kapsamlı bir rehber。

İşlev dosyasını içe aktarın.

Her ne kadar sadece bir tane olsa da…style.css和index.phpBelirtilen tema zaten çalışabiliyor, ancak bir tema genellikle daha fazla içerik ve özellik içerir.functions.phpBu dosya bir şablon dosyası değil; bir temanın “işlev eklentisi”dir ve WordPress’in çeşitli eylem kancalarına (action hooks) ve filtre kancalarına (filter hooks) fonksiyonlar bağlamak için kullanılır.

Oluşturfunctions.phpBu dosya, tema desteği özelliklerinin eklenmesi ve stil şemaları ile betiklerin sırayla yüklenmesi için kullanılır.

<?php
// 添加主题支持功能
function myfirsttheme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章缩略图（特色图像）
    add_theme_support('post-thumbnails');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
    // 注册一个主导航菜单
    register_nav_menus(array('primary' => __('主导航菜单', 'myfirsttheme')));
}
add_action('after_setup_theme', 'myfirsttheme_setup');

// 排队引入样式表
function myfirsttheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('myfirsttheme-style', get_stylesheet_uri());
    // 可以引入Google Fonts或其他CSS
    // wp_enqueue_style('myfirsttheme-google-fonts', 'https://fonts.googleapis.com/css?family=...');
}
add_action('wp_enqueue_scripts', 'myfirsttheme_scripts');

geçmek (bir fatura veya teftiş vb.)add_theme_support()Fonksiyonlar: Modern WordPress temalarında sıkça kullanılan özellikleri etkinleştirdik.wp_enqueue_style()Bu, stil şemalarının doğru bir şekilde dahil edilmesinin standart bir yoludur; bağımlılıkların yönetilmesini ve tekrarlanan yüklemelerin önlenmesini sağlar.

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.

İleri Seviye Geliştirme: Şablon Bileşenleri ve Döngü Kontrolü

Konunun temel işlevleri geliştirildikten sonra, kodun sürdürülebilirliğini ve yeniden kullanılabilirliğini artırmak için şablon bileşenleri ile daha detaylı döngü kontrol yöntemlerini öğrenmek gerekmektedir.

Kodu şablon bileşenleri kullanarak ayırın.

将index.phpSayfanın üst kısmı, alt kısmı ve kenar çubukları gibi genel bileşenlerin ayrı şablon dosyaları olarak ayrılması standart bir uygulamadır.header.php、footer.php和sidebar.php。

将index.php中<body>Etiketin önündeki tüm kodları şuraya taşıyın:header.php。</body>和\nEtiketin önündeki tüm kod (ayak çubuğu içeriği de dahil)wp_footer()) Taşınmak içinfooter.phpArdından,index.phpÇince'de kullanılır.get_header()和get_footer()Bu fonksiyonlar, onları içe aktarmak için kullanılır.

Tavsiye edilen okuma Geliştirmeden dağıtıma: Profesyonel bir WordPress teması nasıl oluşturulur ve optimize edilir?。

Düzeltilmişindex.phpAna bölüm aşağıdaki gibidir:

<?php get_header(); ?>
<main>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <article>
            <h2><?php the_title(); ?></h2>
            <div><?php the_content(); ?></div>
        </article>
    <?php endwhile; else : ?>
        <p><?php _e('抱歉，没有找到任何内容。', 'myfirsttheme'); ?></p>
    <?php endif; ?>
</main>

Özel sayfa şablonu oluşturun.

WordPress, belirli sayfalar için özel şablonlar oluşturmanıza olanak tanır. Örneğin, tam genişlikte bir sayfa şablonu oluşturabilirsiniz. Yeni bir PHP dosyası oluşturun, örneğin…template-fullwidth.phpDosyanın başına aşağıdaki şablon adı açıklamasını ekleyin:

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. 
<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板
 */
get_header(); ?>
<main class="full-width">
    <?php while (have_posts()) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h1><?php the_title(); ?></h1>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <?php endwhile; ?>
</main>
<?php get_footer(); ?>

Bir sayfa oluştururken veya düzenlerken, “Sayfa Özellikleri”nin “Şablon” açılır menüsünden “Tam Genişlikli Sayfa Şablonu”nu seçebilirsiniz. Bu, şablon sisteminin esnekliğini göstermektedir.

Ana döngüyü ve özel sorguları kontrol etmek

在archive.phpVeya sınıflandırma sayfasında, ana döngünün davranışını değiştirmeniz gerekebilir. Kullanın.WP_QuerySınıflar, özel sorgular oluşturabilir.

// 示例：在模板中查询特定分类下的 sticky 文章
 'news',
    'post__in' =&gt; get_option('sticky_posts'),
    'posts_per_page' =&gt; 3
));
if ($sticky_query-&gt;have_posts()) :
    while ($sticky_query-&gt;have_posts()) : $sticky_query-&gt;the_post();
        // 输出文章内容
        the_title('<h3>', '</h3>');
        the_excerpt();
    endwhile;
    wp_reset_postdata(); // 重置全局$post数据
endif;
?&gt;

Kesinlikle özel sorgu döngüsü bittikten sonra kullanın.wp_reset_postdata()Küresel değişkenlerin ana döngünün durumuna geri dönmesini sağlamak için bu adımlar atılır; böylece sonraki işlevlerde hataların oluşması önlenir.

Konu Optimizasyonu ve En İyi Uygulamalar

Geliştirme işlemi tamamlandıktan sonra, temanın sağlamlığını, güvenliğini ve performansını kontrol etmek, yayınlamadan önceki son adımdır.

Güvenliği ve uluslararasılaştırmayı sağlayın.

Tüm dinamik olarak üretilen içeriklerin escape edilmesi gerekmektedir. WordPress tarafından sağlanan escape fonksiyonlarını kullanarak bunu yapabilirsiniz.esc_html()、esc_attr()、esc_url()Çeviri için şu yöntemi kullanın:__()String çevirisi yapmak için şu adımları izleyin:_e()Daha önce…functions.phpMetin alanı zaten ayarlanmış durumda.myfirsttheme。

// 正确示例
echo '<a href="/tr/' . esc_url($user_profile_link) . '/">'`. esc_html($user_name)`.'</a>';
// 国际化示例
submit_button(__('保存更改', 'myfirsttheme'));

Küçük Araçlar Bölgesi Ekle

Sidebar (Yan Çubuk), WordPress’in klasik özelliklerinden biridir.functions.phpBir kenar çubuğu araç çubuğu alanı oluşturun.

function myfirsttheme_widgets_init() {
    register_sidebar(array(
        'name' =&gt; __('主侧边栏', 'myfirsttheme'),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __('在此添加小工具。', 'myfirsttheme'),
        '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', 'myfirsttheme_widgets_init');

Sonra…sidebar.phpÇin'de, kullanılır.dynamic_sidebar()Bir fonksiyon kullanarak onu çağırabilirsiniz.

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

Performans optimizasyonu için dikkate alınması gereken hususlar:

Temaların yükleme hızını optimize etmek çok önemlidir. CSS ve JavaScript dosyalarının doğru bir şekilde birleştirilip sıkıştırıldığından emin olun (bu genellikle Webpack veya Gulp gibi derleme araçları kullanılarak geliştirme aşamasında yapılır).add_image_size()Uygun resim boyutlarını ekleyin; böylece ön tarafta çok büyük orijinal resimler yüklenmez. Betikler için ise, gerekmedikçe bunları kullanmayın.wp_dequeue_script()Kaldırın ve betiklerin sayfa sonunda yüklendiğinden emin olun (bunu, betikleri sayfa sonuna yerleştirerek sağlayabilirsiniz).wp_enqueue_script()Son parametre, olarak ayarlandı.true）。

Özetle.

WordPress tema geliştirme, temel kavramları (örneğin şablon hiyerarşisi, eklenti fonksiyonları) anlamaktan başlayarak, temel dosya yapısını oluşturmayı, şablon bileşenlerini ve özelleştirilmiş sorguları kullanarak modüler bir tasarım yapmayı, ve son olarak güvenliği artırmayı ve performansı optimize etmeyi içeren bir süreçtir. WordPress’in resmi kodlama standartlarına ve en iyi uygulamalarına uyarak, geliştiriciler hem estetik hem de verimli, güvenli ve kolayca bakımı yapılabilecek temalar oluşturabilirler. Önemli olan, basit adımlardan başlayarak sürekli pratik yapmaktır.index.php和style.cssBaşlangıç olarak, daha karmaşık şablon dosyalarını kademeli olarak deneyin…functions.phpBu özellikler sayesinde, sonunda tam olarak ihtiyaçlarınıza uygun, kişiselleştirilmiş bir web sitesi oluşturabileceksiniz.

Sıkça Sorulan Sorular.

Programlama bilgisi olmadan WordPress tema geliştirmeyi öğrenebilir miyim?

Tabii ki, ancak temel bilgileri öğrenmek için zaman ayırmanız gerekecek. Öncelikle HTML ve CSS’yi öğrenmenizi öneririm; bunlar web sayfalarının görünümünü oluşturmanın temel taşlarıdır. Daha sonra PHP dilbilgisini adım adım öğrenin, çünkü WordPress’ün çekirdeği PHP ile yazılmıştır. Son olarak, WordPress’e özgü fonksiyonları ve işlevleri kullanarak geliştirmeye başlayın. Mevcut temaları değiştirerek başlamak, öğrenme süreci için harika bir yol olacaktır.

Temanın `functions.php` dosyası ve eklentiler arasında ne fark var?

functions.phpBu, temanın bir parçasıdır ve işlevi, temanın görünümü ve performansıyla yakından ilgilidir. Kullanıcı bir temayı değiştirdiğinde…functions.phpBelirtilen özellikler, temanın değiştirilmesiyle birlikte etkisiz hale gelebilir. Ancak eklentiler tarafından sunulan özellikler genellikle temadan bağımsızdır ve web sitesine belirli özellikler eklemeyi amaçlar (örneğin iletişim formları, SEO optimizasyonu vb.). Tema değiştirildiğinde bile eklentilerin işlevleri devam eder. Bir özelliğin temanın görsel tasarımıyla ilgili olmaması durumunda, onu bir eklenti olarak geliştirmek daha uygun olacaktır.

Neden özel sayfa şablonum açılır menüde gösterilmiyor?

Lütfen özel şablon dosyanızın tema kök dizininde olup olmadığını ve dosyanın başındaki şablon adı açıklama bloğunun doğru formatında olup olmadığını kontrol edin. Açıklama bloğu bir PHP açıklaması olmalı ve “Template Name:” satırı kesinlikle doğru olmalıdır. Ayrıca, dosyanın mevcut olduğundan emin olun..phpSoneki ve WordPress arayüzünün arka planından önbelleği yeniledim.

Nasıl temamın alt temaları (Child Themes) desteklemesini sağlayabilirim?

Konunuzun alt konular aracılığıyla güvenli bir şekilde özelleştirilebilmesi için, geliştirme sırasında bazı kurallara uyulmalıdır:get_template_directory_uri()Bir üst konunun kaynaklarını alıp alt konuda kullanılır.get_stylesheet_directory_uri()Kopyalanabilir fonksiyonları bir kapsayıcı içine alın.if (!function_exists(‘…’))Koşullu ifadelerde, belgede konunun alt konuları desteklediği açıkça belirtilmeli ve temel alt konular sunulmalıdır.style.cssÖrnek.

Geliştirme temaları oluşturulurken uyulması gereken bazı kodlama standartları vardır. Bunlar şunlardır:

Şiddetle uymanız önerilir.WordPress Resmi PHP Kodlama Standartları和CSS Kodlama StandartlarıBu, string’leri tek tırnak işaretleri kullanarak tanımlamayı, değişkenleri analiz etmenin gerekmediği durumlarda, girintiler için boşlukları, büyük parantezlerin satır sonlarında kullanılmasını, fonksiyon ve değişken isimlerinin küçük harfler ve alt çizgiler kullanılarak oluşturulmasını içerir. Bu kurallara uymak, kodunuzun diğer geliştiriciler tarafından daha kolay anlaşılmasını ve kabul edilmesini sağlar, özellikle de kodunuzun resmi bir kataloga gönderilmesi düşünüldüğünde.

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: