Как создать страницу в WordPress с помощью кода: подробное руководство

11.09.2025
22061

5 мин
126

WordPress предоставляет мощный визуальный редактор Gutenberg для создания страниц. Однако, иногда требуется больший контроль и гибкость, чем он может предложить. Именно в таких случаях создание страниц с помощью кода становится предпочтительным.

Преимущества создания страниц с помощью кода: гибкость и контроль

Полный контроль над HTML, CSS и PHP: Код позволяет точно управлять каждым аспектом страницы, от структуры до стилизации и логики.
Интеграция со сложными функциями и API: Легко интегрировать сторонние API, сложные вычисления и пользовательские функции.
Оптимизация производительности: Уменьшение избыточного кода и оптимизация загрузки страницы.
Версионный контроль: Возможность отслеживать изменения в коде с помощью систем контроля версий, таких как Git.

Когда следует использовать кодирование страниц вместо редактора

Когда требуется уникальный дизайн, выходящий за рамки возможностей стандартных тем.
Когда необходимо интегрировать сложную логику, например, калькулятор стоимости, формы обратной связи с продвинутой валидацией или интеграцию с CRM.
Когда нужно оптимизировать скорость загрузки страницы, минимизируя использование плагинов и сторонних библиотек.
Когда нужно создать пользовательский интерфейс для управления контентом (например, с использованием Advanced Custom Fields).

Необходимые инструменты и предварительная подготовка

Прежде чем приступить к созданию страниц с помощью кода, убедитесь, что у вас есть необходимые инструменты и знания.

Редактор кода: выбор и настройка (VS Code, Sublime Text и т.д.)

Выбор редактора кода – дело вкуса. Популярные варианты:

VS Code: Бесплатный, мощный, с большим количеством расширений.
Sublime Text: Быстрый и функциональный, но требует лицензию.
PHPStorm: Мощная IDE, специально разработанная для PHP.

Настройте редактор, установив необходимые расширения для подсветки синтаксиса, автодополнения и форматирования кода (например, для PHP, HTML и CSS).

Локальная среда разработки WordPress (XAMPP, MAMP, Local by Flywheel)

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

Популярные локальные среды разработки:

XAMPP: Бесплатный кроссплатформенный пакет, включающий Apache, MySQL и PHP.
MAMP (Mac): Аналогичен XAMPP, но предназначен для macOS.
Local by Flywheel: Удобный инструмент, специально разработанный для WordPress.

Основы HTML, CSS и PHP для создания страниц WordPress

Для создания страниц WordPress с помощью кода необходимо знать основы:

HTML: Для создания структуры страницы (заголовки, абзацы, списки, изображения и т.д.).
CSS: Для стилизации элементов страницы (шрифты, цвета, размеры, расположение и т.д.).
PHP: Для взаимодействия с WordPress, получения данных из базы данных и динамического формирования контента.

Создание шаблона страницы с использованием PHP

WordPress использует шаблоны страниц для отображения контента. Чтобы создать страницу с помощью кода, необходимо создать новый шаблон.

Создание нового файла шаблона страницы (page-*.php)

Создайте новый файл PHP в папке с темой WordPress (например, wp-content/themes/ваша-тема/). Имя файла должно начинаться с page- (например, page-my-custom-page.php).

Добавление необходимого кода PHP для WordPress (getheader(), getfooter())

В начале файла добавьте код для подключения шапки и подвала сайта:

<?php
/**
 * Template Name: My Custom Page Template
 */

get_header();
?>

<main id="primary" class="site-main">

    <?php
    while ( have_posts() ) :
        the_post();
        get_template_part( 'template-parts/content', 'page' );

        // If comments are open or we have at least one comment, load up the comment template.
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;

    endwhile; // End of the loop.
    ?>

</main><!-- #main -->

<?php
get_footer();

Определение содержимого страницы: HTML и PHP

Внутри тегов <main> добавьте HTML и PHP код для отображения содержимого страницы. Например:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    </header><!-- .entry-header -->

    <div class="entry-content">
        <?php
        the_content();

        wp_link_pages(
            array(
                'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'your-theme' ),
                'after'  => '</div>',
            )
        );
        ?>
    </div><!-- .entry-content -->

    <?php if ( get_edit_post_link() ) : ?>
        <footer class="entry-footer">
            <?php
            edit_post_link(
                sprintf(
                    wp_kses(
                        /* translators: %s: Name of current post. Only visible to screen readers */
                        __( 'Edit <span class="screen-reader-text">%s</span>', 'your-theme' ),
                        array(
                            'span' => array(
                                'class' => array(),
                            ),
                        )
                    ),
                    get_the_title()
                ),
                '<span class="edit-link">',
                '</span>'
            );
            ?>
        </footer><!-- .entry-footer -->
    <?php endif; ?>
</article>

Регистрация шаблона страницы в WordPress

В верхней части файла шаблона добавьте комментарий с именем шаблона:
```
<?php
/**
 * Template Name: My Custom Page Template
 */

// ... остальной код шаблона
?>
```
В админ-панели WordPress создайте новую страницу и в атрибутах страницы выберите созданный шаблон из выпадающего списка «Шаблон».

Реализация динамического контента на странице

Использование функций WordPress для получения данных (thetitle(), thecontent())

WordPress предоставляет множество функций для получения данных из базы данных.

the_title(): Выводит заголовок страницы.
the_content(): Выводит содержимое страницы.
the_permalink(): Возвращает URL страницы.
get_the_date(): Возвращает дату публикации.
get_the_author(): Возвращает автора публикации.

Работа с пользовательскими полями (Advanced Custom Fields)

Advanced Custom Fields (ACF) — популярный плагин, позволяющий добавлять пользовательские поля к страницам, записям и другим типам контента.

Пример использования ACF:

<?php
$custom_field = get_field('название_поля');
if( $custom_field ): ?>
    <p><?php echo esc_html( $custom_field ); ?></p>
<?php endif; ?>

Создание циклов для отображения записей или других данных

Для отображения списка записей или других данных можно использовать цикл while:

<?php
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 5
);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) {
    echo '<ul>';
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        echo '<li><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></li>';
    }
    echo '</ul>';
    wp_reset_postdata();
} else {
    echo '<p>Записей не найдено.</p>';
}
?>

Применение стилей CSS к созданной странице

Подключение CSS файлов к шаблону страницы

Создайте новый CSS файл (например, style-custom-page.css) в папке с темой WordPress.
Подключите CSS файл к шаблону страницы, добавив следующий код в секцию <head> файла functions.php вашей темы (или создайте дочернюю тему):

function my_custom_styles() {
    if ( is_page_template( 'page-my-custom-page.php' ) ) {
        wp_enqueue_style( 'custom-page-style', get_template_directory_uri() . '/style-custom-page.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );

Использование классов и идентификаторов для стилизации элементов страницы

Используйте классы и идентификаторы CSS для стилизации элементов страницы. Например:

<div class="my-custom-container" id="unique-element">
  <h1>Заголовок</h1>
  <p>Текст</p>
</div>

В CSS файле:

.my-custom-container {
  background-color: #f0f0f0;
  padding: 20px;
}

#unique-element {
  border: 1px solid #ccc;
}

Адаптивный дизайн: создание страницы, оптимизированной для разных устройств

Используйте медиа-запросы CSS для создания адаптивного дизайна. Например:

/* Для экранов шириной до 768px */
@media (max-width: 768px) {
  .my-custom-container {
    padding: 10px;
  }
}

Развертывание и поддержка

Загрузка созданной страницы на рабочий сервер WordPress

Загрузите файл шаблона страницы (page-my-custom-page.php) и CSS файл (style-custom-page.css) в соответствующие папки темы WordPress на рабочем сервере.

Обслуживание и обновление страницы: best practices

Регулярно обновляйте WordPress, тему и плагины.
Делайте резервные копии сайта.
Тестируйте изменения на тестовом сервере перед развертыванием на рабочем.
Используйте систему контроля версий (Git) для отслеживания изменений в коде.

Решение распространенных проблем и ошибок

Страница отображается неправильно: Проверьте код на наличие ошибок, проверьте правильность подключения CSS файлов.
Не отображаются пользовательские поля: Убедитесь, что плагин ACF активирован и правильно настроен.
Страница загружается медленно: Оптимизируйте код, уменьшите размер изображений, используйте кэширование.