WordPress Tema Geliştirme Konusunda Kapsamlı Bir Rehber: Başlangıçtan Uzmanlığa Kadar Pratik Eğitimler

WordPress temasının temel yapısını anlamak.

Bir WordPress teması, esasen bir dizi dosyanın toplamıdır ve bu dosyalar birlikte web sitesinin ön yüz görünümünü ve işlevlerini tanımlar. Bunlar arasında, her temanın sahip olması gereken iki dosya vardır:style.css和index.phpBu unsurlar, bir konunun temelini oluşturur.

En temel düzeyde, WordPress temaları şablon dosya sistemi aracılığıyla çalışır. Bir ziyaretçi bir sayfayı talep ettiğinde, WordPress talep edilen sayfa türüne (örneğin ana sayfa, makale sayfası, arşiv sayfası vb.) göre hangi PHP şablon dosyasının yüklenip içeriğin nasıl renderleneceğini belirler. Bu tasarım, geliştiricilerin farklı sayfa türlerinin görünümünü çok esnek bir şekilde kontrol etmelerini sağlar.

Konu Dosyası Yapısı Genel Bakışı

Standart bir WordPress teması, belirli bir dizi dosya içerir. Gerekli olanlar dışında…style.css和index.phpİyi bir şekilde geliştirilmiş bir tema genellikle aşağıdakileri de içerir:functions.php、header.php、footer.php、sidebar.phpAyrıca, farklı sayfalar için hazırlanan şablon dosyaları da bulunmaktadır, örneğin…single.php(Makale Sayfası) vepage.php(Sayfa)functions.phpDosya, temanın “beyni” gibidir; işlevler eklemek, menüler ve kenar çubukları gibi öğeleri yönetmek için kullanılır.

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

style.cssDosya yalnızca stil şablonlarını içermekle kalmaz; aynı zamanda dosya başlığındaki yorumlar da temanın meta verilerini de taşır (tema adı, yazar, açıklama, sürüm vb.). Bu, WordPress’in bir temayı tanımasında kritik bir rol oynar.

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 Custom Theme
 * Author: Your Name
 * Description: A custom theme built from scratch.
 * Version: 1.0
 */

Yerel geliştirme ortamını kurmak.

Kod yazmaya başlamadan önce, profesyonel bir yerel geliştirme ortamı oluşturmak çok önemlidir. Bu, tüm özellikleri güvenli ve izole bir ortamda test etmenizi sağlar ve çevrimiçi web sitesini etkilemez.

Önerilen araç kombinasyonları arasında Local by Flywheel, XAMPP veya MAMP bulunmaktadır; bu araçlar PHP, MySQL ve WordPress’ü tek tıklamayla kurmanıza olanak tanır. Ayrıca, güçlü bir kod editörü (örneğin VS Code, PhpStorm) ve bir sürüm kontrol sistemi (örneğin Git) de modern tema geliştirmenin vazgeçilmez parçalarıdır.

İlk tema dizininizi oluşturun.

Öncelikle, WordPress’in kurulum dizini içinde…wp-content/themes/Dosya içinde, örneğin, yeni bir klasör oluşturun.my-first-themeBu klasörün adı, temanızın tanımlayıcısıdır.

Daha sonra, bu klasörde iki en temel dosya oluşturun:style.css和index.php“Emin olun.”style.cssDosyanın başlık bilgilerini tam olarak doldurun. Ardından, WordPress arayüzünün “Görünüm” -> “Temalar” sayfasına giriş yapın; yeni temanızın orada olduğunu görmelisiniz, ancak henüz herhangi bir stil veya özelliğe sahip değildir.

Tavsiye edilen okuma WordPress Tema Geliştirme Kapsamlı Kursu: Başlangıç Kodlarından Gerçek Uygulama Tekniklerine。

Çekirdek şablon bileşenlerini dahil etmek

DRY (Don’t Repeat Yourself – Kendini Tekrarlama) ilkesine uymak için, WordPress temaları ortak kısımları ayırmak amacıyla şablon bileşenleri (template components) kullanır.header.php、footer.php和sidebar.php。

在index.phpÇin'de, kullanılır.get_header()、get_footer()和get_sidebar()Bu bileşenleri içe aktarmak için fonksiyonlar kullanılır. Bu fonksiyonlar, WordPress’in temel şablon etiketleridir ve ilgili adlardaki şablon dosyalarını otomatik olarak bulup yüklerler.

// 在 index.php 中的典型结构
<?php get_header(); ?>

<main id="main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 输出文章内容
        endwhile;
    endif;
    ?>
</main>

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

Temel şablonlara ve döngülere derinlemesine giriş

