WordPress tema geliştirme rehberi: Profesyonel bir web sitesi oluşturmanın tam süreci sıfırdan.

Geliştirme Ortamı ve Temel Kavramlar

Kod yazmaya başlamadan önce, verimli bir yerel geliştirme ortamı oluşturmak son derece önemlidir. Bu genellikle XAMPP, MAMP veya Local by Flywheel gibi yerel sunucu yazılımlarının; VS Code veya PHPStorm gibi bir kod editörünün; ve Git gibi bir sürüm kontrol sisteminin kurulmasını içerir. Yerel ortam, çevrimiçi web sitesini etkilemeden güvenli bir şekilde testler ve iterasyonlar yapmanıza olanak tanır.

WordPress temalarının dizin yapısını anlamak temeldir. Standart bir tema klasörü genellikle aşağıdaki konumlarda bulunur:/wp-content/themes/your-theme-name/Bunlar arasında, mutlaka bulunması gereken birkaç temel dosya vardır:style.css和index.php。style.cssSadece stiller sağlamakla kalmaz; aynı zamanda dosya başlığındaki yorumlar, temanın meta verilerini de tanımlar (tema adı, yazar, açıklama ve sürüm gibi). Bu, WordPress’in bir temayı tanımasında kritik bir rol oynar.

Başka bir temel kavram “şablon seviyeleridir”. WordPress, kullanıcıların ziyaret ettiği sayfa türüne (örneğin ana sayfa, makale sayfası, özel sayfa, kategori arşiv sayfası) göre otomatik olarak ilgili şablon dosyasını seçer ve sayfayı bu şablon kullanarak oluşturur. Örneğin, bir blog makalesine erişildiğinde, WordPress sırayla ilgili şablonları arar.single-post.php、single.phpSon olarak,index.phpBu hiyerarşik ilişkiyi anlamak, doğru kodu doğru yerde yazmanıza yardımcı olur.

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

Temel tema dosyasını oluşturun.

Öncelikle, tema dizininizde en temel iki dosyayı oluşturun:style.css和index.php。style.cssDosyanın başlığı belirli yorum bilgilerini içermelidir.

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: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

index.phpBu, temanızın varsayılan şablon dosyasıdır. En basit versiyonu, yalnızca WordPress başlık dosyasını, ana döngüyü ve son kısmı içerebilir.

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article>
            <h2><?php the_title(); ?></h2>
            <div><?php the_content(); ?></div>
        </article>
    <?php endwhile; endif; ?>
</main>

Bunun içinindex.phpNormal olarak çalışıyor; ancak bunun için referans verdiği diğer şablon bileşenlerini oluşturmanız gerekiyor.header.php、sidebar.php和footer.php。header.phpGenellikle bir HTML belgesinin başlığını içerir…wp_head()Kancalı (hook-based) çağrılar ve web sitesinin navigasyon menüsü.footer.phpO zaman sayfa yapısını kapatın ve çağırın.wp_footer()Kanca.

Ana döngüyü ve şablon etiketlerini anlamak

Yukarıdakiindex.phpÖrnekte,if ( have_posts() ) : while ( have_posts() ) : the_post(); Bu kod, WordPress’in “ana döngüsüdür”. Temanın çekirdeğini oluşturur ve mevcut sayfadaki makale listesini veya tek bir makaleyi gezerek görüntüler.

Döngü içinde, içeriği çıkarmak için bir dizi “şablon etiketi” kullandık. Örneğin…the_title()和the_content()Bunlar, WordPress’in yerleşik PHP fonksiyonlarıdır ve döngüler içinde makale verilerini güvenli bir şekilde görüntülemek için özel olarak tasarlanmıştır. Diğer yaygın olarak kullanılan şablon etiketleri arasında şunlar da bulunmaktadır:the_permalink()、the_excerpt()、the_post_thumbnail()和the_author()vs.

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Başlangıçtan Özelleştirilmiş Uygulamalara。

Temaların özelliklerini ve stillerini geliştirin.

Temel bir tema çerçevesi oluşturulduktan sonra, bir sonraki adım onun işlevlerini ve görsel görünümünü geliştirmektir. Bu, betiklerin ve stillerin eklenmesini, menülerin ve kenar çubuğu araç bölgelerinin oluşturulmasını, ayrıca özel görsel desteğinin eklenmesini içerir.

