WordPress temalarının temel yapısını ve çekirdek dosyalarını anlamak
Özelleştirilmiş bir WordPress teması, esasen belirli dosyaları içeren bir klasördür ve bu klasör WordPress sitenizin dosyalarının bulunduğu dizinde yer alır./wp-content/themes/Bu dosyalar, katalogun içindedir. Bu dosyalar WordPress’in şablon hiyerarşisi sistemine uygundur ve birlikte, web sitesinin veritabanındaki içerikleri (makaleler, sayfalar vb.) ziyaretçilere nasıl sunacağını belirler. Bu dosyaların rollerini ve aralarındaki işbirliğini anlamak, geliştirmenin ilk adımıdır.
Konunun gerekli dosyaları ve klasör yapısı
Her WordPress teması iki temel dosya içermelidir:style.css 和 index.phpBunlar arasında,style.css Bu dosyanın rolü özellikle kritiktir; sadece temanın stilini tanımlayan bir CSS dosyası olmakla kalmaz, aynı zamanda dosyanın başındaki yorum bloğu da WordPress’in temayı tanımasında “kimlik kartı” görevi görür. Bu yorum bloğu belirli bir formata sıkı sıkıya uymalıdır.
/*
Theme Name: 我的自定义主题
Author: 开发者名称
Description: 这是一个用于演示如何从零开发的自定义WordPress主题。
Version: 1.0.0
Text Domain: my-custom-theme
*/index.php Bu, temanın ana şablon dosyasıdır ve aynı zamanda şablon hiyerarşisindeki son savunma hattıdır. WordPress, mevcut istek için daha spesifik bir şablon dosyası bulamadığında…single.php或page.phpBu durumda, önceki sürüme geri dönülerek kullanım devam eder.index.phpBu nedenle, sağlam bir tema bu dosyaya sahip olmalıdır.
Tavsiye edilen okuma Profesyonel bir web sitesi oluşturma: Sıfırdan başlayarak özel WordPress teması oluşturmanın eksiksiz bir rehberi。
Şablon hiyerarşisi ve şablon dosyalarının işlevi
WordPress’in şablon hiyerarşisi, akıllı bir şablon seçim sistemi sunar. Kullanıcının ziyaret ettiği sayfa türüne (örneğin ana sayfa, makale sayfası, kategori sayfası) göre en uygun şablon dosyasını otomatik olarak seçer. Örneğin, tek bir makaleye erişildiğinde, WordPress aşağıdaki sırayla arama yapar:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> Son olarak… index.php。
Yukarıda belirtilen iki zorunlu dosyanın yanı sıra, işlevsel olarak tam bir tema genellikle aşağıdakileri de içerir:
* header.phpBelge başlığını tanımlayın; içeriğe şunlar dahil olmalı:<head>Bölge, web sitesi logosu ve ana navigasyon.
* footer.phpBelgenin alt kısmını tanımlayın; burada telif hakkı bilgileri, yardımcı bağlantılar vb. yer alacaktır.
* functions.phpBu, temanın “beyni”dir; betik stillerini yüklemek, menüler ve araç çubuklarını kaydetmek, temanın desteklediği özellikleri tanımlamak gibi işlemler için kullanılır.
* single.phpTek bir makaleyi göstermek için kullanılır.
* page.phpTek bir sayfayı göstermek için kullanılır.
Bir temanın temel özelliklerini ve şablonlarını oluşturma
Temel dosya yapısını oluşturduktan sonra, bir sonraki adım bu şablon dosyalarının içeriklerini doldurmak ve WordPress’in temel fonksiyonlarını ile “ana döngüyü” (main loop) kullanarak verileri dinamik olarak ekrana yazdırmaktır.
functions.php dosyasında temanın özelliklerini başlatın.
functions.php Dosyalar, temanın özelliklerini genişletme işleminin merkezindedir. Buraya çeşitli özellikler ekleyebilirsiniz ve WordPress’in çekirdek dosyalarını değiştirmenize gerek kalmaz. Standart bir başlatma süreci; temanın destek ayarlarını yapmayı, navigasyon menüsünü ve araç çubuğu alanlarını kaydetmeyi, ayrıca betikleri ve stil şemalarını güvenli bir şekilde yüklemeyi içerir.
<?php
// 主题初始化设置
function mytheme_setup() {
// 让WordPress管理<title>标签
add_theme_support( 'title-tag' );
// 启用文章特色图像（缩略图）支持
add_theme_support( 'post-thumbnails' );
// 添加对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 注册一个主菜单位置
register_nav_menus( array(
'menu-1' => esc_html__( '主菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
// 注册小工具侧边栏
function mytheme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( '侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( '在此添加小工具。', 'my-custom-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', 'mytheme_widgets_init' );
// 加载主题的样式表和脚本
function mytheme_scripts() {
// 加载主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 加载导航脚本（如果有的话）
wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?>İçeriği ana döngü (The Loop) kullanarak çıktı olarak verin.
“Ana Döngü” (Main Loop), WordPress şablonlarının en temel kavramlarından biridir ve mevcut sayfada gösterilmesi gereken makaleleri (veya sayfaları) kontrol etmek ve bunları taramak için kullanılan bir PHP kod parçasıdır. Neredeyse tüm içerik gösterim şablonları buna bağımlıdır. İşte bununla ilgili bir örnek…index.phpBasit bir örnek: Ana döngünün kullanımı
Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Başlayarak Özel Temalar Oluşturma。
<?php if ( have_posts() ) : ?>
<div class="posts-container">
<?php while ( have_posts() ) : the_post(); ?>
<article no numeric noise key 1009>
<h2 class="entry-title">
<a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<div class="entry-meta">
发布于：
</div>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
</div>
<p><?php esc_html_e( '很抱歉，没有找到符合条件的内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>Bu kodda,have_posts()和the_post()Döngüler, fonksiyonlar tarafından kontrol edilir.the_title()、the_permalink()、the_excerpt()Diğer model etiketleri ise özel içerik çıktısı için kullanılır.
Responsive tasarımı ve gelişmiş tema özelliklerini gerçekleştirin.
Modern bir tema sadece eksiksiz özelliklere sahip olmakla kalmamalı, aynı zamanda mükemmel bir kullanıcı deneyimi de sunmalıdır. Bu, farklı cihazlarda sorunsuz bir şekilde görüntülenebilmesini ve kişiselleştirilmiş ihtiyaçları esnek bir şekilde karşılayabilmesini içerir.
Tepki veren (responsive) bir düzenleme ile mobil cihaz optimizasyonunu entegre etmek
Konunuzun responsive (uyumlu) olmasını sağlamak için hem HTML hem de CSS açısından adımlar atmanız gerekmektedir. Öncelikle,header.phpDosyaların<head>Bölgede, görünüm alanı meta etiketlerinin (viewport meta tags) dahil edildiğinden emin olun:
<meta name="viewport" content="width=device-width, initial-scale=1">İkincisi, sizin…style.cssBurada, ekran genişliğine göre düzenlemeyi ve stil ayarlarını uyarlamak için Medya Sorguları (Media Queries) kullanılır. Örneğin, mobil cihazlar için yan menüyü gizlemek için:
@media screen and (max-width: 768px) {
#secondary-sidebar {
display: none;
}
.site-main {
width: 100%;
}
}Özel sayfa şablonları ve alt temalar oluşturun.
Tek bir sayfanın özgün düzen ihtiyaçlarını karşılamak için WordPress, özel sayfa şablonları oluşturmanıza olanak tanır. Örneğin, kenar çubuğu olmayan ve tam genişlikte bir sayfa şablonu oluşturabilirsiniz; bu şablona şu adı verebilirsiniz:template-fullwidth.phpAyrıca, dosyanın başına aşağıdaki yorumu ekleyin:
<?php
/**
* Template Name: 全宽页面模板
* Description: 一个没有侧边栏的页面模板。
*/Daha sonra, WordPress arayüzünün arka planında sayfa düzenlerken, “Sayfa Özellikleri” bölümünden bu “Tam Genişlikli Sayfa Şablonu”nu seçebilirsiniz.
Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Sıfırdan Başlayarak Özel Web Siteleri Oluşturma。
Özelleştirdiğiniz değişikliklerin üst temanın güncellenmesi sırasında silinmemesini sağlamak için, geliştirme işlemleriniz için alt temalar (subthemes) kullanmanız şiddetle tavsiye edilir. Bir alt tema yalnızca bir…style.cssVe bir seçenekle birlikte…functions.phpAlt konularınstyle.cssBaşlık bölümünde üst konunun belirtilmesi zorunludur:
/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/Konunun uluslararasılaştırılması, optimizasyonu ve yayın hazırlıkları
Geliştirme sürecinin sonuna yaklaştığınızda, temanın dünya genelindeki kullanıcılar tarafından kolayca kullanılabilir olmasını ve iyi bir performansa sahip olmasını sağlamanız gerekir. Son olarak, yayınlamaya hazır olmalısınız.
Konunun uluslararası hale getirilmesi (i18n)
Uluslararasılaştırma, temanızın diğer dillere çevrilebilmesini sağlama sürecidir. WordPress’ta bu, esas olarak iki fonksiyon aracılığıyla gerçekleştirilir:__()Çevrilen metni döndürmek için kullanılır._e()Kullanımı: Doğrudan çevrilmiş metni çıkarmak için kullanılır. Çevrilmesi gereken tüm metinlerde bunları kullanmalı ve hangi bölümlerde kullanılacağını belirtmelisiniz.style.cssBaşlık bölümünde tanımlanan metin alanı (Text Domain).
<h2><?php esc_html_e( '最新文章', 'my-custom-theme' ); ?></h2>
<p><?php echo esc_html__( '这是一段示例文本。', 'my-custom-theme' ); ?></p>Daha sonra, Poedit gibi araçları kullanarak içerik oluşturabilirsiniz..potÇeviri şablonu dosyalarını ve belirli dil paketlerini (örneğin…).zh_CN.po和.moDosya.
Performans optimizasyonu ve kod incelemesi yapmak
Yayınlamadan önce, temanın performansını optimize etmek gerekmektedir. Bu işlemler arasında şunlar yer alır: CSS ve JavaScript dosyalarını sıkıştırmak, resim boyutlarının uygun ve optimize edilmiş olmasını sağlamak, veritabanı sorgu sayısını azaltmak ve WordPress’in betik/stil kuyruklama sistemini doğru bir şekilde kullanmak (kaynakların doğrudan şablonlara eklenmesinden kaçınmak). Ayrıca, kapsamlı bir kod incelemesi yaparak WordPress’in kodlama standartlarına uyulduğundan, hata ayıklama kodlarının bırakılmadığından ve tüm özelliklerin beklenildiği gibi çalıştığından emin olunmalıdır.
Özetle.
Sıfırdan başlayarak özelleştirilmiş bir WordPress teması geliştirmek, temel dosya yapısını anlamaktan, şablon hiyerarşisini ve ana döngüyü kullanmaya, oradan da temanın işlevlerini geliştirmeye kadar kapsamlı bir öğrenme sürecidir.functions.phpChina International Marine Containers (CIMC) öncelikle işlevsel özellikleri geliştirdi, ardından sitenin mobil cihazlarda da iyi görünmesini sağlayacak şekilde responsive (uyumlu) bir tasarım uyguladı ve son olarak sitenin uluslararası kullanıma uygun hale getirilmesi ve optimizasyonu yapıldı. “Basitten başlayıp kademeli olarak ilerleme” ilkesine uyarak, öncelikle kullanılabilir olan en temel temayı oluşturuldu; daha sonra yeni şablon dosyaları ve özellikler eklenmeye devam edildi. Bu becerileri ustalıkla kullanarak, mevcut temaların sınırlamalarından bağımsız olarak, kendinize veya müşterilerinize tam olarak uygun özel web siteleri oluşturabileceksiniz. Unutmayın ki, resmi dokümanlar ve geliştirici toplulukları, öğrenme yolculuğunuzda en iyi destekçilerinizdir.
Sıkça Sorulan Sorular.
WordPress teması geliştirmek için derin PHP bilgisine sahip olmak gerekir mi?
Sağlam bir PHP temeline ihtiyacınız var, ancak uzman seviyesinde olmanıza gerek yok. PHP dilbilgisini, değişkenleri, dizileri, fonksiyonları ve döngü yapılarını anlamanız gerekiyor; çünkü WordPress şablonları esas olarak PHP kodundan oluşur. En önemlisi, WordPress’in sunduğu birçok yerleşik fonksiyonu (şablon etiketleri) ve eklentileri (eylemler ve filtreler) kullanmayı öğrenmektir. Bunlar, temanızı WordPress’in temel özellikleriyle bağlamanızı sağlayan araçlardır.
Neden özel temamım arka planda görüntülenmiyor?
En yaygın neden şudur:style.cssDosya başlığındaki yorumların formatı doğru değil veya bazı bilgiler eksik. Lütfen Theme Name, Author gibi alanların doldurulduğundan ve formatlarının tamamen doğru olduğundan emin olun. Bir diğer neden ise tema klasörünün yanlış bir kataloga konulmuş olması; tema klasörünün belirtilen yere yerleştirilmesi gerekiyor.wp-content/themes/Aşağısında.
Nasıl temamı Gutenberg editörünü destekleyecek hale getirebilirim?
Temanızın Gutenberg editörüne daha iyi uyum sağlaması için, aşağıdakileri yapmanız gerekecektir:functions.phpİlgili tema desteği beyanlarını içeriğe ekleyin. Bu, geniş hizalama desteği, editörün stil şeması gibi özellikleri de kapsar. Örneğin:
add_theme_support( 'align-wide' ); // 支持宽和全宽对齐
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' ); // 加载一个用于编辑器的专属样式表Ayrıca, bazı temel bloklar için (paragraflar, başlıklar, butonlar) ön uç stil kodları yazın; böylece bunların hem web sitesinin kullanıcı arayüzünde hem de editörde aynı şekilde görünmesini sağlayın.
Temamı nasıl test etmeliyim?
Testler çok boyutlu bir şekilde yapılmalıdır. Öncelikle, farklı tarayıcılarda (Chrome, Firefox, Safari, Edge) ve farklı boyutlardaki cihazlarda (telefon, tablet, masaüstü bilgisayar) görünüm ve işlevlerin kontrol edilmesi gerekir. İkincisi, yaygın olarak kullanılan eklentilerle uyumluluğun test edilmesi önemlidir. Üçüncüsü, WordPress’in yerleşik “tema birim testleri” verilerini (XML dosyalarını) kullanarak çeşitli türde içeriklerin import edilmesi ve temanın çeşitli zorlu koşullar altındaki performansının incelenmesi gerekmektedir. Son olarak…WP_DEBUGModu kontrol edin ve herhangi bir PHP uyarısı veya hatası olup olmadığını gözden geçirin.
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.
- Tailwind CSS’in Temel Kavramları ve Pratik Modelleri: Atomik Sınıflardan Reaktif Tasarıma
- Web Sitesi Kurma Kılavuzu: Fikirden Hayata Taşıma Süreci ve Temel Teknolojilerin Ayrıntılı Analizi
- 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
Türkçe