WordPress Tema Geliştirme: İlk Özel Temanızı Sıfırdan Oluşturun

WordPress temalarının temel yapısını anlamak

Kod yazmaya başlamadan önce, bir WordPress temasının temelini anlamak gereklidir: şablon dosyaları ve stil şemaları. WordPress, web sitesinin farklı bölümlerini renderlemek için belirli dosyaları çağırır ve bu dosyalar standartlaştırılmış adlandırma kurallarına uyar. En basit bir tema sadece iki dosyaya ihtiyaç duyar:index.php(Ana şablon dosyası) vestyle.css(Küçük resimler, bağlantılar, sosyal medya butonları vb. içerebilecek) Temel stil şablonları ve tema bilgi dosyaları mevcut, ancak işlevsel bir web sitesi oluşturmak için daha fazlasına ihtiyacımız var.

style.cssDosya yalnızca CSS kurallarını içermekle kalmaz; aynı zamanda dosyanın baş kısmındaki yorum blokları, temanın meta verilerini de tanımlar (tema adı, yazar, açıklama ve sürüm gibi). WordPress, bir temayı bu şekilde tanır. Örneğin, temel bir başlık yorumu şu şekildedir:

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Çekirdek dosyaların yanı sıra, tipik bir tema yapısı ayrıca şunları da içerir:header.php(Kafa sallayarak)footer.php(Site alt kısmında),sidebar.php(Sidebar) vefunctions.php(“Konu Fonksiyonları Dosyaları”). Bu dosyaların, şablon etiketleri (örneğin…) aracılığıyla nasıl kullanılacağını anlamak.get_header(), get_footer()Modüler bir şekilde birleştirmek, verimli geliştirmenin anahtarıdır.

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Kendi Özel Web Sitesi Arayüzünüzü Oluşturun。

Bir tema dosyası ve dizini oluşturmak

Öncelikle, WordPress’in kurulum dizini altındaki…wp-content/themes/Bir yeni klasör oluşturun. Bu klasörün adı, konunuzun tanımlayıcısı olacaktır. Küçük harfler, rakamlar ve tireler kullanmanız önerilir; örneğin:my-first-themeTüm tema dosyaları buraya yerleştirilecektir.

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.

Çekirdek stil şablonu dosyasını oluşturun.

Daha önce de vurgulandığı gibi,style.cssBu dosyanın oluşturulması zorunludur. Bu dosyayı “tema” klasöründe oluşturun ve temanın tüm bilgilerini içeren başlık bölümünü doldurun. Daha sonra, web sitesinin görünümünü tanımlamak için temel CSS kodlarını yazmaya başlayabilirsiniz. Tarayıcıların varsayılan stillerinin etkisini önlemek için genellikle stilleri sıfırlayarak (resetleyerek) işe başlanır.

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

Ana şablon dosyasını oluşturun.

Sonrasında, oluşturun.index.phpBu, varsayılan ve en önemli şablon dosyasıdır. Temel yapısı, başlık bölümüne, içerik döngüsüne ve alt kısma yapılan atıfları içermelidir. Şablon etiketleri, dinamik içerik eklemek için WordPress’in yerleşik fonksiyonlarıdır.
Son derece sade bir tasarım.index.phpBaşlangıç sürümü şu şekilde olabilir:

<?php get_header(); ?>

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

Şablonu ayırma: Üst kısım, alt kısım ve kenar çubuğu

Kodun tekrar kullanılabilirliği ve netliği için, WordPress temaları genellikle sayfaların ortak kısımlarını ayrı dosyalara ayırır.

Site başlık şablonunu gerçekleştirin.

Oluşturheader.phpBu dosya, bir HTML belgesinin baş kısmını (header) içermektedir.到Etiketlerin açıldığı bölüm ve web sitesinin üst kısmındaki navigasyon alanı. Önemli şablon etiketleri arasında…bloginfo()Site bilgilerini almak için kullanılır, ayrıca…wp_head()Kancalar (hooks), eklentilerin ve temaların kodu belirli yerlere enjekte etmesine olanak tanır.
Temel bir…header.phpÖrnek:

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

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1005>
<?php wp_body_open(); ?>
<header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a href="/tr/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p class="site-description"><?php bloginfo('description'); ?></p>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

Sitenin alt kısmı için bir şablon oluşturun.

Oluşturfooter.phpİçerisinde, ana içerik bölgesinin sonundan itibaren gelen tüm içerikleri barındırır; örneğin sayfa altındaki telif hakkı bilgileri ve çok önemli diğer detayları içerir.wp_footer()Kancalı (hook-based) çağrılar, birçok eklentinin (örneğin kod analizi yapan eklentilerin) düzgün çalışması için gereklidir.

<footer class="site-footer">
    <p>©  . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
\n

Temaların özelliklerini geliştirme ve özelleştirme

