Od zera: Pokazujemy ci, jak tworzyć własną tematę dla WordPress.

Rozwoj własnego tematu dla WordPress jest najlepszym sposobem na realizację Twoich kreatywnych idei i pełną kontrolę nad wyglądem oraz funkcjonalnością witryny internetowej. W odróżnieniu od tematów dostępnych w sprzedaży, tematy dostosowane pozwolają ci zacząć od zera i stworzyć witrynę, która idealnie odpowiada Twoim lub potrzebom Twoich klientów. Choć ten proces może na pierwszy rzut oku wydawać się skomplikowany, jeśli będziesz stosować oficjalne normy WordPress oraz kroki opisane w dokumentacji, wszystko pójdzie gładko. Ten tekst pokieruje cię krok po kroku przez cały proces – od tworzenia podstawowych plików po wdrożenie kluczowych funkcji.

Przygotowanie i ustawienie środowiska

Przed napisaniem pierwszego wiersza kodu potrzebny jest odpowiedni środowisko rozwoju oraz jasny plan projektu.

Utworzenie lokalnego środowiska rozwoju

Najpierw musisz uruchomić środowisko serwera PHP na swoim lokalnym komputerze. Zaleca się używać zintegrowanych pakietów, takich jak XAMPP, MAMP lub Local by Flywheel. Te narzędzia umożliwiają jednorazową instalację Apache, MySQL i PHP, eliminując konieczność skomplikowanej konfiguracji. Na przykład, po instalacji XAMPP pliki twojego witryny internetowej znajdują się zwykle w katalogu, w którym został zainstalowany program.htdocsW folderze. Tu możesz stworzyć nowy folder, na przykład…my-custom-themeTo będzie katalog źródłowy twojego tematu.

Polecamy lekturę. Naucz się tworzyć motywy WordPress od podstaw: podręcznik dla osób chcących stworzyć spersonalizowaną stronę internetową.。

Planowanie struktury tematycznego projektu

Standardowa tematyczna struktura WordPress składa się z co najmniej dwóch kluczowych plików:style.css和index.phpAle przed rozpoczęciem projektu zaleca się zaplanować jasną i rozszerzalną strukturę katalogów. Typowa struktura tematyczna w czasach współczesnych może wyglądać następująco:

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

my-custom-theme/
├── style.css          // 主样式表，包含主题信息头
├── index.php          // 主模板文件
├── functions.php      // 主题功能与函数文件
├── header.php         // 头部模板
├── footer.php         // 底部模板
├── sidebar.php        // 侧边栏模板
├── page.php           // 页面模板
├── single.php         // 文章页模板
├── archive.php        // 文章归档页模板
├── 404.php            // 404错误页模板
├── search.php         // 搜索结果页模板
├── assets/            // 静态资源目录
│   ├── css/           // 样式文件
│   ├── js/            // 脚本文件
│   └── images/        // 图片资源
└── templates/         // 可选的模板部件目录

Posiadanie dobrze zorganizowanej struktury kodu ułatwia jego organizację i utrzymanie.

Tworzenie pliku z kluczowymi tematami

To są fundamentalne elementy budujące temat („theme”). Nagłówki informacyjne („information headers”) zawarte w pliku powiedzą WordPress, że jest to ważny, poprawny temat.

Definowanie pliku stylu tematycznego

style.cssTo “dowód tożsamości” tematu, a blok komentarzy na jego szczycie (nazwa tematu) jest konieczny. WordPress używa tych informacji, by identyfikować i wyświetlać twoje tematy w tle systemu. Stwórz go.style.cssZaloguj się do systemu, otwórz plik i wpisz następujący tekst:

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个为了学习从零开始开发而创建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Wśród nichText DomainWykorzystuje się do realizacji procesu internationalizacji (i18n) i stanowi unikalny identyfikator twojego tematu; zwykle pokrywa się z nazwą foldera zawierającego elementy tego tematu. Po tym bloku komentarzy możesz zacząć pisanie swoich stylów CSS.

Polecamy lekturę. Przewodnik po tworzeniu tematów dla WordPress: kompletny kurs praktyczny od początkujących do doświadczonych użytkowników。

Stworzenie podstawowego pliku szablonu

index.phpTo jest standardowy szablon do odwoływania zmian na wszystkich stronach. Jest on najprostszym, ale możemy zacząć od prostej struktury HTML. Najpierw stwórz…header.phpPlik jest używany do przechowywania informacji o nagłówku dokumentu (zaczynających się od…)<!DOCTYPE html>Otworzyć.<body>(Część dotycząca etykiet) ifooter.phpSłuży do przechowywania zamykających się tagów oraz treści nagłówka strony (footer).

header.phpPrzykład:

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <p><strong>Witaj na mojej stronie!</strong></p>
</head>
<body no numeric noise key 1003>
    <header>
        <h1><a href="/pl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

Zwróć uwagę na to, że zostało użyte…wp_head()„Hooki” to elementy niezbędne do dodawania skryptów i stylów w core’u WordPressa, wtyczkach (plug-inach) oraz tematach (templates).

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

footer.phpPrzykład:

    <footer>
        <p>©  . Wszelkie prawa zastrzeżone.</p>
    </footer>
    <p><strong>WP_footer();</strong></p>

<p>Nie mogę znaleźć mojego portfela.</p>

Tu zostało użyte…wp_footer()Hak.

Teraz, twoje…index.phpMoże zostać bardzo zwięzłe:

Polecamy lekturę. Pełny przewodnik po tworzeniu tematów dla WordPress: budowanie tematów profesjonalnego poziomu od zera。

<p><strong>Witaj na mojej stronie!</strong></p>

<main>
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <article>
                <h2><?php the_title(); ?></h2>
                <div><p><strong>Treść artykułu</strong>: <p><strong>Dzięki za komentarz!</strong></p></div>
            </article>
        
        <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
    <?php endif; ?>
</main>

Ten szablon wykorzystuje podstawową funkcję nawigacji w WordPress („The Loop”) do wyświetlania listy artykułów.

Wdrożenie funkcji i dynamicznego zawartości

Prawdziwy temat nie jest tylko statyczną stroną internetową – musi interagować z core’em WordPress, ładować wymagane zasoby oraz realizować dynamiczne funkcje.

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

Napisz plik z funkcją tematyczną.

functions.phpTwój temat to “Mózg” – służy do dodawania różnych funkcji, menu rejestracji, bocznej nawigacji, a także do ładowania stylów i skryptów itd. Stworz tej plik i zacznij dodawać podstawowe elementy funkcjonalności.

<?php
// 主题设置
function my_custom_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-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

// 注册小工具区域（侧边栏）
function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget' =&gt; '</section>',
        'before_title' =&gt; '<h2 class="widget-title">',
        'after_title' =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );

add_theme_support()Funkcja służy do włączenia funkcji tematycznej.register_nav_menus()和register_sidebar()Wtedy należy zarejestrować oddzielnie menu nawigacyjne i obszar z pomocniczymi narzędziami.

Wczytywanie stylów i skriptów

Poprawny sposób naładowania zasobów polega na umieszczeniu plików z definicjami stylów (style sheets) oraz plików z kodem JavaScript w odpowiednich miejscach w strukturze witryny.wp_enqueue_scriptsKwity z hookami są w kolejce oczekiwania. Twoje…functions.phpDodaj to do środka:

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果使用评论功能，加载评论回复脚本（仅当需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

get_stylesheet_uri()Otrzymaniestyle.cssURL…get_template_directory_uri()Udostępnienie adresu URL katalogu tematycznego.

Tworzenie struktury hierarchicznej szablonów

WordPress używa poziomów hierarchii szablonów, aby określić, jaki plik szablonu ma zostać użyty dla danej strony. Tworzenie specjalnych plików szablonów umożliwia bardziej dokładne i zgięte dostosowanie wyglądu treści.

Tworzenie szablonów dla różnych typów treści

Trzeba stworzyć specjalne szablony dla różnych typów stron. Na przykład:
* single.phpWykorzystuje się do wyświetlania pojednego artykułu.
* page.phpWykorzystuje się do wyświetlania pojedynczej strony.
* archive.phpWykorzystuje się do wyświetlania informacji na stronach archiwów, takich jak kategorie, tagi, autorzy, daty itd.
* search.phpWykorzystuje się do wyświetlania wyników wyszukiwania.
* 404.phpWykorzystuje się do wyświetlania strony “Nie znaleziono”.

Bazowysingle.phpMoże to wyglądać następująco:

<p><strong>Witaj na mojej stronie!</strong></p>

