WordPress Tema Geliştirme Kılavuzu: Sıfırdan Başlayarak Özel Web Siteleri Oluşturma

Bir WordPress teması sadece bir görünüm şablonu değildir; aynı zamanda web sitesinin yapısını, stilini ve işlevlerini tanımlamak için kullanılan bir dizi dosyanın toplamıdır. Temanın temel dosyaları, temanın bilgilerini tanımlamak için kullanılan dosyaları içerir.style.cssSayfa düzenini kontrol etmek için kullanılır.index.phpAyrıca, makale döngülerini işlemek için kullanılanlar…functions.phpStandart bir dosya yapısına uymak, konuların uyumluluğunu, sürdürülebilirliğini ve genişletilebilirliğini sağlamanın temelidir.

Geliştirme ortamı kurma ve temel dosyalar oluşturma

Kod yazmaya başlamadan önce, verimli bir yerel geliştirme ortamı oluşturmak çok önemlidir. Bu genellikle XAMPP, MAMP veya Local by Flywheel gibi yerel sunucu yazılımlarının, PHP’nin ve MySQL’in kurulmasını içerir. VS Code veya PhpStorm gibi kod editörleri kullanmak, geliştirme verimliliğini büyük ölçüde artırabilir.

Bir konunun temel yapısını oluşturma

Öncelikle, WordPress’in kurulum dizininin…wp-content/themes/Klasörün içinde, örneğin, yeni bir klasör oluşturun.my-custom-themeBu, temanızın kök dizinidir.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Özelleştirilmiş Bir Tema Oluşturmak。

Şimdi, ilk ve en önemli dosyayı oluşturalım:style.cssBu dosya yalnızca CSS stillerini içermekle kalmaz; aynı zamanda üst kısmındaki yorum bloğu, temanın meta verilerini de barındırı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.

/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 一个从零开始构建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Temel bir PHP şablon dosyası oluşturun.

Hemen ardından, oluşturun.index.phpBu dosya, tüm sayfalar için varsayılan şablon olup, temanın “güvenlik ağı” görevini görür. En basit haliyle…index.phpSadece web sitesinin başlık bölümünü, içeriğini ve alt kısmını (footer) almak için kullanılan fonksiyonları içerebilir.

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 文章内容输出
            the_content();
        endwhile;
    else :
        echo &#039;<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

Yukarıdaki kodun düzgün çalışabilmesi için ayrıca şunları da oluşturmanız gerekecek:header.php、footer.php和sidebar.phpŞablon bileşen dosyaları gibi…

Şablon hiyerarşisini anlamak ve şablon dosyaları oluşturmak

WordPress, belirli bir sayfa için hangi şablon dosyasının kullanılacağını belirlemek için hassas bir şablon hiyerarşisi sistemi kullanır. Bu hiyerarşiyi anlamak, verimli geliştirmenin anahtarıdır. Örneğin, tek bir makaleye erişildiğinde, WordPress sırasıyla şunları arar:single-post.php -> single.php -> singular.php -> index.php。

Sayfa şablonu oluşturmak

Tüm sayfalar için birleşik bir şablon oluşturmak istiyorsanız, aşağıdaki adımları izleyebilirsiniz:page.phpAyrıca belirli sayfalar için özel şablonlar da oluşturabilirsiniz; örneğin, “Özel Şablon” adında bir şablon oluşturabilirsiniz.template-fullwidth.phpBelgeyi oluşturun ve dosyanın başına, onu tanımlayan belirli bir yorum ekleyin.

Tavsiye edilen okuma Profesyonel bir web sitesi oluşturmak: Sıfırdan başlayarak özelleştirilmiş bir WordPress teması geliştirmek için kapsamlı bir rehber。

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

Makaleleri işleme ve arşivleme sayfaları

single.phpBir makalenin görünümünü kontrol etmek için kullanılır.archive.phpBu dosyalar, kategorilerin, etiketlerin, yazarların ve diğer arşiv sayfalarının nasıl görüntüleneceğini kontrol etmek için kullanılır. Bu dosyalarda WordPress döngülerini kullanarak içeriğin sunum şeklini tam olarak kontrol edebilirsiniz.

