Sıfırdan başlayarak WordPress tema geliştirmenin temel becerilerini öğrenmenize yardımcı olacağım.

WordPress Tema Geliştirme Ortamı Ayarları

WordPress teması geliştirmeye başlamak için öncelikle stabil ve verimli bir yerel geliştirme ortamına ihtiyacınız vardır. Bu genellikle, bilgisayarınızda Apache veya Nginx gibi bir sunucu, MySQL gibi bir veritabanı ve PHP’nin entegre edildiği bir yazılım yığını kurmayı ifade eder. Popüler çözümler arasında XAMPP, MAMP, Local by Flywheel veya Laravel Valet bulunmaktadır. Bu ortamlar, WordPress’in bulut sunucularında çalışıyormuş gibi davranmasını sağlar; böylece çevrimdışı olarak geliştirme, hata ayıklama ve yaptığınız değişikliklerin anında sonuçlarını görebilirsiniz.

Temel yazılım kurulumunu tamamladıktan sonra, bir kod editörü veya entegre geliştirme ortamı (IDE) kurmak gerekiyor. Güçlü ve ücretsiz olan Visual Studio Code, şu an popüler bir seçenektir. Visual Studio Code, sözdizimi vurgulama, kod önerileri ve sürüm kontrolü entegrasyonu gibi birçok genişletme eklentisine sahiptir ve bu da geliştirme verimliliğini büyük ölçüde artırır. Ayrıca, yerel Git araçlarının yapılandırılması da çok önemlidir; bu araçlar kod sürümlerini yönetmenize yardımcı olur ve yanlış işlemler nedeniyle oluşabilecek veri kayıplarını önler.

