Podstawowe elementy składowe tematów WordPress

Polecamy lekturę. W dzisiejszym intensywnie konkurencyjnym świecie internetu dobrze zaprojektowany i wydajny program Word to kluczowy element, który pomaga w efektywnym wykonywaniu zadań.。

Informacje o nagłówku pliku z definicjami stylu tematycznego

Tematycznystyle.cssNa początku pliku musi znajdować się komentarz w standardowym formacie. WordPress używa tej informacji, by w tle rozpoznać i wyświetlić odpowiedni temat.

UltaHost – hostingu dla stron WordPress

Gwarancja zwrotu pieniędzy w ciągu 30 dni, nieograniczony przepustowość sieci i dostęp do bazy danych, bezpłatna ochrona przed atakami typu DDoS. Promocja: 50% przy zakupie na 3 lata.

strona dostępu

/*
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
*/

“Text Domain” służy do celów internacjonalizacji i stanowi identyfikator używany podczas przekładów językowych; zwykle odpowiada nazwie folderu zawierającego materiały tematyczne.

Zwykłe operacje nad plikami z funkcjami tematycznymi

functions.phpPlik jest “umysłem” tematu. Częsta operacja polega na…add_theme_support()Funkcje służą do deklarowania dostępnych opcji w temacie. Na przykład: włączenie zdjęć specjalnych do artykułów, ustawienie własnego loga, wybranie własnego tła itd.

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

Ten kod wykorzystuje „hooki” (zawody) do realizacji określonych działań.after_setup_themeFunkcje te są bezpiecznie włączone po nałożeniu tematu i umożliwiają korzystanie z wielu podstawowych funkcji WordPress.

Poziomy szablonów i dostosowane szablony

WordPress wykorzystuje inteligentny system zwany “struktura szablonów” (“Template Hierarchy”), aby decydować, jak renderować różne typy stron. Gdy użytkownik odwiedza jakąś stronę, WordPress wyszukuje odpowiedni plik szablonu według określonego porządku priorytetów. Na przykład, w przypadku artykułu z kategorii „News” WordPress sprawdza kolejno:single-post-news.php -> single-post.php -> single.php -> singular.php -> index.phpProgramiści mogą korzystać z tych zasad, tworząc pliki szablonów o określonych nazwach, aby uzyskać bardziej dokładną kontrolę nad wyglądem stron.

Polecamy lekturę. Podróż po świecie rozwoju tematów WordPress: jak stworzyć własną, dostosowaną stronę internetową od zera。

Poza standardowymi szablonami ustalonymi przez system, programiści mogą tworzyć “szablony stron”. To są dostosowane do potrzeb konkretnej strony lub grupy stron szablony. Aby stworzyć szablon stron, należy to wyraźnie zaznaczyć w komentarzach umieszczonech na początku pliku z definicją szablonu.

Stwórz niestandardowy szablon strony.

Na przykład, aby stworzyć szablon strony o pełnym rozmiarze ekranu, można utworzyć nowy plik o nazwie…template-fullwidth.phpPlików i dołącz do nich następujący komentarz na początku pliku:

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

Później, edytując stronę w panelu administracyjnym WordPress, można zobaczyć i wybrać opcję “Full Width Page Layout” (Układ strony w pełnym rozmiarze) z rozwijanego menu “Ustawienia strony” (Page Settings) → “Szablony” (Templates). To daje dużą swobodę w przygotowaniu wyglądu treści, bez konieczności modyfikacji podstawowych plików tematu.

hosting.com Hosting współdzielony

Wysoka wydajność dzięki procesorom AMD EPYC, pamięci masowej NVMe SSD i LiteSpeed, wewnętrzne wsparcie ekspertów 24/7, zaawansowane środki bezpieczeństwa, w tym SSL, brute force, ochrona przed złośliwym oprogramowaniem i DDoS, oszczędność do 73%

strona dostępu