WordPress’teki “döngü” (loop), içerik görüntülemeyi sağlayan temel mekanizmadır. Bu, PHP kod yapısından oluşur ve mevcut sayfada makale (veya sayfa) olup olmadığını kontrol eder; eğer varsa, bu makaleleri döngüsel olarak tarar ve içeriğini görüntüler.

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.

Ana döngüyü ve sorguyu anlamak

En temel döngü yapısı aşağıda gösterilmiştir. Neredeyse tüm şablon dosyalarında bulunur ve makale listelerini veya tek bir makalenin içeriğini almak ve göstermek için kullanılır.

<article>
            <h2><?php the_title(); ?></h2>
            <div><?php the_content(); ?></div>
        </article>

Bu döngüde,have_posts()和the_post()Fonksiyonlar akışı kontrol eder. Şablon etiketleri gibi…the_title()和the_content()Mevcut makalenin belirli bilgilerini çıkarmak için kullanılır.

Özel sayfa şablonu oluşturun.

Belirli bir sayfa için özgün bir düzen oluşturabilirsiniz. Bunun için yeni bir PHP dosyası oluşturmanız ve dosyanın başına belirli bir şablon adı açıklaması eklemeniz gerekmektedir.

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Başlangıçtan Uzmanlığa Kadar Temel Teknolojiler ve Pratik Rehber。

Örneğin, “my_project” adında bir proje oluşturun.template-fullwidth.phpBelgenin başına şu satırı yazın:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */

Kaydettikten sonra, WordPress arayüzünden herhangi bir sayfayı düzenleyin. “Sayfa Özellikleri” -> “Şablon” seçeneğinin açılır menüsünde “Tam Genişlikli Sayfa” seçeneğini göreceksiniz. Bunu seçtiğinizde, sayfa sizin özelleştirdiğiniz şablon kullanılarak renderlanacaktı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.

Fonksiyon dosyalarını kullanarak tema özelliklerini geliştirin.

functions.phpBu, temalarla ilgili araçlarınızın bulunduğu bir kutudur. Burada, temalara destek ekleyebilir, navigasyon menülerini kaydedebilir, araç çubuğu alanlarını tanımlayabilir, stil ve betik dosyalarını sırayla yükleyebilir ve özel fonksiyonlar oluşturabilirsiniz.

Konu desteği ve kayıt menüsü ekleyin.

Kullanın.add_theme_support()Fonksiyonlar, WordPress’in temel özelliklerini etkinleştirebilir. Örneğin, makale özetlerinin gösterilmesi özelliğini etkinleştirmek, birçok temanın standart özelliklerindendir.

function mytheme_setup() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5标记（用于评论表单、搜索表单等）
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Kayıt menüsünü kullanmak için...register_nav_menus()Fonksiyonlar: Kayıt olduktan sonra, bu menü öğelerini arka planda “Görünüm” -> “Menü” bölümünden yönetebilir ve şablonlarda kullanabilirsiniz.wp_nav_menu()Çağırmak için kullanılır.

register_nav_menus( array(
    'primary' => __( '主导航菜单', 'my-theme' ),
    'footer'  => __( '页脚菜单', 'my-theme' ),
) );

Stilleri ve komut dosyalarını güvenli bir şekilde eklemek.

Asla şablon dosyalarına CSS ve JS dosyalarının bağlantılarını doğrudan kodlamayın. Doğru yöntem, bunları şablon dosyalarından ayrı olarak tutmak ve ihtiyaç duyulduğunda dinamik olarak yüklemektir.wp_enqueue_style()和wp_enqueue_script()fonksiyonları ve bunları bağlamak.wp_enqueue_scriptsBu kancada. Bu, bağımlılıkların doğru bir şekilde işlendiğinden emin olur ve tekrarlanan yüklemeleri önler.

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(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Responsive tasarımı ve temaların özelleştirilmesini gerçekleştirmek.

Modern temaların responsive (uyumlu) olması gerekmektedir. Bu, temanın düzeninin ve stilinin cep telefonundan masaüstüne kadar çeşitli ekran boyutlarına göre otomatik olarak uyum sağlaması gerektiği anlamına gelir. Bu özellik esas olarak CSS medya sorguları (CSS media queries) aracılığıyla gerçekleştirilir.

构建移动优先的CSS

“Mobil öncelikli” (mobile-first) bir CSS stratejisi kullanılmasını öneririm. Öncelikle küçük ekranlar için temel stilleri oluşturun, ardından medya sorguları kullanarak büyük ekranlar için stilleri kademeli olarak ekleyin veya mevcut stilleri değiştirin.

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 1rem;
}

/* 中等屏幕（平板） */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 大屏幕（桌面） */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