Hazırlık işlemleri tamamlandıktan sonra, yerel ortamda yeni bir WordPress kurulumu oluşturmanız gerekmektedir. En yeni WordPress kurulum paketini yerel sunucunun web sitesi kök dizinine çıkarın ve buna karşılık gelen bir veritabanı oluşturun. Yerel adresi ziyaret ederek (örneğin: http://localhost/your-projectWordPress kurulum rehberini tamamlamak için bu adımları izleyin.

Tavsiye edilen okuma Mükemmel WordPress temasını oluşturmanın kapsamlı rehberi: tasarımdan geliştirmeye kadar.。

Konunun temel yapısını ve şablon dosyalarını anlamak

Standart bir WordPress teması, belirli bir konumda bulunan bir dosyadır./wp-content/themes/Katalogdaki klasörler, belirli adlandırma ve hiyerarşi kurallarına uyan bir dizi PHP şablon dosyasından oluşmaktadır. Bu yapıyı anlamak, geliştirmenin temel taşlarından biridir.

UltaHost WordPress Sunucusu

30 gün iade garantisi, sınırsız bant genişliği ve veritabanı kullanımı, ücretsiz DDoS koruması; 3 yıllık abonelikte indirim (50%).

Sayfaya erişin.

En temel ve gerekli olan şablon dosyasıdır.index.phpBu, tüm temanın yedek ve acil durum için hazırlanan dosyalarıdır. Bir ziyaretçinin istediği sayfa için daha spesifik bir şablon dosyası mevcut değilse, WordPress otomatik olarak geri dönüş yapar ve bu yedek dosyaları kullanır.index.phpSayfayı renderlamak için kullanılır. Bu, temanızın “ana sayfa” mantığına benzer.

Bir temanın WordPress sistemi tarafından tanınabilmesi için, temanın meta bilgilerini tanımlayan bir stil şeması (stylesheet) içermesi gerekmektedir.style.cssBu dosyanın başlık kısmındaki yorum bloğu çok önemlidir; içeriği, temanın arka planda (arka uçta) nasıl görüneceğini belirler.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 开发者姓名
Description: 这是一个用于学习WordPress主题开发的简洁主题。
Version: 1.0
*/

Diğer bir temel dosya ise…functions.phpBu dosya doğrudan içerik çıkarmak için kullanılmaz; aslında bir temanın “işlev merkezidir”. Burada özel fonksiyonlar ekleyebilir, menüler ve kenar çubuklarını tanımlayabilir, CSS ve JavaScript dosyaları dahil edebilirsiniz. Ayrıca, WordPress’in sunduğu çeşitli “hook’ları” kullanarak temanın işlevlerini genişletebilir veya değiştirebilirsiniz. Örneğin, temanın davranışlarını değiştirmek için bazı kodları bu dosyaya ekleyebilirsiniz.add_theme_support()Bu fonksiyon, temanız için özel görsellerin, makale formatlarının ve diğer özeliklerin etkinleştirilmesini sağlar.

Temel şablon dosyalarını ve tema döngülerini öğrenmek.

Temel dosyaların yanı sıra, WordPress farklı türdeki sayfaların görünümünü hassas bir şekilde kontrol etmek için bir dizi özel amaçlı şablon dosyası sunar. Örneğin, tüm sitenin ana sayfasının nasıl görüntüleneceğini kontrol eden şablonlar bulunmaktadır.home.phpTek bir makalenin ayrıntılı sayfasını kontrol eden şablon şudur:single.phpStatik sayfaları (örneğin “Hakkımızda” sayfasını) kontrol eden şablon ise…page.phpBu dosyalar mevcut olduğunda, sistem bunları genel olanlar yerine öncelikli olarak kullanır.index.php。

Tavsiye edilen okuma WordPress Tema Geliştirme: Sıfırdan Başlayarak Özel Temalar Oluşturmak。

Tüm bu şablon dosyalarının temel özü “WordPress döngüsüdür”. Döngüler, veritabanından makale veya sayfa içeriklerini almak ve bunları web sayfasında göstermek için kullanılan PHP kod yapılarıdır. En temel döngü kodu aşağıdaki gibidir:

<article>
            <h2><?php the_title(); ?></h2>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>

Bu kod, koşullu ifadeler kullanmaktadır.have_posts()Mevcut sorgunun herhangi bir makale içerip içermediğini kontrol edin. Eğer varsa, ilgili sayfaya geçin.whileDöngü, çağrıthe_post()Mevcut makalenin verilerini ayarlamak için buraya gelin. Döngü içinde, makale bilgilerini görüntülemek için bir dizi Şablon Etiketi (Template Tag) kullanılabilir. Örneğin:the_title()Makale Başlığı:the_content()Makale içeriğini çevirmek için makalenin tam metnini sağlamanız gerekmektedir. Lütfen makalenin tüm bölümlerini veya ilgili bölümlerini buraya yazın.

Ana sorgu döngüsünün başına ve sonuna kod ekleyerek veya döngü içinde koşullu ifadeler kullanarak…is_home()、is_single()Farklı sayfa içeriklerini ayrıntılı bir şekilde özelleştirebilirsiniz.

hosting.com Paylaşımlı Barındırma

AMD EPYC CPU'lar, NVMe SSD depolama ve LiteSpeed ile yüksek performans, 7/24, 7x7 uzman şirket içi destek, SSL, kaba kuvvet, kötü amaçlı yazılım ve DDoS koruması dahil gelişmiş güvenlik önlemleri, 73%'ye kadar tasarruf

Sayfaya erişin.

Gelişmiş özellikler oluşturmak ve modern geliştirme uygulamalarını benimsemek

Temel şablonları ve döngüleri öğrendikten sonra, daha karmaşık temalı özelliklerin gerçekleştirilmesine başlayabilir ve bunların profesyonelliğini ve yeniden kullanılabilirliğini artırabilirsiniz.

Bir fonksiyon kullanarak temanın gelişmiş özelliklerini etkinleştirin.

在functions.phpDosyada, bunu şu şekilde yapabilirsiniz:add_theme_support()Bu fonksiyon, temanızın desteklediği özellikleri belirtmek için kullanılır. Bu, önemli bir adımdır; çünkü WordPress’e temanızın tasarımı sırasında bu özelliklerin göz önünde bulundurulduğunu bildirir. Örneğin, temanızın makale özel resimlerini desteklemesini sağlayabilirsiniz; böylece kullanıcılar makaleleri düzenlerken bir küçük resim ayarlayabilirler.

function mytheme_setup() {
    // 支持文章和页面的“特色图像”功能
    add_theme_support('post-thumbnails');
    // 支持HTML5的代码结构
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption'));
}
add_action('after_setup_theme', 'mytheme_setup');

Kayıt menüsü ve kenar çubuğu bölgesi

Profesyonel bir tema, kullanıcıların içeriği arka plan araçları ve menü arayüzleri aracılığıyla yönetebilmesine olanak tanımalıdır. Bunun için sizin…functions.phpBu bölgeleri sisteme kaydedin. Bir navigasyon menüsü kaydettikten sonra, kullanıcılar “Görünüm” -> “Menü” bölümünde menüleri oluşturabilir ve bu menüleri ilgili konumlara atayabilirler.

Tavsiye edilen okuma WordPress Tema Geliştirme Pratik Rehberi: Sıfırdan Başlayarak Profesyonel ve responsive (uyumlu mobil cihazlara) bir tema oluşturma。

// 注册一个导航菜单位置
register_nav_menus(array(
    'primary' => __('主菜单', 'my-theme-text-domain'),
));

// 注册一个侧边栏（小工具区域）
function mytheme_widgets_init() {
    register_sidebar(array(
        'name'          => __('主侧边栏', 'my-theme-text-domain'),
        'id'            => 'sidebar-1',
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ));
}
add_action('widgets_init', 'mytheme_widgets_init');

Stillerin ve betiklerin doğru bir şekilde dahil edilmesi

CSS ve JavaScript dosyalarını doğrudan şablon dosyalarına yazmak hem standartlara aykırıdır hem de bakımı zordur. Doğru yaklaşım, bu dosyaları şablon dosyalarından ayrı olarak tutmaktır.functions.phpÇince'de kullanılır.wp_enqueue_style()和wp_enqueue_script()Fonksiyonlar, güvenli bir şekilde sıraya koyularak kullanılır.

function mytheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('mytheme-style', get_stylesheet_uri());
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script('mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'mytheme_scripts');

Bu yöntem, dosyaların doğru şekilde yüklendiğinden emin olur, çakışmaları önler ve WordPress’in bağımlılık yönetimi ile önbellek mekanizmalarından yararlanılmasını sağlar.

InterServer Paylaşımlı Barındırma

Paylaşımlı hosting aylık $2.50 USD, ilk ay $0.1 USD promosyon kodu tryinterserver, 461 bulut uygulaması komut dosyası, tek tıklamayla yükleme.

Sayfaya erişin.

Özetle.

WordPress tema geliştirme, bir klasör oluşturmak ve temel şablon dosyalarını yazmaktan başlayarak, şablon yapılarını anlamaya, döngü mantığını kavramaya, daha sonra ileri seviye özellikler geliştirmeye ve en iyi uygulamalara uyum sağlamaya kadar ilerleyen sistematik bir süreçtir. Yerel bir ortam kurarak, şablon yapılarını öğrenerek, WordPress döngülerini kullanarak ve…functions.phpOrtadaki organizasyonel kod yapısı sayesinde, hatta yeni başlayanlar bile sıfırdan başlayarak işlevsel ve yapısal olarak bütünlüklü özel temalar oluşturabilirler. Önemli olan pratik yapmak ve “kod – önizleme – hata ayıklama” döngüsü içinde sürekli deneyim kazanarak bu beceriyi gerçekten öğrenmektir.

Sıkça Sorulan Sorular.

###: WordPress teması geliştirmek için PHP öğrenmek zorunda mıyım?
Evet, PHP, işlevsel bir WordPress teması geliştirmek için gerekli bir beceridir. Çünkü tüm WordPress şablon dosyaları ve çekirdek mantığı PHP ile yazılmıştır. Görünümü tasarlamak için sayfa oluşturucular kullanabilirsiniz; ancak bir temanın davranışlarını, veri sorgularını ve şablon yapısını derinlemesine özelleştirmek istiyorsanız, PHP kodunu anlamak ve yazabilmek şarttır. Ayrıca HTML, CSS ve temel JavaScript bilgisine sahip olmak da başarılı bir tema geliştirmek için önemli bir ön koşuldur.

`style.css` dosyasının bir konu (topic) ile ilgili özel bir işlevi nedir?

style.cssWordPress temalarında dosyalar çift rol oynar. İlk olarak, dosyanın en üstündeki yorum bloğu, bir temayı tanımlamak için WordPress’in kullandığı “kimlik kartıdır” ve temanın adını, yazarını, açıklamasını, sürüm numarasını ve diğer önemli meta verilerini içerir. Bu bilgiler olmadan, tema arka planda etkinleştirilemez. İkincisi ve en önemlisi, bu dosya temanın tüm stil kurallarını içeren ana stil şemasıdır. Temanınızın birden fazla CSS dosyası olsa bile, bu ana stil şeması tüm stil ayarlarını yönetir.style.cssVe başlık bilgileri hala mevcut olmalıdır.

Nasıl temamı çok dilli (uluslararasılaştırılmış) hale getirebilirim?

Bir temanın diğer dillere çevrilebilmesi için, geliştirme aşamasında uluslararasılaştırma (internationalization) işlemlerinin yapılması gerekmektedir. Önemli olan, kullanıcıya yönelik tüm metinleri WordPress’in sağladığı çeviri fonksiyonları ile sararak korumaktır. En yaygın olarak kullanılan fonksiyon şudur:()Çeviriyi geri göstermek için kullanılır, veesc_html()Kullanım amacı, karakterleri özel anlamlar için dönüştürmek ve ardından orijinal hallerini tekrar göstermektir. Aynı zamanda, bunu yapmak için bazı adımlar atmanız gerekecektir.functions.phpVeya ana dosyada kullanılır.load_theme_textdomain()Bu fonksiyon, çeviri dosyalarını yüklemek için kullanılır. Kod düzeyindeki hazırlıklar tamamlandıktan sonra, Poedit gibi araçlar kullanılarak çeviri dosyaları oluşturulabilir..potŞablon dosyası, çevirmenlerin farklı dillerde içerikler oluşturması için kullanılır..po和.moDosya.

Bir alt konu (subtopic) nedir ve neden buna ihtiyacım var?

Alt tema, başka bir temadan (ana tema olarak adlandırılır) tüm özellikleri ve stilleri miras alan bağımsız bir temadır. Mevcut bir temanın görünümünü ve işlevlerini, ana temanın orijinal dosyalarını doğrudan değiştirmeden güvenli bir şekilde değiştirmenize ve özelleştirmenize olanak tanır. Bunun en büyük avantajı, ana tema güvenlik güncellemeleri veya işlevsel yükseltmeler aldığında, ana temayı doğrudan güncelleyebilmenizdir; alt temada yaptığınız özelleştirmeler genellikle kaybolmaz veya üzerine yazılmaz. Bu, web sitesinin uzun vadeli istikrarını ve güvenliğini korumak için çok önemlidir. Bir alt tema oluşturmak için, standart başlık bilgilerini içeren bir dosyaya ihtiyacınız vardır.style.cssVe biriylefunctions.phpSadece dosyaya ihtiyacımız var.