Używanie tagów warunkowych do realizacji kontroli logicznej

W plikach szablonów często konieczne jest wyświetlanie różnych treści w zależności od określonych warunków. W takich przypadkach przydatne są tagi warunkowe w WordPress. Na przykład:index.phpMożna użyć tagów warunkowych, aby ustalić, czy aktualna strona jest listą artykułów, czy stroną pojednego artykułu, chociaż zwykle za to odpowiadają bardziej specjalizowane pliki szablonów.

<?php if ( is_home() && ! is_front_page() ) : ?>
    <h1>Lista artykułów na blogu</h1>
<?php elseif ( is_search() ) : ?>
    <h1>搜索结果：</h1>
<?php endif; ?>

Powszechnie używane tagi warunkowe to również:is_single()、is_page()、is_category()、is_archive()Itp. To są kluczowe elementy potrzebne do budowy dynamicznych, inteligentnych tematów (tematów stron internetowych).

Używanie skryptów i zarządzanie stylami w tematach

Aby zapewnić stabilność i dobrą wydajność tematu, wszystkie pliki JavaScript i CSS powinny być ładowane w kolejności, zgodnie z metodami dostępnymi w WordPress, a nie bezpośrednio w plikach szablonów.或Tagi. To zostało zrealizowane poprzez…functions.php„W…”wp_enqueue_scriptsZrealizowano to za pomocą „haków” (ang. hooks).

Polecamy lekturę. Fokus na praktyce: Od zera do opanowania kluczowych umiejętności w rozwoju tematów dla WordPressa。

Poprawne rejestrację oraz ustawienie zasobów w kolejce oczekiwania.

Użyjwp_register_script()和wp_enqueue_script()(Skrypt) lub odpowiadający element.wp_register_style()和wp_enqueue_style()Funkcje stylowe umożliwiają WordPressowi jednolite zarządzanie zależnościami, kontrolą wersji oraz unikanie powtarzającego się ładowania elementów.

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

W powyższym przykładzie…get_stylesheet_uri()Udostępnienie aktualnego tematu…style.cssŹródłowy adres URL.get_template_directory_uri()Udostępnij URI katalogu tematycznego. Ustaw ostatni parametr skriptu na…trueOznacza to, że elementy są ładowane w nagłówku strony, co pomaga poprawić szybkość jej otwarcia.

Hosting współdzielony InterServer

Hosting współdzielony $2.50 USD miesięcznie, pierwszy miesiąc $0.1 USD kod promocyjny tryinterserver, 461 skryptów aplikacji w chmurze, instalacja jednym kliknięciem.

strona dostępu

Dodanie wstępnego stylu lub skriptu

Czasami konieczne jest dynamiczne generowanie kodu CSS lub JavaScript na podstawie logiki PHP. W takich przypadkach można użyć odpowiednich narzędzi lub metod.wp_add_inline_style()和wp_add_inline_script()Funkcje muszą być powiązane z jakimś zasobem, który jest już w kolejce otrzymania.

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

Narzędzia do personalizacji tematów oraz dostosowania funkcji

WordPress Customizer oferuje interfejs z w czasie rzeczywistym, który umożliwia użytkownikom (adminstratorom) modyfikację niektórych ustawień tematu, takich jak kolory, logo, zdjęcie tła itd. Za pomocą API Customizera deweloperzy mogą bezpiecznie dodawać do tematu nowe, konfigurowalne opcje.

Dodaj ustawienie w konfiguratorze.

Najpierw trzeba…functions.phpUżyj tego w Chinach.customize_registerHakówki służą do rejestracji ustawień, kontrolerów oraz obszarów.

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

W temacie wyświetlone są ustawienia dostosowane przez użytkownika.

Po ustawieniu tego wartości konieczne jest jej wyświetlenie na frontendzie tematu. To zwykle robi się w następujący sposób:style.cssLub poprzez…wp_add_inline_style()W dodanym dynamicznym CSS-u zostały użyte następujące elementy:get_theme_mod()Funkcja pobiera wartość.

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

