Przewodnik po tworzeniu motywów w WordPressie: jak stworzyć swój pierwszy motyw od podstaw.

Prace przygotowawcze przed rozpoczęciem

Przed rozpoczęciem pisania jakiegoś kodu należy upewnić się, że środowisko rozwoju jest gotowe do użycia. Najpierw potrzebujesz lokalnego serwera – na przykład XAMPP, MAMP lub Dockera. Następnie konieczny jest editor kodu; Visual Studio Code lub PHPStorm to doskonałe wybory. Najważniejsze jest, aby zainstalowałeś najnowszą wersję WordPress i upewniłeś się, że działa ona bez problemów.

Następnie, w katalogu zainstalowanego WordPressa:wp-content/themesW folderze utwórz nowy folder, który będzie twoim katalogiem tematycznym. Na przykład możesz go nazwać „my_themes”.my-first-themeNazwa tego katalogu będzie bezpośrednio stanowić twoje identyfikatorze tematycznemu, dlatego zaleca się używać małych liter, cyfr oraz kresków.

W folderze z tematami znajdują się dwa pliki, które są konieczne i stanowią minimum wymaganych elementów do uruchomienia tematu WordPress.style.css和index.phpBez tych elementów WordPress nie będzie w stanie rozpoznać twojego tematu w liście “Wygląd” -> “Teme” w panelu administracyjnym.

Polecamy lekturę. Jak nauczyć się tworzenia tematów dla WordPressa od zera: pełny przewodnik po stworzeniu personalizowanych stron internetowych。

Zrozumienie struktury kluczowych plików dotyczących tematu

Pełnowartościowa tematyczna strona WordPress składa się z serii plików szablonów, które stosują określone zasady nazawania. Każdy z tych plików jest odpowiedzialny za renderowanie różnych części witryny.

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

Zarzuty dotyczące plików z definicjami stylów (style sheets) oraz informacji o tematach (theme information declarations).

style.cssPliki nie służą wyłącznie do zapisywania stylów CSS; ich sekcja z komentarzami na początku jest używana przez WordPress do odczytywania metadanych tematu. Ta sekcja musi znajdować się na samym początku pliku i musi spełniać określone wymogi formatu.

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

“Text Domain” jest używany w celach internacionalizacji i stanowi kluczowy element umożliwiający dalsze pobieranie plików z tłumaczeń. Po wypełnieniu tych informacji odśwież stronę tematów w panelu administracyjnym WordPress i powinno pojawić się zdjęcie przedstawiające temat o nazwie “Moje pierwsze temat”.

Co robi plik z główną szablonem?

index.phpTo jest główny plik szablonu twojego tematu, a także standardowy “szablon odwołania” („fallback” template) dla witryny. Gdy WordPress nie może znaleźć bardziej specyficznego pliku szablonu…single.php或page.phpWtedy używa się…index.phpJego najprostszą strukturą jest wywołanie elementów nagłówka (header), głównego bloku zawartego w cyklu (main loop) oraz elementów nagłówka końcowego (footer) w ramach WordPress.

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

<main id="main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 输出文章内容
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>没有找到任何文章。</p>';
    endif;
    ?&gt;
</main>

<?php get_footer(); ?>

Rozszerzenie standardowych szablonów i wdrożenie nowych funkcji

Tylkoindex.php、style.cssTo nie wystarczy – musimy oddzielić części takie jak nagłówek, stopień i boczne menu, aby struktura była bardziej jasna, a także wdrożyć kluczowe funkcje tematu.

Polecamy lekturę. Od zera: Pokazujemy ci, jak tworzyć własną tematę dla WordPress.。

Rozdzielenie szablonów głównego i końcowego

Utworzyćheader.phpTo plik, który zawiera deklarację typu dokumentu oraz kod HTML.Część treści, a także nagłówki i obszary nawigacji na stronie internetowej.wp_head()„Hak” służy do zabezpieczenia prawidłowego włączenia niezbędnych skryptów i stylów przez pluginy oraz core WordPress.

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<?php wp_body_open(); ?>
<header>
    <h1><a href="/pl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

Utworzyćfooter.phpPlik zawiera informacje o nagłówku strony witryny („footer”) i zawiera także wywołanie („call”) na końcu pliku.wp_footer()Hak.

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

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

W ten sposób,index.phpW tym przypadku możemy to użyć.get_header()和get_footer()Funkcje są używane do ich włączenia.

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

Create a function file

functions.phpTo “ mózg” tematu, służący do dodawania nowych funkcji, konfiguracji menu rejestracji, włączania specjalnych zdjęć, definiowania bokówki itd. Nie jest to plik szablonu, lecz plik w języku PHP, który jest automatycznie ładowany podczas inicjalizacji tematu.

Następnie jest…functions.phpPrzykład bazowego:

<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
function my_first_theme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_register_menus' );

// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_enqueue_scripts' );
?>

Stworzyć więcej plików z szablonami.

Aby różne typy stron miały bardziej odpowiednią strukturę, musimy stworzyć więcej specjalnych plików z wzorami (templateów).

Polecamy lekturę. Od instalacji do biegłości: kompletny przewodnik po tworzeniu witryny w WordPressie oraz praktyczne porady.。

Strona artykułu pojedynczego oraz szablon strony

single.phpZnajduje się w używaniu do renderowania pojednego artykułu z blogu. Jego struktura jest podobna do…index.phpPodobne, ale zwykle zawierają szablony do komentarzy.comments.phpWywołanie…

page.phpWykorzystuje się do renderowania statycznych stron internetowych. Zwykle nie wyświetla metadanych takich jak kategorie czy tagi, lecz skupia się wyłącznie na samym treści strony.

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

Łącznik listy archiwów artykułów

archive.phpWykorzystuje się do wyświetlania kategorii, tagów, autorów, dat itp. na stronach archiwów. Można używać warunkowych tagów, np.is_category()、is_tag()Aby odróżnić różne typy archiwów i wyświetlić ich odpowiednie nagłówki.

Stworzenie strony błędu 404

404.phpTo strona, która wyświetla się, gdy użytkownik odwiedza nieistniejący adres URL. Dobra strona 404 powinna zawierać przyjazne informacje, pole do wyszukiwania oraz linki do głównych stron, aby pomóc użytkownikowi w znalezieniu wymaganych informacji.

Podsumowanie.

Zgodnie z tym poradnikiem udało ci się przesuwać się przez cały proces od tworzenia folderów i podstawowych plików, poprzez zrozumienie struktury tematów (templatów) w WordPress, aż po rozszerzanie funkcji tematów i tworzenie specjalnych szablonów. Utworzyłeś temat, który posiada podstawową strukturę, jest rozpoznawany przez WordPress i dysponuje dodatkowymi funkcjami. Choć może to wydawać się proste, to w tym procesie uwzględniono już wszystkie kluczowe elementy. Teraz możesz dalej zgłębiać znania o tagach w szablonach, dostosowanych zapytaniach (custom queries), sposobach używania cykli w WordPress, a także o tworzeniu własnych typów artykułów oraz opcji dostosowanych dla tematów, aby twoje temat było jeszcze bardziej funkcjonalne i personalizowane.

FAQ – najczęściej zadawane pytania.

Czemu moja tematyczna strona nie jest wyświetlana w panelu administracyjnym WordPressa?
Proszę najpierw sprawdzić, czy folder z tematami znajduje się w prawidłowym miejscu.wp-content/themes/W katalogu. Następnie sprawdź, czy w folderze znajdują się niezbędne elementy.style.css和index.phpPliki. Na koniec, otwórz je.style.cssZadbaj o to, aby blok z komentarzami dotyczącymi tematu w nagłówku pliku miał właściwy format – szczególnie…Theme Name:Ta linia.

Jak dodać mojemu tematowi wsparcie dla kustomowego loga?

Musisz uwzględnić temat…functions.phpDodaj jeden wiersz kodu do pliku, aby włączyć tę funkcję.add_theme_support( ‘custom-logo’ )Funkcja. Po jej włączeniu użytkownicy będą mogli załadować i ustawić logo w opcjach “Wygląd” -> “Dostosowanie” -> “Identyfikator witryny”. Ponadto konieczne jest…header.phpUżyj go we właściwym miejscu.the_custom_logo()Funkcja jest przeznaczona do jej wyświetlania.

W jaki sposób różnią się plik functions.php w temacie od wtyczek (pluginów)?

functions.phpFunkcje zawarte w tym elementie są ściśle powiązane z aktualnie aktywnym tematem. Jeśli zmienisz temat, te funkcje przestaną być dostępne. Natomiast funkcje wtyczek (plug-inów) są niezależne od tematu – działają w dowolnym temacie, jeśli tylko wtyczka jest włączona. Dlatego jeśli twoje funkcje są mocno powiązane z wizualnym wyglądem tematu (np. lokalizacją formularza rejestracji, ustawieniami rozkładu elementów na ekranie), można je umieścić w modułach związanych z tematem.functions.phpJeśli chodzi o funkcje ogólne (np. formularze kontaktowe, optymalizacja SEO), lepiej je implementować w postaci dodatków (plug-inów).

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

Musisz zrobić dwie rzeczy. Po pierwsze, podczas rozwoju wszystkie teksty przeznaczone dla użytkowników muszą zostać otoczone funkcjami tłumaczeniowymi.__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )I upewnij się, że…‘my-first-theme’与style.cssPierwsze kryterium to zgodność “Text Domain” zdefiniowanego w dokumentacji. Drugie kryterium polega na użyciu narzędzia takiego jak Poedit do wydobycia wszystkich tekstów wymagających tłumaczenia z kodu twojego tematu i generowania listy tych tekstów..potPliki, a potem tłumacze tworzą odpowiednie wersje tych plików w wymaganych językach..poI po skompilowaniu..moPlik zostanie umieszczony w temacie./languages/W katalogu.