WordPress Tema Geliştirme Kılavuzu: Başlangıçtan Uzmanlığa Kadar Tam Bir Eğitim ve En İyi Uygulamalar

WordPress Tema Geliştirme Temelleri ve Ortam Kurulumu

WordPress tema geliştirmeye başlamadan önce, profesyonel bir yerel geliştirme ortamı oluşturulmalıdır. Bu, sadece geliştirme verimliliğini artırmakla kalmaz, aynı zamanda çevrimiçi web sitesine olası zararları da önler. XAMPP, MAMP veya Local by Flywheel gibi entegre ortamların kullanılması önerilir; bu ortamlar PHP, MySQL ve Apache/Nginx için tek duraklı çözümler sunar.

Ortamı yapılandırdıktan sonra, WordPress kurulum dizininde…wp-content/themesKlasör içinde yeni bir tema klasörü oluşturun. Bir temanın en az iki dosyadan oluşması gerekir: bir stil şeması dosyası.style.cssVe çekirdek şablon dosyalarıindex.php。

style.cssSadece bir stil dosyası değil; aynı zamanda temanın “kimlik kartı” görevi de görür. Tema bilgilerini bu dosyanın baş kısmına eklemelisiniz ki WordPress arka ucu temanızı tanıyabilsin.

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Başlangıçtan Gerçek Uygulamalara Kadar Tam Bir Eğitim。

