Пошаговая инструкция по созданию автоматических паттернов в WordPress

Шаг 1: Создайте каталог patterns в вашей теме

Создайте каталог patterns: В корневой директории вашей темы создайте папку с названием patterns, если она ещё не существует. В этот каталог будут помещены все ваши паттерны.

Шаг 2: Создайте паттерны для различных типов контента

Создайте файлы паттернов в каталоге patterns для различных типов контента.

Паттерн для страниц (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 -->

Паттерн для постов (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 -->

Паттерн для пользовательского типа постов (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 -->

Шаг 3: Проверьте паттерны

После добавления паттернов в каталог patterns, WordPress автоматически зарегистрирует их. Чтобы проверить:

Создайте новую страницу или пост:

• Перейдите в админ-панель WordPress и создайте новую страницу, пост или пользовательский тип поста (например, «Портфолио»).
• WordPress автоматически отобразит модальное окно для выбора доступных паттернов, если они зарегистрированы для текущего типа поста.

Заключение

WordPress упрощает работу с паттернами, автоматически регистрируя их и показывая модальное окно выбора паттернов при создании нового контента. Вам нужно только правильно форматировать и поместить паттерны в каталог patterns вашей темы. Эта функция ускоряет создание контента, предоставляя пользователям заранее определенные шаблоны для различных сценариев.