Przewodnik po rozwoju tematów dla WordPress: jak stworzyć swoją pierwszą własną tematę od zera

Przygotowanie i ustawienie środowiska

Przed rozpoczęciem pisania kodu potrzebny jest stabilny, profesjonalny lokalny środowisko rozwoju. Zdecydowanie zaleca się nie edytować plików tematycznych bezpośrednio na serwerze online, ponieważ to może wpłynąć na normalną dostępność witryny. Lokalne środowisko rozwoju umożliwia swobodne testy bez zagrożenia dla działania witryny. Możesz wybrać programy do integracji środowisk, takie jak XAMPP, MAMP (dla Mac) lub Laragon (dla Windows), które umożliwiają jednorazową instalację i konfigurację Apache, MySQL i PHP.

WordPress sam w sobie musi zostać zainstalowany w twoim lokalnym środowisku. Odwiedź oficjalną stronę WordPress i pobierz najnowszy pakiet instalacyjny. Rozpakuj go w katalogu głównym witryny na twoim lokalnym serwerze (na przykład w katalogu XAMPP). htdocs Następnie otworz folder i poprzez przeglądarz uruchom proces instalacji, który trwa około pięciu minut. Podczas instalacji pamiętaj o ustawionych przez ciebie danych.

Na koniec potrzebny jest przyjazny edytor kodu lub środowisko do integrowanego rozwoju. Visual Studio Code, PhpStorm lub Sublime Text to wszystko wyśmienite wybory – oferują wyróżnianie syntaxu, sugestie kodu oraz funkcje zarządzania plikami, co znacząco poprawia efektywność rozwoju aplikacji.

Polecamy lekturę. Krok po kroku opanuję rozwój tematów WordPress: budujmy własne tematy od zera。

Zrozumienie podstawowej struktury tematów w WordPress

Temat WordPress to w istocie plik, który znajduje się w określonym miejscu w strukturze witryny internetowej. /wp-content/themes/ folder w katalogu zawiera serię plików i folderów, które stosują określone zasady. Te pliki współpracują, by pokazać WordPress, jak ma wyglądać i jakie treści ma prezentować witryna.

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

Najważniejszym elementem jego mechanizmu jest “pozycja szablonu” (ang. „template hierarchy”). WordPress automatycznie wybiera odpowiedni plik szablonu w zależności od typu aktualnie odwiedzanej strony, aby wyświetlić jej zawartość. Na przykład, gdy odwiedzany jest tekst blogowy, WordPress najpierw sprawdza, czy jest dostępny odpowiedni plik szablonu dla tego typu strony. single.phpGdy odwiedzasz główną stronę blogu, szukasz… home.php 或 index.phpTaki mechanizm daje tematom wielką elastyczność.

Każdy temat musi zawierać dwa podstawowe pliki:style.css 和 index.php。style.css Zadanie pliku tematycznego (tematic file) nie ogranicza się wyłącznie do dostarczania stylów; blok komentarzy umieszczonej na początku tego pliku stanowi “dowód tożsamości” tematu, służący do podania WordPress informacji o nazwie tematu, autorze, opisie oraz innych metadanych.index.php To ostatnia linia obrony – jeśli nie istnieją inne, bardziej specyficzne pliki szablonów, WordPress użyje właśnie tego pliku.

Typowy komentarz umieszczonej w nagłówku tematu wygląda następująco:

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的简单 WordPress 主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Text Domain Wykorzystywany do celów internacjonalizacji – to identyfikator, który jest używany przy późniejszych wywołaniach funkcji tłumaczeniowych.

Polecamy lekturę. Budowanie profesjonalnej strony internetowej: kompletny przewodnik po tworzeniu niestandardowego motywu WordPressa od podstaw.。

Oprócz tych dwóch plików, pełnowartościowe tematyczne rozwiązanie (theme) zawiera zwykle również:header.php(Nawigator strony internetowej)footer.php(Na dole strony internetowej)sidebar.php(Boczna lista) oraz functions.php(Plik z ulepszeniami funkcji tematów). Rozumiejąc tę podstawową strukturę, poznasz szkielet rozwoju tematów.

Tworzenie kluczowego pliku szablonu

Teraz zacznijmy tworzyć pierwszy temat. Na twoim… /wp-content/themes/ W katalogu utwórz nowy folder o nazwie na przykład „New Folder”. my-first-themeNastępnie, w tym folderze utwórz najprostszą możliwą plikę.