Functions.php dosyasını kullanarak temanın özelliklerini geliştirin.

functions.phpBu dosya, temanızın “kontrol merkezi” niteliğindedir; işlevler eklemek, özellikleri kaydetmek ve WordPress’in varsayılan davranışlarını değiştirmek için kullanılır. Bir şablon dosyası değildir, ancak her sayfada otomatik olarak yüklenir.

Kayıt menüsü ve yan menü.

在functions.phpBurada kullanabilirsiniz.register_nav_menus()Bir fonksiyon, bir temaya birden fazla navigasyon öğesi konumu kaydetmek için kullanılı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.

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

Aynı şekilde, bunu kullanabilirsiniz.register_sidebar()Bir fonksiyon, dinamik bir yan menü (araç çubuğu bölgesi) kaydetmek için kullanılır.

Konu desteğini ekleyin ve stil betiklerini sıralama işlemi için kullanın.

geçmek (bir fatura veya teftiş vb.)add_theme_support()Fonksiyonlar sayesinde temanız için çeşitli özellikleri etkinleştirebilirsiniz; örneğin makale özetleri, özelleştirilmiş logolar, HTML5 işaretlemeleri desteği gibi.

CSS ve JavaScript dosyalarını güvenli bir şekilde dahil etmek çok önemlidir. Bunun için şu yöntemleri kullanmalısınız:wp_enqueue_style()和wp_enqueue_script()fonksiyonları ve bunları bağlamak.wp_enqueue_scriptsBu kancada.

Tavsiye edilen okuma Profesyonel bir responsive (uyumlu mobil ve tablet cihazlarla) WordPress teması nasıl oluşturulur: Başlangıçtan Uzmanlığa。

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

Responsive tasarımı uygulamak ve test etmek, hataları düzeltmek

Modern web sitelerinin çeşitli cihazlarda sorunsuz bir şekilde görüntülenebilmesi gerekmektedir. Bu, kullanılan temanın responsive (uyumlu) olması gerektiği anlamına gelir. En etkili yöntem, temanın farklı ekran boyutlarına ve özelliklerine göre otomatik olarak uyum sağlamasını sağlamaktır.style.cssCSS Medya Sorguları (Media Queries) kullanılarak farklı ekran boyutlarına göre farklı stil kuralları uygulanabilir.

Geliştirme ve Hata Ayıklama Teknikleri

Geliştirme sürecinde, mutlaka…wp-config.phpAçık.WP_DEBUGBu mod, PHP hatalarını ve uyarılarını ekranda gösterecektir; bu da sorunları hızlı bir şekilde tespit etmenize yardımcı olacaktı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.

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到日志文件
define( 'WP_DEBUG_DISPLAY', true ); // 在页面上显示错误

Mevcut temaları özelleştirmek için her zaman alt temalar kullanın; doğrudan ana tema dosyasını değiştirmeyin. Bu, ana tema güncellendiğinde yaptığınız değişikliklerin silinmemesini sağlar.

Özetle.

Sıfırdan bir WordPress teması geliştirmek, sistematik bir iştir ve geliştiricilerin sadece PHP, HTML, CSS ve JavaScript’i anlamalarını değil, aynı zamanda WordPress’in temel kavramlarını da derinlemesine kavramalarını gerektirir; örneğin şablon hiyerarşisi, döngüler, eklentiler (hooks) ve fonksiyonlar gibi. Standart dosya yapılarına uymak ve güçlü araçları kullanmak, bu süreci daha verimli hale getirir.functions.phpDosyaları kullanarak ve responsive (uyumlu) tasarım ilkelerini uygulayarak, güçlü özelliklere sahip, yüksek performanslı ve kolayca bakımı yapılabilecek özel temalar oluşturabilirsiniz. Bu süreç zorluklarla dolu olsa da, web sitesinin görünümü ve işlevleri üzerinde tam kontrol sahibi olmanızı sağlar ve ileri düzey bir WordPress geliştiricisi olmanın kaçınılmaz bir yoludur.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için hangi programlama dillerini bilmek gereklidir?

WordPress temaları geliştirmek için öncelikle PHP, HTML, CSS ve JavaScript bilgisine sahip olmak gerekmektedir. PHP, mantığı ve dinamik içeriği işlemek için temel bir dildir; HTML, sayfa yapısını oluşturmak için kullanılır; CSS, stil ve düzenlemelerden sorumludur; JavaScript ise etkileşimli özelliklerin gerçekleştirilmesinde rol oynar. SQL hakkında temel bilgilere sahip olmak da veri çağrılarını anlamada yardımcı olur.

Şablon hiyerarşisi (template hierarchy) nedir ve neden önemlidir?

Şablon hiyerarşisi, WordPress’in mevcut isteğe göre hangi şablon dosyasının kullanılacağına karar vermek için kullandığı bir dizi kuraldır. Dosyalar, en spesifikten en genelgeye doğru sırayla aranır. Şablon hiyerarşisini anlamak çok önemlidir; çünkü farklı içerik türleri için (örneğin sayfalar, makaleler, arşiv sayfaları) hassas ve özelleştirilmiş şablonlar oluşturmanıza olanak tanır, böylece web sitesinin düzenini daha iyi kontrol edebilirsiniz.

fonksiyon.php dosyası ve eklentiler arasında ne fark var?

functions.phpDosyalar, bir temanın parçasıdır ve işlevleri aktif olan temayla bağlantılıdır. Genellikle, temanın görünümü ve işlevleriyle yakından ilgili özelliklerin eklenmesi veya değiştirilmesi için kullanılırlar. Öte yandan eklentiler, temadan bağımsız modüllerdir ve web sitesine belirli işlevler eklemek için kullanılır; ayrıca temayı değiştirdiğinizde bile aktif kalabilirler. Genellikle, bir işlev temanın görsel görünümüyle güçlü bir şekilde ilişkiliyse, bu işlev eklentiler aracılığıyla sağlanır.functions.phpEğer bu bir genel kullanıma sahip özellikse, bir eklenti olarak geliştirilmesi daha uygun olur.

Nasıl temamı çok dilli olarak destekleyebilirim?

Bir konunun çok dilli (uluslararasılaştırma ve yerelleştirme) özelliklerini desteklemesi için birkaç adım gereklidir. Öncelikle,style.css的Text DomainTüm dinamik metinlerde çeviri fonksiyonu kullanılmalıdır, örneğin:__()、_e()Ardından, Poedit gibi bir araç kullanarak içeriği dönüştürün..potÇeviri şablonu dosyasını dönüştürün ve çevirmenin buna karşılık geleni oluşturmasını sağlayın..po和.moDosya. Son olarak,functions.phpÇince'de kullanılır.load_theme_textdomain()Bir fonksiyon, çeviri dosyalarını yüklemek için kullanılır.

Geliştirme işlemi tamamlandıktan sonra, temayı WordPress resmi temalar dizinine nasıl gönderebilirsiniz?

Bir tema’yı WordPress.org’un resmi kataloğuna göndermek için katı gereksinimlerin karşılanması gerekmektedir. “Tema İnceleme Standartları”nı dikkatlice okumanız, kodunuzun güvenli olduğundan, WordPress kodlama standartlarına ve PHP’nin en iyi uygulamalarına uyduğundan emin olmanız gerekmektedir. Tema, tamamen GPL lisansına uygun olmalı, responsive (uyumlu) tasarımı desteklemeli ve WordPress.org dışında barındırılan eklentileri önermemeli veya bunlara bağımlı olmamalıdır. Gönderim işlemi, WordPress’in resmi web sitesindeki gönderim sistemi aracılığıyla yapılır ve ardından inceleme kuyruğuna alınır; inceleme işlemi gönüllü bir ekip tarafından gerçekleştirilir.