WordPress Tema Geliştirme Pratik Eğitimi: Sıfırdan Modern, Yanıt Veren Bir Tema Oluşturma

Hazırlık İşlemleri ve Ortam Kurulumu

Bir WordPress tema geliştirme projesine başlamak için öncelikle uygun bir çalışma ortamı ayarlamak gerekmektedir. Bu, yalnızca yerel bir geliştirme sunucusu kurmayı içermekle kalmaz; aynı zamanda net bir proje dizin yapısı oluşturmayı ve modern geliştirme araçlarını kullanmayı da gerektirir.

Yerel geliştirme ortamının kurulması için birçok seçenek bulunmaktadır. XAMPP, MAMP veya Local by Flywheel gibi entegre yazılım paketlerini kullanabilirsiniz; bu paketler Apache, MySQL ve PHP’yi yerel bilgisayarınıza hızlı bir şekilde kurmanıza olanak tanır. Üretim ortamına daha yakın bir deneyim için Docker konteynerlerini düşünebilirsiniz. Ayrıca, neredeyse tüm modern tema geliştirmeleri, VS Code gibi temel bir kod editörüyle başlar ve kodlama verimliliğini artırmak için gerekli eklentilerle birlikte kullanılır.

Standart ve net bir tema dizini yapısı, bir projenin sürdürülebilirliğinin temel taşıdır. WordPress’te…wp-content/themesDizin içinde, konu adınızla adlandırılmış bir klasör oluşturun, örneğin…my-modern-themeBu klasör içinde, iki temel dosya oluşturmanız gerekiyor:style.css和index.phpBunlar arasında,style.cssSadece stil şablonları değil, aynı zamanda temanın meta veri bilgilerini de içeriyorlar. Diğer dosyalar ve klasörler ise JavaScript betiklerinin saklanması için kullanılıyor./jsŞablon bileşenlerinin saklandığı/template-partsSayfa şablonlarının saklandığı yer./page-templatesBunlar gibi şeyler, geliştirme süreci boyunca kademeli olarak oluşturulabilir.

Tavsiye edilen okuma Tailwind CSS Kılavuzu: Başlangıçtan Uzmanlığa Kadar Pratik Teknikler。

Konu stil şablonu başlık bilgileri

Konununstyle.cssDosya başlığında, WordPress sisteminize temanız hakkında bilgi veren, standart bir biçime sahip bir yorum bulunmalıdır. Bu bilgi çok önemlidir; temanın adını, yazarını, açıklamasını, sürümünü vb. tanımlar.

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 Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个从零开始构建的现代、响应式WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-modern-theme
*/

Bunların arasındaText DomainUluslararasılaştırma amacıyla kullanılır; bu alan, sonraki çeviri işlemleri için metin verisi olarak kullanılacaktır. Bu bilgileri doğru bir şekilde tanımladıktan sonra, temanız WordPress arayüzündeki “Görünüm” -> “Temalar” listesinde görünecektir.

Çekirdek fonksiyon dosyalarını içe aktarın.

Her ne kadarindex.php和style.cssBir konunun tanınmasını sağlayacak yeterlilikte olmalı, ancak tam özelliklere sahip bir konu ayrıca şunları da içermelidir:functions.phpBu dosya, içeriği doğrudan çıkarmak için kullanılmaz; bunun yerine bir temanın “işlevsel motoru” olarak görev yapar. Tema desteğini eklemek, menüler ve kenar çubuklarını oluşturmak, ayrıca stilleri ve betikleri içermek için kullanılır.

Konu dizininin kök klasöründe oluşturun.functions.phpDosya. Başlangıç aşamasında, içine bazı temel işlev desteği ekleyebiliriz. Bunu şu yolla yapabilirsiniz:add_theme_support()Bu fonksiyon, bir temanın desteklediği özellikleri belirtmek için kullanılır; örneğin makale özet resimleri (Featured Image), özelleştirilmiş logolar, HTML5 işaretlemeleri vb.

Çekirdek şablon dosyasını oluşturun.

WordPress, farklı türdeki içeriklerin nasıl görüntüleneceğini belirlemek için bir şablon hiyerarşisi sistemi kullanır. Bu temel şablon dosyalarını anlamak ve oluşturmak, tasarımınızı dinamik bir web sitesine dönüştürmenin anahtarıdır.

Tavsiye edilen okuma Modern Web Sitesi Yapımının Kapsamlı Analizi: Planlamadan Yayına Kadar Tam Bir Uygulama Rehberi。

