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

Jak rozwijać i dostosowywać swoją pierwszą responsywną tematę dla WordPress?

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

Przygotowanie i ustawienie środowiska rozwoju

Przed rozpoczęciem pisania kodu istotne jest stworzenie efektywnego środowiska rozwoju. To nie tylko poprawi twoją efektywność pracy, ale także zapewni standardową strukturę i łatwość utrzymania kodu.

Najpierw potrzebujesz lokalnego środowiska rozwoju. Możesz użyć narzędzi takich jak XAMPP, MAMP lub Local by Flywheel, które umożliwiają szybkie uruchomienie na komputerze lokalnym środowiska serwerowego zawierającego PHP i MySQL. Po instalacji i uruchomieniu usług upewnij się, że Apache (lub Nginx) oraz MySQL są włączone i działają poprawnie.

Następnie pobierz najnowsze pliki core’a WordPress i rozpakuj je w katalogu głównym witryny na lokalnym serwerze (na przykład w katalogu XAMPP). htdocs Dostęp do foldera można uzyskać poprzez przeglądarkę internetową. http://localhost/your-wordpress-folder Aby zakończyć proces instalacji WordPressa, zapamiętaj nazwę bazy danych, nazwę użytkownika oraz hasło, które ustawiłeś.

Polecamy lekturę. Praktyczne poradniki dotyczące CSS Tailwind: wytyczne do projektowania responsywnych, nowoczesnych stron internetowych。

Jeśli chodzi o edytory kodu, rekomendujemy Visual Studio Code, PhpStorm lub Sublime Text. Te edytory oferują doskonałe wyróżnianie gramatycznego kodu oraz funkcje podpowiedzi („code hints”) dla języków PHP, HTML, CSS i JavaScript. Ponadto warto zainstalować niektóre niezbędne dodatki („plugins”), np. te przydatne do rozwoju aplikacji na platformie WordPress, a także narzędzie Git do zarządzania wersjami kodu.

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

Na koniec, w katalogu zainstalowanego na lokalnym komputerze WordPress-u, przechodź do… wp-content/themes folder. Tu stworzysz nowy folder dla tematu, który zamierzasz przygotować, na przykład nazwany „MojaPraca”. my-first-themeW tym folderze będą umieszczone wszystkie pliki dotyczące twojego tematu.

Tworzenie kluczowego pliku tematycznego

Temat WordPress składa się z serii standardowych plików, z których dwa muszą być obowiązkowo dostępne:style.css 和 index.phpTe pliki definiują podstawowe informacje i strukturę tematu.

Najpierw należy stworzyć… style.css To plik, który zawiera nie tylko twoje arkusze stylu, ale także metadane tematu. Te informacje będą wyświetlone na stronie “Wygląd” -> “Teme” w panelu administracyjnym WordPress.