/*
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.phpBu, temanın varsayılan giriş dosyasıdır ve WordPress, sayfaları renderlamak için öncelikle bunu kullanır. İçerik başlangıçta çok basit olsa bile, bu dosya gereklidir. Bu iki dosyayı oluşturduktan sonra, WordPress arayüzündeki “Görünüm” -> “Tema” bölümünde temanızı görebilir ve etkinleştirebilirsiniz.

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.

Konunun temel dosya yapısını anlamak

Tam özellikli bir WordPress teması, kodun düzenlenmesine ve bakımının kolaylaştırılmasına yardımcı olan standart bir dosya yapısına uyar. Bunun dışında…style.css和index.phpİşte diğer birkaç önemli dosya:

functions.phpBu, temanın “motorudur”; yani tarayıcıda doğrudan çalışan bir betik değil, WordPress çekirdeği tarafından otomatik olarak yüklenen bir dosyadır. Tüm tema özelliklerinin geliştirilmesi – kayıt menüsü, kenar çubuğu, temaya destek eklenmesi, betiklerin ve stillerin yüklenmesi gibi işlemler burada gerçekleşir.

header.php和footer.phpSırasıyla web sitesinin üst kısmından (header) ve alt kısmından (footer) sorumludurlar.get_header()和get_footer()Fonksiyonlar, kodun tekrar kullanılmasını sağlamak için diğer şablon dosyalarına dahil edilebilir.

page.phpStatik sayfaları renderlemek için kullanılır.single.phpTek bir makaleyi renderlemek için kullanılır.archive.phpKategoriler, etiketler ve diğer arşiv sayfalarının renderlanması için kullanılır. WordPress’in şablon hiyerarşisi, farklı türdeki sayfa istekleri için sistemin hangi şablon dosyasını otomatik olarak seçeceğini belirler.

Tavsiye edilen okuma Sıfırdan başlayarak yüksek performanslı bir WordPress teması oluşturmanın kapsamlı bir rehberi.。

Şablon Sistemi ve Şablon Seviyeleri

WordPress’in şablon sistemi, “Şablon Hiyerarşisi” (Template Hierarchy) adı verilen açık bir hiyerarşi setine dayanmaktadır. Bu kurallar, belirli bir sayfaya erişildiğinde WordPress’in hangi şablon dosyasını otomatik olarak bulup yükleyeceğini belirler. Bunun anlaşılması, verimli tema geliştirmenin anahtarıdır.

Örneğin, bir kullanıcı bir blog makalesine eriştiğinde, WordPress şablon dosyalarını aşağıdaki sırayla arar:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.phpBulunan ilk kullanılabilir dosyayı kullanacaktır. Bu, belirli makale türleri için veya hatta belirli bir makale için son derece özelleştirilmiş şablonlar oluşturabileceğiniz anlamına gelir.

Özel sayfa şablonları oluşturmak ve kullanmak

Sistem tarafından önceden belirlenmiş şablonların yanı sıra, kendi özel sayfa şablonlarınızı da oluşturabilir ve bunları seçtiğiniz herhangi bir sayfaya uygulayabilirsiniz. Bu, benzersiz sayfa düzenleri tasarlamak için büyük bir esneklik sunar.

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.

Bir özel sayfa şablonu oluşturmak için, şablon dosyasının en üstüne belirli PHP yorum blokları eklemeniz gerekir. Örneğin, “tam genişlikli sayfa” adında bir şablon oluşturmak için yeni bir dosya oluşturabilirsiniz.template-fullwidth.phpVe başlangıçta şunu yazın:

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

Kod yazımını tamamladıktan sonra, WordPress arayüzünde sayfa ayarlarını düzenlerken “Sayfa Özellikleri” bölümündeki “Şablon” açılır menüsünde “Tam Genişlikli Sayfa” seçeneğini göreceksiniz. Bu seçeneği seçip sayfayı güncellediğinizde, sayfa özelleştirdiğiniz şablon kullanılarak renderlanacaktır.

Koşullu etiketleri kullanarak dinamik içerik oluşturulur.

Şartlı etiketler, WordPress'in mevcut sayfanın belirli bir koşula uyup uymadığını belirlemek için kullanılan bir dizi mantıksal fonksiyondur. Bunlar, şablon dosyalarında içeriğin görüntülenmesini dinamik olarak kontrol etmek için yaygın olarak kullanılır.

Tavsiye edilen okuma WordPress tema geliştirme rehberi: Sıfırdan özel web sitesi arayüzü oluşturma.。

Örneğin,is_front_page()Bir sayfanın web sitesinin ana sayfası olup olmadığını belirleyin.is_single()Bir sayfanın tek bir makale sayfası olup olmadığını belirleyin.is_page()Bir sayfanın statik olup olmadığını belirleme.is_archive()判断是否为任何归档页。通过它们，你可以用简单的if语句为不同页面定制不同的逻辑和输出。

<?php if ( is_front_page() ) : ?>
    <h1>Bizi ziyaret ettiğiniz için teşekkür ederiz!</h1>
<?php elseif ( is_single() ) : ?>
    <h1><?php the_title(); ?></h1>
    <div class="post-meta">发布时间：</div>
<?php endif; ?>

Konu Özellikleri ve Çekirdek Fonksiyonlar

functions.phpDosyalar, temaların özelliklerinin toplandığı ve yönetildiği yerdir. Burada, WordPress’in çekirdek dosyalarını değiştirmeye gerek kalmadan temaları güvenli bir şekilde genişletebilirsiniz.

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.

Kayıt menüsü ve kenar çubuğu

WordPress, temaların destekledikleri navigasyon menüsü konumlarını belirtmelerine izin verir; bu, temanın yapılandırma dosyaları aracılığıyla yapılır.register_nav_menus()Fonksiyonların gerçekleştirilmesi. Genellikle biz…functions.phpKullanımda, bir şeye monte edilmiş olan bir bileşen bulunmaktadır.after_setup_themeİşlemi tamamlamak için kancadaki fonksiyonu kullanın.

function mytheme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Kayıt olduktan sonra, kullanıcılar “Görünüm” -> “Menü” bölümünden bu iki yere menüler atayabilirler. Şablonlarda bu işlem için belirli yapılar kullanılır.wp_nav_menu( array( 'theme_location' => 'primary' ) )Menüyü göstermek için…

Kenar çubuğunun (veya “araç çubuğu” olarak da adlandırılanın) kaydı da benzer şekilde yapılır.register_sidebar()Daha sonra, kullanıcılar “Görünüm” -> “Araçlar” bölümünden bu alanlara çeşitli araçlar ekleyebilirler.

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

Pek çok modern WordPress temasının özellikleri için açıkça destek ilan edilmesi gerekmektedir. Örneğin, makalelerin ve sayfaların özel görsellerine (resim küçük resimleri) sahip olabilmesi için bu özelliğin desteklenmesini sağlamanız gerekir. Bu durum diğer özellikler için de geçerlidir.functions.phpİlkizleştirme işlemi, başlatma (initialization) fonksiyonu içinde tamamlanır.

function mytheme_setup() {
    // ... 其他设置代码
    add_theme_support( 'post-thumbnails' ); // 支持特色图像
    add_theme_support( 'title-tag' ); // 让WordPress管理标题标签
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 支持HTML5标记
}

Kodları ve stilleri güvenli bir şekilde dahil etmek

CSS ve JavaScript dosyalarını doğru bir şekilde kuyruğa eklemek, WordPress geliştirme sürecindeki en iyi uygulamalardan biridir. Bu sayede kaynak çatışmaları ve dosyaların tekrar tekrar yüklenmesi önlenir.wp_enqueue_style()和wp_enqueue_script()Fonksiyonları ve bunların doğru şekilde monte edildiğinden emin olun.wp_enqueue_scriptsKancada.

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' );

Gelişmiş Tema Geliştirme Teknikleri

Temelleri öğrendikten sonra, bazı ileri düzey teknikler temanızı daha güçlü ve daha profesyonel hale getirebilir.

Özel ihtiyaçlarınız için alt konular (subtopics) oluşturun.

Bir üst konuyu doğrudan değiştirmek tehlikeli ve sürdürülemez bir yaklaşımdır; çünkü konu güncellemeleri yaptığınız tüm değişiklikleri siler. Doğru yöntem, bir alt konu (subtopic) oluşturmaktır. Alt konu, yalnızca sizin özelleştirdiğiniz dosyaları içerir.style.css、functions.phpKapsanan şablon dosyalarıyla birlikte, üst temanın tüm özelliklerini de devralır.

alt konuyla ilgilistyle.cssBaşlık yorumları mutlaka şunları içermelidir:Template:“Satır”, üst konunun klasör adını belirtmek için kullanılır.

/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/

alt konuyla ilgilifunctions.phpBaba temadan önce yüklenecek ve burada yeni özellikler ekleyebilir veya mevcut özellikleri değiştirebilirsiniz.

WordPress'te içeriği döngüsel olarak çıktırmak.

“The Loop”, WordPress şablonlarında veritabanından birden fazla içerik alıp bunları görüntülemek için kullanılan PHP kod yapısındadır. Neredeyse tüm şablon sayfalarının temelini oluşturur.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article>
        <h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <div><?php the_excerpt(); ?></div>
    </article>
<?php endwhile; endif; ?>

Döngü içinde, bir dizi şablon etiketi kullanabilirsiniz, örneğin:the_title()、the_content()、the_excerpt()、the_permalink()Mevcut makalenin bilgilerini çıktı olarak bekleyin.

Temaların özelleştirilmesi özelliğini gerçekleştirme

WordPress’ın Özelleştirici (Customizer) aracı, kullanıcıların temanın bazı ayarlarını (örneğin renkler, logo) gerçek zamanlı olarak önizlemesine ve değiştirmesine olanak tanır. Bunu yapmak için…functions.phpKonunuza özel seçenekler ekleyin.

Bu, kullanımı içermektedir.WP_Customize_ManagerKurulum ayarlarını, kontrolleri ve blokları eklemek için sınıflar kullanılır. Kod nispeten karmaşık olsa da, kullanıcılara sorunsuz bir özelleştirme deneyimi sunar. Genellikle bir panel eklersiniz, ardından bu panelin altına birkaç bölüm daha eklersiniz ve son olarak her bölüme belirli ayarlar ile kontrolleri yerleştirirsiniz.

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置
    $wp_customize->add_setting( 'header_color', array(
        'default' => '#ffffff',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );
    // 添加一个控件来控制这个设置
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label' => __( '头部背景色', 'my-first-theme' ),
        'section' => 'colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Ardından şablon içinde, kullanın.get_theme_mod( 'header_color' )Kullanıcı tarafından ayarlanan değerleri almak ve sayfaya uygulamak için…

Özetle.

WordPress tema geliştirme, temel dosya yapısını anlamaktan başlayarak, şablon sistemine ve işlevsel fonksiyonlara derinlemesine hakim olmaya, ve sonunda ileri düzey özelleştirme tekniklerini öğrenmeye kadar süren bir süreçtir. Başarılı bir geliştirici, sadece PHP, HTML, CSS ve JavaScript konularında bilgi sahibi olmakla kalmamalı; aynı zamanda WordPress’in temel kavramlarını da derinlemesine anlamalıdır (örneğin şablon hiyerarşisi, döngüler, eklentiler ve fonksiyonlar). Alt temalar kullanmak, kodu daha yönetilebilir hale getirmek gibi en iyi uygulamalara da uymalıdır.functions.phpİşlevler eklemek ve güvenli bir şekilde betik stillerine entegre etmek, oluşturduğunuz temanın stabil, verimli ve kolayca bakım yapılabilir olmasını sağlar. Sürekli pratik yaparak, çeşitli ihtiyaçları karşılayan güçlü ve profesyonel WordPress temaları oluşturabilirsiniz.

Sıkça Sorulan Sorular.

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

Evet, PHP, WordPress temalarının geliştirilmesinde kullanılan temel dildir. PHP’nin temel sözdizimini öğrenmeniz ve içerikleri dinamik olarak görüntülemek için HTML içine PHP kodlarını nasıl yerleştireceğinizi anlamanız gerekmektedir. Ön uç teknolojileri (HTML, CSS, JavaScript) de oldukça önemlidir; ancak WordPress ile veri alışverişi, mantıksal işlemler ve özelliklerin genişletilmesi tamamen PHP sayesinde mümkündür.

Konunun style.css dosyasının adı başka bir isme değiştirilebilir mi?

Olmaz.style.cssBu dosya adı, WordPress’in temayı ve temanın meta verilerini (tema adı, sürüm, yazar gibi) tanıması için zorunludur. Bu dosya adını kullanmanız ve temanın kök dizinine yerleştirmeniz gerekmektedir. Ancak, bazı ayarları değiştirerek bu dosya adının gerekliliklerini esnetebilirsiniz.functions.phpStil kodunuzu düzenlemek için diğer ek CSS dosyaları kullanın.

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

Konunuzun uluslararasılaştırılmasını (i18n) desteklemek çok önemlidir. Geliştirme sırasında, tüm kullanıcıya yönelik metin dizelerini belirli çeviri fonksiyonları ile sarmanız gerekir.__( ‘文本’, ‘text-domain’ )或_e( ‘文本’, ‘text-domain’ )Aynı zamanda,style.cssBaşlık yorumlarında doğru ayarlamalar yapılmalıdır.Text DomainVe ayrıca…functions.phpÇince'de kullanılır.load_theme_textdomain()Bu fonksiyon, çeviri dosyalarını yüklemek için kullanılır. İşlem tamamlandıktan sonra, çevirmenler Poedit gibi araçlar kullanarak çevirileri oluşturabilirler..po和.moÇeviri dosyası.

Neden özel şablonum sayfa özellikleri açılır menüsünde görünmüyor?

Lütfen özelleştirilmiş şablon dosyanızın en üst kısmına, format kurallarına uygun bir PHP yorum bloğunu doğru bir şekilde eklediğinizden emin olun. Yorum bloğu “Template Name:” satırını içermelidir ve dosya, temanızın ana dizini veya bir alt dizininde bulunmalıdır. Ayrıca, dosyada herhangi bir sözdizimi hatası olup olmadığını kontrol edin; bu tür hatalar WordPress’in dosya başlık bilgilerini doğru bir şekilde okumasını engelleyebilir. Özelleştirilmiş şablonların yalnızca sayfalar için geçerli olduğunu unutmayın; bu nedenle bir “makale” değil, bir “sayfa” düzenliyorsunuz.

Konu içinde doğrudan SQL sorguları yazarak veri almak iyi bir uygulama mıdır?

Bu, kesinlikle tavsiye edilmeyen bir uygulamadır. Doğrudan SQL sorguları yazmak, WordPress’in temel veri güvenlik katmanlarını (veri temizleme, önbellekleme, yetki kontrolü vb.) atlar; bu da SQL enjeksiyonu gibi güvenlik açıklarına yol açabilir ve ayrıca gelecekteki WordPress sürümlerinin veritabanı yapılarıyla uyumsuzluklara neden olabilir. Verileri almak için her zaman WordPress tarafından sağlanan API’leri ve fonksiyonları kullanmalısınız.WP_QuerySınıf,get_posts()、get_pages()Bunlar daha güvenli, daha verimli ve bakımı daha kolaydır.