WordPress temasının temel bileşenleri.

Tavsiye edilen okuma Günümüzün rekabetçi çevrimiçi dünyasında, iyi tasarlanmış ve yüksek performanslı bir Word belgesi。

Konu stil sayfasının başlık bilgileri

Konununstyle.cssDosya başlığı, biçimlendirilmiş bir açıklama içermelidir. WordPress, bu bilgiyi okuyarak temayı arka planda tanır ve görüntüler.

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 Awesome Theme
Theme URI: https://example.com/my-awesome-theme/
Author: Your Name
Author URI: https://example.com/
Description: A modern, responsive WordPress theme built for speed and SEO.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
*/

Burada, “Metin Alanı” uluslararasılaşma için kullanılır ve sonraki dil çevirileri sırasında kullanılan bir tanımlayıcıdır. Genellikle tema klasörü adıyla uyuşur.

Tema işlevsel dosyalarının yaygın kullanımı.

functions.phpDosyalar, bir konunun “beyni”dir. Yaygın bir işlem, bunları kullanmaktır.add_theme_support()İşlev, temanın desteklediği özellikleri beyan eder. Örneğin, makale özellikli resimlerin, özel logoların, özel arka planların vb. etkinleştirilmesi.

<?php
function my_awesome_theme_setup() {
    // 添加对文章特色图片的支持
    add_theme_support( 'post-thumbnails' );
    // 添加对自定义Logo的支持
    add_theme_support( 'custom-logo' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    // 添加对标题标签的支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );
?>

Bu kod, bir hook aracılığıylaafter_setup_themeTemayı yükledikten sonra çalıştırıldığında, birçok WordPress çekirdek özelliği güvenli bir şekilde etkinleştirilir.

Şablon hiyerarşisi ve özel şablonlar.

WordPress, farklı türdeki sayfaların nasıl görüntüleneceğini belirlemek için “Şablon Hiyerarşisi” adlı akıllı bir sistem kullanır. Bir kullanıcı bir sayfaya eriştiğinde, WordPress belirli bir öncelik sırasına göre ilgili şablon dosyalarını arar. Örneğin, “Haber” olarak sınıflandırılmış bir makale için, WordPress sırasıyla şunları arar:single-post-news.php -> single-post.php -> single.php -> singular.php -> index.phpGeliştiriciler, belirli adlandırılmış şablon dosyaları oluşturarak sayfa kontrolünü daha da hassas hale getiren bu kurallardan yararlanabilirler.

Tavsiye edilen okuma WordPress tema geliştirmeye giriş: Sıfırdan özelleştirilmiş bir web sitesi oluşturma.。

Sistem tarafından belirlenen şablonların yanında, geliştiriciler “sayfa şablonları” da oluşturabilir. Bu, belirli bir sayfa veya sayfa sınıfı için tasarlanmış özel şablonlardır. Bir sayfa şablonu oluşturmak için, şablon dosyasının başlık yorumunda açıkça belirtmek gerekir.

Özel sayfa şablonu oluşturun.

Örneğin, tam genişlikte bir sayfa şablonu oluşturmak için, adında yeni bir şablon oluşturabilirsiniz.template-fullwidth.phpDosyaları ve belgeleri düzenleyin ve dosyaların başına aşağıdaki notu ekleyin:

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

Daha sonra, WordPress yönetim alanındaki düzenleme sayfasında, “Sayfa Özellikleri”nin “Şablon” açılır menüsünde “Tam Genişlik Sayfa Düzeni”ni görebilir ve seçebilirsiniz. Bu, içerik görüntüsü için büyük esneklik sağlar ve özel düzenleme gereksinimlerini karşılamak için tema ana dosyalarını değiştirmenize gerek kalmaz.

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.

Logik kontrol için koşul etiketlerini kullanın.

Şablon dosyalarında, farklı koşullara göre farklı içerikleri göstermek gerekir. Bu durumda, WordPress'in koşul etiketlerini kullanmanız gerekir. Örneğin,index.phpÇin'de, mevcut sayfanın bir makale listesi sayfası mı yoksa tek bir makale sayfası mı olduğunu belirlemek için koşullu etiketler kullanılabilir, ancak genellikle daha spesifik şablon dosyaları bununla sorumludur.

<?php if ( is_home() && ! is_front_page() ) : ?>
    <h1>Blog yazısı listesi.</h1>
<?php elseif ( is_search() ) : ?>
    <h1>Arama sonuçları:</h1>
<?php endif; ?>

Yaygın koşul etiketleri ayrıca şunları içerir:is_single()、is_page()、is_category()、is_archive()Bunlar, dinamik ve akıllı temalar oluşturmanın temel taşlarıdır.

Konunun senaryo ve stil yönetimi.

Konunun istikrarını ve performansını sağlamak için, tüm JavaScript ve CSS dosyaları, doğrudan şablon dosyalarında kullanmak yerine, WordPress tarafından sağlanan yöntemlerle sırayla yüklenmelidir.或Etiket. Bu,functions.phpÇin'dekiwp_enqueue_scriptsBunu gerçekleştirmek için hooklar kullanılır.

Tavsiye edilen okuma Pratik odak noktası: Modern WordPress tema geliştirme temel becerilerini sıfırdan bire kadar öğrenin.。

Kaynakları doğru şekilde kaydet ve sıraya geç.

Kullanın.wp_register_script()和wp_enqueue_script()(Senaryo) veya buna karşılık gelenwp_register_style()和wp_enqueue_style()(Stil) fonksiyonu, WordPress'in bağımlılıkları ve sürüm kontrolünü tek bir yerden yönetmesini ve aynı zamanda yinelen yüklemeleri engellemesini sağlar.

<?php
function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

    // 注册一个自定义JavaScript文件
    wp_register_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true );
    // 排队这个脚本（仅在需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );
?>

Yukarıdaki örnekte,get_stylesheet_uri()Mevcut temanın bilgilerini almak için…style.cssYol,get_template_directory_uri()Konu dizinin URI'sini alın. Betikinin son parametresini Obtain the URI of the topic directory. Set the last parameter of the script totrueBu, altbilginin yüklenmesi anlamına gelir ve bu da sayfa yükleme performansını artırmaya yardımcı olur.

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.

İçeriğe entegre edilmiş stil veya komut dosyaları ekle.

Bazen, PHP mantığına göre bazı CSS veya JavaScript'leri dinamik olarak oluşturmak gerekir. Bu durumda, aşağıdakileri kullanabilirsiniz.wp_add_inline_style()和wp_add_inline_script()İşlevler, zaten sıraya alınmış bir kaynağa bağlı olmalıdır.

<?php
function my_dynamic_css() {
    $custom_css = "
        .site-header {
            background-color: #" . get_theme_mod('header_bg_color', 'ffffff') . ";
        }
    ";
    wp_add_inline_style( 'my-awesome-theme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_dynamic_css' );
?>

Konu özelleştiricisi ve özelleştirme fonksiyonları.

WordPress Teması Özelleştiricisi, kullanıcılara (yöneticilere) renk, logo, arka plan resmi gibi tema ayarlarını değiştirme imkanı sunan gerçek zamanlı bir önizleme arayüzü sunar. Tema Özelleştirici API'si sayesinde geliştiriciler, temaya güvenli bir şekilde yapılandırılabilir seçenekler ekleyebilir.

Özelleştiriciye bir ayar ekleyin.

Öncelikle, bunun için bir hesap açmanız gerekir.functions.phpÇince'de kullanılır.customize_registerHooke, ayarları, kontrolleri ve bölgeleri kaydetmek için kullanılır.

<?php
function my_awesome_theme_customize_register( $wp_customize ) {
    // 添加一个“颜色”板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-awesome-theme' ),
        'priority' => 30,
    ) );

    // 添加一个“链接颜色”设置
    $wp_customize->add_setting( 'link_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'    => __( '链接颜色', 'my-awesome-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'link_color',
    ) ) );
}
add_action( 'customize_register', 'my_awesome_theme_customize_register' );
?>

Konuda özel ayarları yazdırın.

Ayarları ekledikten sonra, bu değeri temanın ön uçunda çıktı olarak göstermeniz gerekir. Genellikle bunu etiketinin içinde yaparsınız.style.cssVeyawp_add_inline_style()Eklenen dinamik CSS'de, kullanılır.get_theme_mod()İşlev, değeri alır.

<?php
function output_customizer_css() {
    $link_color = get_theme_mod( 'link_color', '#0073aa' ); // 第二个参数为默认值
    if ( $link_color !== '#0073aa' ) {
        $css = "
            a { color: {$link_color}; }
            a:hover { color: " . adjust_color( $link_color, -50 ) . "; }
        ";
        wp_add_inline_style( 'my-awesome-theme-style', $css );
    }
}
add_action( 'wp_enqueue_scripts', 'output_customizer_css' );
?>