En temel şablon dosyasıdır.index.phpBu, tüm sayfalar için kullanılan nihai geri dönüş (veya başlangıç) şablonudur. Ancak daha ayrıntılı bir kontrol sağlamak için daha spesifik şablonlar oluşturmalıyız. Örneğin, blog makaleleri listesini göstermek için kullanılan bir şablon gibi…home.php或index.phpTek bir makalenin görüntülenmesi için kullanılır.single.phpStatik sayfaları görüntülemek için kullanılır.page.phpAyrıca, makale kategorilerini, etiketlerini ve diğer arşiv sayfalarını göstermek için kullanılanlar…archive.phpAyrıca,header.php和footer.phpWeb sitesinin üst kısmı (header) ile alt kısmı (footer) kodlarını ayırmak için kullanılır.get_header()和get_footer()Fonksiyonlar çeşitli şablonlarda çağrılarak kod tekrarlanabilirliği sağlanır.

Başlık şablonu oluşturun.

header.phpDosyalar genellikle HTML belgelerini içerir.<head>Bazı bölümler ve sayfa başlıklarının yapısı, örneğin site tanımları ve ana navigasyon menüleri… Önemli bir adım ise…<head>Ortada yapılan çağrı (The call made in the middle)wp_head()“Hook” (Düğüm): WordPress’in çekirdeği, eklentileri ve temalarının gerekli CSS, JavaScript ve meta verileri ürettiği yerdir.

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1005>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php the_custom_logo(); ?>
        <div class="site-title"><a href="/tr/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></div>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
            'menu_id'        =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

Makale döngüsünü gerçekleştirmek

Makale döngüsü, WordPress’in dinamik içerik üretimindeki temel mekanizmadır.index.php、single.phpBu şablonlarda, biz…if ( have_posts() ) : while ( have_posts() ) : the_post();Her makaleyi gezinip gösterin.

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.

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                // 为每篇文章加载对应的模板部件或内容模板
                get_template_part( 'template-parts/content', get_post_type() );
            endwhile;
            // 分页导航
            the_posts_navigation();
        else :
            // 没有找到内容时的模板
            get_template_part( 'template-parts/content', 'none' );
        endif;
        ?>
    </main>
</div>

get_template_part()Fonksiyonlar mükemmel bir uygulamadır; çünkü makale içeriğini gösteren HTML yapısını ayrı tutmanızı teşvik ederler.template-parts/content.phpBu tür bileşen dosyalarında, ana şablon dosyasını daha sade ve anlaşılır hale getirmek önemlidir.

Responsive tasarım ve stilin gerçekleştirilmesi

Modern temaların duyarlı (responsive) olması gerekmektedir; yani cep telefonundan masaüstüne kadar çeşitli ekran boyutlarında iyi bir kullanıcı deneyimi sunabilmelidir. Bu, esas olarak CSS medya sorguları (CSS media queries), esnek kutu modeli (Flexbox) ve ızgara düzeni (CSS Grid) aracılığıyla sağlanır.

Öncelikle,functions.phpDoğru şekilde kullanmak için…wp_enqueue_style()Fonksiyon, ana stil şemanızı bir kuyruğa ekler. Çağrı yapıldığında, WordPress’in kendisine dahil olan stillere bağlı ayarların yapıldığından emin olun.dashicons。

Tavsiye edilen okuma Tailwind CSS Kılavuzu: Başlangıçtan Modern Web Geliştirmeye。

function my_modern_theme_scripts() {
    // 引入主题主要样式表
    wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义脚本（如果有）
    wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );

Mobil Öncelikli CSS Stratejisi

CSS’yi “mobil öncelikli” bir stratejiyle yazmak, öncelikle küçük ekranlı cihazlar (örneğin telefonlar) için temel stilleri oluşturmak ve ardından medya sorguları kullanarak giderek daha büyük ekranlara (tabletler, masaüstü bilgisayarlar) ek stiller ve düzen ayarlamaları eklemek anlamına gelir.

/* 基础样式 - 针对移动设备 */
.site-header {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .site-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-navigation ul {
        flex-direction: row;
        gap: 2rem;
    }
}

