Przed rozpoczęciem pisania kodu potrzebny jest lokalny środowisko rozwoju. Zwykle składa się ono z lokalnego serwera (np. XAMPP, MAMP lub Local by Flywheel), bazy danych MySQL, a także edytora kodu (np. VS Code lub Sublime Text). Upewnij się, że Twoja wersja PHP odpowiada wymogom oficjalnych wymagań WordPress.
Następnie, w katalogu zainstalowanego WordPressa:wp-content/themesW folderze utwórz nowy folder, na przykład nazwany „nowy_folder”.my-first-themeW tym folderze będą umieszczone wszystkie pliki dotyczące twojego tematu.
Najbardziej podstawowy motyw WordPress wymaga tylko dwóch plików:style.css和index.phpNajpierw należy stworzyć…style.cssNiektóre pliki zawierają informacje o temacie, które są konieczne, aby WordPress mógł prawidłowo identyfikować używany temat. Te informacje umieszcza się na początku pliku w postaci komentarza.
Polecamy lekturę. Tematy WordPress dostosowane do potrzeb użytkownika: pełny przewodnik po tworzeniu unikalnego wyglądu witryny od zera。
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
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 stworzmy najprostszą wersję tego rozwiązania.index.phpPlik zawiera aktualnie tylko szablon HTML oraz tekst “Hello World”.
<!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>Hello World! To jest moje pierwsze „tema” (tema graficzne / projekt wyglądowego).</h1>
<p><strong>WP_footer();</strong></p>
</body>
</html>Teraz loguj się do panelu administracyjnego WordPress i w menu “Wygląd” → “Teme” powinno pojawić się tema “My First Theme”, które możesz włączyć. Choć na razie nie ma wielu funkcji, to udało ci się stworzyć temat, który jest rozpoznawany przez WordPress.
Tworzenie kluczowego pliku szablonu dla tematu
Cała tematyczna struktura składa się z serii plików szablonów, które kontrolują wygląd różnych części witryny. Zacznijmy od najważniejszych z tych plików.
Rozdzielenie nagłówka i nagłówka strony (footer)
Podział duplikatującego się kodu (np. elementów znajdujących się w nagłówku i nagłówku strony) na osobne pliki to pierwszy krok w procesie optymalizacji kodu.header.phpPlik zawiera informacje uzyskane z…<!DOCTYPE html>Otworzyć.<body>Wszystkie elementy znajdujące się przed etykietą.
<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<?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>
</header>Utworzyćfooter.phpPlik zawiera treść nagłówka, nagłówka strony, treść stopki oraz znaki zakończenia.
Polecamy lekturę. Stworzenie swojego własnego tematu dla WordPress od zera: kompletny przewodnik po architekturze, projektowaniu i rozwoju。
<footer id="colophon" class="site-footer">
<p>©</p>
</footer>
<p><strong>WP_footer();</strong></p>
<p>Nie mogę znaleźć mojego portfela.</p>A potem zmodyfikuj swoje…index.phpPliki, użycieget_header()和get_footer()Funkcje są używane do włączenia tych elementów.
<p><strong>Witaj na mojej stronie!</strong></p>
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 文章内容将在这里显示
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>No content found.</p>';
endif;
?>
</main>
<?php get_footer(); ?>Tworzenie cyklu artykułów oraz boku nawigacyjnego
„Nawyżej”index.phpZawiera już podstawowy cykl główny WordPressa („The Loop”), który służy do pobierania i wyświetlania listy artykułów. Teraz czas na dalszą implementację.sidebar.phpDodajmy boczną nawigację.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Aby włączyć boczną nawigację na stronie, musisz…index.phpZmienić strukturę obszaru głównego treści na początku i na końcu, a także użyć…get_sidebar()Funkcja. Ponadto należy stworzyć…functions.phpPlik jest potrzebny do zarejestrowania tego elementu interfejsu w formie bocznego panelu.
Implementowanie responsywnego layoutu i stylu
Dzięki projektowaniu responsywnemu twoja tematyczna strona będzie dobrze wyglądać na różnych urządzeniach. Zacznemy od podstawowej struktury CSS oraz zapytań mediowych (media queries).
Ustawienie podstawowych stylów i modelu kontenerów elastycznych
W twoim…style.cssPoniżej komentarzy dotyczących tematycznego tekstu dodaj informacje o resetowaniu stylu i ustawieniu podstawowego layoutu. Używanie techniki Flexbox do tworzenia prostego, responsywnego layoutu jest dobrym punktem startu.
/* 基础重置与样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/* 主要布局容器 */
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1;
padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
background-color: #f8f9fa;
padding: 1rem 2rem;
text-align: center;
}Dodaj zapytania dotyczące mediów (media queries).
Zapyty mediów stanowią kluczowy element projektowania responsywnego. Dodaliśmy prosty „przekrętnik” (breakpoint), który zmienia rozstawienie obszaru zawartego w treści i boku witryny z położenia obok siebie na położenie jednego na drugim, gdy szerokość ekranu jest mniejsza niż 768 px (co odpowiada typowym urządzeniom typu tablet).
Polecamy lekturę. Rozwoj tematów WordPress: pełny przewodnik od počzątków do mistrzostwa。
Najpierw należy zmienić strukturę HTML.index.phpGłówny treść i boczna lista są umieszczone w jednym kontenerze.
<div class="content-area">
<main id="primary" class="site-main">
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?>
</div>Następnie dodaj odpowiednie style w CSS.
.content-area {
display: flex;
flex-wrap: wrap;
}
.site-main {
flex: 3;
min-width: 300px;
}
#secondary {
flex: 1;
min-width: 250px;
padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
#secondary {
padding-left: 0;
padding-top: 2rem;
}
.site-header, .site-footer, .site-main {
padding: 1rem;
}
}Ulepszenie funkcjonalności tematu poprzez plik functions.php
functions.phpPlik to “silnik” twojego tematu – służy do dodawania funkcji, rejestracji różnych elementów oraz bezpiecznego włączania skryptów i stylów.
Rejestracja menu nawigacyjnego i obszaru z widgetami.
在functions.phpWregister_nav_menusFunkcja służy do rejestracji pozycji elementów nawigacyjnych w temacie.
esc_html__( 'Primary Menu', 'my-first-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-first-theme' ),
) );
// 注册侧边栏小工具区域
register_sidebar( array(
'name' => esc_html__( 'Main Sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>Po rejestracji będziesz mógł/czyć…header.php和footer.phpUżyj tego w Chinach.wp_nav_menu()Funkcja jest używana do wywoływania tych menu.
Bezpieczne ładowanie stylów i skriptów
Nigdy nie tworzyć bezpośrednich linków (hard links) do plików CSS lub JavaScript w arkuszkach szablonów (template files). Zamiast tego należy używać innych metod integracji tych plików.wp_enqueue_style()和wp_enqueue_script()Funkcja, a potem poprzez…wp_enqueue_scripts„Hakówki” są potrzebne do ich załadowania.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载一个自定义JavaScript文件（如果需要）
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Stworzenie więcej plików z wzorami (template files) umożliwi rozszerzenie funkcjonalności.
Obecnie nasz temat jest tylko jeden.index.phpBędzie używane na wszystkich stronach. Poziom hierarchii szablonów w WordPressu decyduje, które konkretnie szablony zostaną wybrane dla różnych typów stron. Zbudujmy kilka takich szablonów.
Artykuł pojedynczy versus szablon strony
Utworzyćsingle.phpZnaczek używany do wyświetlania pojednego artykułu.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'single' );
// 显示文章导航
the_post_navigation();
// 如果评论开启，则加载评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Utworzyćpage.phpWykorzystuje się do wyświetlania stron statycznych. Jego struktura jest podobna do…single.phpPodobnie, ale zwykle nie wyświetla się metadanych takich jak kategorie czy tagi.
Aby stosować zasadę DRY (‘Don’t Repeat Yourself” – „Nie powtarzaj się”), możemy wyjąć części treści artykułów i stron i umieścić je w modułach szablonowych (Template Parts). To zrobić w katalogu głównym tematu.template-partsUtworzyć folder i w nim dodatkowe foldery.content-single.php和content-page.php。
Łącznik do strony archiwu artykułów
Utworzyćarchive.phpMoże być wykorzystany do wyświetlania stron archiwów zawierających informacje o kategoriach, tagach, autorach itd.index.phpW tym cyklu są wykonywane różne operacje, ale zwykle na początku wyświetla się nagłówek archiwu.
<p><strong>Witaj na mojej stronie!</strong></p>
<main id="primary" class="site-main">
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation(); // 显示上一页/下一页导航
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>Podsumowanie.
Dzięki temu poradnikowi udało ci się stworzyć podstawową, ale kompletną tematę WordPressu z funkcją responsywności. Poznałeś strukturę podstawowych plików tematy, nauczyłeś się oddzielać elementy szablonu (nadpis, stopień, boczna lista), zrealizowałeś kluczowe elementy cyklu WordPress oraz przygotowałeś responsywny layout za pomocą zapytań mediów w CSS. Ponadto opanowałeś również inne aspekty tworzenia tematów WordPress.functions.phpDzięki temu pliku dowiesz się, jak zarejestrować menu, dodatki („plug-ins”) oraz zasoby do bezpiecznego ładowania, a także poznasz potężny system poziomów wzorców („templates”) w WordPress.
Rozwój tematów to proces, który nieustannie się pogłębia. Dalej możesz eksplorować kolejne pliki z szablonami (np.404.php、search.php），学习使用WordPress的Body Class和Post Class来增加样式控制的精细度，深入研究主题定制器（Customizer）API为用户提供可视化设置选项，甚至尝试将Sass或ES6等现代前端工作流集成到你的开发过程中。
FAQ – najczęściej zadawane pytania.
Jakie pliki są konieczne w najprostszym temacie WordPress?
Najprostszego tematu, który może zostać rozpoznany przez WordPress, potrzebne są tylko dwa pliki:style.css和index.php。style.cssNawias górnego musi zawierać poprawne informacje o temacie, a także odpowiednie komentarze.index.phpWtedy będzie to standardowy szablon dla wszystkich stron.
Jak zrobić, aby moja tematyczna strona obsługiwała tłumaczenie w kilku językach?
Musisz zrobić dwie rzeczy. Po pierwsze,style.cssUwagi umieszczone w nagłówkach oraz wszystkie miejsca, gdzie używany jest tekst (np. poprzez…)__()或_e()Aby użyć tekstowego domenu (text domain) w funkcji, należy skorzystać z pola tekstowego dostępnego w programie. W tym przewodniku używamy tekstowego domenu “my-first-theme”. Następnie należy stworzyć plik w formacie .pot za pomocą narzędzia takiego jak Poedit, a potem przetłumaczyć ten plik na pliki .po i .mo. Te pliki należy umieścić w folderze tematu./languagesW katalogu. Na koniec wfunctions.phpUżyj tego w Chinach.load_theme_textdomain()Tłumaczenie: „Function loading”.
Dlaczego moje własne style lub skrypty nie działają?
Zwykle to wynika z tego, że nie użyto zalecanego przez WordPress sposobu nauczania się („loading” w kolejce). Upewnij się, że działasz zgodnie z tymi zaleceniami.functions.phpW pliku użyto…wp_enqueue_style()和wp_enqueue_script()Funkcje i ich zamontowanie.wp_enqueue_scriptsMożna dodawać stylówki i skrypty za pomocą „hooków”. Linki umieszczone bezpośrednio w pliku szablonu mogą być ignorowane przez pluginy do cache’owania lub w niektórych przypadkach nie być naładowane w poprawnym porządku.
Jak dodać mojemu tematowi wsparcie dla kustomowego loga?
To bardzo powszechna funkcja. Musisz…functions.phpW funkcji ustawiania tematu pliku (poprzez…)after_setup_themeDodaj „Wykonanie hooka”.add_theme_support( 'custom-logo' )Możesz przekazać array parametrów, aby określić wymiary loga oraz inne właściwości. Po dodaniu tych informacji użytkownik będzie mógł załadować logo w zakładce “Wygląd” -> “Dostosowanie” -> “Identyfikator witryny”. Na stronie front-end można użyć…the_custom_logo()Funkcja jest przeznaczona do jej wyświetlania.
Jak debugować błędy w PHP podczas procesu rozwoju?
Zaleca się korzystać z lokalnego środowiska rozwoju.wp-config.phpWłącz tryb debugowania WordPressa w pliku.WP_DEBUGKonstanta ustawiona jest na…trueMożesz też ustawić kilka parametrów jednocześnie.WP_DEBUG_LOG和WP_DEBUG_DISPLAYMożna kontrolować, czy błędy są zapisywane do pliku logów czy wyświetlone na ekranie. Pamiętaj, że przed wypuszczeniem aplikacji na rynek konieczne jest wyłączenie trybu debugowania.
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.
- 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
- Praktyczne tworzenie tematów dla WordPress: budowanie responsywnych witryn internetowych dla firm od zera
- Tworzenie tematów WordPress bez użycia kodu: pełny przewodnik od zera do mistrzostwa
Polski