Pierwsze kroki w tworzeniu motywów WordPress - Stwórz swój pierwszy niestandardowy motyw od podstaw!

Aby rozpocząć tworzenie motywów WordPress, pierwszym wymaganiem jest komputer skonfigurowany z lokalnym środowiskiem PHP. Aby szybko je skonfigurować, można wybrać narzędzia takie jak XAMPP, MAMP, Local by Flywheel itp. Następnie potrzebny jest edytor kodu, taki jak Visual Studio Code, PHPStorm lub Sublime Text, który może zapewnić podświetlanie składni, podpowiedzi do kodu i inne funkcje znacznie poprawiające wydajność programowania. Na koniec upewnij się, że masz zainstalowaną i aktywowaną najnowszą wersję WordPressa.

Przed rozpoczęciem kodowania ważne jest, aby zrozumieć strukturę katalogów motywu WordPress. Najbardziej podstawowy motyw wymaga co najmniej dwóch plików:style.css和index.php. Jednak w rzeczywistym rozwoju zwykle potrzebujemy więcej plików, aby oddzielić funkcjonalność. Typowa struktura nowoczesnego motywu może wyglądać następująco:

your-theme/
├── style.css          # 主题样式和基本信息
├── index.php         # 主模板文件
├── header.php        # 头部模板
├── footer.php        # 底部模板
├── sidebar.php       # 侧边栏模板
├── functions.php     # 功能和特性定义
├── page.php          # 页面模板
├── single.php        # 文章模板
└── assets/
    ├── css/
    ├── js/
    └── images/

Tworzenie pliku z kluczowymi tematami

W tym kroku utworzymy kamienie węgielne motywu. Pliki te definiują tożsamość i podstawowy szkielet motywu.

Polecamy lekturę. Pełny przewodnik po tworzeniu motywów w WordPressie: od zera do gotowego motywu niestandardowego.。

Definiowanie informacji o motywie i głównych arkuszy stylów

style.cssPlik ten to nie tylko arkusz stylów, to “identyfikator” motywu. Blok komentarza u góry zawiera wszystkie meta informacje, których WordPress potrzebuje do rozpoznania motywu. Podstawowy komentarz nagłówka pokazano poniżej:

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

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始构建的简单自定义主题，用于学习WordPress主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Wśród nichText DomainUżywany do internacjonalizacji, jest kluczowym identyfikatorem dla kolejnych wywołań funkcji tłumaczenia. Po bloku komentarza możesz dodać style do motywu, tak jakbyś pisał normalny CSS.

Szkielet szablonu do tworzenia motywu

index.phpjest domyślnym szablonem głównym dla motywu i szablonem awaryjnym dla wszystkich stron. Dobrą praktyką jest korzystanie z funkcji szablonów WordPressa w celu wprowadzenia sekcji modułowych zamiast umieszczania całego kodu w jednym pliku. Minimalistyczny, ale dobrze zorganizowanyindex.phpMoże to wyglądać następująco:

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

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) .
            the_post();
            // Wyświetlanie treści postu
            the_content();
        endwhile.
    endwhile; else :
        echo &#039;<p>Brak treści w tym momencie. </p>'; endif; else : echo '<p>Brak treści w tym momencie.
    endif;
    ? &gt;
</main>

Oddzielne szablony nagłówka i stopki

header.phpPlik ten zazwyczaj zawiera nagłówek dokumentu HTML do momentu tuż przed rozpoczęciem obszaru zawartości. Powinien on zawieraćOświadczenie,Etykiety,Obszar (użytkowanie)wp_head()hooks), a także tytuł strony i główną nawigację. Kluczowe funkcje towp_head()Pozwala to wtyczkom i motywom na wstrzyknięcie niezbędnego kodu (takiego jak CSS i JS) do nagłówka.

footer.phpPlik zawiera następnie wszystko po zakończeniu obszaru zawartości, takie jak obszar widgetu stopki, informacje o prawach autorskich itp. Musi zaczynać się odwp_footer()Koniec wywołania funkcji, który jest niezbędny do prawidłowego działania wielu wtyczek (np. kodu parsującego).

Polecamy lekturę. Tworzenie profesjonalnych stron internetowych: Kompletny przewodnik po tworzeniu niestandardowych motywów WordPress od podstaw。

Wprowadzanie funkcji i ulepszanie motywów