/* 针对大桌面设备 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

Duyarlı (responsive) resimleri işleme

WordPress, güçlü bir şekilde yanıt veren (responsive) görüntü desteği sunar. Kullanımı oldukça kolaydır.the_post_thumbnail()Fonksiyonu uygun boyut parametreleriyle birlikte çağırırsanız, WordPress otomatik olarak ilgili içeriği görüntüler.srcset和sizesÖzniteliklerin `

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.

Bu etiketler, tarayıcının cihazın ekran özelliklerine göre en uygun görüntü dosyasını seçmesini sağlar ve böylece yükleme performansını optimize eder.

<?php if ( has_post_thumbnail() ) : ?>
    <figure class="post-thumbnail">
        <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
    </figure>
<?php endif; ?>

Konu ekleme özelliği ve özelleştirme işlemleri…

Bir temel tema oluşturulduktan sonra, WordPress’in API’si aracılığıyla çeşitli özellikler eklenerek kullanışlılığı ve profesyonelliği artırılabilir. Bunlar arasında özelleştirilmiş menüler, araç çubukları (yan çubuklar) ve özelleştiriciler veya ayar sayfaları kullanılarak tema üzerinde yapılan değişiklikler yer alır.

Kayıt Menüsü

在functions.phpÇince'de kullanılır.register_nav_menus()Bir fonksiyon kullanarak temanınızın hangi menü konumlarını desteklediğini tanımlayın. Daha sonra, kullanıcılar arka planda “Görünüm” -> “Menü” bölümünden bu konumlara menüler atayabilirler.

function my_modern_theme_setup() {
    // 注册一个主菜单
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
    ) );
    // 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );

Bir araç çubuğu bölgesi oluşturun.

Küçük Araçlar Bölgesi (Sidebar), kullanıcıların küçük araçları sürükleyerek sayfa bloklarını özelleştirmesine olanak tanır.register_sidebar()Fonksiyonlar kaydedilir. Genellikle, ana kenar çubuğu, sayfa altı araç çubuğu alanı gibi çeşitli araç çubuğu bölgeleri oluşturursunuz.

function my_modern_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'my-modern-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'my-modern-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_modern_theme_widgets_init' );

Kayıt olduktan sonra, şablon dosyalarında (örneğin…)sidebar.php) içinde kullanılırdynamic_sidebar( 'sidebar-1' )Bu bölgeyi göstermek için sadece bir fonksiyon çağrısı yeterlidir.

Entegre Özelleştirici API’si

WordPress’ın özelleştirme araçları, kullanıcıların tema seçeneklerini gerçek zamanlı bir önizleme ortamında ayarlamasına olanak tanır. Özelleştirici API’si aracılığıyla renk seçimi, Logo yüklemesi gibi basit ayarları ekleyebilirsiniz. Bu süreç, belirli araçların ve özelliklerin kullanılmasını gerektirir.$wp_customize->add_setting()和$wp_customize->add_control()Yöntem.

function my_modern_theme_customize_register( $wp_customize ) {
    // 添加一个站点标题颜色的设置
    $wp_customize->add_setting( 'header_textcolor', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'    => __( 'Header Text Color', 'my-modern-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );

Sonra…header.phpOrada, şu yolla yapılabilir:get_theme_mod( 'header_textcolor' )Bu değeri alın ve içerik stillemesi (inline styling) gibi yöntemlerle uygulayın.

Özetle.

Sıfırdan başlayarak modern, duyarlı bir WordPress teması geliştirmek sistematik bir mühendislik işlemidir ve geliştiricilerin sadece PHP ve WordPress çekirdek API’sine aşina olmalarını değil, aynı zamanda HTML5, CSS3 (özellikle Flexbox/Grid ve medya sorguları) ve JavaScript konularında da uzman olmalarını gerektirir. Tüm süreç, modüler ve sürdürülebilir ilkeler doğrultusunda yürütülür: Ortamın kurulması ve tema bilgilerinin tanımlanmasıyla başlar; ardından şablon hiyerarşisine uygun PHP dosyaları adım adım oluşturulur ve temel makale döngüsü gerçekleştirilir. Daha sonra, “mobil öncelikli” bir CSS stratejisi ve duyarlı görüntü teknolojileri kullanılarak web sitesinin tüm cihazlarda mükemmel bir şekilde çalışması sağlanır. Son olarak, WordPress’in güçlü işlevsel API’si aracılığıyla navigasyon menüsü, araç çubuğu ve özelleştirme özellikleri eklenerek kullanıcılara esnek bir özelleştirme imkanı sunulur. Bu adımları takip ederek, profesyonel, verimli ve kolayca sürdürülebilir bir WordPress teması oluşturabilirsiniz.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için hangi temel teknolojileri bilmek gerekiyor?

Tam bir WordPress teması geliştirmek için bir dizi temel teknolojiyi öğrenmeniz gerekmektedir. İlk olarak PHP’ye ihtiyacınız var; çünkü WordPress kendisi PHP ile yazılmıştır ve tüm şablon dosyaları ile işlevsel mantık PHP’ye dayanmaktadır. İkincisi, sayfaların yapısını ve stilini oluşturmak için HTML5 ve CSS3’tür; özellikle duyarlı (responsive) tasarım, CSS medya sorguları ve modern düzenleme modelleri (örneğin Flexbox ve Grid) olmadan mümkün değildir. JavaScript konusunda temel bir bilgiye sahip olmak da etkileşimli özelliklerin gerçekleştirilmesi için çok önemlidir. Son olarak, WordPress’in temel kavramlarını derinlemesine anlamanız gerekmektedir; bunlar arasında şablon hiyerarşisi, makale döngüleri, hook’lar (Hook’lar) ve filtreler (Filters) yer alır.

style.css dosyasındaki “Text Domain” ifadesinin işlevi nedir?

Text DomainBu, temanın uluslararasılaştırılması ve yerelleştirilmesi için kritik bir tanımlayıcıdır. Amacı, temanızdaki tüm çevrilebilir metinler için benzersiz bir ad alanı oluşturmaktır. Kodda, böyle bir tanımlayıcı kullandığınızda…__('Hello World', 'my-modern-theme')或_e('Read More', 'my-modern-theme')Bu tür bir çeviri fonksiyonunda, ikinci parametre metin alanıdır. Bu, çeviri aracının (örneğin Poedit) konunuza ait olan metin dizelerini doğru bir şekilde tanıyıp çıkarabilmesini ve böylece çeviriyi oluşturabilmesini sağlar..po和.moÇeviri dosyasını hazırlayın; böylece konunuz kolayca herhangi bir dile çevrilebilir.

Bir temanın makale özet resmi (thumbnail) özelliğini desteklemesini nasıl sağlarım?

Konunun makale küçük resimlerini (veya öne çıkan görüntüleri) desteklemesi için, konunun ayarlarında bunu etkinleştirmeniz gerekir.functions.phpDosyaya ilgili tema desteği beyanını ekleyin. Kullanın.add_theme_support()Function, and pass it.'post-thumbnails'Parametreler: Tüm makale türlerinde etkinleştirebilirsiniz; ayrıca yalnızca belirli makale türlerinde (örneğin…) kullanılmasını da belirleyebilirsiniz.post和page) üzerinde etkinleştirilir.

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    // 或者指定文章类型：add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
    // 你还可以在这里定义默认的缩略图尺寸：set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Destek eklendikten sonra, makale düzenleme sayfasında “Özel Görsel” meta kutusu görünecek ve kullanıcılar fotoğraf yükleyebilecek veya seçebilecekler. Şablonlarda bunu kullanmak için gerekli ayarlar zaten mevcuttur.has_post_thumbnail()Küçük resimlerin (thumbnail’ların) olup olmadığını kontrol edin ve bunları kullanın.the_post_thumbnail()Bunu göstermek için bir fonksiyon kullanın.

Neden `get_template_part` fonksiyonunun kullanılması önerilir?

get_template_part()Fonksiyonlar, WordPress temalarının geliştirilmesinde kod tekrar kullanımını ve modülerliği sağlamanın en iyi uygulamalarından biridir. Esas olarak, makale içeriğini gösteren HTML yapıları gibi sık kullanılan şablon kodlarını bağımsız bileşen dosyalarına ayırmak için kullanılır. Bunun birçok belirgin avantajı vardır: İlk olarak, kodun okunabilirliğini ve sürdürülebilirliğini artırır. Ana şablon dosyası (örneğin…)index.phpOldukça sadeleştirildi; bir diğer önemli özellik ise esnekliğin artırılmasıdır. Farklı koşullara (örneğin makale türüne) göre farklı bileşen dosyalarını yükleyebilirsiniz.get_template_part( 'template-parts/content', 'page' )Öncelikli olarak yüklenecektir.content-page.phpSon olarak, alt temaların kolayca değiştirilmesini sağlar; bir alt tema, üst temanın görünüm mantığını değiştirmek için sadece aynı adlı bir bileşen dosyası sağlaması yeterlidir.