Od zera: Podstawy tematów w WordPressie
Aby zrozumieć proces tworzenia tematów dla WordPress, należy najpierw ustalić ich podstawową strukturę. Temat WordPress to w istocie zbiór plików, które razem decydują o wyglądzie i funkcjonalności witryny – w tym o stylach, szablonach, skryptach funkcjonalnych oraz innych elementach takich jak obrazy. Podstawowym plikiem tematu jest… style.css 和 index.phpPierwszy plik stanowi “dowód tożsamości” tematu oraz definicje stylu, natomiast drugi plik to standardowy szablon.
Header pliku z informacjami tematycznymi
W katalogu głównym każdej tematy musi znajdować się plik. style.css Plik zawiera specjalny comentarz umieszczone w jego nagłówku, który służy do podania podstawowych informacji o temacie do WordPress. Ten nagłówek informacyjny jest kluczowym elementem, który umożliwia identyfikację i włączenie tematu przez WordPress.
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 开发者名称
Author URI: https://example.com
Description: 这是一个用于学习 WordPress 主题开发的简单主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/ Wśród nichText Domain Wykorzystuje się do celów internacjonalizacji i stanowi kluczowy element umożliwiający dalsze pobieranie plików z tłumaczeniami.
Polecamy lekturę. Podróż po świecie rozwoju tematów WordPress: jak stworzyć własną, dostosowaną stronę internetową od zera。
Co robi plik szablonu podstawowy?
Oprócz tego style.cssTemat musi zawierać co najmniej jedno plikówkę z szablonem PHP. Najprostszym rozwiązaniem jest… index.phpTo jest szablon rezerwowy dla wszystkich stron. WordPress używa go wtedy, gdy nie może znaleźć bardziej specyficznego pliku szablonu. Inne ważne pliki szablonów to te, które są używane do wyświetlania pojedynczych artykułów. single.phpWykorzystywany do wyświetlania listy artykułów. archive.phpWykorzystywane do wyświetlania strony. page.php A także definicje elementów znajdujących się w górnej i dolnej części witryny („head” i „foot”). header.php 和 footer.php。
Struktura kluczowych elementów szablonu tematycznego
WordPress wykorzystuje system poziomów szablonów, aby decydować, jaki plik szablonu ma zostać użyty dla aktualnego żądania. Ten system działa zgodnie z zasadą od specjalnego do ogólnego, co umożliwia programistom tworzenie wyjątkowo dostosowanych rozwiązań dla różnych typów stron.
Zrozumienie kolejności ładowania szablonów.
Gdy użytkownik odwiedza artykulik na blogu, WordPress sprawdza w następującym porządku pliki z szablonami:single-{post-type}-{slug}.php、single-{post-type}.php、single.phpNa koniec… singular.php 和 index.phpNa przykład, jeśli strona o nazwie “about” ma typ posta „page”, WordPress najpierw sprawdzi… page-about.phpA potem szukać. page.phpNajpierw robi się inne rzeczy, a dopiero na końcu używa się tego. index.php。
Utwórz plik szablonu, który często będziesz używać.
Temat pełnowartościowy zawiera zwykle następujące podstawowe pliki szablonów:
- header.phpZawiera deklarację typu dokumentu.<head> Część początkowa obszaru i witryny (np. menu nawigacyjne). Można używać to w innych szablonach. get_header() Wprowadzenie funkcji.
- footer.phpZawiera część końcową witryny internetowej (np. informacje o autorskich prawach). Użyj tego. get_footer() Wprowadzenie funkcji.
- index.phpŚródlądowa szablonowa struktura, która stanowi ostateczne rezerwowe rozwiązanie dla wszystkich stron.
- page.phpWykorzystuje się do wyświetlania statycznych stron.
- single.phpWykorzystuje się do wyświetlania pojednego artykułu.
- archive.phpWykorzystuje się do wyświetlania kategorii, tagów, autorów, dat itd. na stronach archiwów.
Rozdzielając te elementy, można znacząco poprawić wielokrotną używalność i łatwość konserwacji kodu. W szablonie głównego cyklu zwykle używa się struktury podobnej do tej poniżej:
Polecamy lekturę. Praktyczny przewodnik po rozwoju tematów dla WordPressa: jak od zera stworzyć własną architekturę tematu i szablony。
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 显示文章内容
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
// 如果没有文章
echo '<p>暂无内容。</p>';
endif;
?> Ulepszenie funkcji tematów za pomocą funkcji i hooków
Wysokiej jakości temat musi mieć nie tylko ładny interfejs, ale także dużą rozszerzalność. To jest osiągnięte przede wszystkim dzięki dwóm kluczowym funkcjom WordPressa: funkcjom (functions) i hakom (hooks). functions.php To jest głównie miejsce, w którym dodawane są te funkcje.
Plik z funkcjami tematycznymi
functions.php Pliki są automatycznie ładowane podczas inicjalizacji tematu i służą do definiowania funkcji tematu, rejestracji menu, bokówki, a także do dodawania różnych filtrów i działań. Są jak “mózg” tematu – kontrolują jego logikę działania.
Na przykład, kod do rejestracji menu nawigacyjnego oraz włączenia funkcji prezentacji miniatur artykułów wygląda tak:
<?php
function my_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
// 启用文章特色图像支持
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?> W tym miejscu zostały użyte „akcyjne haczyki” (action hooks). after_setup_themeDzięki temu możemy wykonywać własne funkcje po ustawieniu podstawowych parametrów tematu. my_theme_setup。
Rozumienie działań i filtrów (Understanding Actions and Filters)
Hakówki („hooks”) dzielą się na dwa typy: akcje („Actions”) i filtry („Filters”). Akcje umożliwiają wstawienie i wykonywanie własnego kodu w określonym momencie – na przykład po opublikowaniu treści artykułu. Filtry z kolei pozwalają modyfikować dane generowane podczas działania WordPress.
Na przykład, można użyć filtrów do zmiany długości tekstu opisu:
Polecamy lekturę. Przewodnik po tworzeniu tematów dla WordPress: budowanie profesjonalnych tematów od zera。
<?php
function my_excerpt_length( $length ) {
return 20; // 将摘要长度改为20个单词
}
add_filter( 'excerpt_length', 'my_excerpt_length' );
?> Aby dodać oświadczenie o prawach autorskich na końcu tekstu, użyj odpowiedniej akcji:
<?php
function my_post_footer( $content ) {
if ( is_single() ) {
$content .= '<p class="copyright">本文版权归本站所有。</p>';
}
return $content;
}
add_filter( 'the_content', 'my_post_footer' );
?> Implementowanie projektowania responsywnego oraz personalizacji tematów
Obecne tematy dla WordPress muszą być responsywne oraz oferować wygodne opcje dostosowania. To wymaga połączenia technologii CSS z API do personalizacji w WordPress.
Aplikacja wykorzystuje CSS z możliwością dostosowania wyglądu według rozmiaru ekranu (tzw. responsywne CSS).
Wzorowanie reaktywnego projektowania często jest realizowane za pomocą zapytań mediów w CSS. style.css Możesz definiować różne stile wzorów dla różnych szerokości ekranów.
/* 基础样式 */
.container {
width: 100%;
padding: 20px;
}
/* 平板设备(宽度大于768px) */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* 桌面设备(宽度大于992px) */
@media (min-width: 992px) {
.container {
width: 970px;
}
} Integracja ustawień kreatora dostosowanego (customizer settings)
WordPress Customizer umożliwia użytkownikom w czasie rzeczywistym przeglądanie i modyfikację ustawień tematów. functions.phpMożesz dodać różne opcje do tematu, np. możliwość załadowania loga, wybór koloru itd.
Poniżej jest przykład opcji umożliwiającej dodanie tekstu informującego o prawach autorskich w nagłówku strony (footer).
<?php
function my_theme_customize_register( $wp_customize ) {
// 添加一个设置项
$wp_customize->add_setting( 'footer_copyright_text', array(
'default' => '© 2026 我的网站。',
'sanitize_callback' => 'sanitize_text_field',
) );
// 为设置项添加一个控件(输入框)
$wp_customize->add_control( 'footer_copyright_text', array(
'label' => __( '页脚版权文本', 'my-first-theme' ),
'section' => 'title_tagline', // 放在“站点身份”区域
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_theme_customize_register' );
?> W pliku szablonu footer.php W tym przypadku możesz wyświetlić wartość tego opcji w następujący sposób:
<p class="site-info">
<?php echo esc_html( get_theme_mod( 'footer_copyright_text', '© 2026 我的网站。' ) ); ?>
</p> Podsumowanie.
Rozwoj tematów dla WordPress wymaga połączenia umiejętności programowania w PHP, budowy struktur w języku HTML, tworzenia stylów w CSS oraz znajomości API serwisu WordPress. Zaczynając od zrozumienia najpodstawniejszych zasad… style.css Zacznij od plików szablonów i stopniowo opanuj system poziomów w tych szablonach, naucz się, jak… functions.php Wykorzystanie hooków do rozszerzania funkcjonalności tematów pozwala w końcu osiągnąć responsywny design oraz bogate możliwości personalizacji. To jasny szlak do zostania dobrym developerem tematów. Dodawanie kolejnych funkcji zgodnie z oficjalnymi standardami kodowania i najlepszymi praktykami nie tylko gwarantuje wysoką jakość i bezpieczeństwo tematów, ale także tworzy solidną podstawę dla ich dalszego utrzymywania i rozwoju w przyszłości.
FAQ – najczęściej zadawane pytania.
Jakie przedstawione wiedze są konieczne, aby nauczyć się tworzenia tematów dla WordPress?
Zaleca się posiadanie podstawowych znajomości HTML i CSS, które stanowią fundament budowy stron internetowych. Konieczna jest również podstawowa znajomość PHP, ponieważ serce WordPressa oraz jego system szablonów jest zbudowane na bazie tego języka programowania. Wiedza o JavaScriptu będzie przydatna podczas dalszego rozwoju interaktywnych funkcji na stronach internetowych.
Czy mogą wystąpić konflikty pomiędzy plikami functions.php w temacie a plikami functions.php w podtemacie?
Nie dojdzie do konfliktu – obie części zostaną załadowane. Podtematy (subtematy) będą dostępne również poza głównym tematem. functions.php Plik zostanie umieszczony w zależnym temacie (temacie pochodzącym z tematu głównego). functions.php Plik jest ładowany później. To oznacza, że możesz dodawać nowe funkcje do podtematów lub modyfikować funkcje zdefiniowane w temacie rodzinnym (pod warunkiem, że te funkcje w temacie rodzinnym zostały wyraźnie umożliwione do modyfikacji). Jest to zalecany sposób na bezpieczne zmiany w kluczowych funkcjach tematu.
Jak zrobić, aby moja tematyczna strona była wsparzona w kilku językach (internacjonalizowana)?
Musisz użyć funkcji internacionalizacji w WordPress, aby otoczyć wszystkie tekstowe stringi, które mają zostać wyświetlone na interfejsie. Najczęściej używa się funkcji `wpgettext()` i jej pochodnych. __() 和 _e() Funkcje, a także określenie miejsc, w których mają zostać wykorzystane. style.css Zdefiniowane w Chinach Text DomainNastępnie, użyj narzędzia takiego jak Poedit do generowania pliku szablonu .pot, który umożliwi tłumaczom tworzenie plików tłumaczeniowych .po i .mo. Te pliki należy umieścić w folderze tematu. /languages/ W katalogu.
Podczas rozwijania aplikacji z tematyką biznesową należy uwzględnić następujące aspekty prawne i normatywne:
Najważniejsze jest przestrzeganie licencji GNU GPL, która stanowi podstawę dla WordPress. To oznacza, że część kodu PHP tworzącego twoją tematyczną stronę internetową musi być objęta licencją zgodną z wymogami GPL. Zwykle cała tematyczna strona internetowa przechodzi na siebie zastosowanie tej licencji. Ponadto musisz upewnić się, że wszystkie zewnętrzne elementy, takie jak ikony, fonty czy biblioteki JavaScript, posiadają odpowiednie licencje umożliwiające ich komercyjne wykorzystanie. Co do standardów kodu, należy stosować zalecenia oficjalnych dokumentów WordPress i upewnić się, że twoja tematyczna strona przekona testy realizowane przez plugin Theme Check, aby zwiększyć szanse na jej umieszczenie w oficjalnym katalogu WordPress.
Następny krok, co dalej?
Dalsze lektury i praktyczna wiedza.
Poniższe treści są powiązane z tematem tego artykułu i warto je przeczytać. Zwykle lepiej zacząć od artykułu, który najbardziej odpowiada aktualnemu problemowi, a potem stopniowo przechodzić do tematów pokrewnych.
- Rozwój tematów WordPress od počzątków do mistrzostwa: pełny przewodnik po tworzeniu personalizowanych stron internetowych
- Rozwoj tematów WordPress od zera: stworzenie unikalnego interfejsu witryny internetowej
- Przewodnik po tworzeniu tematów dla WordPressa: budowanie własnych stron internetowych od zera
- Pełny przewodnik po rozwoju tematów dla WordPressa: praktyczny kurs od zera do mistrzostwa
- Pełny przewodnik po tworzeniu tematów dla WordPress: budowanie profesjonalnych szablonów stron internetowych od zera