functions.phpPlik to “centrum kontroli” motywu, nie jest to plik szablonu, ale plik PHP, który jest automatycznie ładowany podczas inicjalizacji motywu. Nie jest to plik szablonu, ale plik PHP, który jest automatycznie ładowany podczas inicjalizacji motywu. Tutaj możesz dodać obsługę motywu, menu rejestracji, arkusze stylów i skrypty, a także zdefiniować różne dostosowania.

Włączanie podstawowych funkcji motywu

przejść (rachunek lub inspekcję itp.)add_theme_support()można zadeklarować obsługę niektórych podstawowych funkcji WordPress dla swojego motywu. Na przykład, włączenie miniatur postów (wyróżnione obrazy) i obsługa znaczników HTML5 są standardem w nowoczesnych motywach:

<?php
function my_theme_setup() {
    // 启用文章和评论的HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 设置默认缩略图尺寸
    set_post_thumbnail_size( 800, 400, true );
    // 启用标题标签支持（由WordPress自动生成<title>标签）
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Menu rejestracji i ładowanie zasobów

Zarejestrowanie pozycji menu nawigacyjnego pozwala użytkownikom na zarządzanie nimi w backendzie “Wygląd” -> “Menu”. Użyj opcjiregister_nav_menus()implementacja funkcji:

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

function my_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '页脚菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_theme_menus' );

Ładowanie plików CSS i JavaScript we właściwy sposób jest gwarancją dobrej wydajności. Powinieneś używaćwp_enqueue_style()和wp_enqueue_script()Funkcje i ich zamontowanie.wp_enqueue_scriptshak na nim. Gwarantuje to, że zależności są poprawne i pozwala uniknąć zduplikowanych obciążeń.

Tworzenie szablonów dla poszczególnych stron

WordPress stosuje system hierarchii szablonów, co oznacza, że automatycznie wyszukuje najbardziej pasujący plik szablonu w oparciu o typ aktualnie przeglądanej strony. Tworzenie wyspecjalizowanych szablonów dla różnych typów stron pozwala na bardziej wyrafinowany układ i prezentację treści.

Szablony dla pojedynczych artykułów i samodzielnych stron

single.phpSzablon służy do wyświetlania pojedynczego artykułu. Jest on podobny do szablonuindex.phpPętle są podobne, ale zwykle zawierają bardziej kompletne metainformacje, takie jak kategorie, tagi, autorzy, czasy postów i obszary komentarzy.

Polecamy lekturę. Kompletny samouczek dotyczący tworzenia motywów WordPress: tworzenie własnych motywów od podstaw。

page.phpSzablon służy do wyświetlania samodzielnych stron statycznych. Zwykle nie wyświetla metadanych artykułu (np. kategorii, czasu publikacji) i ma prostszą pętlę, która koncentruje się na wyświetlaniu zawartości edytora stron.

Tworzenie szablonów dla list artykułów i stron archiwum

archive.phpSzablon służy do wyświetlania zarchiwizowanych stron z kategoriami, tagami, autorami, datami itp. Zwykle ma tytuł (np. “Kategoria: Technologia”) i listę artykułów.

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

home.php或front-page.phpSłuży do dostosowywania strony głównej bloga. Jeśli dostępna jest opcjafront-page.php, będzie służyć jako strona główna witryny; jeśli istniejehome.phpktóra będzie służyć jako strona indeksu artykułu.

Wdrażanie niestandardowego wyszukiwania na stronach 404

search.phpSłuży do wyświetlania wyników wyszukiwania. Można użyć opcjithe_search_query()aby wyświetlić wyszukiwane hasła użytkownika.

404.phpNastępnie jest ona wyświetlana, gdy użytkownik odwiedzi nieistniejący adres. Dobra strona 404 powinna zawierać przyjazne wskazówki, pole wyszukiwania i linki do kluczowych stron.

Integracja widżetów z dynamicznymi paskami bocznymi

Widżety to funkcja WordPressa, która zapewnia użytkownikom elastyczność w dodawaniu bloków treści (takich jak lista najnowszych postów, katalog kategorii, pole wyszukiwania itp.) Aby Twój motyw obsługiwał widżety, musisz zarejestrować jeden lub więcej “pasków bocznych” (które są w rzeczywistości obszarami gotowymi na widżety), a następnie wyświetlić je w szablonie.

Zarejestruj obszar gotowości widgetu

Użyjregister_sidebar()aby zarejestrować pasek boczny. Pasek boczny można zarejestrować w sekcjifunctions.phpZdefiniuj wiele pasków bocznych dla głównego paska bocznego, obszaru stopki itp. w sekcji

