Kod yazmaya başlamadan önce, bir yerel geliştirme ortamına ihtiyacınız var. Bu genellikle bir yerel sunucu (örneğin XAMPP, MAMP veya Local) ve bir kod editörü (örneğin VS Code, PhpStorm) içerir. Ortamınızda PHP’nin (7.4 veya daha yeni bir sürümü önerilir) ve MySQL’in yüklü olduğundan emin olun.
Standart bir WordPress teması, belirli dosya koleksiyonlarını içeren bir klasördür. Öncelikle, yerel WordPress kurulumunuzda…wp-content/themesDizin içinde yeni bir klasör oluşturun; örneğin adını “new_folder” olarak belirleyin.my-first-theme。
Ardından, iki en temel ve gerekli dosyayı oluşturun: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 blokları, temanızı WordPress’e tanıtmak için kullanılır.
Tavsiye edilen okuma WordPress tema geliştirmeye başlama rehberi: Sıfırdan kişiselleştirilmiş bir web sitesi oluşturma。
在style.cssDosyaya aşağıdaki biçimde bir başlık bilgisi eklemeniz gerekiyor:
/*
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
*/Bu bilgiler WordPress arayüzünün “Görünüm” -> “Temalar” sayfasında görüntülenecektir. Aynı zamanda,index.phpDosya, temanın varsayılan şablonudur; geçici olarak boş olsa bile mevcut olmalıdır. WordPress, bunun geçerli bir tema olduğunu tanıyabilmek için bu dosyanın varlığını gerektirir.
Temel şablon dosyasını oluşturun.
Temel dosyalar hazır olduktan sonra, temanız hâlâ herhangi bir içerik gösteremiyor. WordPress, farklı türdeki sayfalar için hangi şablon dosyasının yükleneceğine karar vermek için bir şablon hiyerarşisi sistemi kullanır. Şimdi, birkaç temel şablon dosyası oluşturacağız.
Başlık ve sonuç (footer) şablonları oluşturun.
Kod tekrar kullanımını ve tutarlılığı sağlamak için, genellikle web sayfalarının üst kısmını (Header) ve alt kısmını (Footer) ayrı dosyalar olarak oluştururuz. Öncelikle…header.phpBu dosya, HTML belgesinin başlığını (header) içermektedir.<body>Etiketler ve web sitesinin üst kısmındaki ortak alanlar (örneğin Logo ve navigasyon menüsü).
En basit olanı…header.phpÖrnekler aşağıdaki içerikleri içerebilir:
Tavsiye edilen okuma Profesyonel Web Siteleri Oluşturma: Kapsamlı WordPress Tema Geliştirme ve Özelleştirme Rehberi。
<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<header>
<h1><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>Dikkat edin, buradaki…wp_head()Bu fonksiyon mutlaka çağrılmalıdır; çünkü WordPress çekirdeği, eklentiler ve temaların sayfa başlığına gerekli kodları (örneğin CSS ve JS) eklemesini sağlar.
Sonra, oluşturun.footer.phpBu dosya, bir şeyi kapatmak için kullanılır.<body>和<html>Etiketleri içerir ve sayfa altı (footer) içeriğini de barındırır.
<footer>
<p>© . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
\nAynı şekilde,wp_footer()Fonksiyonlar da gereklidir.
Şimdi, güncelleyebiliriz.index.phpKullanın.get_header()和get_footer()Bu iki bölümü dahil etmek için bir fonksiyon kullanılır:
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 文章内容将在这里显示
endwhile;
else :
// 没有找到文章时的内容
endif;
?>
</main>
<?php get_footer(); ?>Makale döngüsü ve içerik şablonu oluşturma
Yukarıdakiindex.phpBurada, WordPress’in temelini görüyoruz: “The Loop” (Döngü). Bu döngü, mevcut sayfadaki tüm makaleleri (veya tek bir makaleyi) gezinmek için kullanılır. Makale içeriğinin daha iyi bir yapıya sahip olması için, genellikle tek bir makalenin görüntülenme mantığını ayrı bir dosyaya ayırırız.
Oluşturcontent.php或template-parts/content.phpDosya, ardından döngü içinde işlenir.get_template_part()Fonksiyon onu çağırır.
Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Başlangıçtan Uzmanlığa Kadar Pratik Eğitim Kursu。
// 在 index.php 的循环中
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;Ardından oluşturun.template-parts/content.php：
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-meta">
by
</div>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>Böylece, makale başlığı, özet, meta veriler vb. standartlaştırılmış bir biçimde çıktı olarak alınmış olur.
Stil ve betikleri içe aktarma
Modern bir tema, CSS ve JavaScript’ten ayrılamaz. WordPress, şablonlarda doğrudan kullanmak yerine, stil tablolarını ve betik dosyalarını güvenli bir şekilde sıraya koymak (enkole etmek) için standart fonksiyonlar sunar.<link>或<script>Etiketler.
Kayıt ve Kuyruk Ana Stil Şeması (Registration and Queue Main Style Sheet)
Her ne kadar zaten sahip olsak da…style.cssAncak genellikle bunu şu yolla yaparız:functions.phpDosyayı yüklemek için öncelikle temanın kök dizininde bir klasör oluşturun.functions.phpDosya.
Ardından, kullanın.wp_enqueue_style()Bir fonksiyon kullanarak stil şemalarını yüklememiz gerekiyor.functions.phpBir fonksiyon oluşturun ve bunu ilgili yere bağlayın.wp_enqueue_scriptsBu eylem üzerine.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载Google Fonts示例
wp_enqueue_style( 'my-first-theme-google-fonts', '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 yolunu belirtin.
Responsive navigasyon menüsü için bir script ekleyin.
Etkileşimli özellikler eklemek için, örneğin mobil cihazlar için duyarlı menüler oluşturmak amacıyla JavaScript kullanmamız gerekiyor. Menünün görünümünü/görünmez hale getirmek için basit bir betik olduğunu varsayalım.
Öncelikle, bir tane oluşturun.js/navigation.jsDosya. Sonra,functions.phpAynı fonksiyon içinde, kullanılır.wp_enqueue_script()Onu yüklemek için…
function my_first_theme_scripts() {
// ... 之前的样式代码 ...
// 加载导航脚本
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}Son parametretrueBu, betiğin sayfanın en alt kısmına yerleştirileceğini gösterir.</body>Etiketlerin başına konulması (genellikle `` gibi), sayfanın yükleme performansına yardımcı olur.
Temanın temel özelliklerini gerçekleştirme
functions.phpBu, temanın “beyni” olarak adlandırılır ve çeşitli özelliklerin eklenmesi ve desteklenmesi için kullanılır. Kaynakları yüklemenin yanı sıra, temanın hangi özellikleri desteklediğini de burada belirtmemiz gerekir.
Konu (tema) özelliğinin desteğini ekleyin.
WordPress, bir dizi “tema özelliği” sunar ve bunları kullanabilmek için bunları açıkça desteklediğinizi belirtmeniz gerekir. En temel özellikler arasında makale özet resimleri (özel görseller), özelleştirilebilir menüler ve HTML5 işaretlemelerinin desteği bulunur.
在functions.phpAşağıdaki kodu ekleyin:
function my_first_theme_setup() {
// 让主题支持文章和评论的RSS feed链接自动添加到head中
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' ) );
// 启用标题标签支持，WordPress会自动管理文档标题
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );after_setup_themeBu, tema başlatıldığında çalışan bir eylem kancasıdır ve tema özelliklerinin ayarlanması için standart bir konumdur.
Kayıt Menüsü
Çoğu web sitesinin bir navigasyon menüsüne ihtiyacı vardır. WordPress’in menü sistemi, kullanıcıların arka planda “Görünüm” -> “Menüler” bölümünden menü öğelerini özelleştirmesine olanak tanır. Öncelikle, temanız için menü yerlerini kaydetmeniz gerekmektedir.
Az önceki…my_first_theme_setupFonksiyonda, devam ederek şunları ekleyin:
function my_first_theme_setup() {
// ... 之前的 add_theme_support 代码 ...
// 注册一个主菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}Kayıt olduktan sonra, şablon dosyalarında (örneğin…) işlem yapabilirsiniz.header.php) içinde kullanılırwp_nav_menu()Artık bu menüyü göstermek için bir fonksiyon kullanılıyor:
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>Bir kenar çubuğu ve araç çubuğu bölgesi oluşturun.
Widget’lar, WordPress’in bir diğer güçlü özelliğidir. Bunu kullanabilmek için öncelikle bir kenar çubuğu (Widget’ların yerleştirileceği alan) oluşturmanız gerekmektedir.
在functions.phpOrtada yeni bir fonksiyon oluşturun ve bunu ilgili yere bağlayın.widgets_initEylem açısından:
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );Kaydolduktan sonra, arka planda “Görünüm” -> “Araçlar” bölümünde “Ana Yan Menü” alanını görebilir ve buraya araççıklar sürükleyebilirsiniz. Bunu bir temada göstermek için, şablonunuzda gerekli değişiklikleri yapmanız gerekecektir.sidebar.phpİçerideki insanları kurtarın!dynamic_sidebar( 'sidebar-1' )İşlev.
Özetle.
Bu rehber sayesinde, son derece sade ancak tam özellikli bir WordPress teması geliştirme sürecini tamamladık. Ortamı kurarak ve temel dosyaları oluşturarak başladık, şablon hiyerarşisini adım adım oluşturduk, başlık ve son kısımları birbirinden ayırdık ve temel makale döngüsünü gerçekleştirdik. Daha sonra, temalara standart bir şekilde stil ve betik eklemenin nasıl yapılacağını öğrendik; böylece uyumluluk ve performansı garanti altına aldık. Son olarak…functions.phpBurada, temanın temel özelliklerini – özel görseller, navigasyon menüsü ve araç çubuğu bölgesi – etkinleştirdik; bu sayede tema oldukça özelleştirilebilir hale geldi.
Bu sadece bir başlangıç noktası. Bu temel üzerine, daha profesyonel şablon dosyaları oluşturmaya devam edebilirsiniz (örneğin…).single.php、page.php、archive.phpDaha karmaşık WordPress API’lerini keşfedin; örneğin özel makale türleri, kategoriler, Customizer API’si gibi. Böylece işlevsel ve benzersiz tasarımlı, özel web siteleri temaları oluşturabilirsiniz.
Sıkça Sorulan Sorular.
WordPress teması geliştirmek için hangi tekniklere hakim olunması gerekiyor?
WordPress teması geliştirmek için birkaç temel teknolojiyi öğrenmeniz gerekmektedir. İlk olarak PHP gelir; çünkü WordPress kendisi PHP ile yazılmıştır ve tüm şablon dosyaları ile işlevsel mantık PHP’ye dayanmaktadır. Temel PHP sözdizimini, fonksiyonları, döngüleri ve koşullu ifadeleri anlamanız gerekmektedir.
İkincisi, web sayfalarının yapısını ve stilini oluşturmak için kullanılan HTML ve CSS’dir. responsive (uyumlu) web tasarım ilkelerini ve modern CSS düzenleme teknolojilerini (örneğin Flexbox, Grid) bilmek çok önemlidir. Son olarak, ön uç etkileşim özelliklerini gerçekleştirmek için kullanılan JavaScript hakkında temel bilgilere sahip olmak gerekir. WordPress’e özgü PHP fonksiyonlarına ve Hook sistemine aşina olmak, verimli tema geliştirmenin anahtarıdır.
style.css ve functions.php dosyalarından hangisi daha önemli?
Bu iki dosya, WordPress tema geliştirme sürecinde tamamen farklı roller oynar; ancak her ikisi de son derece önemlidir ve hangisinin daha önemli olduğu basitçe karşılaştırılamaz.style.cssDosyalar, bir temanın “kimlik belirteçleridir” ve dosyanın başındaki yorum blokları, WordPress’in bir temayı tanıması için gereklidir. Bu bloklar olmadan, tema arka plandaki “Temalar” listesinde görüntülenemez.
而functions.phpDosya, temanın “işlevsel merkezi”dir; temanın işlevlerini geliştiren neredeyse tüm kodlar burada bulunur. Örneğin, kayıt menüsü oluşturma, temaya destek ekleme, betik ve stil dosyalarını yükleme, özel fonksiyonlar tanımlama gibi işlemler bu dosyada gerçekleştirilir. Bu dosya olmadan, tema dinamik özelliklerinin ve genişletilebilirliğinin büyük bir kısmını kaybeder. Her ikisi de birbirini tamamlar ve hiçbiri olmazsa temanın tam işlevselliği sağlanamaz.
Neden wp_head() ve wp_footer() fonksiyonlarını kullanmak zorundayız?
wp_head()和wp_footer()WordPress’in çekirdeği ile temalar ve eklentiler arasındaki iletişimin temelini oluşturan kritik bir mekanizmadır.header.php的</head>Etiketin önünde çağrı yapılır.wp_head()Bu, WordPress’in kendisinin, yüklediğiniz eklentilerin ve temanızın diğer bölümlerinin sayfa başlığına gerekli kodları (meta etiketler, stil şablonu bağlantıları, betik referansları, JSON-LD yapılandırılmış verileri vb.) eklemesine izin veren standart bir yöntemdir.
Aynı şekilde,footer.php的</body>Etiketin önünde çağrı yapılır.wp_footer()Bu fonksiyonlar, sayfanın alt kısmında yüklenmesi gereken betiklerin (örneğin analiz kodları, gecikmeli yüklenen JS dosyaları) veya diğer HTML içeriklerinin eklenmesi için kullanılır. Bu fonksiyonlar atlandığında, eklentilerin düzgün çalışmaması, yönetim araç çubuğunun görünmemesi ve çeşitli uyumluluk sorunları ortaya çıkabilir.
Nasıl temamı WordPress resmi standartlarına uygun hale getirebilirim?
Temanızın WordPress resmi standartlarına uygun ve yüksek kaliteli olması için “WordPress Tema Geliştirme Kılavuzu”nu ve “Tema İnceleme Gerekliliklerini” takip etmeniz gerekmektedir. Bu, güvenli kodlama uygulamalarını kullanmayı, tüm dinamik olarak üretilen veriler için escape (kaçırma) fonksiyonlarını kullanmayı içerir…esc_html(), esc_url()Tüm çeviri dizeleri için uluslararasılaştırma fonksiyonları (örneğin…) kullanılmalıdır.__(), _e()Ayrıca metin alanını da yükler.
Tema, tüm cihazlarda iyi bir şekilde görüntülenebilmesi için responsive (uyumlu) bir tasarıma sahip olmalıdır. Kodun açık ve açıklamalı olması, ayrıca WordPress kodlama standartlarına uygun olması gerekir. Ayrıca, tema WordPress özelleştiricileri (customizers) aracılığıyla geniş özelleştirme seçenekleri sunmalı ve tüm temel WordPress özellikleri ile eklentileri (hooks) doğru bir şekilde desteklemelidir. Yayınlamadan önce, Theme Check eklentisini kullanarak test yapmak iyi bir alışkanlıktır.
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.
- WordPress Tema Geliştirme: Başlangıçtan Uzmanlığa – Kişiselleştirilmiş Web Siteleri Oluşturma Kılavuzu
- Web Sitesi Kurma Kılavuzu: Fikirden Hayata Taşıma Süreci ve Temel Teknolojilerin Ayrıntılı Analizi
- Sıfırdan başlayarak WordPress tema geliştirme: Farklı bir web sitesi arayüzü oluşturma
- Neden WordPress’ü web sitesi için tercih edilen platform olarak seçtiniz?
- WordPress Temel Başlangıç Kılavuzu: Sıfırdan İlk Profesyonel Web Sitenizi Oluşturun
Türkçe