Kompletny przewodnik po tworzeniu motywów w WordPressie: budowanie niestandardowego motywu od podstaw.

Podstawowe pojęcia związane z tworzeniem motywów w WordPressie.

Zanim zaczniesz pisać kod, koniecznie poznaj podstawową strukturę i kluczowe pojęcia związane z motywami WordPress. Motyw WordPress to w zasadzie plik znajdujący się w folderze/wp-content/themes/Katalog zawierający foldery z szeregiem plików, które wspólnie określają wygląd i funkcjonalność witryny. Pliki te można podzielić na dwie główne kategorie: szablony i style.

Pliki szablonów stanowią podstawę motywu i kontrolują strukturę wyjściową treści różnych stron. Na przykład:index.phpJest to domyślny szablon strony głównej.single.phpKontrolowanie wyświetlania pojedynczych artykułów.page.phpKontroluj wyświetlanie pojedynczej strony, a jednocześnieheader.php、footer.php和sidebar.phpSą one zwykle wykorzystywane do tworzenia publicznych obszarów witryn internetowych. WordPress korzysta z określonej hierarchii szablonów, aby wybrać odpowiedni plik szablonu dla różnych żądań, co zapewnia programistom dużą elastyczność.

Pliki stylów są odpowiedzialne za wizualną prezentację motywu, a najważniejszym z nich jeststyle.cssTen plik nie tylko zawiera wszystkie reguły CSS, ale także blok komentarzy na początku pliku, zawierający metadane motywu, takie jak nazwa motywu, autor, opis i numer wersji. Informacje te są niezbędne do identyfikacji i aktywacji motywu w WordPress.

Polecamy lekturę. Jak stworzyć niestandardowy motyw WordPress: kompletny przewodnik od zera do jednego.。

Oprócz tego istnieją pliki z funkcjami motywu.functions.phpPełni kluczową rolę. Nie jest to plik szablonu, lecz plik PHP automatycznie ładowany podczas inicjalizacji motywu. Twórcy mogą tutaj dodawać niestandardowe funkcje, rejestrować menu i paski boczne, a także importować skrypty i style oraz korzystać z różnych opcji.add_action和add_filterHaki służą do rozszerzania lub modyfikowania podstawowej funkcjonalności WordPressa. Zrozumienie roli i sposobu współpracy tych podstawowych plików to pierwszy krok w tworzeniu dowolnego niestandardowego motywu.

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

Stworzenie szablonu i plików z ramami tematycznymi

Pierwszym krokiem w tworzeniu niestandardowego motywu jest utworzenie katalogu projektu i niezbędnych plików głównych. W środowisku lokalnym lub na serwerze testowym./wp-content/themes/W ścieżce utwórz nowy folder, na przykład o nazwie “my-custom-theme”. W tym folderze musisz natychmiast utworzyć dwa podstawowe pliki:style.css和index.php。

style.cssGłówna część pliku musi zawierać określone informacje o stylu. Oto najprostszy przykład:

/*
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
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

Te komentarze są niezwykle istotne, ponieważ WordPress wykorzystuje je do wyświetlania Twojego motywu na liście motywów w panelu administracyjnym. Następnie należy go utworzyć.index.phpPlik. To jest ostateczny szablon odpowiedzi na wszystkie żądania strony. Najprostszy i najbardziej skuteczny.index.phpMoże zawierać tylko kod wywołujący etykiety szablonu głównego:

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

<main id="primary" class="site-main">
    <p>Jeśli są jakieś posty:</p> <p>Pętla pozwala na wyświetlenie wszystkich postów na stronie.</p> <p>while (have_posts()) { the_post(); // domyślnie wyświetla treść posta the_content(); }</p> <p>Jeśli nie ma żadnych postów:</p> <p>Wyświetla komunikat 'Brak treści'.</p> <p>Endif;</p>
</main>

Kod ten wyraźnie pokazuje pętlę motywu w WordPressie – poprzezhave_posts()和the_post()Funkcja przeszukuje i wyświetla artykuły. A jednak...get_header()、get_sidebar()和get_footer()Funkcje są używane do wstawiania odpowiednich części szablonu. Następnie należy utworzyć pliki z wprowadzonymi elementami szablonu:header.php、sidebar.php和footer.php。

Polecamy lekturę. Zaczynamy od zera: kompletny przewodnik po tworzeniu motywów w WordPressie wraz z omówieniem podstawowych technologii.。

Stwórz plik szablonu nagłówka.

在header.phpW tym kroku musisz umieścić informacje o nagłówku dokumentu HTML i wywołać kluczowe funkcje WordPress.

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <p><strong>Witaj na mojej stronie!</strong></p>
</head>
<body no numeric noise key 1002>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <nav><p><strong>Nie można wyświetlić tego menu.</strong></p></nav>
</header>

wp_head()Funkcje pozwalają rdzeniowi WordPressa, wtyczkom i motywom dodawać niezbędny kod (np. linki do arkuszy stylów) do poszczególnych części strony.body_class()Funkcja generuje szereg warunkowych klas CSS dla znaczników, co ułatwia precyzyjną kontrolę stylu. Podobnie,footer.phpDokument musi zawieraćwp_footer()Wywołanie funkcji jest zwykle umieszczane przed zamkniętymi znacznikami.

Użyj pliku functions.php, aby rozszerzyć funkcjonalność motywu.

functions.phpPlik ten jest “centrum kontroli” twojego motywu, służącym do dodawania funkcji i integrowania elementów WordPress. Często zaczyna się od skonfigurowania obsługiwanych przez motyw funkcji, rejestracji menu nawigacyjnego i prawidłowego wczytywania zasobów.

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

Dodanie obsługi funkcji tematów.

Możesz użyćadd_theme_support()Funkcje te są używane do deklarowania różnych funkcji obsługiwanych przez motyw. Na przykład włączenie funkcji wyświetlania miniatur artykułów oraz obsługi niektórych elementów w formacie HTML5 to standardowa praktyka.

function my_custom_theme_setup() {
    // 让主题支持特色图像
    add_theme_support( 'post-thumbnails' );

// 为评论表单、搜索表单等添加HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加标题标签支持，允许WordPress管理文档标题
    add_theme_support( 'title-tag' );

// 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Tutaj,after_setup_themeJest to hook, który jest wykonywany po zainicjowaniu motywu i stanowi standardowe miejsce do konfiguracji motywu. Za jego pomocą możnaadd_theme_support(‘title-tag’)Nie musisz już tego robić.header.phpNapisz to ręcznie w języku chińskim (uproszczonym)<title>Dodałem już tagi.

Prawidłowe włączenie skryptów i stylów.

Aby uzyskać lepszą wydajność, a także skuteczniej zarządzać pamięcią podręczną i zależnościami, należy korzystać z metod oferowanych przez WordPress do ładowania plików CSS i JavaScript, a nie pisać ich bezpośrednio w kodzie HTML.<link>或<script>Etikieta. To jest możliwe dzięki temu, żewp_enqueue_style()和wp_enqueue_script()Funkcja została zakończona.

Polecamy lekturę. Pełny przewodnik po optymalizacji WordPressa: kompleksowe strategie poprawy wydajności od podstaw do zaawansowanych technik.。

function my_custom_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 引入一个自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 如果需要，为脚本局部化数据（传递PHP变量到JS）
    wp_localize_script( 'my-custom-theme-navigation', 'myThemeData', array(
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'homeUrl' => home_url( '/' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

wp_enqueue_scriptsJest to właściwy hook do ładowania zasobów na frontendzie. Użyj This is the correct hook for loading resources on the frontend. Useget_stylesheet_uri()Uzyskaj informacje na temat tego tematu.style.cssŚcieżka, użyjget_template_directory_uri()Uzyskaj adres URL katalogu tematów. Przekazanie numeru wersji jako parametru pomoże oczyścić pamięć podręczną przeglądarki po aktualizacji pliku.

Realizacja hierarchii szablonów i niestandardowych stylów.

Struktura szablonów w WordPress jest systemem reguł, który automatycznie wybiera właściwy plik szablonu do wyświetlenia strony. Gdy odwiedzasz jakąś stronę, WordPress szuka pliku szablonu, zaczynając od najbardziej szczegółowego, a kończąc na najbardziej ogólnym. Na przykład w przypadku artykułu o ID 123 WordPress szuka kolejno:single-post-123.php -> single-post.php -> single.php -> singular.php –> Na koniec wycofaj się.index.php。

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

Stwórz niestandardowy szablon strony.

Oprócz szablonów domyślnych możesz tworzyć niestandardowe szablony dla określonych stron. Aby to zrobić, dodaj specjalną notatkę z nazwą szablonu na początku nowego pliku szablonu. Na przykład utwórz szablon o nazwie “Strona na całą szerokość”:

<br />

<main id="primary" 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>

&lt;?php
get_footer();

Utwórz i zapisz ten plik (np.template-full-width.phpNastępnie, edytując stronę w panelu administracyjnym WordPress, będziesz mógł zobaczyć i użyć szablonu “Pełna szerokość strony” w rozwijanym menu “Szablon” w zakładce “Właściwości strony”.

Napisz responsywny i modułowy kod CSS.

W nowoczesnym projektowaniu stron internetowych niezbędna jest responsywna nawigacja.style.cssW tym celu należy użyć zapytań mediów, aby dostosować się do różnych rozmiarów ekranu. Dobrą praktyką jest stosowanie zasady „mobilność na pierwszym miejscu”, czyli najpierw tworzenie podstawowych stylów dla urządzeń mobilnych, a potem stopniowe ulepszanie stylów dla większych ekranów.

Jednocześnie należy zachować modułowość i możliwość utrzymania kodu CSS. Należy ustanowić jasną strukturę nazw klas dla różnych elementów motywu (np. nagłówek, nawigacja, artykuł, stopka), korzystając na przykład z metodologii BEM (Block Element Modifier).body_class()和post_class()Automatycznie generowana nazwa klasy przez funkcję może znacznie uprościć selektory CSS i pomóc uniknąć problemów z nadmiernym zagnieżdżaniem oraz dużą specyficznością.

/* 移动端基础样式 */
.site-header {
    padding: 1rem;
}
.entry-title {
    font-size: 1.5rem;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .site-header {
        padding: 2rem;
        display: flex;
        justify-content: space-between;
    }
    .entry-title {
        font-size: 2rem;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .site-main.full-width {
        max-width: 1200px;
        margin: 0 auto;
    }
}

Podsumowanie.

Rozwój niestandardowego motywu WordPressa od podstaw to złożony proces wymagający od programisty zrozumienia jego podstawowej struktury: pliki szablonów kontrolują strukturę, a pliki stylów definiują wygląd.functions.phpNastępnie funkcja zarządzania scentralizowanego. Postępując zgodnie ze strukturą szablonów, można skutecznie tworzyć widoki różnych typów stron i prawidłowo korzystać z funkcji oraz haków dostępnych w WordPressie (np.wp_enqueue_scripts、add_theme_supportKluczowe jest zapewnienie kompatybilności, bezpieczeństwa i wydajności motywu. Tworząc modułowe elementy szablonu, pisząc responsywny kod CSS i korzystając z plików funkcjonalnych motywu, możesz w pełni kontrolować wygląd i działanie witryny, a także tworzyć wyjątkowe doświadczenia użytkowników. Choć wymaga to czasu na naukę, to jednak daje największą swobodę w tworzeniu dowolnego rodzaju witryny.

FAQ – najczęściej zadawane pytania.

Jaka jest różnica pomiędzy motywem a wtyczką?

Temat (Theme) jest głównie odpowiedzialny za kontrolę wyglądu zewnętrznego witryny, czyli projektu wizualnego i układu, które widzą użytkownicy. Określa on kolory, czcionki, układ oraz strukturę strony.

Wtyczki to moduły, które dodają określone funkcje lub elementy do witryny i rozszerzają jej możliwości bez zmiany podstawowej konstrukcji motywu, na przykład poprzez dodanie formularza kontaktowego, optymalizację SEO czy utworzenie sklepu internetowego. Na danej stronie można jednocześnie uruchomić tylko jeden motyw, ale można zainstalować i uruchomić wiele wtyczek.

Czy muszę zainstalować środowisko lokalne, zanim przejdę do opracowywania motywu?

Tak, zdecydowanie zaleca się tworzenie motywów WordPress w lokalnym środowisku programistycznym (np. Local, XAMPP, MAMP lub Docker).

Dzięki temu możesz pisać i testować kod w bezpiecznym, izolowanym środowisku, bez obaw o wpływ na witrynę internetową. Lokalne środowisko jest szybsze, ułatwia debugowanie i ułatwia korzystanie z narzędzi do kontroli wersji (np. Git) do zarządzania kodem. Po zakończeniu testów w środowisku deweloperskim kod jest wdrażany na serwerze produkcyjnym.

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

Aby motyw obsługiwał wiele języków (międzynarodową i lokalną wersję), należy wykonać dwa główne kroki. Najpierw we wszystkich miejscach w motywie, w których wyświetlane są teksty, należy użyć funkcji tłumaczeniowej WordPressa, aby otoczyć ciągi znaków, na przykład przy użyciu <esc_html_e(‘Hello World’, ‘my-custom-theme’)或__('Hello World', 'my-custom-theme')Drugi parametr tych funkcji, “my-custom-theme”, jest tym, co podajesz w theme.yml.style.cssTekstowa domena zdefiniowana w pliku „messages.properties” musi być spójna.

Następnie musisz użyć takiego narzędzia jak Poedit, aby przeskanować wszystkie możliwe do przetłumaczenia ciągi znaków w motywie i wygenerować ich tłumaczenia..potNastępnie należy utworzyć plik szablonu i odpowiednio go dostosować dla każdego języka..poI po skompilowaniu..moNależy przygotować dokumenty i umieścić je w odpowiedniej sekcji./languages/W katalogu. Na koniec wfunctions.phpUżyj tego w Chinach.load_theme_textdomain()Funkcja do ładowania plików tłumaczeniowych.

Dlaczego zmodyfikowałem style.css, a na stronie nic się nie zmieniło?

Zwykle jest to spowodowane pamięcią podręczną przeglądarki, która buforuje pliki CSS, aby przyspieszyć ich ładowanie, przez co wyświetlane style mogą być nieaktualne.

Możesz spróbować rozwiązać to w następujący sposób: po pierwsze, wwp_enqueue_style()Dodaj do funkcji parametr z dynamicznym numerem wersji pliku stylów, jak pokazano w powyższym przykładzie, aby adres URL zmieniał się za każdym razem, gdy plik jest aktualizowany, i zmuszał przeglądarkę do ponownego pobrania go. Następnie naciśnij w przeglądarce Ctrl+F5 (lub Cmd+Shift+R), aby wykonać twardą odświeżenie. Sprawdź też, czy Twój motyw jest poprawnie aktywowany, i upewnij się, że modyfikujesz aktualnie aktywny motyw.style.cssPliki. Na koniec upewnij się, że twoje selektory CSS są na tyle specyficzne, aby nadpisywać wszelkie inne style, które mogą się pojawić.