Najpierw należy stworzyć… style.cssDodaj również komentarze związane z tematami wspomnianymi w poprzednim części tekstu. Następnie stwórz… index.phpTo jest twój pierwszy plik z wzorcem. Najprostszym z nich jest… index.php Można zawrzeć tylko cykl, który wyświetla nagłówek i treść artykułu:

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

<p><strong>Witaj na mojej stronie!</strong></p>
<main>
  
      <article>
        <h2><?php the_title(); ?></h2>
        <div><p><strong>Treść artykułu</strong>: <p><strong>Dzięki za komentarz!</strong></p></div>
      </article>
    
    <p>Nie ma żadnego tekstu do przekładu.</p>
  <?php endif; ?>
</main>

W tym kodzie użyto znaków rozszerzających (template tags). get_header(), get_sidebar(), get_footer(), the_title() 和 the_content()Aby to funkcjonowało, musisz stworzyć odpowiednie pliki zawierające elementy nagłówka, boku i dołu strony.

Utworzyć header.phpPowinno zawierać początkową część dokumentu HTML, aż po rozpoczęcie obszaru z głównym treściem.

<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
  <header>
    <h1><a href="/pl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <p><?php bloginfo( 'description' ); ?></p>
    <nav>
      'primary'
        ) );
      ?&gt;
    </nav>
  </header>

Tutaj,wp_head() To kluczowy element, który umożliwia core’owi WordPress, pluginom oraz tematom wstawianie niezbędnego kodu (np. linków do plików z stylami) do nagłówka strony.body_class() Funkcja wygeneruje listę semantycznych nazw klas CSS, co ułatwia dokładne kontrolowanie stylu.

Polecamy lekturę. Podstawa architektury i zasady działania WordPressa。

Utworzyć footer.php Aby zamknąć otwarty tag:

  <footer>
    <p>©</p>
    <p><strong>WP_footer();</strong></p>
  </footer>

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

Uwaga.wp_footer() 是与 wp_head() Relatywny „hak” znajdujący się na końcu również jest niezbędny.

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

Utworzyć sidebar.phpNa razie można umieścić tylko jedno proste sterowanie (control) do wywołania.

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

W tym momencie twoja tematika posiada już podstawową funkcję “zawansowanych szablonów”, które można aktywować i przeglądać w tle systemu. Choć jest to proste rozwiązanie, to odpowiada core’owi architektury WordPress.

Ulepszenie funkcjonalności tematu za pomocą pliku Functions.php

functions.php Plik ten stanowi “centrum kontroli” twojego tematu. Nie jest to plik szablonu, lecz plik PHP, który jest automatycznie ładowany podczas inicjalizacji tematu. Służy do dodawania nowych funkcji, rejestracji komponentów oraz połączenia z różnymi API WordPress. To kluczowy element umożliwiający profesjonalizację twojego tematu.

Musisz utworzyć ten plik w korzenowym katalogu tematu. Najpierw dodajmy do tematu arkusze stylu (style sheets) i pliki skriptów. Poprawnym sposobem na to jest użycie funkcji dostępnych w WordPress, zamiast pisania kodu bezpośrednio w HTML. <link> Tagi.

