Strona główna/Wiedza/WordPress/Szczegóły dotyczące treści

Jak stworzyć niestandardowy motyw WordPress: kompletny przewodnik od zera do jednego.

3 minuty na przeczytanie.
2026-03-12
2026-06-03
2,737
Zarabiam prowizję, gdy robisz zakupy poprzez poniższe linki, bez żadnych dodatkowych kosztów dla Ciebie.

Zrozumienie architektury tematów w WordPress

Przed rozpoczęciem kodowania istotne jest zrozumienie podstawowego składu tematy WordPress. Tema nie jest tylko zbiorem plików z stylami (style sheets); to zorganizowana całość, składająca się z serii plików szablonów, które spełniają określone standardy. Te pliki współpracują ze sobą, informując WordPress, jak ma prezentować treść Twojej strony internetowej. Katalog tematów znajduje się zwykle w… /wp-content/themes/Każdy temat, który stworzysz, powinien mieć swoją własną folderę.

Najprostszym temacie dla WordPress potrzebne są tylko dwa pliki:style.css 和 index.phpWśród nich jeststyle.css Nie tylko odpowiada za styl witryny, ale także blok komentarzy w nagłówku pliku stanowi “dowód tożsamości” tematu – służy do podania informacji o nazwie tematu, autorze, opisie itd. do WordPress. index.php To jest standardowy plik szablonu głównego; jeśli nie zostanie znaleziony żaden bardziej specyficzny szablon, WordPress użyje go do renderowania strony.

Jednak dobrze przygotowane, dostosowane tematy zawierają wiele plików szablonów, z których każdy odpowiada za konkretną stronę lub funkcję. Na przykład:header.php Definiowanie obszaru nagłówka witryny (header area of the website).footer.php Definiowanie obszaru na dole.single.php Wykorzystywany do wyświetlania pojednego artykułu.page.php Wykorzystuje się do wyświetlania oddzielnych stron.functions.php Służy do dodawania funkcji specyficznych dla danej tematy oraz do rejestracji różnych komponentów.

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

WordPress wykorzystuje system poziomów szablonów, aby decydować, jaki plik szablonu ma zostać użyty dla danej żądania. Dzięki temu nie musisz pisać kodu dla każdej strony na stronie internetowej osobno. Tworząc pliki szablonów o różnych poziomach, możesz precyzyjnie kontrolować sposób wyświetlania różnych typów treści – artykułów, stron, kategorii, stron autorów itd. Zrozumienie tego systemu poziomów jest kluczowe do efektywnego tworzenia tematów („tematów” w kontekście WordPress).

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.
LOGO UltaHost strona dostępu

Utworzenie środowiska rozwoju dla tematów dostosowanych

Przed rozpoczęciem tworzenia plików pierwszym krokiem w profesjonalnym procesie pracy jest przygotowanie lokalnego środowiska rozwoju. Dzięki temu możesz rozwijać i testować aplikacje, nie wpływając na działanie witryny online. Możesz użyć narzędzi takich jak Local by Flywheel, XAMPP, MAMP lub Docker, aby szybko skonfigurować na swoim komputerze lokalne środowisko WordPress, w którym znajdują się serwery Apache/Nginx, PHP oraz baza danych MySQL.

Gdy lokalne środowisko zostanie przygotowane, należy zajść do katalogu z instalacją WordPress. wp-content/themes W folderze utwórz nowy folder. Nazwa tego foldera powinna być identyfikatorem twojego tematu; zaleca się używać małych liter, cyfr i kresków. Staraj się też uniknąć nazw, które mogą się pokrywać z nazwami już istniejących tematów. Na przykład: my-custom-theme。

Następnie stworz pierwszy niezbędny plik:style.cssProszę koniecznie dodać na początku blok z informacjami o temacie, w prawidłowym formacie.

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始创建的自定义 WordPress 主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

Następnie stworz kopię tego samego elementu, który jest tak samo konieczny. index.php Plik. Na początku może być bardzo prosty – może zawierać nawet tylko jedno zdanie w formacie HTML.

Polecamy lekturę. Podróż po świecie tworzenia tematów dla WordPressa: jak stworzyć własną tematę od zera。

<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
    <h1>Witaj, WordPress Theme Development!</h1>
    <p><strong>WP_footer();</strong></p>
</body>
</html>

W tym momencie loguj się do lokalnego panelu administracyjnego WordPress, przejdź do “Wygląd” → “Teme” i powinno pojawić się twoje temat. Aktywuj je, a potem odwiedź główną stronę witryny – ujrzysz informacje wygenerowane przez powyżej podane kody. To oznacza, że twoje własne temat zostało uruchomione.

Tworzenie kluczowego pliku szablonu dla tematu

Po stworzeniu działającego frameworku tematycznego następny krok to jego modularizacja oraz wykorzystanie standardowych funkcji WordPress do obsługi dynamicznego zawartości. Kluczowym elementem modularizacji jest rozdzielanie części, które można powtórnie wykorzystać, na niezależne pliki z wzorcami (templates).