functions.phpBu, temanızın “beyni” gibidir; işlevler eklemek, özellikler (örneğin navigasyon menüsü, araç çubuğu gibi) kaydetmek ve betik stillerini düzenlemek için kullanılır, ancak çekirdek dosyaları değiştirmenize gerek kalmaz.

Kayıtlı konuların desteklediği özellikler:

在functions.phpBurada kullanabilirsiniz.add_theme_support()Bu fonksiyonlar, bir temanın desteklediği özellikleri belirtmek için kullanılır. Örneğin, makale özetlerinin (özel görsellerin) ve özelleştirilmiş simgelerin etkinleştirilmesi, modern temaların standart özelliklerindendir.

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.

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

Stil tablosuna ve betiğe ekleyin.

Doğru stil ve betik yükleme yöntemi, bunları belirli bir sırayla ve uygun şekilde kullanmaktır.wp_enqueue_style()和wp_enqueue_script()fonksiyonları ve bunları bağlamak.wp_enqueue_scriptsKancada. Bu, bağımlılıkların yönetilmesini sağlar ve tekrarlanan yüklemelerin önlenmesine yardımcı olur.

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入主JavaScript文件
    wp_enqueue_script('my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Özetle.

Konu klasörünü oluşturduktan sonra…style.cssBaşlamak, inşa etmeye kadar…index.phpAyrıştırınheader.php和footer.phpÖnce şablon dosyalarını bekleyin, ardından bunları kullanarak devam edin.functions.phpBu dosya, temanıza temel özellikler ve kaynaklar ekler ve bu süreç, WordPress tema geliştirmenin temel çerçevesini oluşturur. Her adım, WordPress şablon hiyerarşisi kavramını ve en iyi uygulamalarını vurgular; örneğin şablon etiketlerinin ve eklentilerin (hook’ların) doğru kullanımı gibi. Bu temelleri öğrendiğinizde, farklı projelerin ihtiyaçlarını karşılamak için herhangi bir özelliği özelleştirmek ve genişletmek için sağlam bir başlangıç noktasına sahip olursunuz.

Sıkça Sorulan Sorular.

###: Bir WordPress temasının en az kaç dosyasına ihtiyacı vardır?
İşlevsel bir WordPress teması en az iki dosyaya ihtiyaç duyar:index.php和style.cssBunlar arasında,style.cssDosyanın en üstündeki yorum bloğunun bulunması ve doğru tema bilgilerini içermesi gerekmektedir; bu, WordPress’in temayı tanıması için zorunlu bir koşuldur.

Tavsiye edilen okuma Sıfırdan bire: WordPress tema geliştirme kapsamlı rehberi ve uygulamalı eğitimi.。

Kendi temama nasıl bir araç çubuğu bölgesi ekleyebilirim?

You need to pass throughfunctions.phpBu dosya, araç çubuğunda (yan çubukta) bir eklenti (widget) bölgesi oluşturmak için kullanılır.register_sidebar()Bir fonksiyon oluşturun ve parametrelerini belirtin; örneğin ad, ID ve açıklama gibi. Daha sonra, ilgili şablon dosyasında (örneğin…) bu fonksiyonu kullanabilirsiniz.sidebar.php) içinde kullanılırdynamic_sidebar()Bir fonksiyon kullanarak onu çağırabilirsiniz.

Neden özel navigasyon menüm gösterilmiyor?

Bu genellikle, gerekli ayarların yapılmamış olmasından kaynaklanır.functions.phpSebze biriminin yerini doğru bir şekilde kaydettiniz. Lütfen kullandığınızdan emin olun.register_nav_menus()Bir yemek birimi konumunu (örneğin ‘primary’) kaydetmek için bir fonksiyon kullanılır ve ayrıca…header.phpOrtada yapılan çağrı (The call made in the middle)wp_nav_menu()O zaman,‘theme_location’Parametre ayarlarının değerleri, kayıt sırasındaki değerlerle tamamen uyumlu. Son olarak, WordPress arayüzünün “Görünüm > Menüler” bölümünde, belirli bir menünün bu konuma atanması gerekiyor.

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.

我应该在什么时候使用get_template_part()函数？

get_template_part()Fonksiyonlar, yeniden kullanılabilir kod parçalarını modüler hale getirmek için kullanılır ve özellikle makalelerde farklı formatlardaki içeriklerin çıktısını oluştururken çok uygundur. Örneğin, bir fonksiyon oluşturabilirsiniz…content.phpBu dosya, her makalenin genel HTML yapısını tanımlar ve ardından…index.phpDöngü içinde kullanılır.get_template_part(‘content’)Onu çağırın. Bu, kodun yeniden kullanılabilirliğini ve sürdürülebilirliğini artırır; aynı zamanda daha profesyonel şablonlar oluşturmayı da kolaylaştırır (örneğin…).content-page.phpBu, mümkün hale getirir.