WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Özel Bir Tema Oluşturmak

Hazırlık İşlemleri ve Geliştirme Ortamının Kurulması

Kod yazmaya başlamadan önce, verimli ve profesyonel bir yerel geliştirme ortamı oluşturmak çok önemli bir ilk adımdır. Bu, çevrimiçi web sitenizi etkilemeden özgürce test yapmanızı sağlar ve aynı zamanda modern araçları kullanarak geliştirme verimliliğinizi artırmanıza yardımcı olur.

Öncelikle, yerel bilgisayarınızda entegre bir sunucu ortamı kurmanız gerekiyor. Windows kullanıcıları için…XAMPP或WampServerBu yaygın bir seçenektir; macOS kullanıcıları ise bunu değerlendirebilirler.MAMP或Local by FlywheelBu araç paketleri, Apache sunucusunu, MySQL veritabanını ve PHP ortamını bir araya getirir ve tek bir tıklamayla kurularak kullanıma hazır hale getirir.

Ardından, en yeni WordPress çekirdek dosyalarını indirin ve bunları yerel sunucunuzun web sitesi kök dizinine çıkarın (örneğin: /www/your-domain.com/).htdocsStandart “beş dakikalık kurulum” sürecini tamamlayarak geliştirme amaçlı bir yerel WordPress sitesi oluşturun. Ayrıca, bir kod editörü (örneğin Visual Studio Code, Sublime Text vb.) kurmanız şiddetle tavsiye edilir.Visual Studio Code、PhpStorm或Sublime TextPHP, HTML, CSS ve JavaScript için mükemmel sözdizimi vurgulama, kod ipuçları ve hata ayıklama desteği sunarlar.

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

Son olarak, kod değişikliklerinin web sitesinin görünümü üzerindeki etkisini gerçek zamanlı olarak gözlemleyebilmek için, tarayıcınızın geliştirici araçlarını (F12 tuşuna basarak açılır) kullanarak hata ayıklaması yapmanız gerekecektir. “Element Inspector” (Eleman İnceleyici) ve “Console” (Konsol) panellerine aşina olmak, ilerleyen geliştirme sürecinde vazgeçilmez bir beceri olacaktı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.

Konunun temel yapısını ve çekirdek dosyalarını anlamak

En temel bir WordPress teması, çalışması için yalnızca iki dosyaya ihtiyaç duyar; ancak işlevsel ve standartlara uygun bir tema, belirli dosyaların oluşturduğu yapılandırılmış bir koleksiyondur. Bu dosyaların işlevlerini anlamak, geliştirmenin temelini oluşturur.

Konunun gerekli dosyaları

Her konu mutlaka şunları içermelidir:style.css和index.phpBu iki dosya.style.cssSadece bir stil şeması değil; aynı zamanda temanın “kimlik kartı”dır. Dosyanın en üstündeki yorum bloğu, temanın meta bilgilerini içerir ve WordPress bu bilgileri okuyarak temayı arka planda tanır ve görüntüler.

/*
Theme Name: 我的第一个自定义主题
Theme URI: https://example.com/my-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 şablon dosyasıdır ve aynı zamanda tüm sayfalar için yedek şablon olarak da kullanılır. Eğer WordPress daha spesifik bir şablon dosyası bulamazsa (örneğin…single.phpO zaman eski kullanıma geri dönülür.index.php。

Şablon dosya hiyerarşisi ve içerdiği fonksiyonlar

WordPress, farklı türdeki istekler için hangi şablon dosyasının kullanılacağını belirlemek için bir şablon hiyerarşisi sistemi kullanır. Örneğin, bir blog makalesine erişildiğinde, WordPress sırayla şablonları arar.single-post.php -> single.php -> index.phpBu seviyenin anlaşılması, hassas bir sayfa düzeni oluşturmak için çok önemlidir.

Tavsiye edilen okuma Kurumsal Web Sitesi Oluşturma Kapsamlı Rehberi: Sıfırdan Profesyonel Bir Web Sitesi Kurmanın Tam Süreci ve Temel Teknolojileri。

Kodun düzenli ve sürdürülebilir olmasını sağlamak için, ortak sayfa bölümleri (örneğin başlık, alt bilgi, kenar çubuğu) ayrı dosyalara bölünmeli ve bunlar WordPress tarafından sağlanan include fonksiyonları kullanılarak sayfalara dahil edilmelidir. En sık kullanılan üç fonksiyon şunlardır:
* get_header()Giriş:header.phpDosya.
* get_footer()Giriş:footer.phpDosya.
* get_sidebar()Giriş:sidebar.phpDosya.

Senin…index.phpOrtada, tipik bir yapı şu şekildedir:

<?php get_header(); ?>

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

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

Konu şablonları oluşturma ve döngüler kullanma

Konunun “dinamik” özelliği, içeriği veritabanından çıkarıp gösterebilmesinde yansıtılmaktadır ve bunun temel mekanizması “WordPress döngüsüdür.

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ünün çalışma prensibi

“Döngü”, mevcut sayfada gösterilmesi gereken “makalelerin” (tüm makaleleri, sayfaları veya özel makale türlerini ifade eder) olup olmadığını kontrol eden bir PHP kod parçasıdır. Eğer varsa, her bir makaleyi döngü içinde tek tek inceleyerek verilerini şablon etiketlerinde kullanılabilir hale getirir. Standart bir döngü yapısı aşağıdaki gibidir:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/tr/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>


    <p>Üzgünüz, hiçbir içerik bulunamadı.</p>
<?php endif; ?>

Bu döngüde,the_title()、the_content()、the_permalink()Şablon etiketleri, mevcut makalenin spesifik bilgilerini çıktı olarak vermek için çağrılır.

Yaygın olarak kullanılan şablon dosyaları oluşturun.

Şablon hiyerarşisine dayanarak, farklı içerik türleri için özel şablon dosyaları oluşturmalısınız; bu sayede daha ayrıntılı bir kontrol sağlayabilirsiniz.
* header.phpBelge türü beyanını içerir.Bölge (yoluyla)wp_head()Fonksiyonlar, temel CSS ve JS dosyalarını içerir; ayrıca web sitesinin üst kısmındaki ortak alanlar (örneğin Logo ve ana navigasyon) da bu fonksiyonlar tarafından yönetilir.
* footer.phpWeb sitesinin alt kısmında bulunan ortak alanları (telif hakkı bilgileri gibi) da içerir.wp_footer()Fonksiyon çağrısı (sayfanın alt kısmında (footer) gereken betiklerin yüklenmesi için kullanılır).
* single.phpTek bir blog makalesini göstermek için kullanılır.
* page.phpBağımsız sayfaları göstermek için kullanılır.
* front-page.phpEğer mevcutsa, web sitesinin statik ana sayfası olarak kullanılacaktır.
* functions.phpBu bir şablon dosyası değil; bir temanın “işlevsel kütüphanesidir” ve temaya destek eklemek, kayıt menüsü, kenar çubuğu gibi özellikleri yönetmek için kullanılır.

Tavsiye edilen okuma Sıfırdan başlamak: WordPress eklenti geliştirme tam rehberi ve en iyi uygulamaların paylaşılması.。

Konu ekleme özelliği ve stil ayarları

Temel bir tema çerçevesi oluşturulduktan sonra, bir sonraki adım ona işlevler ve özgün özellikler eklemektir. Bu işlem esas olarak şu yollarla gerçekleştirilir:functions.php和style.cssGerçekleştirmek için.

functions.php dosyası aracılığıyla işlevler ekleyerek sistemin özelliklerini genişletebilirsiniz.

functions.phpDosyalar, temanın başlatılması sırasında otomatik olarak yüklenir ve yeni özellikler eklemek veya varsayılan davranışları değiştirmek için güvenli bir ortam sağlar. İlk adım genellikle WordPress’in temel özelliklerini etkinleştirmektir; bu, belirli ayarlar aracılığıyla yapılır.add_theme_support()İşlev tamamlandı.

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.

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面的“特色图像”
    add_theme_support( 'post-thumbnails' );
    // 让WordPress管理文档<title>标签
    add_theme_support( 'title-tag' );
    // 为主题添加HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 启用自定义logo功能
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Bir diğer kritik görev, navigasyon menüsünün ve kenar çubuğunun (araç çubuğu bölgesinin) kaydedilmesidir. Kullanımı şu şekildedir:register_nav_menus()Bir fonksiyon kullanarak yemek birimlerinin konumlarını tanımlayın ve ardından şablonlarda bunları kullanın.wp_nav_menu()Çağırmak için kullanılır.

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

Stil ve betikler yazmak

在style.cssBurada, üstteki yorum bloğu dışında, HTML yapınıza normal CSS yazarken yaptığınız gibi stiller ekleyebilirsiniz. responsive (uyumlu) tasarım gerçekleştirmek için mutlaka medya sorguları (Media Queries) kullanmalısınız.

Özelleştirilmiş JavaScript dosyalarını veya ekstra CSS dosyalarını doğru bir şekilde dahil etmek için en iyi uygulama, bunları belirli bir yol veya klasörden çağırmaktır. Bu, dosyaların kolayca bulunmasını ve doğru şekilde yüklenmesini sağlar.wp_enqueue_scriptsBu kancayı kullanarak işlemleri gerçekleştiriyoruz. Bu sayede bağımlılıkların doğru bir şekilde yönetildiğinden emin oluyoruz ve tekrarlanan yüklemelerin önüne geçiliyor.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Özetle.

WordPress tema geliştirme, yapıdan detaylara kadar kademeli bir süreçtir. Öncelikle sağlam bir yerel geliştirme ortamı oluşturmanız ve temanın dosya yapısını ve şablon hiyerarşisini tam olarak anlamanız gerekir. Daha sonra, “WordPress döngüleri” adı verilen temel mekanizmayı öğrenerek web sitesi içeriğini dinamik olarak görüntüleyebilirsiniz. Son olarak, bu bilgileri kullanarak temanızı geliştirmeye devam edebilirsiniz.functions.phpBu dosya, temanıza çeşitli işlevsellikler ekler ve profesyonel CSS ve JavaScript kodlaması sayesinde ona benzersiz bir görsel görünüm ve etkileşim deneyimi kazandırır. Bu adımları takip ederek, basit bir temadan daha gelişmiş bir tasarım elde edebilirsiniz.index.php和style.cssBaşlayın ve adım adım, tam özelliklere sahip, standartlara uygun bir özel WordPress teması oluşturun.

Sıkça Sorulan Sorular.

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

Evet, PHP temellerini öğrenmek şarttır. Çünkü WordPress kendisi PHP ile geliştirilmiştir ve tema dosyaları esas olarak PHP kodundan oluşur; bu kodlar mantığı kontrol etmek, verileri almak ve göstermek için kullanılır. En azından değişkenler, fonksiyonlar, koşullu ifadeler ve döngüler gibi temel kavramları anlamanız gerekir. HTML ve CSS ise ön uç arayüzlerini oluşturmanın temel taşlarıdır.

Temanın functions.php dosyası eklenti ile ne farkı var?

functions.phpDosyadaki özellikler mevcut temaya bağlıdır. Temayı değiştirdiğinizde bu özellikler de devre dışı kalır. Bu özellikler, temanın görsel görünümü ve düzeniyle yakından ilgili olan işlevleri (örneğin kayıt menüsü, kenar çubuğunun tanımlanması, temaya özel seçeneklerin eklenmesi) barındırmak için uygundur. Öte yandan, eklentiler tarafından sağlanan özellikler genellikle temadan bağımsızdır ve web sitesine belirli bir işlevsellik eklemeyi amaçlar (örneğin iletişim formu, SEO optimizasyonu); temayı değiştirdiğinizde eklentilerin özellikleri hala çalışmaya devam eder. Bir kural olarak: Eğer bir özellik yalnızca web sitesinin görünümü içinse, temanın içine yerleştirilmelidir; web sitesine genel bir işlevsellik eklemek istiyorsanız, bu özelliği bir eklenti olarak geliştirmeyi düşünebilirsiniz.

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

Konuların uluslararasılaştırılmasını (i18n) desteklemek, profesyonel geliştirmenin önemli bir adımıdır. Kodunuzda, kullanıcıya yönelik tüm metin dizelerini çeviri fonksiyonları ile sarmanız gerekir. Örneğin:__('文本', 'text-domain')或_e('文本', 'text-domain')İçeride.style.cssAçıklama blokları ve…functions.phpMetin alanı fonksiyonlarında, doğru ayarlamaları yapmanız gerekmektedir.Text Domain(Bu metin alanı), bu metin alanının tema dizininizin adıyla aynı olması gerekmektedir. Kod hazırlığını tamamladıktan sonra, Poedit gibi araçlar kullanarak içeriği oluşturabilirsiniz..potŞablon dosyaları ve çevirmenler tarafından ilgili içeriklerin oluşturulması….po和.moDil dosyası.

Geliştirme sürecinde karşılaşılabilecek PHP hatalarını nasıl ayıklayabilirsiniz?

Geliştirme aşamasında, WordPress’in hata ayıklama modunu açmanızı öneririz; bu, hataları hızlı bir şekilde tespit etmenize yardımcı olacaktır. WordPress’in kök dizininizde bulunan…wp-config.phpDosyayı bulun, ilgili ayarları bulun ve aşağıdaki gibi değiştirin:

define( 'WP_DEBUG', true ); // 开启调试模式
define( 'WP_DEBUG_LOG', true ); // 将错误日志记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误（避免用户看到）

Ayarlandıktan sonra, PHP hataları, uyarıları ve bildirimleri kaydedilecektir.wp-content/debug.logDosyada. Lütfen konu yayınlanmadan önce hata ayıklama (debugging) modunu kapatın.