Tworzenie szablonów dla części górnej (header) i dolnej (footer) strony

Najpierw… index.php Rozdziel kod umieszczonej w nagłówku i na dole dokumentu. Stwórz nowy plik i nazwij go… header.phpPrzenieś część początku sumy do środka.

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%
hosting.com LOGO strona dostępu 
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <p><strong>Witaj na mojej stronie!</strong></p>
</head>
<body no numeric noise key 1004>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/pl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <p class="site-description"><?php bloginfo( 'description' ); ?></p>
</header>

Następnie należy utworzyć footer.php Plik zawiera treść nagłówka, nagłówka strony, treść stopki oraz znaki zakończenia.

<footer id="colophon" class="site-footer">
    <p>©  . Wszelkie prawa zastrzeżone.</p>
</footer>
<p><strong>WP_footer();</strong></p>

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

A potem – zmodyfikuj. index.phpMożna używać szablonów w WordPress, aby włączyć funkcje i wywołać je.

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

<main id="primary" class="site-main">
    &lt; ?php
    jeśli (have_posts()) :
        pętla (have_posts()) :
            the_post();
            // treść artykułu zostanie wyświetlona tutaj
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        _e( 'Przepraszamy, żadne posty nie spełniają Twoich kryteriów.', 'my-custom-theme' );
    endif;
    ?&gt;
</main>

<br />

Tworzenie szablonów artykułów i stron

Aby uzyskać różne wersje rozkładu artykułów i stron, można stworzyć kilka różnych wersji ich formatowania. single.php Przeprowadzamy działania dotyczące pojednego artykułu, a także… page.php Pojedźmy porozmawiać o osobnych stronach. Ich podstawowa struktura jest podobna, ale można z nich korzystać z funkcji warunkowych dostępnych w WordPress. is_single() 和 is_page() Rozróżniaj według potrzeb.
Stworzyć coś… functions.php Ten plik jest niezbyt ważny, ponieważ służy do ulepszenia funkcjonalności tematu. W tym pliku można zarejestrować menu, boczne menu (zawartość pomocnicza), dodać funkcje wspierające temat (np. miniatury artykułów, dostosowane nagłówki), a także włączyć elementy z plików z formatami stylu (style sheets) i skryptów.

Polecamy lekturę. Pełny przewodnik po tematach WordPress: od wyboru i dostosowania po ich rozwój。

<?php
function my_custom_theme_setup() {
    // 让 WordPress 负责管理文档标题标签
    add_theme_support( 'title-tag' );
    // 启用文章和页面特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

function my_custom_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
    // 排入自定义脚本
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );
?>

Wdrożenie stylów oraz dodanie funkcji interaktywnych

Nawet temat, który skupia się wyłącznie na funkcjonalności, potrzebuje podstawowego stylu, aby zapewnić dobrą używalność i czytelność. Możesz to zrobić… style.css Rozszerz bazową tabelę stylów, aby stworzyć responsywny layout i estetyczny interfejs.

Rozwijanie podstawowego designu responsywnego

Zacznij od ustawienia kilku opcji resetowania CSS oraz definiowania podstawowych stylów, a potem przygotuj zapytania typu „media query” (zapytania dotyczące formatowania treści w zależności od rodzaju urządzenia). Te zapytania umożliwiają tworzenie responsywnego designu, który będzie dobrze wyglądać na różnych urządzeniach mobilnych.

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.
LOGO InterServer strona dostępu 
/* style.css */
/* 基础重置与样式 */
* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* 移动端响应式 */
.site-header, .site-footer {
    padding: 1rem 0;
    text-align: center;
}
/* 平板及以上设备 */
@media (min-width: 768px) {
    .site-main {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }
}

Skrypt do tworzenia menu nawigacyjnego

Aby menu na urządzeniach mobilnych było interaktywne, możesz stworzyć prosty plik w języku JavaScript. Najpierw… header.php Dodaj strukturę HTML dla przycisków menu, a potem… /js/navigation.js Dodaj logikę kontrolną.

// /js/navigation.js
document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.querySelector('.menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');

if (menuButton) {
        menuButton.addEventListener('click', function() {
            primaryMenu.classList.toggle('toggled');
            this.setAttribute('aria-expanded', 
                this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
            );
        });
    }
});

Na koniec można skorzystać z API narzędzia do tworzenia własnych rozwiązań w WordPress lub stworzyć stronę z opcjami tematu, aby umożliwić użytkownikom dostosowanie niektórych elementów witryny – na przykład wyboru koloru lub załadowania loga. To zwykle realizuje się poprzez dodanie odpowiednich polów formularza lub ustawień w konfiguracji tematu. functions.php Użyj tego w Chinach. add_theme_support Można to zrealizować za pomocą odpowiednich funkcji API.

