WordPress tema geliştirmeye hızlı bir şekilde aşina olun: Başlangıçtan uygulamaya kadar kapsamlı bir rehber.

WordPress temaları, bir web sitesinin görünümü ve işlevlerinin temelini oluşturur. Kendi temalarınızı geliştirerek, hazır temaların sınırlamalarından kurtulabilir ve tamamen özelleştirilmiş bir web sitesi tasarımı oluşturabilirsiniz; aynı zamanda bu süreçte WordPress’in temel yapısını daha iyi anlayabilirsiniz. Bu makale, temel kavramlardan pratik geliştirmeye kadar, WordPress temaları geliştirmenin inceliklerini sistematik bir şekilde öğrenmeniz için net bir yol sunmayı amaçlamaktadır.

WordPress Tema Geliştirme Temelleri

Bir WordPress temasını başarıyla geliştirmek istiyorsanız, öncelikle temanın temel yapısını ve temel kavramlarını anlamanız gerekir. Bir tema esasen, WordPress sitesinin görünümünü ve işlevselliğini belirleyen bir dosya koleksiyonudur. Temanın temel yapıları şunları içerir: /wp-content/themes/ Katalog altındaki klasörler, belirli bir dizi dosya içermektedir.

Konunun temel belgelerinin oluşumu.

Her WordPress temasının bazı temel dosyalara sahip olması gerekir. Bunlar arasında en önemlileri iki tanedir: style.css 和 index.php。

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Acemiden Uzman’a Kadar Tam Bir Pratik Eğitim Kitabı。

style.css Sadece bir stil şeması değil; aynı zamanda bir temanın “kimlik kartı”dır. Dosyanın en üstündeki yorum bloğu, temanla ilgili bilgileri belirtmek için kullanılır ve bu, WordPress’in temayı tanımasının anahtarıdır.

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: 我的第一个主题
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
*/

index.php Bu, şablon hiyerarşisindeki varsayılan yedek dosyadır. Eğer daha spesifik şablon dosyaları mevcutsa (örneğin…) single.phpEğer bu dosya mevcut değilse, WordPress otomatik olarak eski sürümü kullanmaya geri döner. Bu dosya, tüm temanın görünüm mantığının başlangıç noktasıdır.

Şablon hiyerarşisini ve şablon dosyalarını anlamak

WordPress, farklı sayfa isteklerine hangi şablon dosyasının kullanılacağını belirlemek için bir şablon hiyerarşisi sistemi kullanır. Örneğin, bir kullanıcı bir blog makalesine eriştiğinde, WordPress sırasıyla şunları arar:single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.phpBu hiyerarşik ilişkiyi anlamak, sayfa görünümünü hassas bir şekilde kontrol etmek için hangi dosyaların hangi konumlarda oluşturulması gerektiğini bilmek açısından çok önemlidir.

Konu fonksiyonu dosyasının amacı

functions.php Bu, temanın “beyni”dir. Kullanıcılara doğrudan gösterilen bir şablon değil; tema başlatıldığında otomatik olarak yüklenen bir PHP dosyasıdır. Buraya tema desteği özellikleri ekleyebilir, menüler ve kenar çubuklarını tanımlayabilir, betik ve stil dosyalarını dahil edebilir ve çeşitli özel fonksiyonlar tanımlayabilirsiniz.

Konu modeli dosyalarının geliştirilmesinde uygulamalı çalışma.

Temel yapıyı anladıktan sonra, modern WordPress geliştirme standartlarına uygun bir temel tema oluşturmaya başlayabiliriz. İlk olarak bir düzen (layout) oluşturarak ve WordPress’in temel fonksiyonlarını entegre ederek işe başlayacağız.

Tavsiye edilen okuma Sıfırdan Başlayarak: Bir Arama Motoruna Dost Profesyonel WordPress Teması Oluşturma。

Temel bir tema çerçevesi oluşturma

Öncelikle, senin için /wp-content/themes/ Bir dizin altında yeni bir klasör oluşturun, örneğin: mythemeArdından yukarıda bahsedilenleri oluşturun. style.css 和 index.php Dosya. index.php Burada, başlık bölümü, içerik alanı ve alt kısmı almak için WordPress’in temel fonksiyonlarını kullanıyoruz.

Bir basit index.php Başlangıç yapısı şu şekilde yazılabilir:

<?php get_header(); ?>

<main id="main-content">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出将在这里
            the_content();
        endwhile;
    else :
        echo &#039;<p>没有找到任何内容。</p>';
    endif;
    ?&gt;
</main>

<?php get_footer(); ?>

Bu kod bir şeyi çağırdı. get_header() 和 get_footer() Bu, ilgili fonksiyonları oluşturmamız gerektiği anlamına gelir. header.php 和 footer.php Dosyaları kullanarak web sitesinin genel başlık (header) ve alt kısım (footer) bölümlerini ayırın; bu sayede kodları tekrar kullanabilirsiniz.

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.

Başlık ve alt bilgi (footer) dosyaları oluşturun.

在 header.php İçinde, HTML belgenin başlangıç kısmını, gerekli meta etiketlerini, stil dosyalarını içermeniz ve WordPress’in temel fonksiyonlarını çağırmanız gerekmektedir. wp_head()。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
<?php wp_body_open(); ?>
<header id="site-header">
    <h1><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <p><?php bloginfo( 'description' ); ?></p>
</header>

footer.php Bu durumda genellikle sayfa altı (footer) içeriği bulunur ve ilgili işlemler (fonksiyonlar) çağrılır. wp_footer() Bu, birçok eklentinin ve WordPress çekirdek betiklerinin yüklenmesi için gereken bir “hook” (düğüm/bağlantı noktası)dır.

Navigasyon menüsü ve yan çubuğu uygulamak

Bir web sitesinin tamamlanması için bir navigasyon menüsü gereklidir. Öncelikle, functions.php Çince'de kullanılır. register_nav_menus() Fonksiyon kaydı menüsü konumu.

Tavsiye edilen okuma Sıfırdan profesyonel bir WordPress teması nasıl oluşturulur: Tam Geliştirme Kılavuzu。

function mytheme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'mytheme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Sonra, header.php Uygun yerde kullanın. wp_nav_menu() Bu menüyü göstermek için bir fonksiyon kullanılır.

Kenar çubuğundaki (araç çubuğu) kayıt işlemi de benzer şekilde gerçekleştirilir; yani aynı adımları izleyerek kayıt olabilirsiniz. register_sidebar() Fonksiyonun uygulanması ve şablon dosyasında kullanılması. dynamic_sidebar() Çağırmak için kullanılır.

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.

Konu özelliklerinin ve stillerinin geliştirilmesi

Temel sayfa doğru bir şekilde görüntülendikten sonra, bir sonraki adım temanın işlevselliğini ve özelleştirme yeteneklerini artırmaktır; böylece daha profesyonel ve kullanımı daha kolay hale gelir.

Konu (tema) özelliğinin desteğini ekleyin.

Modern WordPress temalarının, belirli özelliklere olan desteklerini açıkça belirtmeleri gerekmektedir. Örneğin, özel görselleri (makale özet resimleri) kullanabilmek için bunu temanın ayarlarında belirtmeniz gerekir. functions.php Metne “tema desteği” ile ilgili bir ifade ekleyin.

add_theme_support( 'post-thumbnails' );
// 还可以添加其他支持，如自定义Logo、标题标签等
add_theme_support( 'title-tag' );
add_theme_support( 'custom-logo' );

Doğru şekilde yüklü olan betikler ve stiller…

En iyi performans uygulamaları ve çakışmaları önlemek için, şablon dosyalarında asla doğrudan kullanmayın. <link> 或 <script> Etiketler, kaynakları içeriye dahil etmek için kullanılır. wp_enqueue_style() 和 wp_enqueue_script() Fonksiyon ve bunun aracılığıyla… wp_enqueue_scripts Kancalar, yüklemek için 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' );

Makale listesini döngü kullanarak gösterin.

“Döngü” (loop), WordPress’ta veritabanından makaleleri alıp görüntülemek için kullanılan temel bir mekanizmadır. Ana sayfada veya arşiv sayfalarında genellikle bir makale listesi göstermemiz gerekmektedir. Bu, şablon dosyalarında (örneğin…) belirli kodlar yazarak sağlanır. home.php 或 archive.phpDöngüyü, `for` veya `while` gibi döngü yapıları kullanarak oluşturabilirsiniz ve `function` (fonksiyon) gibi nesneleri de bu döngüler içinde kullanabilirsiniz. the_title()、the_excerpt()、the_permalink() Aşağıda, her makalenin başlığı, özeti ve bağlantısı yer almaktadır:

İleri Seviye Tema Geliştirme Teknikleri

Temelleri öğrendikten sonra, bazı ileri düzey teknikler temanızın daha rekabetçi ve sürdürülebilir olmasını sağlayabilir.

Özel sayfa şablonu oluşturun.

Sayfa şablonları, belirli bir sayfaya özgü bir düzen oluşturmanıza olanak tanır. Örneğin, “tam genişlikli sayfa” şablonu oluşturabilirsiniz. Bunu yapmak için, bir PHP dosyasının en üstüne belirli bir biçimde yorum eklemeniz yeterlidir; böylece bu şablon sayfa şablonu olarak kaydedilir.

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板
 */
get_header(); ?>
// ... 自定义的页面结构，不使用 get_sidebar() ...
<?php get_footer(); ?>

Daha sonra WordPress arayüzünün arka planında sayfa düzenleme sayfasına girdiğinizde, “Sayfa Özellikleri” bölümünden bu şablonu seçebilirsiniz.

Alt konu mekanizmasını gerçekleştirme

Eğer mevcut bir temayı (özellikle de bir üst temayı) değiştirmek istiyorsanız, en iyi uygulama bir alt tema oluşturmaktır. Alt tema yalnızca özelleştirilmiş içerikleri içerir. style.css Gerekli şablon dosyalarıyla birlikte, ebeveyn temanın tüm özelliklerini devralacaktır. Alt temanınızda… style.css Çin'de, kullanılır. Template: Bir üst konunun klasör adını belirtmek için bir bildirim kullanın. Bu, üst konu güncellendiğinde özelleştirdiğiniz değişikliklerin silinmemesini sağlar.

WordPress kodlama standartlarına uyun.

Kodun netliği ve sürdürülebilirliği için, WordPress tarafından belirlenen PHP, CSS ve JavaScript kodlama standartlarına uymanız önerilir. Bu, doğru girintilerin kullanılmasını, parantezlerin doğru yerlerde olmasını, isimlendirme kurallarına (fonksiyonlar ve değişkenler için küçük harfler ve alt çizgilerin kullanılması) uyulmasını içerir. WordPress’in resmi temalarından biri olan Twenty Twenty-Four gibi temaların yapısını referans olarak kullanmak iyi bir alışkanlıktır.

Özetle.

WordPress tema geliştirme, temel dosya yapısını anlamaktan başlayarak, şablon seviyelerine, fonksiyon entegrasyonlarına ve özelleştirilmiş özelliklere doğru adım adım ilerlenen bir süreçtir. Sistematik bir yaklaşımla yapılan çalışmalar sayesinde… header.php、footer.php、functions.php Önemli dosyaları bekleyin ve döngüler, hook fonksiyonları ile tema destek özelliklerini kullanarak, geliştiriciler tam özellikli ve kod standartlarına uygun profesyonel temalar oluşturabilirler. Önemli olan pratik yapmaktır; en basit tema şablonundan başlayarak işlevleri kademeli olarak ekleyin ve sonunda projenizin ihtiyaçlarına tam olarak uygun özelleştirilmiş bir WordPress teması oluşturabileceksiniz.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için hangi ön koşul bilgilerine ihtiyaç vardır?

HTML ve CSS temellerine sahip olmanız, sayfa yapılarını ve stillerini oluşturmak için gereklidir. Ayrıca, WordPress’ün çekirdeği ve şablon dosyalarının PHP ile yazılmış olması nedeniyle PHP temellerine de hakim olmanız şarttır. JavaScript konusunda temel bilgilere sahip olmak, ön uç etkileşim özelliklerini geliştirmenize yardımcı olacaktır.

WordPress için hangi tema dosyaları gereklidir?

WordPress tarafından tanınabilen en temel temalardan biri, yalnızca iki dosya gerektirir:style.css(Doğru konu bilgilerini içeren açıklama başlığı ile birlikte) ve index.phpAncak, pratik ve işlevsel bir tema genellikle ayrıca şunları da içerir: functions.php、header.php、footer.php çok page.php、single.php Dahil olan şablon dosyaları…

Kendi temama menü özelliği nasıl eklerim?

Öncelikle, konunun üzerinde çalışmanız gerekir. functions.php Dosyada kullanılan register_nav_menus() Bir veya daha fazla yemek ünitesi konumunu kaydetmek için bir fonksiyon kullanılır. Daha sonra, ilgili şablon dosyasında (örneğin…) header.phpİçerikte, kullanılmaktadır. wp_nav_menu() Bir fonksiyon kullanarak menüyü oluşturun ve menünün görüntüleneceği yeri belirtin. Daha sonra, kullanıcılar WordPress arayüzündeki “Görünüm -> Menüler” bölümünde menüyü oluşturup belirlenen yere atayabilirler.

Alt konu (subtopic) ve üst konu (parent topic) arasındaki fark nedir?

Bir “ana konu” (parent topic), tam ve bağımsız bir işlevsel konudur. Bir “alt konu” (subtopic) ise belirli bir ana konuya bağlıdır ve yalnızca değiştirmek veya eklemek istediğiniz dosyaları içerir. style.cssKapsanan şablon dosyaları… Alt tema etkinleştirildiğinde, öncelikle kendi dosyaları yüklenir; sağlanmayan dosyalar ise üst temadan çağrılır. Alt temaları kullanmak, mevcut temaları güvenli bir şekilde özelleştirmek ve değiştirmek için önerilen bir yöntemdir; bu sayede üst tema güncellendiğinde özelleştirilmiş kısımların korunması sağlanır.

Bir makale listesine “Daha Fazla Oku” bağlantısı nasıl eklenir?

Makale döngüsü sırasında, kullanırken… the_excerpt() WordPress, bir fonksiyonun özetini çıkardığında, metnin tamamına yönlendiren bir “Daha Fazla Oku” bağlantısı otomatik olarak oluşturur. Eğer bunu kullanmak istiyorsanız… the_content() Kesme noktasını manuel olarak kontrol etmek için, makale düzenleyicisine “Daha Fazla” etiketini ekleyebilir veya şablonlarda bunu kullanabilirsiniz. the_content( ‘继续阅读’ ) Fonksiyonun parametresi, özelleştirilmiş bağlantı metnidir.