Özel bir WordPress teması oluşturmak, web sitenizin görünümünü, işlevlerini ve performansını tamamen kontrol etmeniz anlamına gelir. Önceden hazırlanmış temaları kullanmaktan farklı olarak, özel geliştirme sayesinde markanıza tamamen uygun, benzersiz ve verimli bir web sitesi oluşturabilirsiniz. Bu rehber, temel bir ortam kurmaktan, işlevsel bir tema yayınlamaya kadar size adım adım yol gösterecektir.
Geliştirme Ortamı ve Temel Dosya Yapısı
Kod yazmaya başlamadan önce, uygun bir yerel geliştirme ortamı oluşturmak çok önemlidir. XAMPP, MAMP veya daha profesyonel olan Valet ve Local by Flywheel gibi araçları kullanabilirsiniz. Ortamınızın PHP 7.4 veya daha yüksek bir sürümünü ve MySQL veya MariaDB veritabanını desteklediğinden emin olun.
Bir WordPress teması, esasen bir… wp-content/themes/ Klasördeki dizin; bu dizin en az iki temel dosya içermelidir: bir stil şeması ve bir indeks şablonu.
Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Web Sitenizin Görünümünü Oluşturun。
Öncelikle, wp-content/themes/ Aşağıda yeni bir klasör oluşturun, örneğin… my-custom-themeArdından, ilk gerekli dosyayı oluşturun:style.cssBu dosya yalnızca temanın stilini tanımlamakla kalmaz; aynı zamanda dosya başlığındaki yorumlar temanın meta verilerini de içerir.
/*
Theme Name: My Custom Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个从头开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/Şimdi, ikinci zorunlu dosyayı oluşturun:index.phpBu, temanın varsayılan şablon dosyasıdır; WordPress daha spesifik bir şablon bulamadığında bu dosyayı kullanır. En basit örnek… index.php Sadece bir döngü içerebilir ve bu döngü, makale listesini göstermek için kullanılabilir.
<?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;
endif; ?>
</main>Şablon hiyerarşisini anlamak
WordPress, belirli bir sayfa için hangi şablon dosyasının kullanılacağını belirlemek için şablon hiyerarşisini kullanır. Örneğin, tek bir makaleye erişildiğinde, WordPress öncelikle ilgili şablonu arar. single.phpEğer yoksa, geri dönün. singular.phpVe en sonunda… index.phpBu hiyerarşik ilişkiyi anlamak, temaları verimli bir şekilde geliştirmenin anahtarıdır. İhtiyaçlara göre ilgili şablon dosyalarını oluşturmalısınız. page.php(Sayfa)archive.php(Arşiv Sayfası) ve single.php(Bir makale.)
Çekirdek şablon dosyaları ve tema özellikleri
Bunun dışında… index.php 和 style.cssİşlevsel olarak tam bir tema, sayfa yapısını bölümlemek ve kod tekrar kullanımını sağlamak için birkaç temel şablon dosyasına daha ihtiyaç duyar.
Oluştur header.php Bu dosya genellikle belge türü beyanlarını içerir.<head> Bölge ve web sitesinin üst navigasyonu ile logosu için… wp_head() Fonksiyonlar çok önemlidir; çünkü WordPress çekirdeğinin, eklentilerin ve temanızın buraya gerekli kodları (örneğin stil şablonu bağlantıları, meta etiketler) eklemesine olanak tanır.
Tavsiye edilen okuma WordPress Tema Geliştirmeyi Sıfırdan Bir Yere Öğrenin: Modern Web Siteleri Oluşturma Pratik Rehberi。
<!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>
<h1><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>Oluştur footer.php Bu dosya, sayfa altı içeriğini ve kapatma HTML etiketlerini içermektedir. Aynı şekilde, bunun için bir işlem yapılması gerekmektedir. wp_footer() Bu fonksiyon, betikleri ve eklentilerin ihtiyaç duyduğu kodları yüklemek için kullanılır.
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. Burada menüler, kenar çubukları kaydedebilir, temanıza özel özellikler ekleyebilir ve stil şemalarını ile betikleri yerleştirebilirsiniz.
<?php
// 添加主题支持
function my_theme_setup() {
add_theme_support( 'title-tag' ); // 让 WordPress 管理标题标签
add_theme_support( 'post-thumbnails' ); // 启用文章缩略图功能
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
// 注册导航菜单
function my_theme_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
}
add_action( 'init', 'my_theme_menus' );Dinamik olarak menü oluşturma
在 header.php Burada, kullanabilirsiniz. wp_nav_menu() Bu fonksiyon, kaydettiğiniz menüyü görüntüler. Bu fonksiyon, WordPress arayüzündeki “Görünüm > Menüler” bölümünde ayarlanan ve doğru CSS sınıflarını ve yapısını içeren bir düzensiz liste (unordered list) döndürür.
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'container' => false,
) );
?>
</nav>Stil, Scriptler ve responsive tasarım (Tepki veren tasarım)
Modern WordPress temaları, CSS ve JavaScript dosyalarını yüklerken en iyi uygulamalara uymalı ve web sitesinin tüm cihazlarda sorunsuz bir şekilde görüntülenmesini sağlamalıdır.
在 functions.php Çin'de, kullanılır. wp_enqueue_style() 和 wp_enqueue_script() Bu fonksiyon, kaynakların düzgün bir şekilde sıralanmasını sağlar. Bu sayede doğru bağımlılık yönetimi ve yükleme sırası garanti altına alınır ve eklentiler ile alt temaların özelliklerinin değiştirilmesine olanak tanınır.
function my_theme_scripts() {
// 排入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 排入自定义 JavaScript 文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0', true );
// 为脚本本地化数据（可选）
wp_localize_script( 'my-theme-script', 'myThemeData', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );Responsive tasarım, varsayılan standart olarak benimsenmelidir. Sizin… style.css Medya sorguları, farklı ekran boyutlarına göre düzenlemeler yapmak için kullanılır. Yaygın bir yaklaşım “mobil öncelikli” (mobile-first) olup, bu yaklaşımda önce mobil cihazlar için temel stiller yazılır, ardından diğer ekran boyutlarına göre gerekli ayarlamalar yapılır. min-width Medya sorguları, daha büyük ekranlar için gelişmiş stiller ekler.
Tavsiye edilen okuma Size, güçlü özelliklere sahip özelleştirilmiş bir WordPress teması oluşturmayı adım adım öğreteceğim.。
/* 基础移动样式 */
.container { width: 100%; padding: 0 15px; }
.menu { display: block; }
/* 平板电脑及以上 */
@media (min-width: 768px) {
.container { width: 750px; margin: 0 auto; }
.menu { display: flex; }
}
/* 桌面电脑 */
@media (min-width: 992px) {
.container { width: 970px; }
}WordPress’ün yerleşik sınıflarını ve fonksiyonlarını kullanmak
WordPress, stil geliştirmeye yardımcı olacak birçok kullanışlı CSS sınıfı ve PHP fonksiyonu sunar.body_class() Fonksiyon, mevcut sayfa türüne dayalı bir dizi CSS sınıfı çıkaracaktır (örneğin: home, single-post, page-id-2Bu sınıfları kullanarak CSS’de hedefe yönelik stiller oluşturabilirsiniz.post_class() Fonksiyon, her makalenin içerik elementi için benzer sınıflar üretir.
Gelişmiş Özellikler ve Widget Entegrasyonu
Konunuzu daha profesyonel ve kullanımı daha kolay hale getirmek için, özel makale türleri, widget alanları (yan çubuklar) ve özelleştirici ayarları gibi bazı gelişmiş özellikleri entegre edebilirsiniz.
Widget bölgesi, kullanıcıların WordPress arayüzündeki “Görünüm > Araçlar” (Appearance > Widgets) seçeneği aracılığıyla modülleri sürükleyerek içeriği özelleştirmesine olanak tanır. functions.php Bir kenar çubuğu widget alanı oluşturmak için buraya kaydolun.
function my_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );Kaydolduktan sonra, şablon dosyalarında (%s, %1$s, {{var}}, :name) kullanabilirsiniz. sidebar.phpKullanımı dynamic_sidebar() Bu bölgeyi çağırmak için bir fonksiyon kullanılır.
WordPress’ın Özelleştirici (Customizer) aracı, kullanıcıların temalarındaki değişiklikleri gerçek zamanlı olarak önizlemesine olanak tanır. Temanınıza bazı basit ayarlar ekleyebilirsiniz; örneğin web sitesi logosu veya sayfa altı telif hakkı metni gibi. Bu işlem, WordPress’in Özelleştirici arayüzünün kullanılmasını gerektirir. WP_Customize_Manager Sınıf, functions.php İlgili kodu içine ekleyin.
function my_theme_customize_register( $wp_customize ) {
// 添加一个“版权信息”设置
$wp_customize->add_setting( 'footer_copyright', array(
'default' => '© 2026 Your Site Name',
'sanitize_callback' => 'sanitize_text_field',
) );
$wp_customize->add_control( 'footer_copyright', array(
'label' => __( '页脚版权文本', 'my-custom-theme' ),
'section' => 'title_tagline', // 放在“站点身份”区域
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_theme_customize_register' );Sonra, sizin… footer.php Burada, kullanabilirsiniz. get_theme_mod() Bu ayarın değerini çıkarmak için bir fonksiyon kullanın:<?php echo esc_html( get_theme_mod( 'footer_copyright' ) ); ?>。
Özetle.
WordPress tema geliştirme, PHP, HTML, CSS ve JavaScript bilgilerinin WordPress’ün temel yapısıyla birleştirilmesi sürecidir. Doğru dosya yapısının oluşturulmasıyla başlayarak, şablon hiyerarşisi, temel işlevsel dosyalar, kaynak yönetimi ve duyarlı (responsive) tasarım adımlarıyla ilerlenir. Widget’ler ve özelleştiriciler gibi gelişmiş özelliklerin entegrasyonu sayesinde hem güçlü hem de kullanıcı dostu profesyonel temalar oluşturabilirsiniz. Önemli olan, WordPress’ün çalışma mekanizmasını anlamak ve kodlama standartlarına ile en iyi uygulamalara uymaktır; bu sayede temanızın güvenli, verimli ve kolayca bakım yapılabilir olmasını sağlarsınız.
Sıkça Sorulan Sorular.
WordPress teması geliştirmek için hangi ön koşul bilgilerine ihtiyaç vardır?
HTML ve CSS konularında sağlam bir temele sahip olmanız gerekmektedir; çünkü bunlar web sayfalarının görünümünü oluşturmanın temel taşlarıdır. Aynı zamanda PHP’nin temel sözdizimini de bilmelisiniz, çünkü WordPress’ün çekirdeği ve tema şablonları PHP ile yazılmıştır. JavaScript (özellikle jQuery) konusunda bilgi sahibi olmak, etkileşimli özellikler eklemek açısından çok faydalıdır. Son olarak, WordPress’ün temel kavramlarını (döngüler, eklentiler ve şablon hiyerarşisi gibi) anlamak, temaları başarıyla geliştirmenin anahtarıdır.
Bir temanın functions.php dosyası ne kadar uzun olabilir? Bu, performansı etkiler mi?
functions.php Teorik olarak dosyalar çok uzun olabilir, ancak sürdürülebilirlik açısından bunların modüler hale getirilmesi şiddetle tavsiye edilir. Farklı özellikleri (özel makale türleri, kısa kodlar, araçlar vb.) ayrı dosyalara ayırabilir ve sonra bunları bir araya getirebilirsiniz. functions.php Çince'de kullanılır. require_once 或 include Giriş yapmak gerekirse; kodun verimli bir şekilde yazılması ve gereksiz sorguların olmaması durumunda, kodun uzunluğunun performans üzerindeki etkisi neredeyse hiç yoktur. Büyük projeler için dosyaları bölümlere ayırmak standart bir uygulamadır.
Temamı nasıl birden çok dil çevirisine destekleyebilirim?
Konuların uluslararasılaştırılmasını (i18n) desteklemek, küresel kullanıcılara yönelik önemli bir adımdır. PHP kodunuzda, kullanıcılara yönelik tüm metin dizeleri WordPress’in çeviri fonksiyonları ile sarılmalıdır. Örneğin: __()(Kullanım amacı: Metni yeniden ekrana yazdırmaktır.) veya _e()(Kullanımı: Doğrudan metin çıkarmak için.) Sizinin ihtiyacınız olan… style.css Bunun başı ve load_theme_textdomain() Fonksiyon çağrısında doğru ayarlamalar yapılmalıdır. Text DomainDaha sonra, geliştiriciler Poedit gibi araçları kullanarak içeriği oluşturabilirler. .pot Şablon dosyasını oluşturun ve buna karşılık geleni de hazırlayın. .po 和 .mo Çeviri dosyası.
Geliştirdiğim temayı WordPress resmi tema dizinine nasıl gönderebilirim?
Resmi kataloga göndermek için katı gereksinimlerin karşılanması gerekmektedir. Kodunuzun WordPress kodlama standartlarına uygun olması, içeriğin herhangi bir kısayol veya eklenti kullanılarak doğrudan kodlanmamış olması, tüm özelliklerin güvenli olması ve GPL lisansına uygun olması gerekmektedir. Temanın Theme Check eklentisi ile test edilmiş olması, iyi bir yanıt veren (responsive) tasarıma, erişilebilirliğe ve eksiksiz dokümantasyona sahip olması gerekmektedir. Gönderim işlemi, WordPress resmi web sitesindeki gönderim sayfası aracılığıyla yapılır ve ardından bir inceleme ekibi tarafından incelenir.
Bir sonraki adım, bundan sonra ne yapmalıyım?
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.
- Web Sitesi Kurma Sürecinin Ayrıntılı Anlatımı: Talep Analizinden Yayına ve Dağıtıma Kadar Profesyonel Bir Rehber
- Sıfırdan başlayarak WordPress tema geliştirme: Farklı bir web sitesi arayüzü oluşturma
- Kurumsal Web Sitesi Oluşturma Kılavuzu: Sıfırdan Profesyonel Hizmete Kadar Kapsamlı ve Pratik Bir Rehber
- Tailwind CSS mutlak rehberi: Sıfırdan ileri düzeye kadar pratik bir çerçeve öğrenme yolu.
- Tailwind CSS'yi neden seçtiniz: Modern web geliştirmede yüksek verimlilik ve pratiklik sağlayan bir çözüm.
Türkçe