Dzięki temu sposobowi funkcje i wygląd tematu są w wysokim stopniu konfigurowalne, a przy tym kod zachowuje się schludny i bezpieczny.

Podsumowanie.

Rozwoj tematu dla WordPress to proces wymagający systematycznego podejścia, obejmujący głębokie zrozumienie struktury szablonów, funkcji wewnętrznych platformy, mechanizmów zarządzania zasobami oraz możliwości dostosowania interfejsu za pomocą API. Począwszy od stworzenia najprostszego tematu…style.css和index.phpZacznijmy od tworzenia specjalnych plików szablonów, które umożliwią kontrolę wyglądu różnych stron.functions.phpRozszerzanie funkcji tematów oraz zarządzanie skryptami i stylami zgodnie z normami WordPress stanowią podstawę do stworzenia solidnych i wydajnych tematów. Dodatkowo integracja API do edycji tematów umożliwia użytkownikom przyjazną, czasą rzeczywistym eksperiencję przy personalizacji. Opanowanie tych kluczowych koncepcji i umiejętności jest kluczowym elementem na drodze do zostania profesjonalnym developerem tematów dla WordPress.

FAQ – najczęściej zadawane pytania.

Jaki minimalny zestaw plików jest wymagany do stworzenia najprostszego tematu dla WordPress?

Najprostszego tematu, który jest rozpoznawany przez WordPress, potrzebne są co najmniej dwa pliki:style.css和index.php。style.cssNawias górnego musi zawierać poprawne informacje o temacie, a także odpowiednie komentarze.index.phpTo ostatni plik rezerwowy w hierarchii szablonów, służący do wyświetlania najprostszego, najbasowego zawartości.

W jaki sposób różnią się podtematy (subtopics) od tematów głównych (parent topics)? Jak je tworzyć?

Podtematy dziedziczą wszystkie funkcje i style od tematu rodziców, ale umożliwiają programistom ich modyfikację i dostosowanie bez konieczności edycji plików tematu rodziców. To ułatwia zachowanie własnych zmian po aktualizacjach tematu rodziców. Aby stworzyć podtemat, wystarczy tylko…/wp-content/themes/W katalogu utwórz nowy folder i w nim kolejny folder.style.cssPlik musi zawierać komentarze w swoim nagłówku.Template:W tym wierszu określono nazwę katalogu zawierającego temat rodzicielski.

Dlaczego moje własne szablony stron nie są wyświetlone w rozwijanym menu w backendzie?

Proszę sprawdzić plik z szablonem strony (np. …).my-template.phpCzy plik znajduje się w korzenowym katalogu tematu, a blok komentarzy na początku pliku musi mieć właściwy format? W bloku komentarzy muszą być zawarte określone elementy.Template Name:Ta linia, a tuż po niej musi znajdować się nazwa twojego szablonu. Błędna liczba przestrzeni lub brak kroku mogą sprawić, że WordPress nie będzie w stanie jej rozpoznać.

Jak zrobić, aby moja tematyczna strona obsługiwała tłumaczenie w kilku językach?

To jest realizowane przede wszystkim poprzez procesy “internacjonalizacji” (i18n – internationalization) i “localizacji” (l10n – localization). Najpierw…style.css“Text Domain” i…functions.php的load_theme_textdomain()W czasie wykonywania procedury należy używać jednolitego tekstu tematycznego. Następnie w miejscach, gdzie konieczne jest tłumaczenie tekstów, należy zastąpić oryginalne wyrazy tłumaczonymi odpowiednikami.__()、_e()Zawij to w funkcję tłumaczeniową. Na koniec użyj narzędzia takiego jak Poedit do generowania wyników tłumaczenia..potPliki szablonów, a także pliki zawierające tekst w odpowiednim języku..po和.moPlik umieszczony w temacie./languages/W katalogu.