WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan İlk Temanızı Oluşturun

Hazırlık İşlemleri ve Ortam Ayarları

Kod yazmaya başlamadan önce, uygun bir geliştirme ortamına ihtiyacınız var. Yerel geliştirme ortamı, çevrimiçi web sitesini etkilemeden test ve hata ayıklama işlemlerini yapmanıza olanak tanır. XAMPP, MAMP veya Local by Flywheel gibi entegre yazılım paketlerinin kullanılması önerilir; bu paketler Apache, MySQL/MariaDB ve PHP’yi tek tıklamayla kurmanızı sağlar.

PHP sürümünüzün 7.4 veya daha yüksek olduğundan emin olun; bu, WordPress’in resmi olarak önerdiği en düşük sürümdür. Ayrıca, Visual Studio Code, Sublime Text veya PHPStorm gibi bir kod editörüne ihtiyacınız var. Bu editörler, sözdizimi vurgulama ve kod ipuçları gibi özellikler sunarak geliştirme verimliliğinizi önemli ölçüde artırır.

WordPress temasının temel yapısını oluşturma

Bir WordPress teması, esasen bir… wp-content/themes/ Katalogdaki klasörler… Bu klasörün adı, temanızın tanımlayıcısı olacaktır. Küçük harfler, rakamlar ve tireler kullanmanızı öneririz; ayrıca boşluk bulunmamalıdır. Örneğin, “my_project” adında bir klasör oluşturabilirsiniz. my-first-theme Bu klasör…

Bu klasörde en az iki temel dosya bulunmalıdır:style.css 和 index.php。style.css Sadece bir stil şeması değil; asıl önemi, temanın meta bilgilerini sağlamasıdır. Bu bilgiler, WordPress arayüzündeki “Görünüm” -> “Temalar” sayfasında görüntülenir.

“Yazın konu bilgisi başlığını”

在 style.css Dosyanın en üst kısmına, konu bilgilerini tanımlamak için belirli bir yorum bloğu eklemeniz gerekiyor. İşte bir örnek:

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.