function my_theme_widgets_init() {
    register_sidebar(
        array(
            'name' => __( 'Główny pasek boczny', 'my-first-theme' ),
            'id' => 'sidebar-1',
            'description' => __( 'Dodaj tutaj widżet głównego paska bocznego. , '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_theme_widgets_init' );

Wywołanie paska bocznego w szablonie

Po rejestracji należy użyć pliku szablonu w sekcjidynamic_sidebar()aby wyświetlić ten region. Na przykładsidebar.phpŚrodek:

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

Następnie, windex.php、single.phpi innych szablonów, które wymagają paska bocznego, należy użyć opcjiget_sidebar()wprowadzenie funkcjisidebar.phpUżytkownicy mogą teraz dodawać gadżety do głównego paska bocznego. Użytkownicy mogą teraz dodawać widżety do głównego paska bocznego, przeciągając je i upuszczając ze strony Wygląd -> Widżety w zapleczu WordPress.

Podsumowanie.

Tworzenie niestandardowego motywu WordPress od podstaw to systematyczny proces uczenia się, który rozpoczyna się od zrozumienia podstawowej struktury plików i przechodzi do hierarchii szablonów, ulepszeń funkcji i dynamicznych obszarów treści. U jego podstaw leży opanowaniestyle.css、index.php、header.php、footer.php和functions.phpCo robią te podstawowe pliki i jak są zapisywane. Przezadd_theme_support()Włączenie funkcji tworzenia docelowych szablonów stron poprzez hierarchię szablonów, a następnie poprzezregister_sidebar()Integracja widżetów, w pełni funkcjonalny, przejrzysty motyw nabierze kształtu. To nie tylko techniczna implementacja, ale także głębokie zrozumienie logiki zarządzania treścią WordPress.

FAQ – najczęściej zadawane pytania.

Czy muszę używać motywu potomnego przed opracowaniem motywu?

Niekoniecznie. Jeśli całkowicie tworzysz motyw od podstaw, możesz bezpośrednio utworzyć motyw nadrzędny. Najlepszym scenariuszem korzystania z motywów potomnych jest dostosowywanie i modyfikowanie istniejącego motywu (motywu nadrzędnego) i chęć bezpiecznej aktualizacji motywu nadrzędnego w przyszłości bez utraty niestandardowych zmian. Nauka programowania od podstaw i bezpośrednie tworzenie motywu nadrzędnego jest lepsze dla zrozumienia całej architektury.

Dlaczego mój motyw nie pojawia się w sekcji “Wygląd” na zapleczu?

To zwykle wynika z…style.cssBlok komentarza informacji o temacie na górze dokumentu jest nieprawidłowo sformatowany, brakuje go lub zawiera błąd składni, który to powoduje. Sprawdź dokładnie, czy blok komentarza na początku pliku jest napisany ściśle według formatu, w szczególnościTheme Name:Ta linia musi być obecna i poprawna. Upewnij się również, że folder motywu został umieszczony w folderzewp-content/themes/W katalogu.

W jaki sposób różnią się pliki funkcji (functions.php) od wtyczek (plug-ins)?

functions.phpKod w pliku jest ściśle powiązany z motywem, a podczas przełączania motywów funkcjonalność jest zwykle wyłączona. Nadaje się do przechowywania kodu, który jest bezpośrednio związany z wyglądem motywu, układem i funkcjonalnością szablonu. Wtyczki, z drugiej strony, są używane do zapewnienia niezależnej od motywu funkcjonalności, która może być używana w różnych motywach. Prosta zasada brzmi: jeśli funkcjonalność jest czymś, co wpływa na wygląd lub układ strony, umieść ją w katalogu motywu.functions.phpw; jeśli dodaje samodzielną logikę biznesową (np. formularze kontaktowe, optymalizację SEO), powinna zostać przekształcona we wtyczkę.

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

Tworzenie tematu wspierającego wielojęzyczność (internacjonalizację i lokalizację) obejmuje dwa główne kroki. Po pierwszestyle.cssoraz blok komentarzafunctions.phpwe wszystkich ciągach, które muszą zostać przetłumaczone, używając ciągu takiego jak__( ‘文本’, ‘my-first-theme’ )Funkcja tłumaczenia taka jak ta jest zawijana, gdzie‘my-first-theme’jest domeną tekstową. Następnie należy użyć narzędzia takiego jak Poedit, aby przeskanować plik motywu w celu wygenerowania pliku.potpliki szablonów i utworzyć odpowiednie.po和.moPliki tłumaczeń należy umieścić w katalogu motywu/languages/W katalogu.