/*
Theme Name: 我的第一个响应式主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义响应式WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Następnie, stwórz… index.php To plik z mainowym szablonem tematu. WordPress używa tego pliku, jeśli nie może znaleźć bardziej specyficznego pliku szablonu. single.php 或 page.phpGdy to jest konieczne, właśnie wtedy się to używa. Najprostszym przykładem jest… index.php Można zawrzeć tylko podstawowy kod, który wykorzystuje elementy nagłówka, głównego cyklu oraz stopki witryny WordPress.

Polecamy lekturę. Biegła znajomość Tailwind CSS: praktyczny przewodnik od podstaw do zaawansowanych technik.。

<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
    <?php wp_body_open(); ?>
    <header>
        <h1><a href="/pl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <article>
                <h2><?php the_title(); ?></h2>
                <p><strong>Treść artykułu</strong>: <p><strong>Dzięki za komentarz!</strong></p>
            </article>
        <?php endwhile; endif; ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <p><strong>WP_footer();</strong></p>
</body>
</html>

W tym momencie twoje tematyczne rozwiązanie jest gotowe do aktywacji. Wejdź do panelu administracyjnego WordPress i przejdź na stronę “Wygląd” → “Tematy”. Powinno tam być widoczne twoje pierwsze responsywne tematyczne rozwiązanie. Aktywuj je, a potem odwiedź główną stronę witryny, aby zobaczyć wynik jego działania.

Dodanie obsługi funkcji tematów.

Aby funkcja tematyczna była bardziej doskonała, musimy… functions.php Plik umożliwia dodanie wsparcia dla kluczowych funkcji WordPress.functions.php Pliki są jak „mózg” tematu – służą do przechowywania wszystkich udefiniowanych funkcji, klas, hooków oraz filtrów.

Stworzyć coś… functions.php Dodaj plik oraz następujący kod, aby uzyskać wsparcie dla miniatur artykułów, menu dostosowanego do potrzeb użytkownika oraz znaków HTML5.

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 
<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面上的“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置（主菜单）
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

// 对评论表单、搜索表单等输出 HTML5 标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加对<title>标签的WordPress原生支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 引入样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

Implementowanie responsywnego layoutu i stylu

Dizajn responsywny oznacza, że twoja strona internetowa zapewnia dobrą jakość obsługi na różnych urządzeniach o różnych rozmiarach, takich jak komputerы stacjonarne, tablety i telefony komutowane. To osiągamy głównie za pomocą zapytań mediów (Media Queries) w CSS oraz rozkładu strony dynamicznego (flowing layout).

Najpierw… style.css Poniżej metadanych umieszczamy podstawowe globalne style, które stanowią fundament dla projektu responsywnego. Do tworzenia layoutu używamy najnowszych technik CSS, takich jak Flexbox.

/* 基础样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
header, footer {
    background: #f4f4f4;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
}
main {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
article {
    flex: 1 1 300px; /* 基础宽度300px，可伸缩 */
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #ddd;
}

Następnie dodaj zapytania dotyczące mediów (media queries), aby dostosować wygląd strony do różnych szerokości ekranów. To jest istotą projektowania responsywnego.

Polecamy lekturę. Stwórz wyjątkową stronę internetową: kompletny przewodnik po tworzeniu motywów WordPress — od podstaw do zaawansowanych technik.。

/* 平板设备（宽度小于 768px） */
@media (max-width: 768px) {
    body {
        padding: 0 15px;
    }
    main {
        flex-direction: column;
        gap: 1.5rem;
    }
    article {
        flex: 1 1 auto;
    }
}

/* 手机设备（宽度小于 480px） */
@media (max-width: 480px) {
    header, footer {
        padding: 1rem;
    }
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.2rem;
    }
}

Optymalizacja responsywności menu nawigacyjnego

Na urządzeniach z małymi ekranami, takich jak telefony komutowane, tradycyjne menu nawigacyjne mogą wyglądać zbyt ciasno. Popularnym rozwiązaniem jest przekonwertowanie ich w menu typu „hamburger”. Aby to zrealizować, potrzebujemy połączyć CSS z niewielką ilością JavaScriptu.

Najpierw… header Zmiany w strukturze HTML menu często są dokonywane za pomocą narzędzia dostępnego w WordPress. wp_nav_menu Generowanie funkcji. Aby kontrolować wygląd, dodajemy im nazwę klasy oraz przycisk w formie hamburgera.

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

W twoim… header.php W pliku szablonu (który należy pobrać z…) index.php Kod menu może wyglądać następnie:

<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">菜单</button>
<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_id'        => 'primary-menu',
    'menu_class'     => 'nav-menu',
) );
?>

Następnie, w CSS-u menu jest automatycznie ukrywane na małych ekranach. Gdy użytkownik kliknie na przycisk w formie hamburgera, za pomocą JavaScriptu zmienia się właściwość danej klasy (na przykład jej wygląd). .toggledAby wyświetlić menu, należy użyć odpowiedniego elementu interfejsu.

/* 小屏幕下隐藏菜单 */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .nav-menu.toggled {
        display: flex;
    }
    .menu-toggle {
        display: block;
    }
}
/* 大屏幕下显示菜单并隐藏按钮 */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
    .nav-menu {
        display: flex;
        list-style: none;
    }
}