Podsumowanie.

Stworzenie własnego tematu dla WordPress od zera to systematyczny proces uczenia się, który wymaga znajomości podstaw PHP, HTML, CSS i JavaScript, a także zrozumienia struktury podstawowej WordPress oraz jego API. Cały proces zaczyna się od przygotowania podstawowych elementów potrzebnych do budowy tematu. style.css 和 index.php Zacznijmy od modułowego rozdzielenia plików szablonów zawierających elementy takie jak nagłówek, stopień, boczna lista itd. Korzystaj z systemu hierarchii szablonów, aby precyzyjnie kontrolować wyświetlanie treści. functions.php W tym procesie integrujemy funkcje tematyczne oraz różne komponenty. Ostatecznie temat staje się estetyczny i przyjazny w obsłudze dzięki używaniu responsywnego CSS oraz niezbędnych skryptów JavaScript. Dzięki taktem podejściu nie tylko stworzysz unikalny wygląd witryny, ale także lepiej poznasz zasady działania WordPress, co stanowi solidną podstawę do dalszego rozwoju własnych tematów i dodatków.

FAQ – najczęściej zadawane pytania.

Aby stworzyć temat dla WordPress, należy opanować którejś z następujących języków programowania: PHP, HTML, CSS oraz być może JavaScript.

Aby stworzyć pełnowartościowe WordPress-themę, należy opanować kilka kluczowych technologii. PHP odgrywa kluczową rolę, ponieważ sama platforma WordPress jest napisana w tym języku; wszystkie pliki szablonów oraz procesy logiki są związane z PHP. HTML służy do budowy struktury stron, a CSS do kontrolowania stylu i rozmiarowania elementów, co zapewnia estetykę i responsywność temy. JavaScript (często w połączeniu z jQuery) umożliwia dodawanie interaktywnych elementów na stronie, takich jak zmiana menu czy rotacja zdjęć.

Jaki jest główny różnicę pomiędzy tworzeniem własnych tematów a używaniem dostępnych tematów lub narzędzi do budowy stron?

Tematy dostosowane pod indywidualne potrzeby oferują największą elastyczność i unikalność – możesz mieć pełny kontrolny nad każdym elementem kodu, każdą funkcją oraz wydajnością witryny. Dzięki temu można stworzyć witrynę, która w pełni odpowiada specyfikacjom danej marki i biznesu. Ponadto taki kod zwykle jest bardziej zjednoczony i efektywny. Natomiast korzystanie z dostępnych tematów lub narzędzi do budowy stron może być szybsze w obsłudze, ale może doprowadzić do występowania dużo zbędnego kodu, ograniczonych możliwości dostosowania, zależności od dodatkowych modułów (pluginów) oraz większego ryzyka homogenizacji witryn. Tematy dostosowane są szczególnie przydatne w projektach, które wymagają unikalnego wizerunku marki, specjalnych funkcji lub wysokiej wydajności.

Jak dostosować moją własną tematyczną składkę (theme) do standardów oficjalnego WordPress?

Aby twoja tema spełniała standardy WordPress Core i miała szansę zostać uwzględniona w oficjalnym katalogu tematów, musisz ścisło stosować się do „Przewodnika po rozwoju tematów WordPress”. To obejmuje: używanie poprawnej struktury hierarchii szablonów, bezpieczne obsługiwanie wszystkich wprowadzanych przez użytkowników danych, przekształcenie i lokalizację dynamicznego zawodu (zgodnie z zasadami i18n), stosowanie standardów kodowania WordPress, zapewnienie dostępności dla osób niepełnosprawnych (A11y) oraz sprawdzenie, czy tema funkcjonuje poprawnie zarówno w wersji z włączonymi, jak i wyłączonymi standardowymi funkcjami WordPress (poprzez testy tematów).

Co jest główną rolą pliku functions.php przy tworzeniu tematów?

functions.php Ten plik stanowi “narzędziówkę funkcjonalną” twojego tematu. Nie służy do generowania bezpośredniego wyświetlenia na stronach, lecz do określania funkcji i zachowania tematu. Jego głównymi zadańiami są: dodawanie lub modyfikacja wtyczek (hooks) do core’u WordPress, rejestracja pozycji elementów nawigacyjnych i bocznych paneli (elementów interfejsu), dodawanie specjalnych funkcji do tematu (np. miniatur artykułów, kustomowego loga), a także bezpieczne włączenie plików z stylami i skryptami JavaScript. Jest kluczowym elementem łączącym wygląd twojego tematu z funkcjami dostępnymi w backendzie WordPress.

Następny krok, co dalej?

Jeśli budujesz lub optymalizujesz witrynę WordPress, zalecamy, abyś zapoznał się z dalszymi informacjami na temat optymalizacji wydajności, konfiguracji wtyczek i dostosowywania motywów.

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.

Etykiety: