Hazırlık işlemleri: Yerel geliştirme ortamınızı kurun.
Herhangi bir kod yazmaya başlamadan önce, stabil ve verimli bir yerel geliştirme ortamına sahip olmak şarttır. Bu, çevrimiçi web sitenizi etkilemeden testler yapmanıza ve hataları düzeltmenize olanak tanır. Günümüzde en popüler seçenekler, Apache/Nginx, MySQL/MariaDB ve PHP’nin entegre edildiği yerel sunucu paketleridir; örneğin Local by Flywheel, XAMPP veya MAMP. Lütfen PHP sürümünüzün 7.4 veya daha yüksek olduğundan emin olun ve MySQLi veya PDO gibi gerekli eklentilerin etkinleştirildiğinden emin olun.
Sonraki adımda, yerel bilgisayarınıza yepyeni bir WordPress kurmanız gerekiyor. WordPress.org resmi web sitesinden en güncel kurulum paketini indirin ve bunu yerel sunucunuzun web sitesi kök dizinine (örneğin, hhtdocs veya www klasörüne) çıkarın. Daha sonra, bir tarayıcı aracılığıyla yerel adresi ziyaret edin (örneğin:http://localhost/your-siteAyarlamaları, ünlü “Beş Dakikalık Kurulum” sürecine göre tamamlayın. Veritabanı adınızı, kullanıcı adınızı ve şifrenizi unutmayın; bu bilgiler daha sonra bahsedilecektir.wp-config.phpDosyada.
Son olarak, elinizin altında kullanışlı bir kod editörü veya entegre geliştirme ortamı (IDE) bulunması gerekiyor. Visual Studio Code, PhpStorm veya Sublime Text gibi araçlar, PHP, HTML, CSS ve JavaScript için güçlü sözdizimi vurgulama, kod önerileri ve hata ayıklama özellikleri sunar. Editörünüzde WordPress ile ilgili kod parçalarını veya akıllı algılama eklentilerinin yüklü olduğundan emin olun; bu, geliştirme verimliliğinizi büyük ölçüde artıracaktır.
Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Sıfırdan Başlayarak Kişiselleştirilmiş Web Siteleri Oluşturma。
WordPress temalarının temel yapısını ve çekirdek dosyalarını anlamak
En temel bir WordPress teması, esasen şu şekilde tanımlanabilir: “WordPress platformunda kullanılmak üzere tasarlanmış, temel özelliklere sahip bir şablon veya yapıdır.”wp-content/themes/Katalogdaki klasörler, belirli işlevlere sahip bir dizi dosya içermektedir. Bu dosyalar birlikte çalışarak, WordPress’in web sitenizin içeriğini nasıl görüntüleyeceğini belirler. İki mutlak olarak gerekli dosyadan başlayalım.
İlk olanı…style.cssBu dosya sadece temanızın stil şablonu değil, aynı zamanda temanın “kimlik kartı”dır. Dosyanın baş kısmındaki yorum bloğu, WordPress’in bu temayı tanıması için gerekli tüm meta bilgileri içermektedir. En temel örnek…style.cssBaşlık aşağıdaki gibidir:
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个简洁的入门级WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/ İkinci zorunlu dosya şudur:index.phpBu, temanın ana şablon dosyasıdır. WordPress daha spesifik bir şablon dosyası bulamadığında, sayfayı renderlamak için varsayılan olarak bu dosyayı kullanır. İçinde başlangıçta sadece “Hello World” ifadesi bulunsa bile, bu dosyanın mevcut olması gerekir.
Bu iki dosyanın yanı sıra, işlevsel olarak tam bir tema genellikle aşağıdakileri de içerir:
* header.phpWeb sayfasının başlık bölgesini tanımlar; genellikle şunları içerir:<head>Bazı bölümler, web sitesi başlıkları ve ana navigasyon menüsü.
* footer.phpBir web sayfasının alt kısmını (footer) tanımlayın; burada telif hakkı bilgileri, betikler ve diğer içerikler yer alır.
* sidebar.phpYan menü bölgesini tanımlayın.
* functions.phpBu, temalara özellikler eklemek, menüler ve kenar çubukları oluşturmak ve diğer betikler ile stil şemalarını dahil etmek için kullanılan son derece güçlü bir dosyadır.
* page.phpStatik sayfaların renderlanması için kullanılır.
* single.phpTek bir blog makalesini renderlemek için kullanılır.
* archive.phpMakale kategorilerini, etiketlerini ve diğer arşiv sayfalarını renderlemek için kullanılır.
Sıfırdan başlayarak bir temanın temel şablonunu oluşturma
Şimdi, temanın temel yapısını oluşturmaya başlayalım. Öncelikle,wp-content/themes/Bir dizin altında yeni bir klasör oluşturun ve buna bir ad verin.my-first-themeArdından, yukarıda bahsedilenleri içinde oluşturun.style.css和index.phpDosya.
Tavsiye edilen okuma Modern Web Sitesi Kurma Rehberi: Planlamadan Yayına Kadar Tam Süreç ve Pratik İpuçları。
Başlık ve alt bilgi (footer) şablonları oluşturun.
Web sayfasının yapısını yeniden kullanılabilir bileşenlere ayırmak, verimli geliştirmenin anahtarıdır. Biz de bunu gerçekleştirdik.header.phpBu dosya, HTML belgesinin başlangıç kısmını oluşturmaktan sorumludur. Bu dosyada, şunları kullanmanız gerekecektir:wp_head()Bu bir fonksiyondur ve önemli bir araçtır; WordPress çekirdeği, eklentiler ve temanızın buraya gerekli kodları (örneğin stil şablonu bağlantıları, meta etiketler) eklemesine olanak tanır.
<!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 id="masthead">
<h1><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header> Aynı şekilde, oluşturun.footer.phpDosya, sayfayı kapatmak için kullanılır. Lütfen burada bu işlemi gerçekleştirin.wp_footer()Kancalar, birçok eklentinin (örneğin kod analizi yapan eklentilerin) düzgün çalışması için hayati öneme sahiptir.
<footer id="colophon">
<p>© . All Rights Reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
\n Ana indeks dosyasını oluşturun.
Başlık ve alt bilgi bölümleriyle birlikte, artık hazırsın.index.phpBu sayede dosya daha sade ve etkili hale gelir. Kullanın.get_header()和get_footer()Şablon fonksiyonlarını kullanarak bunları içe aktarın.
<?php get_header(); ?>
<main id="primary">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<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>
<?php
endwhile;
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main> Bu kod, tipik bir “ana döngü” oluşturmaktadır. Öncelikle herhangi bir makale olup olmadığını kontrol eder, ardından her makaleyi tek tek inceleyerek başlığını (tam metne giden bağlantı) ve özetini görüntüler.
İşlevsel dosyalar aracılığıyla temayı geliştirin.
functions.phpBu, “Kontrol Merkezi” adlı özelliğinize aittir. Burada, WordPress’in varsayılan davranışlarını değiştirebilirsiniz; ancak çekirdek dosyaları (core files) değiştirmenize gerek kalmaz.
Kayıt menüsü ve kenar çubuğu
Konunuzun özelleştirilebilir bir menüyü desteklemesi için kullanmanız gereken şeyler…register_nav_menus()Bu fonksiyon, yemek birimlerinin konumlarını kaydetmek için kullanılır. Bu genellikle…functions.phpBu işlem, bir dosyadaki bir fonksiyon içinde tamamlanır ve bu fonksiyon aracılığıyla…after_setup_themeHook işlemi gerçekleştirildi.
Tavsiye edilen okuma Web Sitesi Kurma: Başlangıçtan Uzmanlığa: Yüksek Performanslı Web Siteleri Oluşturmanın Kapsamlı Rehberi。
function my_first_theme_setup() {
// 注册一个主导航菜单
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' ); Kaydolduktan sonra, artık…header.phpÇince'de kullanılır.wp_nav_menu( array( 'theme_location' => 'primary' ) )Bu menüyü göstermek için…
Aynı şekilde, bunu kullanabilirsiniz.register_sidebar()İşlev, araç çubuğu (sidebar) oluşturulacak alanı hazırlamak için kullanılır.
Doğru şekilde betikleri ve stilleri içe aktarmak için aşağıdaki adımları izleyin:
Asla şablon dosyalarında CSS veya JavaScript dosyalarına doğrudan bağlantı (hard link) eklemeyin. Doğru yöntem, bu dosyaları şablon dosyasına içerik olarak dahil etmektir.wp_enqueue_scriptsKancalar, kullanımı…wp_enqueue_style()和wp_enqueue_script()Bu fonksiyon, bileşenlerin sırayla yüklenmesini sağlar. Bu sayede bağımlılıklar doğru bir şekilde yönetilir ve tekrarlanan yüklemeler önlenir.
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );
// 引入一个自定义JavaScript文件
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' ); Özetle.
İlk WordPress temanızı oluşturmak, ortamı kurmaktan, temel yapıyı anlamaktan, çekirdek şablon dosyalarını kendiniz yazmaya ve son olarak işlevsel dosyalar aracılığıyla temaya canlılık katmaya kadar adım adım ilerleyen bir süreçtir. Önemli olan, şablon hiyerarşisini (yani WordPress’in farklı sayfalar için hangi şablon dosyalarını seçtiğini) ve bunları nasıl kullanacağınızı anlamaktır.functions.phpÇeşitli “hook’lar” kullanarak işlevselliği genişletebilirsiniz. Giriş seviyesi konuları basit görünse de, tüm temel kavramları kapsamaktadır. Bunları öğrendikten sonra, daha karmaşık şablonları keşfetmeye devam edebilirsiniz (örneğin…).single.php、page.phpÖzel makale türleri, tema özelleştirici API’si gibi gelişmiş özellikler sayesinde, işlevsel ve estetik açıdan mükemmel kişiselleştirilmiş temalar oluşturulabilir.
Sıkça Sorulan Sorular.
WordPress tema yapmak için PHP’de uzman olmak gerekir mi?
Uzmanlık seviyesine ulaşmanıza gerek yok, ancak PHP’nin temel bilgilerine sahip olmanız gerekiyor. Değişkenler, diziler, koşullu ifadeler, döngüler ve fonksiyonların temel kullanımlarını anlamanız gerekiyor; çünkü WordPress şablon etiketleri aslında PHP fonksiyonlarıdır. Geliştirme süreci ilerledikçe, doğal olarak daha fazla PHP becerisi edineceksiniz.
Neden temam arka planda görünmüyor?
En yaygın neden şudur:style.cssDosya başlığındaki yorumlarda bulunan meta bilgilerin formatı doğru değil veya gerekli olan bilgiler eksik (örneğin…).Theme NameLütfen bu dosyayı dikkatlice inceleyin, yorumların sözdiziminin doğru olduğundan ve bilgilerin eksiksiz olduğundan emin olun. Ayrıca, konu klasörlerinin doğrudan belirli bir yere konulması gerekmektedir.wp-content/themes/Dizin içinde çok katmanlı iç içe geçmeler bulunamaz.
fonksiyonlar.php ve eklentiler arasındaki fark nedir?
functions.phpBu, mevcut olarak etkinleştirilmiş temanın özellikleriyle bağlantılı olan bir özelliğin parçasıdır. Eğer temayı değiştirirseniz, bu özellikler genellikle devre dışı kalır. Ancak eklentiler tarafından sağlanan özellikler temadan bağımsızdır ve hangi tema kullanılırsa kullanılsın aktif kalır. Genellikle, web sitesinin görünümü ve düzeniyle yakından ilgili olan özellikler…functions.phpOrtak ve bağımsız özellikler (örneğin iletişim formları, SEO optimizasyonu) eklenti olarak geliştirilmek için daha uygundur.
Nasıl temamı çok dilli (uluslararasılaştırılmış) hale getirebilirim?
WordPress’in uluslararasılaştırma (i18n) fonksiyonlarını kullanarak tüm kullanıcıya yönelik metin dizelerini paketlemeniz gerekiyor. Kodunuzda şunları kullanın:__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )Metni çıktı olarak verin, buradamy-first-themeBu, sizin metin alanınızdır (Text Domain) ve mutlaka…style.cssOrtak bir açıklama yapıldı. Daha sonra, Poedit gibi araçları kullanarak bunu oluşturabilirsiniz..potŞablon dosyalarını çevirin ve….po/.moDil dosyası.
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
- Web Sitesi Kurma Süreci Rehberi: Sıfırdan Profesyonel Bir Siteye Kadar Tam Adımların Açıklaması
- SEO Optimizasyonunun Temellerini Sıfırdan Öğrenin ve Yüksek Trafiğe Sahip Web Siteleri Oluşturun: Pratik Bir Rehber
- Web siteniz için en uygun alan adını seçme: Kayıttan SEO optimizasyonuna kadar kapsamlı rehber
- Web Sitesi Kurma Sürecinin Tamamını Kavrama: Sıfırdan Hayata Geçirme İçin Teknik Rehber ve En İyi Uygulamalar