/*
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.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Bunlar arasında,Text Domain Uluslararasılaştırma (çok dilli destek) için kullanılır ve temanızın klasör adıyla aynı olmalıdır.index.php Bu dosya, temanın varsayılan şablon dosyasıdır ve tüm sayfalar için bir yedek şablon görevi görür. Başlangıçta, test amacıyla içine basit bir HTML yapısı yazabilirsiniz.

Çekirdek şablon dosyası ve şablon hiyerarşisi

WordPress, belirli bir sayfa isteği için hangi şablon dosyasının kullanılacağını belirlemek için “Şablon Yapısı” (Template Hierarchy) adında bir kural seti kullanır. Bu yapının anlaşılması, tema geliştirmenin temelini oluşturur. Temel prensip şudur: WordPress, en spesifik şablon dosyasından başlayarak arama yapar; bulamazsa daha genel bir şablon dosyasına geçer ve son olarak en genel şablon dosyasına ulaşır. index.php。

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kursu: Sıfırdan İlk Özel Temanızı Oluşturun。

Yaygın olarak kullanılan şablon dosyaları ve amaçları

• header.phpBir web sitesinin başlık bölümü genellikle bölge bilgilerini, site logosunu ve ana navigasyon öğelerini içerir.
• footer.phpBir web sitesinin alt kısmı genellikle telif hakkı bilgilerini, yardımcı bağlantıları ve diğer içerikleri içerir.
• sidebar.phpKenar çubuğu bölgesi.
• index.phpAna şablon, tüm sayfalar için nihai bir yedek kaynaktır.
• single.phpTek bir blog makalesini göstermek için kullanılır.
• page.phpBir sayfayı (örneğin “Hakkımızda”, “İletişim”) göstermek için kullanılır.
• archive.phpMakale arşiv listesini (kategoriler, etiketler, yazarlar, tarih arşivleri gibi) göstermek için kullanılır.
• front-page.phpWeb sitesinin ana sayfasını tanımlamak için kullanılır (eğer bir statik sayfa ana sayfa olarak ayarlanmışsa).
• home.phpBlog makalelerinin indeks sayfasını göstermek için kullanılır (eğer statik bir ana sayfa ayarlanmışsa, bu şablon en yeni makale listesini gösterir).
• 404.php“404 Bulunamadı” hata sayfasını göstermek için kullanılır.
• search.phpArama sonuçlarını göstermek için kullanılır.
• functions.phpBu bir şablon dosyası değil; temanın işlevsel dosyasıdır ve işlevlerin eklenmesi, menülerin ve kenar çubuklarının kaydedilmesi gibi işlemler için kullanılır.

Şablon etiketleri ve döngüler

Şablon dosyalarında sık sık “şablon etiketleri” kullanırsınız. Bunlar, WordPress tarafından sağlanan PHP fonksiyonlarıdır ve dinamik içerikleri (örneğin, sayfa içeriğini, menüleri, reklamları vb.) görüntülemek için kullanılır. bloginfo('name') Web sitesi başlığı:the_title() Makale Başlığı:

En temel kavram “WordPress döngüsüdür”. Bu, mevcut sayfada gösterilmesi gereken bir makale (veya makale listesi) olup olmadığını kontrol etmek ve bunları döngüsel olarak çıkarmak için kullanılan bir PHP kod yapısıdır. En temel döngü şu şekildedir:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
<?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

Konu özelliklerinin ve stillerinin entegrasyonu

functions.php Bu, temanızın “beyni”dir; şablon renderlemenin temel işlevleri dışındaki tüm özellikler buraya eklenmelidir. Bu dosya, tema başlatıldığında otomatik olarak yüklenir.

“Kayıtlı Konu” (Registered Topic) Özelliği

在 functions.php WordPress’te, çeşitli “kancalar” (Hooks) aracılığıyla (örneğin eylem kancaları ve filtre kancaları) işlevleri genişletebilirsiniz. Öncelikle, genellikle temanın belirli işlevleri desteklediğini belirtmeniz gerekir. Örneğin, makale özetlerinin (özel görsellerin) eklenmesi ve menü desteği için:

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.

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup WordPress’e monte edilen after_setup_theme Bu eylem kancasına dikkat edin; uygun zamanda çalıştığından emin olun.

Stil ve betikleri içe aktarma

Modern temalar, stil şablonlarını (CSS) ve JavaScript dosyalarını doğru bir şekilde kullanmalıdır. wp_enqueue_style() 和 wp_enqueue_script() Fonksiyonlar, doğrudan şablon dosyasında `` veya `%%>` etiketleri kullanılarak yazılmak yerine bir kuyruğa eklenir. Bunu yapmanın avantajları, bağımlılıkları yönetmek, tekrarlanan yüklemeleri önlemek ve WordPress’in en iyi uygulamalarına uymaktır.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

`get_stylesheet_uri()` fonksiyonu, sizin belirlediğiniz tema dosyasının konumunu göstermektedir. style.css `get_template_directory_uri()` fonksiyonu, mevcut temanın dizin URL’sini döndürür.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Kendi Özel Temanızı Oluşturun。

Sayfa düzenini ve şablon bileşenlerini oluşturma

Standart bir web sayfası genellikle bir başlık bölümü, ana içerik ve bir ayakçık bölümünden oluşur. WordPress, yeniden kullanılabilir parçaları ayrı dosyalara ayırmanızı ve bunları ana şablon içinde belirli fonksiyonlar aracılığıyla dahil etmenizi önerir.

Şablon bileşenlerini ayırma

Oluştur header.php、footer.php 和 sidebar.phpİçeride. header.php İçinde, tam `` bölümünü içermeniz ve bunu belirgin bir başlık konteyneri (örneğin `` etiketi) ile bitirmeniz gerekmektedir. footer.php Genellikle `` ve `` etiketleriyle sona erer.

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.

Tam sayfayı bir araya getirin.

Sayfa şablonlarında (örneğin…) index.php、single.phpBu belgede, bu bileşenleri dahil etmek için aşağıdaki fonksiyonları kullanabilirsiniz:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php Eğer dosya mevcut değilse, yüklenir. template-parts/content.phpBu, kodun yeniden kullanılabilirliğini ve sürdürülebilirliğini büyük ölçüde artırmıştır.

Özetle.

Sıfırdan bir WordPress teması oluşturmak, sistematik bir öğrenme sürecidir. Öncelikle doğru yerel geliştirme ortamını kurmanız ve temanın temel dosya yapısını anlamanız gerekmektedir. Asıl önemli nokta, WordPress’in şablon hiyerarşisini kavramaktır; çünkü bu, farklı içeriklerin nasıl renderleneceğini belirler. functions.php Dosyalar üzerinde çalışarak, temalara güçlü özellikler ve işlevler ekleyebilir ve stil ile betikleri yönetmek için en iyi uygulamalara uyabilirsiniz. Son olarak, sayfayı başlık, alt bilgi, kenar çubuğu gibi şablon bileşenlerine ayırıp WordPress’in sunduğu fonksiyonları kullanarak bunları bir araya getirerek yapısal olarak berrak ve bakımı kolay bir tema kodu oluşturabilirsiniz. Bu adımları izleyerek sadece ilk temanızı oluşturmakla kalmaz, aynı zamanda daha karmaşık ve profesyonel projeler geliştirmek için de sağlam bir temel atarsınız.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kursu: Sıfırdan İlk Özel Temanızı Oluşturun。

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için PHP bilmek zorunda mıyım?

Evet, PHP, WordPress’in temel programlama dilidir. Temaların şablon dosyaları (örneğin…) index.php、page.php) ve işlevsel dosyalar (functions.phpHepsi PHP dosyalarıdır. WordPress’taki verileri dinamik olarak görüntüleyebilmek ve üzerinde işlem yapabilmek için PHP’nin temel sözdizimini, koşullu ifadeleri, döngüleri ve fonksiyonları kullanmayı öğrenmeniz gerekmektedir.

Konu geliştirme sürecinde, `page.php` ve `front-page.php` arasında ne gibi farklar vardır?

page.php WordPress’te oluşturulan tekil “sayfaların” (Page) renderlanması için kullanılır; örneğin “Hakkımızda”, “İletişim Bilgileri” gibi. front-page.php Bu, web sitesinin “ana sayfasını” renderlamak için özel olarak tasarlanmış bir şablondur. WordPress arayüzündeki “Ayarlar” -> “Okuma” bölümünde, “Statik bir sayfa” seçeneğini seçerseniz ve “Ana Sayfa”yı belirli bir sayfa olarak ayarlarsanız, WordPress bu sayfayı öncelikli olarak kullanacaktır. front-page.php Bu sayfayı göstermek için… Eğer… front-page.php Eğer mevcut değilse, o zaman kullanılacaktır. page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

Kullanın. wp_enqueue_style() Bu, WordPress tarafından resmi olarak önerilen bir yöntemdir. Bu yöntem, aynı dosyaya birden fazla eklenti veya tema tarafından atıfta bulunulduğunda bile stil şablonlarının yalnızca bir kez yüklenmesini sağlar. Stil şablonlarının bağımlılıklarını (örneğin, stilinizin belirli bir temel çerçeveye bağlı olması gibi) kolayca yönetmenizi sağlar. Ayrıca, önbellekle ve eklentilerle daha iyi uyum sağlar ve alt temaların üst temanın stillerini kolayca değiştirmesine olanak tanır.

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

Bir temanın çok dilli olmasını sağlamak esas olarak iki adımdan oluşur. İlk olarak, temanın tüm metin dizelerinde WordPress’in çeviri fonksiyonlarını kullanmak gerekir. ()、_e() 或 esc_html()Ve bunlar için belirli konumları belirtin. style.css Çin'de tanımlanan. Text DomainÖrneğin:_e( 'Hello World', 'my-first-theme' )İkincisi, Poedit gibi araçları kullanarak temanızın kodunu tarayın ve bir rapor oluşturun. .pot Şablon dosyaları; çevirmenler, bu dosyalara dayanarak farklı dillerde içerikler oluşturabilirler. .po Ve derlenen .mo Dosya: Dil dosyalarını temanın içine koyun. /languages/ Katalogda, WordPress web sitesinin dil ayarlarına göre ilgili çevirileri otomatik olarak yükler.