WordPress temalarının temel yapısını anlamak.
Kod yazmaya başlamadan önce, bir WordPress temasının yapısını anlamak son derece önemlidir. Bir tema esasen, web sitesinin görünümünü ve işlevlerini belirleyen belirli bir formatta hazırlanmış dosyalar içeren bir klasördür. En temel temalar sadece iki dosyaya ihtiyaç duyar:style.css和index.php。
Çekirdek stil şablonu dosyası
style.cssDosyalar sadece CSS stillerinin saklandığı yerler değildir; aynı zamanda bir temanın “kimlik kartı”dır. Bu dosyanın en üst kısmında, temanın adı, yazarı, açıklaması, sürümü gibi meta bilgilerini WordPress sisteminine bildirmek için kullanılan belirli bir yorum bloğu (yani “stil şeması başlığı”) bulunmalıdır. Bu başlık olmadan, WordPress bu dosyanın geçerli bir tema olduğunu tanıyamaz.
En temel olanı…style.cssDosya başlığının bir örneği aşağıdaki gibidir:
Tavsiye edilen okuma WordPress Tema Geliştirme: İlk Özel Temanızı Sıfırdan Oluşturun。
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/ Çekirdek şablon dosyası
index.phpBu, temanın varsayılan şablon dosyasıdır ve aynı zamanda en önemlilerinden biridir. WordPress, mevcut istek için daha spesifik bir şablon dosyası bulamadığında, varsayılan şablonu kullanmak üzere geri döner.index.phpBu araç, veritabanından içerikleri almakla ve bunları HTML yapısıyla tarayıcıya göndermekle yükümlüdür. En basit örneği…index.phpDosya, yalnızca temel bir HTML iskeletini ve WordPress çekirdek fonksiyonlarını çağıran PHP kodunu içerebilir.
Bu iki temel dosyanın yanı sıra, işlevsel olarak tam bir tema genellikle aşağıdakileri de içerir:
* header.phpWeb sitesinin başlık (header) bölümü.
* footer.phpWeb sitesinin alt kısmı (footer).
* functions.phpKonu özelliklerini, kayıt menülerini, kenar çubuklarını vb. geliştirmek için kullanılır.
* page.phpTek bir sayfayı göstermek için kullanılır.
* single.phpTek bir blog makalesini göstermek için kullanılır.
Yerel geliştirme ortamı kurmak ve ilk temayı oluşturmak
Gerçek bir sunucuda doğrudan tema geliştirmek hem tehlikeli hem de verimsizdir. En iyi uygulama, yerel bilgisayarda çevrimiçi ortama benzer bir geliştirme ortamı oluşturmaktır. XAMPP, MAMP, Local by Flywheel veya DevKinsta gibi araçları kullanabilirsiniz; bu araçlar PHP, MySQL ve web sunucusunu tek tıklamayla kurmanıza olanak tanır.
Bir konu klasörü ve dosyası oluşturun.
Öncelikle, yerel WordPress kurulum dizininizde şunu bulun:wp-content/themes/Yol: Burada yeni bir klasör oluşturun; klasörün adı, konunuzun tanımlayıcısı olmalıdır. Küçük harfler ve tire (-) kullanmanız önerilir. Örneğin:my-first-theme。
Daha sonra, bu klasör içinde yukarıda bahsedilen iki temel dosyayı oluşturun:style.css和index.phpYukarıdaki stil şablonu başlık kodunu kopyalayın ve ilgili yere yapıştırın.style.cssOrtada ve kendi bilgilerinizle değiştirin.
Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kursu: Sıfırdan İlk Web Sitesi Temanızı Oluşturun。
Temel bir şablon dosyası oluşturun.
Devamında,index.phpAşağıdaki en temel kodu içeriğe ekleyin; bu kod, WordPress için gerekli olan şablon etiketlerini içermektedir.
<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
<?php wp_body_open(); ?>
<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();
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
_e( '抱歉,没有找到任何内容。', 'my-first-theme' );
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html> Yukarıdaki adımları tamamladıktan sonra, yerel WordPress arayüzünüzde “Görünüm” -> “Temalar” sayfasına gidin. “İlk Temam” adlı temanın zaten listelendiğini görmelisiniz. Bu temayı etkinleştirin ve ardından web sitesinin ana sayfasını ziyaret edin; makale başlıklarının ve içeriklerinin görüntülendiğini göreceksiniz.
Şablon hiyerarşisini ve temel fonksiyonları kullanarak…
WordPress, farklı sayfa isteklerine (örneğin ana sayfa, makale sayfası, kategori sayfası) hangi şablon dosyasının kullanılacağını belirlemek için akıllı bir “şablon hiyerarşisi” sistemi kullanır. Bu sistemi anlamak, tema geliştirmenin temel bir parçasıdır.
Şablon yükleme sırasını anlamak
Örneğin, bir blog makalesine erişildiğinde, WordPress şablon dosyalarını aşağıdaki sırayla arar:single-post.php -> single.php -> singular.php -> index.phpBu, bulunan ilk dosyayı kullanacaktır. Bu tasarım sayesinde farklı türdeki sayfalar için son derece özelleştirilmiş düzenler oluşturabilirsiniz ve aynı zamanda…index.phpSon çare olarak…
Döngüler ve şablon etiketleri kullanmak
在index.phpOrada gördüğünüz PHP kodu, ünlü “WordPress Döngüsü” (The Loop)’dür. Tüm şablon dosyalarının temelini oluşturur ve mevcut sayfada gösterilmesi gereken makaleleri veya içerikleri dolaşmak ve çıkarmak için kullanılır.
Döngü içindekithe_title()、the_content()、the_excerpt()Bu tür fonksiyonlara “şablon etiketleri” (template tags) denir. Görevleri, ilgili makale verilerini güvenli bir şekilde çıkarmaktır. Bir diğer önemli fonksiyon ise…the_post()Her döngü iterasyonunda çağrılır ve küresel değişkenleri (global variables) kullanmak için kullanılır.$postNesne, mevcut makalenin verileriyle ayarlanır ve bir sonraki makaleye geçilir.
Tavsiye edilen okuma Önemli becerileri öğrenin: Sıfırdan ilk WordPress temanızı oluşturun。
Sayfa yapısını modüler hale getirmek, kodun sürdürülebilirliğini artırmanın iyi bir yoludur. İşte bu.header.php和footer.phpKullanım alanı.
Başlık ve alt kısmı ayırın.
将index.phpÇin'deki<head>Bölüm ve<header>Bölgeyi kesin ve yeni oluşturulan bir yere yapıştırın.header.phpDosyada. Aynı şekilde, bunu da yapın.<footer>Bir kısmı kesilip alındı.footer.phpOrta.
Sonra, orijinalinde…index.phpÇin'de, kullanılır.get_header()和get_footer()Bu iki şablon etiketi, bunları içeriye almak için kullanılır.
<?php get_header(); ?>
<main>
<?php the_title( '<h2>', '</h2>' ); ?>
<p><?php _e( '抱歉,没有找到任何内容。', 'my-first-theme' ); ?></p>
<?php endif; ?>
</main>
<?php get_footer(); ?> Böylece, tüm sayfa şablonları aynı başlık ve alt bilgi bölümlerini paylaşabilir; değişiklik yapmak için sadece bir dosyayı değiştirmeniz yeterlidir.
Functions.php dosyası aracılığıyla temanın özelliklerini geliştirin.
functions.phpBu dosya, temanızın “kontrol merkezidir”. Bir şablon dosyası değil; temanız başlatıldığında otomatik olarak yüklenen bir fonksiyon kütüphanesidir. Burada yeni özellikler ekleyebilir, varsayılan davranışları değiştirebilirsiniz ve WordPress çekirdek dosyalarını değiştirmenize gerek kalmaz.
Kayıtlı konuların desteklediği özellikler:
在functions.phpBurada kullanabilirsiniz.add_theme_support()Bu fonksiyonlar, temanızın hangi WordPress özelliklerini desteklediğini belirtmek için kullanılır. Örneğin, makale özetlerinin (özel görsellerin) etkinleştirilmesi ve özelleştirilmiş menülerin oluşturulması yaygın işlemlerdir.
<?php
function my_theme_setup() {
// 添加对文章缩略图的支持
add_theme_support( 'post-thumbnails' );
// 添加对自定义菜单的支持
add_theme_support( 'menus' );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' ); Stil ve betik ekleyin.
CSS ve JavaScript’i doğru bir şekilde eklemenin yolu şu şekildedir:wp_enqueue_style()和wp_enqueue_script()fonksiyonları ve bunları bağlamak.wp_enqueue_scriptsBu kancada. Bu, bağımlılıkların doğru bir şekilde yönetildiğinden ve dosyaların tekrar tekrar yüklenmemesinden emin olur.
function my_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
// 引入自定义的JavaScript文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' ); Bunları tamamladıktan sonra, artık…header.phpÇince'de kullanılır.wp_nav_menu()Bir fonksiyon kullanarak kaydettiğiniz menüyü görüntüleyin ve bu menüyü makale döngüsü içinde kullanın.the_post_thumbnail()Özel görselleri göstermeye başladı.
Özetle.
WordPress tema geliştirme, yapıdan detaylara kadar kademeli bir süreçtir. Öncelikle, temanın hangi bileşenlerden oluştuğunu ve bu bileşenlerin nasıl bir arada çalıştığını anlamanız gerekir.style.css和index.phpÖncelikle, temel yapıyı oluşturun ve yerel geliştirme ortamını kurun. Daha sonra, şablon hiyerarşisi sistemi ve “döngü” kavramlarını öğrenin; bu sayede farklı sayfalar için hassas bir düzen oluşturabileceksiniz.header.php和footer.phpModülerlik sayesinde kodunuz daha anlaşılır ve bakımı daha kolay hale gelir. Son olarak…functions.phpDosyalar, size özelliklerin genişletilmesi için bir kapı açar; kayıt menüsünden kaynakların güvenli bir şekilde yüklenmesine kadar, temaları statik şablonlardan dinamik ve güçlü web sitelerinin görünümlerine dönüştürür. Bu yolu izleyin, daha spesifik şablon dosyalarını sürekli olarak uygulayın ve keşfedin.single.php、page.php、archive.phpBöylece, kademeli olarak işlevsel ve özgün tasarıma sahip bir özel WordPress web sitesi oluşturabilirsiniz.
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 temel HTML ve CSS bilgisine sahip olmanız gerekmektedir. Ayrıca, WordPress temalarının çoğunlukla PHP kodundan oluştuğunu ve içeriğin dinamik olarak oluşturulması için PHP’ye dair temel bir bilgiye ihtiyacınız vardır. JavaScript bilgisi, temalara etkileşimli özellikler eklemenizi sağlar; bu, başlangıç aşamasında zorunlu olmasa da ilerleyen dönemlerde çok önemlidir.
Neden temam arka planda görünmüyor?
En yaygın neden şudur:style.cssDosyadaki konu bilgilerinin başlık bölümü doğru biçimde düzenlenmemiş veya eksik. Lütfen dosyanın en üst kısmında, format gereksinimlerini karşılayan eksiksiz bir yorum bloğu bulunduğundan emin olun. Ayrıca, konu klasörünün doğru yere konulup konulmadığını kontrol edin.wp-content/themes/Klasör dizininin içinde yer alıyor ve klasör adında özel karakterler kullanılmamıştır.
Kendi temama nasıl bir araç çubuğu (yan menü) eklerim?
Öncelikle şunu yapmanız gerekiyor:functions.phpÇince'de kullanılır.register_sidebar()Fonksiyon, bir veya daha fazla araç çubuğu bölgesi kaydeder. Daha sonra, ilgili şablon dosyasında (örneğin…)sidebar.phpİçerikte, kullanılmaktadır.dynamic_sidebar()Bir fonksiyon kullanarak bunu çağırın ve görüntüleyin. Son olarak, sayfa şablonunda bunu gerçekleştirin.get_sidebar()Bu dosyayı içe aktarın.
functions.php dosyasını değiştirdikten sonra web sitesinin beyaz ekran göstermesine ne yapılmalı?
Bu genellikle şu nedenle olur:functions.phpDosyada PHP diline ait bir sözdizimi hatası bulunmaktadır. Bu dosya, temanın yüklenmesinin başlarında çalıştırıldığı için hata, tüm web sitesinin çalışmasını durduracaktır. Çözüm, FTP aracılığıyla veya sunucu kontrol panelindeki dosya yöneticisi kullanılarak hatalı dosyanın değiştirilmesidir.functions.phpYeniden adlandırma (örneğin, şu şekilde değiştirme)functions.php.bakBu şekilde WordPress bunu görmezden gelecek, web sitesine erişim yeniden sağlanacak ve ardından düzeltilmiş sürümü tekrar yükleyebilirsiniz.
Temamı nasıl birden çok dil çevirisine destekleyebilirim?
İki şeyi iyi yapman gerekiyor. Öncelikle, konunun tüm metin çıktılarında WordPress’in çeviri fonksiyonlarını kullanmalısın.__()、_e()Ve bunlar için belirli konumları belirtin.style.cssÖncelikle, başlık bölümünde tanımlanan “Text Domain” değerine dikkat edilmelidir. Daha sonra, Poedit gibi bir araç kullanarak tema dosyalarını tarayarak gerekli değişiklikleri yapabilirsiniz..potŞablon dosyasını kullanarak, ilgili dil için gerekli içeriği oluşturun (örneğin:zh_CN.po和.mo) çeviri dosyalarını, bunları konunun içine koyun./languages/Katalogun içinde.
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 Kılavuzu: Sıfırdan Başlayarak Özelleştirilmiş Web Siteleri Oluşturma
- WordPress Tema Geliştirme Kılavuzu: Sıfırdan Uzmanlığa Pratik Bir Eğitim Kursu
- WordPress Tema Geliştirme Kılavuzu: Sıfırdan Profesyonel Seviyede Web Sitesi Şablonları Oluşturmak
- WordPress Tema Geliştirme Uygulamaları: Sıfırdan Başlayarak Responsif, Kurumsal Düzeyde Web Siteleri Oluşturma
- Kod kullanmadan WordPress temaları oluşturma: Sıfırdan ustalığa kadar tam bir rehber