WordPress temalarının temel yapısı
Bir WordPress teması, esasen bir…wp-content/themes/Katalogdaki klasörler, web sitesinin görünümünü ve işlevlerini kontrol etmek için kullanılan bir dizi dosyayı içermektedir. Bu temel dosyaların rolünü anlamak, geliştirmenin temelidir.
Konu için gerekli olan şablon dosyası.
Her konu, iki temel dosya içermelidir:style.css和index.phpBunlar arasında,style.cssSadece CSS stillerini saklamak için kullanılmaz; aynı zamanda dosyanın baş kısmındaki yorum blokları, temanın meta bilgilerini de içerir. WordPress, bu bilgilere dayanarak temayı tanır.
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/index.phpBu, temanın varsayılan şablon dosyasıdır; WordPress daha spesifik bir şablon bulamadığında, sayfayı renderlamak için bu şablonu kullanır. Tüm sayfaların görüntülenmesinde “güvenlik ağı” görevi görür.
Tavsiye edilen okuma Kaliteli bir web sitesi oluşturun: WordPress temalarının özelleştirilmesi ve optimizasyonu için pratik bir rehberin detaylı analizi.。
Yaygın olarak kullanılan diğer şablon dosyaları
Farklı sayfaların görünümünü daha ayrıntılı bir şekilde kontrol edebilmek için daha fazla şablon dosyası oluşturmanız gerekecektir. Örneğin,header.phpGenellikle belge türü beyanını içerir.<head>Bölge ve web sitelerinin başlık kısımları;footer.phpBu, sayfa altı içeriğini ve kapatma etiketlerini içerir;sidebar.phpKenar çubuğu için kullanılır. WordPress’in yerleşik fonksiyonları aracılığıyla…get_header()、get_footer()和get_sidebar()Bu bölümleri diğer şablonlara da kolayca dahil edebilirsiniz.
Ayrıca, şunları da yapabilirsiniz:single.phpTek bir makale için kullanılır.page.phpBağımsız sayfalar için kullanılır.archive.phpArşivleme listeleri için kullanılır, ayrıca…functions.phpBu özel dosya, temaları eklemek için gerekli özellikleri ve işlevleri sağlar.
Bir konunun ana sayfa şablonunu oluşturun.
Ana sayfa, bir web sitesinin yüzüdür ve genellikle en özgün tasarıma ihtiyaç duyar. İşe, ana sayfanın yapımıyla başlayacağız.index.phpBaşlayalım ve içeriği göstermek için döngülerin nasıl kullanılacağını inceleyelim.
Başlık ve alt bilgi bölümlerini birleştirin.
İyi bir uygulama, ortak kısımları modüler hale getirmektir. Öncelikle, tema dizininizde bir modül oluşturun.header.php和footer.phpİçeride.header.phpİçinde, şunları da dahil etmeniz gerekiyor:<!DOCTYPE html>Deklarasyon,<html>Etiketin başlangıcı…<head>Bölge (kullanımı)wp_head()Bu özellik, eklentilerin ve temaların buraya kod enjekte etmesine olanak tanır; ayrıca web sitesinin logosu, ana navigasyon menüsü gibi başlangıç içerikleri de bu bölüme yerleştirilebilir.
Sonra,index.phpBaşlangıçta, “ kullanın” ifadesini kullanın.<?php get_header(); ?>Bu başlığı dahil etmek için…index.php...nin sonunda, kullanın<?php get_footer(); ?>Giriş yapmak için…footer.phpBunun içinde şunlar bulunmalıdır:wp_footer()Hook çağrıları ve kapatmaları (Hook calls and closures)</body>\nEtiketler.
Tavsiye edilen okuma WordPress tema geliştirme tam rehberi: Sıfırdan birinci sınıf özel temalar oluşturmak.。
Döngü kullanarak makaleleri çıktı olarak alın.
WordPress’ün çekirdeği “The Loop” adlı bir PHP kod parçasıdır. Bu kod, herhangi bir makalenin olup olmadığını kontrol eder ve makaleler mevcutsa bunları sırayla görüntüler.index.php的get_header()Daha sonra, aşağıdaki temel döngü kodunu ekleyebilirsiniz:
<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
<h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>
<p>Üzgünüz, herhangi bir makale bulunamadı.</p>
<?php endif; ?>Bu kodda,have_posts()和the_post()Fonksiyon tabanlı döngü.the_title()、the_permalink()和the_excerpt()Şablon etiketleri, makalelerin özel içeriğini çıktı olarak kullanılır. Böylece, temel bir makale listesi sayfası tamamlanır.
Belirli bir konuya göre stil ve betik ekleyin.
Şekilsiz bir tema çekicilikten yoksundur. CSS ve JavaScript dosyalarını doğru bir şekilde kuyruğa eklemeniz gerekir; bu, WordPress tarafından önerilen bir yöntemdir ve bağımlılıkların doğru bir şekilde yönetilmesini ve çakışmaların önlenmesini sağlar.
Stil şemasını doğru bir şekilde dahil etmek için aşağıdaki adımları izleyin:
Her ne kadarstyle.cssGerekli, ancak bunu doğrudan HTML içinde bağlantı olarak kullanmamalısınız. Doğru yöntem şudur:functions.phpDosyada kullanılanwp_enqueue_style()İlk olarak, temanın kök dizininde bir fonksiyon oluşturun.functions.phpDosyayı açın ve ardından aşağıdaki kodu ekleyin:
<?php
function my_theme_enqueue_styles() {
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );Bu kod, WordPress’e temanın ana stil şemasını kullanmasını söyleyen bir fonksiyon tanımlamaktadır.get_stylesheet_uri()Alınan yol (“my-theme-style” olarak adlandırılır), kuyruğa eklenir.add_action()Hook, bu fonksiyonu sisteme bağlar (yani sistemin bu fonksiyonu kullanabilmesini sağlar).wp_enqueue_scriptsBu işlemde, sayfa yüklendiğinde çalıştırılmasına dikkat edin.
Özelleştirilmiş JavaScript kodunun dahil edilmesi
JavaScript dosyasını içe aktarma yöntemi benzerdir, ancak farklı bir araç kullanılır.wp_enqueue_script()Fonksiyon. Diyelim ki elinizde şu adreste bulunan bir fonksiyon var:js/script.jsBelgeyi eklemek için şu şekilde yapabilirsiniz:
Tavsiye edilen okuma Başlangıçtan Uzmanlığa: WordPress Tema Geliştirme Kapsamlı Rehberi ve Pratik Eğitim Kursu。
function my_theme_enqueue_scripts() {
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );Buradaki parametreler sırasıyla şunları temsil eder: Betik işleyici (script handler), betik URL’si, bağımlılık dizisi (dependency array).array('jquery')Sürüm numarası, ve sayfanın alt kısmında (footer) yüklenip yüklenmediği…trueBelirtmektedir ki…</body>Ön yükleme (Pre-loading).
Genişletilmiş Tema Özellikleri
functions.phpBu, temanın “Araç Kutusu”dur. Buraya çeşitli özellikler ekleyerek temayı geliştirebilirsiniz; bunun için temel şablon dosyalarını değiştirmenize gerek kalmaz.
Konu desteği özelliği ekleyin.
WordPress birçok yerleşik özellik sunar, ancak bu özellikler yalnızca temanın bu özellikleri desteklediğini açıkça belirtmesi durumunda etkinleştirilebilir. Bu, temanın yapılandırma dosyalarında (genellikle `functions.php` veya `style.css`) gerekli kodların bulunmasıyla sağlanır.add_theme_support()Fonksiyonların nasıl gerçekleştirileceğine dair örnekler: Örneğin, makale özetlerinin (özel görseller), özelleştirilmiş logoların ve HTML5 etiketlerinin desteklenmesi için şu adımlar atılabilir:functions.phpEkleme:
function my_theme_setup() {
add_theme_support( 'post-thumbnails' );
add_theme_support( 'custom-logo' );
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );add_action( 'after_setup_theme', 'my_theme_setup' )Bu ayarların, temanın başlatılması sırasında mümkün olan en kısa sürede çalıştırılmasını sağlayın.
Kayıt Menüsü
Kullanıcıların arka planda “Görünüm-Menü” bölümünden navigasyon ayarları yapabilmesi için, önceden yemek birimlerinin konumlarını kaydetmeniz gerekmektedir.register_nav_menus()Function:
function my_theme_register_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
}
add_action( 'init', 'my_theme_register_menus' );Kayıt olduktan sonra, şablon dosyalarında (örneğin…) işlem yapabilirsiniz.header.php) içinde kullanılırwp_nav_menu( array( 'theme_location' => 'primary' ) )Menü şimdi görüntüleniyor.
Özetle.
Oluşturulduğundan beri…style.css和index.phpTemel klasörlerden başlayarak, kademeli olarak eksiksiz bir WordPress teması oluşturdunuz. Şablon hiyerarşisini anlayarak, farklı türdeki sayfaları hassas bir şekilde kontrol etmek için özel şablon dosyaları oluşturmayı öğrendiniz.wp_enqueue_style()和wp_enqueue_script()Kaynakları yönetmek, temaların uyumluluğunu ve performansını sağlamanın en iyi uygulamalarından biridir. Son olarak, bunları etkin bir şekilde kullanın.functions.phpDosyaları, şu yollarla erişebilirsiniz:add_theme_support()和register_nav_menus()Bu fonksiyonlar, temalara güçlü özellikler eklemek için kullanılır. Bu temel adımları öğrendiğinizde, kişiselleştirilmiş WordPress temaları geliştirmek için sağlam bir temele sahip olursunuz.
Sıkça Sorulan Sorular.
WordPress teması geliştirmek için hangi ön bilgi gereklidir?
Web sayfalarının yapısını ve stilini oluşturmak için sağlam bir HTML ve CSS bilgisine sahip olmanız gerekmektedir. Aynı zamanda, WordPress temalarının temel olarak PHP ile çalıştığını göz önünde bulundurarak PHP’nin temel sözdizimini de bilmelisiniz. JavaScript konusunda temel bir bilgiye sahip olmak, etkileşimli özellikler eklemenize yardımcı olacaktır. Bunun yanı sıra, makaleler, sayfalar, kategoriler ve etiketler gibi WordPress’in temel kavramlarına aşina olmanız, geliştirme sürecinde işinizi daha kolay hale getirecektir.
Neden stil tablolarını doğrudan `link` etmek yerine `wp_enqueue_style` kullanmak zorundayız?
Doğrudan kullanın.<link>Etiketlerde stil şablonlarının yolunun doğrudan kodlanması birçok soruna neden olur. Öncelikle, bu durum bağımlılıkları doğru bir şekilde yönetemez; örneğin, stilinizin belirli bir framework’un stillerine ihtiyacı olabilir. İkincisi…wp_enqueue_styleEklentilerin veya diğer temaların stilinizi güvenli bir şekilde geçersiz kılmasına veya değiştirmesine izin verir. En önemlisi, önbellekleme ve performans optimizasyonu eklentileriyle daha iyi bir şekilde çalışarak kaynakların yüklenme sırasını ve verimliliğini sağlar; bu da WordPress ekosisteminde standart bir uygulamadır.
fonksiyonlar.php ve eklentiler arasındaki fark nedir?
functions.phpBurada tanımlanan kodlar, temanızla sıkı bir şekilde bağlantılıdır; kullanıcı temayı değiştirdiğinde bu özellikler artık kullanılamaz hale gelir. Bu kodlar, kayıt menüsü, özel görsellerin desteklenmesi, kenar çubuğunun tanımlanması gibi temanın görsel sunumu ve düzeniyle doğrudan ilgili özelliklerin saklanması için uygundur. Öte yandan, eklentiler tarafından sağlanan özellikler genellikle temadan bağımsızdır ve web sitesine belirli genel özellikler (örneğin iletişim formları, SEO optimizasyonu) eklemeyi amaçlar; kullanıcı temayı değiştirse bile bu özellikler hala mevcuttur. Eğer bir özellik temanın görünümüyle ilgili değilse, onu bir eklenti olarak kullanmak genellikle daha esnek bir seçenektir.
Temamı nasıl birden çok dil çevirisine destekleyebilirim?
Temaların uluslararasılaştırılmasını desteklemek, küresel pazarlara açılmanın anahtarıdır. Öncelikle, tüm tema metinlerinizin görüntülendiği yerlerde WordPress’in çeviri fonksiyonlarını kullanın; örneğin:__('文本', 'my-custom-theme')或_e('文本', 'my-custom-theme')Bunun arasındamy-custom-themeEvet, doğru.style.cssÖncelikle, belirtilen metin alanları tanımlanır. Daha sonra, Poedit gibi bir araç kullanılarak tema dosyaları taranır ve gerekli değişiklikler yapılır..potŞablon dosyaları; çevirmenler, bu dosyalara dayanarak farklı dillerde içerikler oluşturabilirler..po和.moDosya. Son olarak,functions.phpÇin'deload_theme_textdomain()Fonksiyon, çeviri dosyasını yüklüyor.
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.
- Modern web sitesi oluşturma rehberi: Sıfırdan canlı hale getirmeye kadar tüm süreç ve teknoloji yığını seçimi
- Web Sitesi İnşasının Temel Süreçleri ve Anahtar Teknolojileri Analizi
- Mükemmel bir WordPress teması seçmenin kılavuzu: Çerçeveden özelleştirmelere kadar kapsamlı bir inceleme
- Web Sitesi Kurma İçin Yeni Başlayanlar İçin: Sıfırdan Başlayarak Yüksek Performanslı Web Siteleri Oluşturmanın Kapsamlı Rehberi
- Tailwind CSS Çerçevesini Derinlemesine Anlama: Pratik Araçlardan Modern Ön Uç Geliştirme Uygulamalarına
Türkçe