🛠️ Tworzenie motywu WordPress z HTML: przewodnik krok po kroku (część 1)
Gotowy HTML-owy serwis niekoniecznie trzeba wyrzucać, gdy przechodzą Państwo na WordPress. Mogą Państwo wziąć swoje kodowanie, index.html i style.css, i przekształcić je w pełnoprawny motyw w ciągu godziny, półtorej. To nie magia: WordPress zbudowany jest na szablonach PHP, a te z kolei składają się ze zwykłego HTML-a podzielonego na logiczne części.
Problem w tym, że większość poradników albo przeładowuje terminologią od pierwszych akapitów, albo milcząco zakłada, że znają już Państwo PHP. My pójdziemy inną drogą: weźmiemy konkretny układ HTML (nagłówek, treść, panel boczny, stopka) i metodycznie, plik po pliku, złożymy z niego działający motyw. Żadnej magii, tylko kod i logika.
Na końcu tego poradnika będą mieli Państwo gotowy motyw, który można wgrać do panelu administracyjnego WordPress, aktywować i zobaczyć swój HTML wewnątrz dynamicznej platformy. To pierwsza część, fundament. W drugiej części omówimy szablony poszczególnych stron, pola niestandardowe i konfigurator.
💡 Szybki przegląd:
- Nadają Państwo motywowi unikalną nazwę i wypełniają nagłówek style.css, WordPress rozpoznaje motyw po tych metadanych.
- Dzielą Państwo źródłowy index.html na cztery pliki PHP: header.php, index.php, sidebar.php i footer.php.
- Wdrażają Państwo standardowe hooki WordPress (get_header, get_sidebar, get_footer, wp_head i wp_footer), aby platforma „widziała" i przejmowała Państwa kodowanie.
- Dodają Państwo Pętlę WordPress w index.php, ten sam fragment kodu, który wyświetla wpisy bloga wewnątrz Państwa szkieletu HTML.
- Tworzą Państwo archiwum ZIP, wgrywają motyw do panelu administracyjnego i aktywują, Państwa serwis ożywa na WordPressie.
1. Nazewnictwo motywu i plik style.css
Pierwsza rzecz, którą trzeba zrobić, to nadać motywowi unikalną nazwę. Nawet jeśli tworzą Państwo motyw wyłącznie dla swojego serwisu, WordPress musi go jakoś zidentyfikować w panelu „Wygląd → Motywy".
Warunki wyjściowe:
- Mają Państwo index.html i plik stylów style.css (lub dowolny inny plik CSS).
- Mają Państwo działającą instalację WordPress z co najmniej jednym standardowym motywem, na przykład Twenty Twenty-Five.
- Utworzyli już Państwo folder dla przyszłego motywu wewnątrz
/wp-content/themes/.
Proszę otworzyć edytor kodu (rekomendujemy Sublime Text lub VS Code), skopiować zawartość Państwa arkusza stylów do nowego pliku i zapisać go jako style.css w folderze motywu. Na samej górze pliku, przed całym kodem CSS, proszę dodać blok metadanych:
1 /* 2 Theme Name: My HTML-to-WordPress Theme 3 Theme URI: https://example.com 4 Description: Тема, собранная из статичного HTML-макета. 5 Version: 1.0 6 Author: Your Name 7 Author URI: https://example.com 8 Tags: custom-theme, html-to-wordpress, beginner 9 */
Proszę nie usuwać znaków komentarza /* i */, WordPress odczytuje właśnie je. Pole Theme Name jest tu kluczowe: to pod tą nazwą motyw pojawi się w panelu administracyjnym. Pozostałe pola są opcjonalne, ale radzimy wypełnić je wszystkie, to dobra praktyka.
Proszę zapisać plik. Na tym etapie WordPress może już rozpoznać Państwa motyw, choć jest on na razie pusty i nie robi nic użytecznego.
2. Dzielimy HTML na szablony PHP
Klasyczny motyw WordPress składa się z kilku plików PHP, z których każdy odpowiada za swój obszar strony. Najczęstszy układ to nagłówek, treść, panel boczny, stopka. Jeśli Państwa HTML jest zbudowany inaczej (na przykład panel boczny po lewej lub dwie kolumny boczne), zasada się nie zmienia, proszę po prostu dostosować podział do swojej struktury.
Proszę utworzyć w folderze motywu cztery puste pliki:
header.php, nagłówek serwisuindex.php, główny szablon, punkt złożeniasidebar.php, panel bocznyfooter.php, stopka
Póki co są puste, proszę nie oczekiwać cudów. Pójdziemy po kolei.
2.1 Header.php, nagłówek serwisu
Proszę wejść do panelu administracyjnego WordPress, otworzyć „Wygląd → Edytor motywu" i wybrać standardowy motyw (na przykład Twenty Twenty-Five). Proszę znaleźć jego header.php i skopiować blok <head> w całości, to minimalny zestaw metatagów i hooków, bez których WordPress nie działa poprawnie. Oto co należy przenieść do Państwa header.php:
1 <head> 2 <meta charset="<?php bloginfo( 'charset' ); ?>"> 3 <meta name="viewport" content="width=device-width"> 4 <title><?php wp_title( '|', true, 'right' ); ?></title> 5 <link rel="profile" href="https://gmpg.org/xfn/11"> 6 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> 7 <?php wp_head(); ?> 8 </head>
Funkcja bloginfo() podstawia ustawienia serwisu dynamicznie (kodowanie, URL pingbacka). Hook wp_head() jest krytyczny: to przez niego wtyczki i rdzeń WordPress wstawiają swoje skrypty, style i metatagi. Bez niego motyw będzie na wpół martwy.
Teraz proszę otworzyć Państwa źródłowy index.html i skopiować kod nagłówka, wszystko, co znajduje się wewnątrz <header> lub analogicznego bloku, i wstawić go do header.php **zaraz po znaczniku zamykającym </head> i otwierającym **<body>. W naszym demonstracyjnym kodowaniu wygląda to tak:
1 <body> 2 <header class="header"> 3 <p>This is header section. Put your logo and other details here.</p> 4 </header> 5
Proszę dodać podpięcie Państwa arkusza stylów między znacznikami <head>:
1 <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style.css" />
Funkcja get_template_directory_uri() zwraca URL folderu Państwa motywu, ścieżka do CSS będzie działać na każdym serwerze, bez twardego kodowania. Proszę zapisać header.php.
2.2 Index.php, punkt złożenia
index.php w WordPressie to plik obowiązkowy. Nie przechowuje on kodowania jako takiego, lecz składa stronę z części. Proszę otworzyć Państwa pusty index.php i dodać trzy linijki:
1 <?php get_header(); ?> 2 3 <?php get_sidebar(); ?> 4 <?php get_footer(); ?>
Pierwsza linijka podpina header.php. Dwie ostatnie, sidebar.php i footer.php, idą na samym dole. Między nimi będzie się znajdować główna treść (obszar treści i Pętla, o tym w następnym rozdziale).
Proszę skopiować z źródłowego index.html blok z klasą .content (główny obszar treści) i wstawić go między get_header() a get_sidebar():
1 <?php get_header(); ?> 2 3 <div class="content"> 4 <p>This is the main content area.</p> 5 </div><!-- .content --> 6 7 <?php get_sidebar(); ?> 8 <?php get_footer(); ?> 9
Schemat jest prosty: WordPress sekwencyjnie składa stronę od góry do dołu, nagłówek, treść, panel boczny, stopka. Każdy get_*() wciąga odpowiedni plik PHP.
2.3 Sidebar.php i footer.php
Z panelem bocznym i stopką jest zupełnie prosto. Proszę skopiować zawartość bloków .sidebar i .footer z Państwa index.html do odpowiednich plików PHP.
sidebar.php:
1 <aside class="sidebar"> 2 <p>This is the side bar</p> 3 </aside> 4 5 <?php dynamic_sidebar( 'sidebar' ); ?> 6
Funkcja dynamic_sidebar() wyświetla widgety przypisane w panelu administracyjnym („Wygląd → Widgety"). Jeśli panel boczny nie jest potrzebny, proszę usunąć tę linijkę.
footer.php:
1 <footer class="footer"> 2 <p>And this is the footer.</p> 3 </footer> 4 5 <?php wp_footer(); ?> 6 </body> 7 </html> 8
Proszę zwrócić uwagę: </body> i </html> przenoszą się do footer.php. W Państwa źródłowym HTML one najprawdopodobniej też są na samym dole, tak ma być. Hook wp_footer() jest tak samo obowiązkowy jak wp_head(): bez niego nie będzie działać wiele wtyczek i sam WordPress (na przykład nie pojawi się pasek administracyjny).
3. Pętla WordPress: wyświetlanie wpisów
Motyw jest złożony, szkielet działa. Ale obszar treści jest na razie statyczny, ma na sztywno wpisany tekst z źródłowego HTML. Aby WordPress zaczął wyświetlać rzeczywiste wpisy bloga, potrzebna jest Pętla (The Loop), specjalna konstrukcja PHP, która przegląda opublikowane posty i wyświetla je jeden po drugim wewnątrz Państwa kodowania.
To najważniejszy fragment kodu w motywie. Idzie on do index.php, do środka bloku <div class="content">, zastępując statyczny tekst zastępczy:
1 <?php if ( have_posts() ) : ?> 2 <?php while ( have_posts() ) : the_post(); ?> 3 <article <?php post_class(); ?>> 4 <header class="post-header"> 5 <time datetime="<?php echo get_the_date( 'c' ); ?>"> 6 <?php echo get_the_date(); ?> 7 </time> 8 <h2> 9 <a href="<?php the_permalink(); ?>" rel="bookmark"> 10 <?php the_title(); ?> 11 </a> 12 </h2> 13 <span class="post-author"><?php the_author(); ?></span> 14 </header> 15 16 <div class="entry"> 17 <?php if ( has_post_thumbnail() ) : ?> 18 <?php the_post_thumbnail( 'medium' ); ?> 19 <?php endif; ?> 20 <?php the_content(); ?> 21 <?php edit_post_link( 'Редактировать', '<span class="edit-link">', '</span>' ); ?> 22 <?php wp_link_pages(); ?> 23 </div> 24 25 <footer class="post-footer"> 26 <?php comments_popup_link( 27 'Оставить комментарий', 28 '1 комментарий', 29 '% комментариев' 30 ); ?> 31 </footer> 32 </article> 33 <?php endwhile; ?> 34 35 <nav class="navigation"> 36 <div class="prev-posts"><?php next_posts_link( '← Предыдущие записи' ); ?></div> 37 <div class="next-posts"><?php previous_posts_link( 'Новые записи →' ); ?></div> 38 </nav> 39 <?php else : ?> 40 <p>Записей не найдено.</p> 41 <?php endif; ?> 42
Jak to działa:
have_posts()sprawdza, czy są wpisy do wyświetlenia. Jeśli tak, wchodzi do Pętli.the_post()przygotowuje dane kolejnego wpisu.post_class()dodaje standardowe klasy CSS do<article>, przydatne do stylizacji poszczególnych typów wpisów.the_permalink()ithe_title()wyświetlają URL i tytuł posta.the_content(), właściwa treść wpisu.the_post_thumbnail(), miniatura wpisu, jeśli została ustawiona.comments_popup_link(), link do komentarzy.next_posts_link()iprevious_posts_link(), nawigacja między stronami.
Blok else uruchamia się, gdy nie ma żadnych wpisów, wyświetlany jest komunikat zastępczy.
Po wstawieniu Pętli Państwa index.php w całości wygląda tak:
1 <?php get_header(); ?> 2 3 <div class="content"> 4 <?php if ( have_posts() ) : ?> 5 <?php while ( have_posts() ) : the_post(); ?> 6 <article <?php post_class(); ?>> 7 <header class="post-header"> 8 <time datetime="<?php echo get_the_date( 'c' ); ?>"> 9 <?php echo get_the_date(); ?> 10 </time> 11 <h2> 12 <a href="<?php the_permalink(); ?>" rel="bookmark"> 13 <?php the_title(); ?> 14 </a> 15 </h2> 16 <span class="post-author"><?php the_author(); ?></span> 17 </header> 18 <div class="entry"> 19 <?php if ( has_post_thumbnail() ) : ?> 20 <?php the_post_thumbnail( 'medium' ); ?> 21 <?php endif; ?> 22 <?php the_content(); ?> 23 <?php edit_post_link( 'Редактировать', '<span class="edit-link">', '</span>' ); ?> 24 <?php wp_link_pages(); ?> 25 </div> 26 <footer class="post-footer"> 27 <?php comments_popup_link( 28 'Оставить комментарий', 29 '1 комментарий', 30 '% комментариев' 31 ); ?> 32 </footer> 33 </article> 34 <?php endwhile; ?> 35 <nav class="navigation"> 36 <div class="prev-posts"><?php next_posts_link( '← Предыдущие записи' ); ?></div> 37 <div class="next-posts"><?php previous_posts_link( 'Новые записи →' ); ?></div> 38 </nav> 39 <?php else : ?> 40 <p>Записей не найдено.</p> 41 <?php endif; ?> 42 </div><!-- .content --> 43 44 <?php get_sidebar(); ?> 45 <?php get_footer(); ?> 46
4. Pakowanie i instalacja motywu
Wszystkie pięć plików, style.css, header.php, index.php, sidebar.php i footer.php, muszą leżeć w folderze Państwa motywu (proszę nazwać go, powiedzmy, my-html-theme). Proszę spakować folder do archiwum ZIP.
Dalej standardowy scenariusz: panel administracyjny WordPress → „Wygląd" → „Motywy" → „Dodaj motyw" → „Wgraj motyw". Proszę wybrać plik ZIP, kliknąć „Zainstaluj", potem „Aktywuj". Proszę wejść na serwis, Państwa układ HTML ożył wewnątrz WordPressa, a w obszarze treści wyświetlają się wpisy bloga.
Na tym pierwszą część zakończono. Otrzymali Państwo działający szkielet motywu: WordPress go rozpoznaje, przejmuje hooki i wyświetla dynamiczną treść przez Pętlę. W następnej części omówimy szablony poszczególnych stron (single.php, page.php), hierarchię szablonów i podpinanie skryptów przez functions.php.
⁉️🤔 Często zadawane pytania
Czy trzeba znać PHP, aby złożyć motyw z HTML?
Nie. Minimum, które Państwo napiszą, to kilka wywołań funkcji typu
get_header()i Pętla z 15 linijek. Cała reszta to kopiowanie kodu HTML, który już Państwo mają. PHP występuje tu jako „klej", a nie główny język. Jeśli rozumieją Państwo, gdzie otwiera się i zamyka<?php ?>, to wystarczy na start.
Co robić, jeśli mój układ HTML nie przypomina „nagłówek-treść-panel boczny-stopka"?
Zasada się nie zmienia. WordPress składa stronę sekwencyjnym wywołaniem plików PHP, ich kolejność w index.php określa układ. Jeśli mają Państwo panel boczny po lewej, proszę po prostu wywołać
get_sidebar()przed blokiem treści. Dwie kolumny boczne, proszę utworzyćsidebar-left.phpisidebar-right.phpz osobnymi wywołaniami. Schemat jest elastyczny.
Czy można zrobić motyw bez panelu bocznego?
Tak, i to nawet upraszcza zadanie. Proszę po prostu usunąć wywołanie
<?php get_sidebar(); ?>zindex.phpi nie tworzyć plikusidebar.php. Wiele współczesnych motywów, w tym motywy blokowe WordPress, obywa się całkowicie bez panelu bocznego.
Czy obowiązkowo trzeba używać właśnie header.php, index.php, sidebar.php i footer.php?
index.phpistyle.csssą obowiązkowe, bez nich WordPress nie zobaczy motywu. Pozostałe pliki są opcjonalne. Ale właśnieheader.php,sidebar.phpifooter.phpto de facto standard dla klasycznych motywów: rozumieją je wszyscy deweloperzy, pod nie są dostosowane funkcjeget_header(),get_sidebar()iget_footer(). Dla pierwszego motywu proszę trzymać się tej czwórki.
Czy to podejście działa z motywami blokowymi (FSE)?
Nie, ten poradnik jest dla klasycznych motywów PHP, które żyją i są wspierane (WordPress z nich nie zrezygnował i nie planuje). Motywy blokowe (Full Site Editing) używają szablonów HTML i pliku theme.json. Jeśli Państwa celem jest szybkie przekształcenie istniejącego HTML na działający motyw, klasyczne podejście jest znacznie prostsze: mniej abstrakcji, znajomy model „nagłówek-treść-panel boczny-stopka".
Co dalej: Państwa pierwszy krok w tworzeniu motywów
Złożyli Państwo podstawowy szkielet motywu z kodowania HTML, z działającą Pętlą, podpiętymi hookami i dynamiczną treścią. Motyw już instaluje się w panelu administracyjnym i wyświetla wpisy. Teraz są dwa kierunki rozwoju:
- Jeśli wystarcza Państwu wyświetlanie postów w swoim kodowaniu, proszę wypełniać serwis treścią i dopracowywać CSS pod markę.
Proszę zacząć od małego: złożyć motyw według tego poradnika, aktywować go i dodać parę testowych wpisów. Kiedy zobaczą Państwo swój HTML z żywymi postami w środku, reszta pójdzie łatwiej.
Profesjonalny zespół autorów i redaktorów specjalizujących się w tworzeniu treści wysokiej jakości.