Öncelikle, bunu başarmak için şu adımları izlemeniz gerekiyor:functions.phpBu özellikleri güvenli bir şekilde eklemek için, temanın kök dizininde bir dosya oluşturun.functions.phpKonu başlatıldığında otomatik olarak yüklenir.

Güvenli bir şekilde betiklerin ve stillerin dahil edilmesi

Asla şablon dosyalarında CSS veya JavaScript dosyalarına doğrudan bağlantı (hard link) eklemeyin. Doğru yöntem, bu dosyaları şablon dosyalarına içerik olarak dahil etmektir.wp_enqueue_scriptsKanca.

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_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入自定义的CSS文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 引入导航菜单的JavaScript文件（依赖jQuery）
    wp_enqueue_script( 'navigation-script', get_template_directory_uri() . '/assets/js/navigation.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

Kayıtlı konuların desteklediği özellikler:

WordPress’in birçok özelliği, temanın bu özellikleri açıkça desteklediğini belirtmesini gerektirir. Bu, temanın kodlarında ilgili ayarların bulunmasıyla sağlanır.add_theme_support()Fonksiyonun uygulanması.

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

// 支持自定义Logo
    add_theme_support( 'custom-logo' );

// 支持在文章编辑器中使用的HTML5标签
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 注册一个主导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

Aynı şekilde, kullanıcıların arka planda dinamik olarak içerik eklemesine izin vermek için kenar çubuğu araçları bölgesini de kaydetmeniz gerekiyor.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具', 'my-first-theme' ),
        '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', 'my_first_theme_widgets_init' );

Özel sayfa şablonları ve şablon bileşenleri oluşturma

Konu özelliklerinin artmasıyla birlikte, farklı sayfaların ihtiyaçlarını karşılamak için daha spesifik şablon dosyaları oluşturmanız gerekecektir.

Tavsiye edilen okuma WordPress tema geliştirme uygulaması: Sıfırdan profesyonel düzeyde bir web sitesi teması oluşturma。

Özel sayfa şablonları oluşturma

Sayfa şablonları, belirli bir sayfaya özgü bir düzen oluşturmanıza olanak tanır. Şimdi, bir şablon oluşturun…Template Name:Başlangıç için bir PHP dosyası yeterlidir. Örneğin, tam genişlikte bir sayfa şablonu oluşturabilirsiniz.template-fullwidth.php。

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的页面模板
 */
get_header(); ?>
<main class="full-width">
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h1><?php the_title(); ?></h1>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <?php endwhile; ?>
</main>
<?php get_footer(); ?>

Oluşturulduktan sonra, WordPress arayüzünün arka planında sayfayı düzenlerken, “Sayfa Özellikleri” bölümündeki “Şablon” açılır menüsünden “Tam Genişlikli Sayfa Şablonu”nu seçebilirsiniz.

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.

Kodu şablon bileşenleri kullanarak düzenleyin.

Birden fazla şablonda tekrar tekrar kullanılan kod blokları (örneğin makale özetleri, yorum listeleri) “şablon bileşenleri” olarak ayırılabilir.get_template_part()Fonksiyonlar, bunları çağırmak için kullanılır. Örneğin, bir tane oluşturun.template-parts/content.phpBu dosya, makalelerin çıktı formatını standartlaştırmak için kullanılır.

在index.phpBurada, döngüyü şu ile değiştirebilirsiniz:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'template-parts/content', get_post_format() ); ?>
<?php endwhile; endif; ?>

WordPress öncelikle yüklemeyi deneyecektir.template-parts/content-{post-format}.php(Örneğin)content-gallery.phpEğer bulunamazsa, varsayılan değer 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ı geliştirmek, sistematik bir iştir ve geliştiricilerin sadece PHP, HTML, CSS ve JavaScript bilgisine sahip olmalarını değil, aynı zamanda WordPress’in temel yapısını da derinlemesine anlamalarını gerektirir; örneğin şablon hiyerarşisi, ana döngü ve eklenti sistemi gibi konuları. Süreç, yerel bir ortam kurmak ve temel dosyalar oluşturmakla başlar; ardından işlevlerin geliştirilmesi ve stil düzenlemeleriyle devam eder ve son olarak özelleştirilmiş şablonlar ve bileşenler aracılığıyla esnek ve profesyonel bir tasarım elde edilir. En iyi uygulamalara uyulması önemlidir; örneğin, kodun okunabilirliğini ve bakımını kolaylaştırmak için belirli yapılar ve standartlar kullanılmalıdır.functions.phpİşlevler eklemek, bunları güvenli bir şekilde betiklere ve stillere entegre etmek, stabil, verimli ve kolayca sürdürülebilen temalar oluşturmanın anahtarıdır. Bu kılavuzdaki adımları uygulayarak sağlam bir tema geliştirme temeli oluşturacaksınız ve bu temel üzerine daha gelişmiş tema özelleştirme özelliklerini keşfetmeye devam edebileceksiniz.