<main>
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <header>
                <h1><?php the_title(); ?></h1>
                <div>
                    |
                </div>
            </header>
            <?php if ( has_post_thumbnail() ) : ?>
                <div>
                    <?php the_post_thumbnail(); ?>
                </div>
            <?php endif; ?>
            <div>
                <p><strong>Treść artykułu</strong>: <p><strong>Dzięki za komentarz!</strong></p>
            </div>
            <footer>
                &lt;?php the_tags( &#039;标签: &#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
            </footer>
        </article>
    <?php endwhile; ?>
</main>

Ten szablon wykorzystuje…the_post_thumbnail()Aby wyświetlić specjalne zdjęcia, a także…comments_template()Zapewnia się ładowanie obszaru komentarzy.

Używanie elementów szablonowych do realizacji modularności

Aby dalej zwiększyć powtarzalność kodu, można wydzielić części strony, które występują w kilku miejscach (np. metadane artykułów, elementy listy artykułów itd.), na osobne elementy szablonu (Template Parts). Na przykład, można stworzyć osobny element szablonu dla metadanych artykułu, który będzie używany we wszystkich artykułach na stronie.template-parts/content.phpPliki, a potem…index.php或archive.phpW cyklu tego…get_template_part( 'template-parts/content' );Możesz to wykorzystać do wywołania tego elementu. Dzięki temu twoja główna plikowa szablonka pozostanie prosta i zorganizowana.

Podsumowanie.

Poprzez wykonywanie powyżej opisanych kroków udało ci się stworzyć podstawową, ale funkcjonalną tematę dla WordPress. Ten proces obejmował wszystkie kluczowe etapy: przygotowanie środowiska, tworzenie podstawowych plików, włączenie funkcji dostępnych w WordPress oraz budowę struktury tematy. Pamiętaj, że rozwój tematów to proces iteracyjny – możesz zacząć od najprostszych funkcji, a potem stopniowo dodawać bardziej złożone elementy, takie jak własne typy artykułów, opcje dostosowujące temat czy design responsywny. Najważniejsze jest stosowanie standardów programowania i najlepszych praktyk stosowanych w WordPress, aby twoja tema była bezpieczna, wydajna i łatwa w obsłudze. Teraz kopij kopię folderu z twoją tematą do katalogu instalacji WordPress.wp-content/themes/W tym przypadku można go zobaczyć i aktywować w panelu “Wygląd” -> “Teme” w obszarze administracji systemu.

FAQ – najczęściej zadawane pytania.

Jaki poziom znajomości języków programowania jest konieczny do tworzenia tematów dla WordPress?

Aby rozwijać tematy dla WordPress, konieczne jest opanowanie języków HTML, CSS i PHP. HTML służy do budowy struktury stron, CSS do projektowania ich wyglądu, a PHP jest językiem programowania na stronie serwera, który umożliwia obsługę logiki, wykonywanie zapytań do bazy danych oraz generowanie dynamicznego zawartości. Ponadto znajomość podstaw JavaScriptu może być przydatna przy dodawaniu interaktywnych elementów na stronach.

Czemu konieczne jest używanie funkcji get_header() i get_footer()?

get_header()和get_footer()To tagi szablonów WordPress, które służą do umieszczenia różnych elementów w treści strony.header.php和footer.phpPliki. Zamiast korzystać bezpośrednio z tych funkcji, należy je używać.includeZasady tworzenia plików w strukturze tematów WordPress stanowią kluczowy element mechanizmu hierarchii tematów i ich rozszerzeń (subtematów). Dzięki temu subtematy mogą przepisywać zawartość elementów nagłówka (header) i nagłówka strony (footer) tematu rodzicowego poprzez tworzenie plików o tych samych nazwach, co daje im dużą elastyczność w dostosowaniu wyglądu witryny.

Jak zrobić, aby moja tematyczna strona była wsparzona w kilku językach (internacjonalizowana)?

Aby wszystkie tekstowe wyrazy wyświetlone w temacie zostały przygotowane z uwzględnieniem wymagań różnych języków, należy użyć funkcji internacionalizacji (i18n) dostępnych w WordPress. Najczęściej używa się funkcji `wpgettext()` i jej pochodnych.__()、_e()Następnie uruchom funkcję „Zapisz jako” i wybierz format pliku JPG.style.cssUstawienie poprawnych wartości w…Text DomainNastępnie użyj narzędzia takiego jak Poedit do generowania wymaganych plików..potPlik z wzorcami tłumaczeń umożliwia tworzenie tekstów w odpowiednich językach na podstawie zawartych w nim informacji.zh_CN.po和.moNa koniec:functions.phpNastępnie należy przejść przez kontrolę bezpieczeństwa.load_theme_textdomain()Tłumaczenie: „Function loading”.

Po zakończeniu rozwoju tematu, jak sprawdzić jego kompatybilność?

Przed opublikowaniem lub wdrożeniem tematu w środowisku produkcyjnym istotne jest przeprowadzenie dokładnych testów. Najpierw należy sprawdzić, czy temat zachowuje się poprawnie w różnych przeglądarkach (Chrome, Firefox, Safari, Edge) oraz na różnych urządzeniach (komputerze, tablecie, smartfonie). Następnie należy przeprowadzić testy z użyciem różnych konfiguracji środowiska WordPress, włączając/dyskwalifikując różne wtyczki oraz używając różnych typów artykułów i widgetów. Ponadto można skorzystać z oficjalnego wtyczki WordPress Theme Check, aby sprawdzić, czy temat spełnia najnowsze standardy programowania i zalecenia dotyczące budowy tematów w WordPress.