Na koniec dodaj prosty plik JavaScript (na przykład: `script.js`). js/navigation.js) i poprzez functions.php Zaimplementuj kod, aby obsługiwać wydarzenia kliknięcia na przycisku.

Tworzenie własnych szablonów stron i komponentów

Flexybilita WordPress wynika w dużej mierze z jego systemu szablonów i elementów interfejsu (Widgetów). Tworzenie własnych szablonów i elementów interfejsu pozwala znacząco rozszerzyć funkcjonalność Twojego tematu.

Tworzenie własnych szablonów stron

Zastanawiamy się, jak stworzyć szablon strony o pełnym rozmiarze ekranu, bez bokówki, w którym cały treść strony zajmuje całą szerokość ekranu. Najpierw utwórz nowy plik w korzenowym katalogu tematu i nazwij go… page-fullwidth.phpNa samym początku tego pliku musi zostać dodana komentarzowa linia z nazwą szablonu.

<?php
/**
 * Template Name: 全宽页面
 */
get_header(); // 引入 header.php
?>
<main id="main" class="site-main full-width">
    Podczas gdy mamy wpisy do wyświetlenia:
        wyświetl wpis;
        wyświetl tytuł (<h1>, "</h1>');
        wyświetl treść;
    koniec pętli;
    ?&gt;
</main>
<?php
get_footer(); // 引入 footer.php
?>

Teraz, gdy tworzysz lub edytujesz stronę w panelu administracyjnym WordPress, w rozwijającym się menu “Atrybuty strony” (“Page Attributes”) możesz wybrać opcję “Strona w pełnym rozmiarze” („Full-width page”). Po wyborze ta strona będzie renderowana za pomocą właśnie utworzonego pliku szablonu.

Rejestracyjna sekcja bocznego panelu komponentów

Zona elementów umożliwia użytkownikom dodawanie treści w określonych miejscach tematu (np. w bocznym panelu, na dole strony) poprzez przeciąganie. Musimy to zrealizować… functions.php Zarejestruj obszar bocznego menu.

Użyj register_sidebar Funkcja służy do rejestracji elementów bocznego menu. Przyjmuje jako parametr array, który zawiera informacje o nazwach, ID-ach, opisach oraz tagach opakowujących elementy menu.

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

Po rejestracji należy umieścić ten element w odpowiednim miejscu w szablonie tematycznym. Zwykle boczna lista (sidebar) znajduje się w obrębie tej strefy. sidebar.php W pliku, a potem w głównym pliku szablonu (np.) index.php 或 single.phpPoprzez get_sidebar() Wprowadzenie funkcji.

在 sidebar.php W dynamic_sidebar Funkcja służy do wyświetlania obszaru komponentów.

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

Podsumowanie.

Rozwoj i dostosowanie swojego pierwszego tematu WordPress zgodnego z wymogami różnych urządzeń („responsywnego”) to proces pełny wyzwań, ale zarazem dający wielkie poczucie satysfakcji. Poprzez kroki opisane w tym tekście przygotowałeś środowisko do rozwoju i stworzyłeś kluczowe pliki, które są niezbędne do budowy tematu. style.css 和 index.phpI poprzez… functions.php Ulepszono funkcje tematyczne. Głęboko zapoznałeś się z zasadami projektowania witryn internetowych reaktywnych, używając zapytań mediów w CSS oraz rozwiązań typu Flexbox, aby zapewnić kompatybilność witryny na różnych urządzeniach. Na koniec odkryłeś potężny system szablonów i API elementów w WordPressie, nauczyłeś się tworzyć własne szablony stron oraz obszary z elementami, które można przesuwać.

Po opanowaniu tych podstaw możesz dalej eksplorować zaawansowane funkcje tematów WordPress, takie jak możliwość tworzenia własnych typów artykułów, API do personalizacji tematów oraz wsparcie dla edytora bloków. Dzięki temu będziesz mogąc stworzyć tematy o większej funkcjonalności i bardziej profesjonalnym designie.

FAQ – najczęściej zadawane pytania.

Czy rozwój tematów (tematów) musi zacząć się od zera?

Nie musi tak być. Choć początek od zera pozwala pełnie kontrolować i zrozumieć każdy detal, to dla początkujących lub w scenariach, gdzie potrzebna jest szybka implementacja, lepszym wyborem jest rozpoczęcie od istniejących tematów (np. „Underscores”, „_s”) lub frameworków (np. tematów dostępnych w Bootstrap) dostosowanych do potrzeb. Dzięki temu uzyskasz solidną bazę kodu zgodną z najlepszymi praktykami, na której możesz dalej tworzyć własne rozwiązania.

Jak debugować moją tematę WordPress?

Metoda debugowania często używana w rozwoju WordPress polega na włączeniu… WP_DEBUG…w twoim… wp-config.php W dokumencie zostanie przedstawiony define( 'WP_DEBUG', false ); Zmienić na… define( 'WP_DEBUG', true );To zmuszy WordPress do wyświetlania na ekranie wszystkich błędów, ostrzeżzeń i powiadomień PHP. Dodatkowo, w połączeniu z narzędziami deweloperskimi w przeglądarzu (konsola, kartki „Elements” i „Network”) można łatwiej debugować kod JavaScript, CSS oraz żądań sieciowych.

Dlaczego zmiana tematu nie weszła w życie natychmiast?

Zwykle to wynika z ustawie cache w przeglądarcu lub z włączonego pluginu do obsługi cache w WordPress. Najpierw spróbuj zrobić forced refresh w przeglądarcu (klawisze Ctrl+F5 lub Cmd+Shift+R). Jeśli używasz pluginu do zarządzania cache, usunij jego zawartość z pamięci cache. Ponadto upewnij się, że edytujesz właśnie te pliki, które znajdują się w folderze z aktualnym tematem witryny. functions.php Czasami wystarczy tylko odnowić stronę w tle („refresh the background page”), ponieważ ten plik jest czytany przy każdym załadowaniu strony.

Jak sprawić, by mój temat obsługiwał wiele języków?

Umożliwienie tematowi obsługi wielu języków (internacjonalizacja i lokalizacja) to dobra praktyka. W tym procesie występują dwa głównie kroki: po pierwsze, w miejscach w temacie, gdzie teksty wymagają tłumaczenia, należy użyć funkcji tłumaczeniowych dostępnych w WordPress. __('Hello World', 'my-first-theme')Następnie, za pomocą narzędzi takich jak Poedit, skanuj pliki tematyczne, aby wygenerować niezbędne dane. .pot Następnie należy utworzyć plik szablonu i odpowiednio go dostosować dla każdego języka. .po I po skompilowaniu. .mo Pliki należy umieścić w folderze związanym z tematem. /languages/ W katalogu. Na koniec w functions.php Użyj tego w Chinach. load_theme_textdomain Funkcja służy do ładowania tłumaczeń.

Co trzeba uwzględnić przy rozwijaniu aplikacji z tematyką biznesu?

Aby rozwijać komercyjne tematy do dystrybucji, należy spełniać znacznie wyższe wymagania niż przy tworzeniu tematów do osobistego użytkowania. Konieczne jest ścisłe przestrzeganie standardów sprawdzania tematów w katalogu WordPress, aby zapewnić bezpieczeństwo kodu i brak błędów. Wszystkie dane wprowadzane przez użytkowników oraz wyniki ich operacji muszą być surowo eskalowane i sprawdzane, a do ich obsługi należy używać bezpiecznych funkcji. esc_html, esc_urlTemat powinien zawierać dokładne dokumentacje i komentarze. Ponadto zdecydowanie zaleca się dodanie pełnej obsługi dla podstawowych funkcji WordPress (np. edytora bloków, możliwości tworzenia własnych logotypów) oraz zapewnienie kompatybilności z popularnymi pluginami. Na koniec warto rozważyć dodanie wsparcia dla narzędzia do personalizacji tematów, aby użytkownicy mogli łatwo i w czasie rzeczywistym dostosować wygląd witryny.

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: