Poradnik krok po kroku: jak automatycznie tworzyć wzorce w WordPressie

Krok 1: Utwórz katalog patterns w swoim motywie

Utwórz katalog patterns: W katalogu głównym swojego motywu utwórz folder o nazwie patterns, jeśli jeszcze nie istnieje. Będzie on przechowywał wszystkie Twoje wzorce.

Krok 2: Utwórz wzorce dla różnych typów treści

Utwórz pliki wzorców w katalogu patterns dla różnych typów treści.

Wzorzec dla stron (page-pattern.php):

<?php
/**
 * Title: Page Hero Section
 * Slug: mytheme/page-hero
 * Categories: hero
 * Keywords: hero, page
 * Block Types: core/post-content
 * Post Types: page
 * Viewport width: 1400
 */
?>

<!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/images/hero-bg.jpg","dimRatio":50} -->
<div class="wp-block-cover">
    <span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
    <img class="wp-block-cover__image-background" alt="Hero Background Image" src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hero-bg.jpg"/>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"align":"center"} -->
        <h2 class="has-text-align-center">Welcome to Our Website</h2>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center"} -->
        <p class="has-text-align-center">Here’s a brief description of what we do.</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Wzorzec dla wpisów (post-pattern.php):

<?php
/**
 * Title: Blog Post Layout
 * Slug: mytheme/post-layout
 * Categories: blog
 * Keywords: post, layout, blog
 * Block Types: core/post-content
 * Post Types: post
 * Viewport width: 1400
 */
?>

<!-- wp:columns -->
<div class="wp-block-columns">
    <!-- wp:column {"width":"70%"} -->
    <div class="wp-block-column" style="flex-basis:70%">
        <!-- wp:heading -->
        <h2>Blog Post Title</h2>
        <!-- /wp:heading -->

        <!-- wp:paragraph -->
        <p>Start writing your blog post here...</p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->

    <!-- wp:column {"width":"30%"} -->
    <div class="wp-block-column" style="flex-basis:30%">
        <!-- wp:paragraph -->
        <p>Sidebar content goes here.</p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

Wzorzec dla dedykowanego typu wpisu (portfolio-pattern.php):

<?php
/**
 * Title: Portfolio Item Layout
 * Slug: mytheme/portfolio-layout
 * Categories: portfolio
 * Keywords: portfolio, project
 * Block Types: core/post-content
 * Post Types: portfolio
 * Viewport width: 1400
 */
?>

<!-- wp:heading -->
<h2>Project Title</h2>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/project-image.jpg" alt="Project Image"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Project description goes here...</p>
<!-- /wp:paragraph -->

Krok 3: Weryfikacja wzorców

Po dodaniu wzorców do katalogu patterns WordPress automatycznie je zarejestruje. Aby to sprawdzić:

Utwórz nową stronę lub wpis:

• Przejdź do panelu administracyjnego WordPressa i utwórz nową stronę, wpis lub dedykowany typ wpisu (np. „Portfolio”).
• Jeśli wzorce zostały zarejestrowane dla danego typu wpisu, WordPress automatycznie wyświetli okno modalne umożliwiające wybór spośród dostępnych wzorców.

Podsumowanie

WordPress upraszcza pracę ze wzorcami, automatycznie je rejestrując i wyświetlając okno modalne z wyborem wzorca podczas tworzenia nowych treści. Wystarczy odpowiednio sformatować wzorce i umieścić je w katalogu patterns swojego motywu. Funkcja ta przyspiesza tworzenie treści, udostępniając użytkownikom gotowe szablony dla różnych zastosowań.