Sıkça Sorulan Sorular.

Konu geliştirme (theme development) için hangi programlama dillerinin bilinmesi gerekiyor?

WordPress temalarının geliştirilmesinde kullanılan temel dil PHP’dır; çünkü WordPress kendisi PHP ile yazılmıştır. Döngüler, fonksiyonlar ve koşullu mantığı anlayabilmek için sağlam bir PHP bilgisine sahip olmanız gerekir.

Aynı zamanda, sayfaların yapısını ve stilini oluşturmak için HTML ve CSS konularında uzman olmanız gerekmektedir. JavaScript (özellikle temel jQuery ve modern yerel JS veya Vue/React gibi çerçeveler), ön uç etkileşimlerini ve dinamik efektleri gerçekleştirmek için gerekli becerilerdir. SQL hakkında temel bilgilere sahip olmak da WordPress’in veri sorgulamalarını anlamanıza yardımcı olacaktır.

Nasıl temamı WordPress resmi standartlarına uygun hale getirebilirim?

WordPress’in resmi “Tema Geliştirme Kılavuzu”nu ve “Kodlama Standartlarını” takip etmek en önemli ilkedir. Bu, WordPress tarafından sağlanan fonksiyonların ve eklentilerin (hook’ların) doğru kullanılmasını, temanın güvenliğinin sağlanmasını (veri doğrulama, kod dönüştürme, çapraz sitelik betik saldırılarına karşı koruma gibi), duyarlı (responsive) tasarımın uygulanmasını, erişilebilirliğin garanti altına alınmasını ve ön uç performansının iyileştirilmesini içerir.

Önemli bir uygulama, temanızın resmi “Tema Denetimi” eklentisi ile test edilmesidir. Bu eklenti, temanızın standartlara uygunluğu, güvenliği, performansı gibi konularda olası sorunları ayrıntılı bir şekilde listeleyecektir.

Çocuk Tema (Child Theme) nedir? Ne zaman ihtiyacım olur?

Alt konu, başka bir konuya (ana konuya) bağlı olarak var olan bir konudur. Ana konunun dosyalarını doğrudan düzenlemeye gerek kalmadan, ana konunun işlevlerini ve stillerini değiştirmenize veya genişletmenize olanak tanır.

Bir mevcut temaya (örneğin popüler bir iş temasına) özelleştirilmiş değişiklikler yapmanız gerektiğinde, alt temaları kullanmanız gerekir. Bu, üst teman güncellendiğinde yaptığınız özelleştirmelerin silinmemesini sağlar. Bir alt tema oluşturmak için yalnızca belirli başlık bilgilerini içeren bir dosya yeterlidir.style.cssDosya ve bir tane daha…functions.phpDosya.

Tema geliştirme sırasında karşılaştığım PHP hatalarını nasıl ayıklayabilirim?

Öncelikle, yerel geliştirme ortamınızda her şeyin doğru şekilde ayarlandığından emin olun.wp-config.phpDosyada WordPress’in hata ayıklama (debugging) modu etkinleştirilmiştir.define( 'WP_DEBUG', true );Bu kod satırı şu şekilde ayarlanmıştır:trueAynı zamanda birden fazla ayarı da belirleyebilirsiniz.define( 'WP_DEBUG_LOG', true );Bu şekilde hata günlükleri şu yere yazılacaktır:/wp-content/debug.logDosya içinde bulunur ve doğrudan sayfada görüntülenmez; bu da kullanıcıları etkilemez.

Ayrıca, tarayıcının geliştirici araçlarını (F12 tuşuna basarak) kullanarak ön uçtaki JavaScript hatalarını, ağ isteklerini ve CSS sorunlarını kontrol etmek, hata ayıklama sürecinin vazgeçilmez bir parçasıdır.