<?php
function my_first_theme_scripts() {
    // 添加主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Tutaj,wp_enqueue_style() 和 wp_enqueue_script() To funkcja służąca do bezpiecznego dodawania zasobów.get_stylesheet_uri() dotyczące tematu style.css。add_action() Zmontuj naszą funkcję… wp_enqueue_scripts Na tym haczu upewnij się, że zostanie uruchomiony w właściwym momencie.

Następnie zarejestruj menu nawigacyjne oraz boczną ramę (zawierającą dodatkowe funkcje / narzędzia):

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Zapewnij, aby w interfejsie “Wygląd” → “Menü” w tle pojawiły się dostępne pozycje dla menu.add_theme_support() Funkcje są używane do włączenia różnych funkcji tematów, co stanowi standardową praktykę w dzisiejszym rozwoju tematów. Na przykład, do włączenia… title-tag Później nie będzie już konieczności… header.php Ręcznie wygenerowano. <title> Dodałem już tagi.

Na koniec, zarejestruj obszar dla dodatkowych narzędzi umieszczonego w bocowym panelu:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-first-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_first_theme_widgets_init' );

Dzięki temu twoje temat posiada już kompletną linię rozwoju – od podstawowego przedstawienia po dodatkowe funkcje. Możesz zaobserwować dynamiczne zmiany w temacie poprzez menu ustawień w tle aplikacji oraz dodawanie różnych elementów interfejsu.

Podsumowanie.

Od stworzenia czegoś, co zawiera… style.css 和 index.php Zaczniemy od foldera, a potem przygotujemy oddzielne elementy szablonu (template components).header.php, footer.phpA potem poprzez wykorzystanie potężnych… functions.php Menü rejestracji plików, boczna lista oraz bezpieczne ładowanie zasobów – to wszystko, co potrzebne, by stworzyć własną tematę dla WordPress. Jesteś już na etapie realizacji kluczowych elementów procesu tworzenia tematy. Istotą tego procesu jest zrozumienie i stosowanie zasad hierarchii szablonów oraz systemu „hooków” w WordPress.

Jesteś już nie tylko użytkownikiem tego tematu, ale także jego twórcą. Po opanowaniu tych podstawowych znań możesz dalej zgłębiać wiedzę o bardziej złożonych plikach szablonów. single.php、page.php、archive.phpOdkryj więcej możliwości stosowania cykli w WordPressie oraz wykorzystaj tagi warunkowe (np.…) is_page(), is_single()Umożliwienie bardziej dokładnego kontrolowania strony. Świat rozwoju tematów (tematycznego designu) jest szeroki i ciekawy – to tylko solidny punkt startu.

FAQ – najczęściej zadawane pytania.

Czy do tworzenia tematów dla WordPress konieczna jest doskonała znajomość PHP?

需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。

Czemu konieczne jest używanie funkcji wp_head() i wp_footer()?

Te dwa funkcje stanowią elementy kluczowe („core hooks”) w WordPress.wp_head() Znajduje się w… </head> Przed tagiem umożliwia on wstawienie niezbędnego kodu przez core WordPress, pluginy oraz twoje własne tematy w nagłówku strony – np. linków do plików z stylami CSS, metatagów, zmiennych JavaScript itd.wp_footer() Znajduje się w… Tagi znajdują się często na początku kodu, służąc do wstawienia elementów analizy lub plików JavaScript, które są ładowane z opóźnieniem. Jeśli ich brakuje, wiele wtyczek (pluginów) nie będzie mogło prawidłowo funkcjonować, a nawet niektóre funkcje samego WordPress mogą zachowywać się nieprawidłowo.

Jak dodać szablon strony do mojego tematu?

Stworz nowy plik w języku PHP, na przykład: page-fullwidth.phpNa początku tego pliku należy dodać blok z komentarzem zawierającym nazwę określonego szablonu. Na przykład:

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

A potem możesz napisać w tym pliku coś innego niż… page.php Struktura HTML, na przykład z pominięciem niektórych elementów. get_sidebar() Po zapisaniu zmian w panelu administracyjnym WordPressu, w sekcji “Atrybuty strony” i w rozwijanym menu “Szablon” pojawi się opcja “Strona w pełnym rozmiarze” do wyboru.

Jakie są najlepsze praktyki dotyczące wykorzystania CSS i JavaScript w ramach rozwoju aplikacji?

Najlepszą praktyką jest korzystanie z narzędzi dostępnych w WordPress. wp_enqueue_style() 和 wp_enqueue_script() Funkcja, w… functions.php Zmontowano na… wp_enqueue_scripts 钩子来添加资源。这种方式可以：1）正确处理依赖关系（例如你的脚本依赖 jQuery）；2）避免重复加载同一资源；3）方便插件和其他主题代码进行管理；4）符合 WordPress 编码标准。绝对要避免直接在模板文件中使用 <link> 或 <script> Ressursy są hardkodowane w tagach.

Jak zrealizować wsparcie wielu języków (internacjonalizację) dla mojego tematu?

Musisz zrobić dwie rzeczy. Po pierwsze, style.css Gdy tłumaczymy tekst zawierający komentarze umieszczone w nagłówkach oraz wywołania funkcji, należy używać właściwego “domenu tekstowego” (Text Domain). Jak pokazano w instrukcjach, należy to dokładnie określić. Text Domain: my-first-themeNastępnie, functions.php W wszystkich plikach szablonów teksty interfejsu użytkownika, które wymagają tłumaczenia, należy umieścić w zagnieczęciu za pomocą funkcji tłumaczeniowych WordPress. Najczęściej używana jest funkcja __translate__. __()(Powrót do przetłumaczonego ciągu znaków) oraz _e()(Nie ma tekstu do tłumaczenia w polu „Tekst do tłumaczenia”).<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>Później możesz użyć narzędzi takich jak Poedit do generowania wymaganych plików. .pot Pliki szablonów, które umożliwiają tłumaczom tworzenie tekstów w różnych językach. .po 和 .mo Dokumenty.