WordPress Özelleştiricileri ile Entegrasyon

WordPress’ın özelleştirme araçları, kullanıcıların temanın bazı ayarlarını (renkler, yazı tipleri gibi) gerçek zamanlı olarak önizlemesine ve değiştirmesine olanak tanır.WP_Customize_ManagerNesneler için, temalara özel seçenekler ekleyebilirsiniz.

Öncelikle…functions.phpBir fonksiyon oluşturun ve bunu kullanın.customize_registerKanca.

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置项，用于保存主题色
    $wp_customize->add_setting( 'primary_color', array(
        'default' => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

// 添加一个颜色控件到某个面板或节
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label'    => __( '主题主色', 'my-theme' ),
        'section'  => 'colors',
        'settings' => 'primary_color',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Daha sonra, bunu ön uç CSS’de kullanabilirsiniz.get_theme_mod( 'primary_color' )Kullanıcı tarafından ayarlanan değerleri almak ve dinamik stilleri oluşturmak için…

Özetle.

WordPress tema geliştirme, yaratıcılığı teknolojiyle birleştiren bir süreçtir. Temel dosya yapısını, şablon hiyerarşisini ve çekirdek döngüleri anlamaktan başlayarak, gerekli ortamı kurmaya, şablon bileşenlerini yazmaya ve daha sonra…functions.phpEnjeksiyon özelliği, ardından responsive (uyumlu) tasarım ve özelleştirilebilir seçeneklerin gerçekleştirilmesi; her adım, önceki adıma olan anlayışınızın üzerine inşa edilir. Bu temel becerileri öğrendiğinizde, sıfırdan başlayarak güçlü özelliklere sahip, estetik bir tasarıma sahip ve en iyi uygulamalara uygun bir WordPress teması oluşturabilirsiniz. Unutmayın ki, pratik öğrenmenin anahtarıdır; sürekli denemek, resmi dokümanlara bakmak ve projeler geliştirmek, becerilerinizi geliştirmenin en iyi yollarıdır.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için PHP’de ustalaşmak zorunda mıyım?

Evet, sağlam bir PHP temeline sahip olmak şarttır. Çünkü WordPress’ün çekirdeği PHP ile yazılmıştır ve tüm şablon dosyaları, fonksiyonlar PHP’ye bağlıdır. En azından değişkenler, diziler, fonksiyonlar, döngüler ve koşullu ifadeler gibi temel sözdizimlerini anlamanız gerekiyor; ayrıca WordPress’in belirli fonksiyonları ve eklentileri (hook’lar) ile nasıl etkileşimde bulunacağınızı da bilmelisiniz.

Konunun style.css dosyasındaki başlık bilgileri değiştirilebilir mi?

Tabii ki, ancak dikkatli olmak gerekiyor. Dosya başlığı bilgilerinde yer alan “Theme Name” (Tema Adı), temanın arka planda tanınmasını sağlayan tek belirleyicidir. Eğer geliştirme sürecinde bu adı değiştirirseniz, WordPress bunu tamamen yeni bir tema olarak algılayacaktır. Zaten kullanımda olan temaların adlarını doğrudan değiştirmek, kullanıcıların web sitelerindeki temayı değiştirmesine veya ayarlarının kaybolmasına neden olabilir.

Temamı nasıl birden çok dil çevirisine destekleyebilirim?

Temanın uluslararasılaştırılması (i18n) için hazırlıklarınızı yapmanız gerekiyor. Kodunuzda, kullanıcıya yönelik tüm metinler için WordPress’in çeviri fonksiyonlarını kullanın. Örneğin:__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )Daha sonra, Poedit gibi bir araç kullanarak oluşturun..potŞablon dosyası; çevirmenler bu dosyaya dayanarak farklı dillerde içerikler oluşturabilirler..po和.moDosya. Son olarak, kullanın.load_theme_textdomain()Function loading.

Alt konu (subtopic) ve üst konu (parent topic) arasındaki fark nedir? Ne zaman kullanılırlar?

Alt temalar, üst temanın tüm özelliklerini ve stillerini devralır ve üst temaya güvenli bir şekilde değişiklik yapmanıza, yeni özellikler eklemenize veya stilleri değiştirmenize olanak tanır. Mevcut ve olgun bir temaya (üst tema) dayanarak derinlemesine özelleştirmeler yapmak istiyorsanız ve aynı zamanda gelecekte üst temayı güncellediğinizde yaptığınız özelleştirmelerin kaybolmamasını istiyorsanız, bir alt tema oluşturmalısınız. Bir alt tema için yalnızca bir…style.cssVe biriylefunctions.phpDosya çalışmak için yeterlidir.