Belov Solutions

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


Введение

WordPress остается одной из самых популярных платформ для создания веб-сайтов благодаря своей гибкости и обширным возможностям кастомизации. Одним из ключевых элементов поисковой оптимизации (SEO) является правильная настройка заголовков, особенно заголовков первого уровня (H1), которые играют важную роль в определении релевантности контента как для поисковых систем, так и для пользователей. Однако стандартные заголовки, генерируемые WordPress на основе названий страниц или постов, не всегда оптимальны с точки зрения SEO, особенно для сложных проектов с большим количеством контента. В этой статье мы подробно разберем, как добавить и использовать пользовательское поле для SEO-заголовка, сосредоточив внимание исключительно на встроенных типах данных WordPress — страницах (page) и постах (post). Мы рассмотрим назначение кода, способы его внедрения через файл functions.php, а также предоставим практические примеры использования в ключевых шаблонах WordPress, таких как page.php и single.php. Статья рассчитана как на начинающих разработчиков, так и на опытных пользователей, стремящихся улучшить SEO своих сайтов.

Зачем нужен пользовательский SEO заголовок?

Добавление кастомного поля для SEO-заголовка открывает перед разработчиками и владельцами сайтов ряд преимуществ, которые напрямую влияют на эффективность сайта:

  • Улучшение SEO: Возможность создавать уникальные и релевантные заголовки H1, оптимизированные под целевые ключевые слова, что помогает повысить позиции в поисковых системах, таких как Google или Яндекс.
  • Гибкость управления контентом: Авторы и редакторы получают возможность задавать индивидуальные заголовки для каждой страницы или поста, отличающиеся от стандартных названий.
  • Упрощение работы с контентом: Устранение необходимости ручного редактирования кода или использования громоздких плагинов для настройки заголовков.
  • Контроль над отображением: Кастомный SEO-заголовок можно использовать в шаблонах для точечного отображения.

Этот код фокусируется исключительно на встроенных типах данных page и post, что делает его универсальным решением для большинства стандартных WordPress-сайтов.

Как работает код?

Предоставленный код состоит из нескольких ключевых компонентов, каждый из которых выполняет свою специфическую функцию. Давайте разберем его поэтапно:

1. Добавление поля SEO заголовка в редакторе

Хук edit_form_after_title используется для добавления пользовательского поля ввода SEO-заголовка сразу после стандартного поля заголовка в админ-панели WordPress.

  • Вывод поля: Поле seo_title создается с использованием wp_nonce_field для защиты от атак CSRF.
  • Безопасность: Данные экранируются с помощью esc_attr.

2. Сохранение данных SEO заголовка

Хуки save_post_page и save_post_post вызывают функцию save_seo_title_field:

  • Проверка автосохранения: DOING_AUTOSAVE предотвращает сохранение при автосохранении.
  • Проверка nonce: wp_verify_nonce обеспечивает безопасность.
  • Права доступа: current_user_can проверяет права пользователя.
  • Сохранение: Значение сохраняется через update_post_meta или удаляется с помощью delete_post_meta.

3. Вывод SEO заголовка

Функции the_seo_title и get_seo_title обеспечивают вывод:

  • Для страниц и постов: Используется single_post_title как запасной вариант.
  • Условия отображения: Проверяется с помощью is_singular.

Где разместить код?

Для внедрения кода рекомендуется использовать файл functions.php активной темы или дочерней темы:

1. Файл functions.php активной темы

Шаги:

  • Откройте wp-content/themes/ваша-тема/functions.php, вставьте код в конец файла и сохраните.

Плюсы: Полная интеграция с темой.

Минусы: Код потеряется при смене темы (рекомендуется дочерняя тема).

Как использовать код в шаблонах WordPress?

1. Файл functions.php

<?php
/* SEO-заголовок после заголовка начало */
add_action('edit_form_after_title', function ($post) {
    if (!in_array($post->post_type, ['page', 'post'])) {
        return;
    }

    $seo_title = get_post_meta($post->ID, '_seo_title', true);
    wp_nonce_field('save_seo_title', 'seo_title_nonce');

    echo '<div class="seo-title-wrapper">';
    echo '<label for="seo_title">SEO-заголовок (H1)</label>';
    echo '<input type="text" id="seo_title" name="seo_title" value="' . esc_attr($seo_title) . '" placeholder="Введите SEO-заголовок (оставьте пустым для дефолтного)">';
    echo '</div>';
});

add_action('save_post_page', 'save_seo_title_field', 10, 2);
add_action('save_post_post', 'save_seo_title_field', 10, 2);
function save_seo_title_field($post_id, $post)
{
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!isset($_POST['seo_title_nonce']) || !wp_verify_nonce($_POST['seo_title_nonce'], 'save_seo_title')) return;
    if (!current_user_can('edit_post', $post_id)) return;
    if (isset($_POST['seo_title'])) {
        $seo_title = sanitize_text_field($_POST['seo_title']);
        if ($seo_title) {
            update_post_meta($post_id, '_seo_title', $seo_title);
        } else {
            delete_post_meta($post_id, '_seo_title');
        }
    }
}

function the_seo_title($post_id = 0)
{
    $seo_title = '';
    if (!$post_id && is_singular(['page', 'post'])) {
        $post_id = get_the_ID();
        $seo_title = get_post_meta($post_id, '_seo_title', true);
        echo esc_html($seo_title ?: single_post_title('', false));
    }
}

function get_seo_title($post_id = 0)
{
    $seo_title = '';
    if (!$post_id && is_singular(['page', 'post'])) {
        $post_id = get_the_ID();
        $seo_title = get_post_meta($post_id, '_seo_title', true);
        return esc_html($seo_title ?: single_post_title('', false));
    }
    return '';
}
/* SEO-заголовок после заголовка конец */

2. Файл page.php

<?php get_header(); ?>

<div class="page-content">
    <h1><?php the_seo_title(); ?></h1>
    <?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_content();
        endwhile;
    else :
        echo '<p>Контент не найден.</p>';
    endif;
    ?>
</div>

<?php get_footer(); ?>

3. Файл single.php

<?php get_header(); ?>

<div class="single-post-content">
    <h1><?php the_seo_title(); ?></h1>
    <?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_content();
        endwhile;
    else :
        echo '<p>Пост не найден.</p>';
    endif;
    ?>
</div>

<?php get_footer(); ?>

Как внедрить и протестировать?

  1. Внедрение: Вставьте код в functions.php и сохраните.
  2. Проверка доступа: Убедитесь, что сервер имеет права на запись в базу данных.
  3. Тестирование:
    • Создайте страницу или пост.
    • Введите SEO-заголовок и сохраните.
    • Проверьте отображение на сайте.
  4. Обработка ошибок: Проверьте поведение при пустом поле.

Преимущества и ограничения

Преимущества

  • Простота: Легко интегрируется.
  • Безопасность: Включает проверки.
  • Гибкость: Поддерживает кастомизацию.

Ограничения

  • Ограниченный охват: Только page и post.
  • Ручное внедрение: Требуется редактирование шаблонов.

Оптимизация и дополнительные возможности

  1. Стилизация: Добавьте CSS: 
    .seo-title-wrapper {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    background: #f9f9f9;
}
  2. Логирование: Добавьте отладку: 
    error_log('SEO-заголовок сохранен для поста ID: ' . $post_id);

Заключение

Добавление и использование пользовательского SEO-заголовка для страниц и постов в WordPress с помощью кода является простым и эффективным способом улучшить поисковую оптимизацию. Внедрение через functions.php и интеграция в шаблоны page.php и single.php делает решение доступным. Следуя инструкциям, вы сможете настроить кастомные заголовки, повысив видимость сайта.

Если у Вас возникли трудности с внедрением данного кода, то Вы всегда можете оставить свой отзыв под статьёй.

Теги статьи

Отзывы

Оставить отзыв

Ваша эл. почта не будет опубликована