SEO мета-теги WordPress без плагинов

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

1. Добавление мета-тегов в <head>

Для начала, вам нужно добавить мета-теги в раздел <head> вашей темы. Для этого откройте файл header.php вашей темы и добавьте следующий код перед закрывающим тегом </head>:

php
Copy
<?php
if (is_single() || is_page()) {
    $post_id = get_the_ID();
    $meta_title = get_post_meta($post_id, 'seo_title', true);
    $meta_description = get_post_meta($post_id, 'seo_description', true);

    if (!empty($meta_title)) {
        echo '<title>' . esc_html($meta_title) . '</title>' . "\n";
    } else {
        echo '<title>' . wp_title('', false) . '</title>' . "\n";
    }

    if (!empty($meta_description)) {
        echo '<meta name="description" content="' . esc_attr($meta_description) . '">' . "\n";
    }
} else {
    echo '<title>' . wp_title('', false) . '</title>' . "\n";
}
?>

2. Добавление полей для SEO в админке

Теперь нужно добавить поля для ввода SEO-заголовка и описания в админке WordPress. Для этого добавьте следующий код в файл functions.php вашей темы:

php
Copy
function add_seo_meta_boxes() {
    add_meta_box(
        'seo_meta_box', // ID метабокса
        'SEO Настройки', // Заголовок метабокса
        'render_seo_meta_box', // Функция, которая будет выводить содержимое метабокса
        'post', // Тип записи, для которого добавляется метабокс
        'normal', // Контекст (normal, side, advanced)
        'high' // Приоритет (high, core, default, low)
    );
    add_meta_box(
        'seo_meta_box',
        'SEO Настройки',
        'render_seo_meta_box',
        'page',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_seo_meta_boxes');

function render_seo_meta_box($post) {
    wp_nonce_field('seo_meta_box', 'seo_meta_box_nonce');

    $seo_title = get_post_meta($post->ID, 'seo_title', true);
    $seo_description = get_post_meta($post->ID, 'seo_description', true);

    echo '<label for="seo_title">SEO Заголовок:</label>';
    echo '<input type="text" id="seo_title" name="seo_title" value="' . esc_attr($seo_title) . '" style="width: 100%; margin-bottom: 10px;">';

    echo '<label for="seo_description">SEO Описание:</label>';
    echo '<textarea id="seo_description" name="seo_description" style="width: 100%;">' . esc_textarea($seo_description) . '</textarea>';
}

function save_seo_meta_data($post_id) {
    if (!isset($_POST['seo_meta_box_nonce']) || !wp_verify_nonce($_POST['seo_meta_box_nonce'], 'seo_meta_box')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['seo_title'])) {
        update_post_meta($post_id, 'seo_title', sanitize_text_field($_POST['seo_title']));
    }

    if (isset($_POST['seo_description'])) {
        update_post_meta($post_id, 'seo_description', sanitize_text_field($_POST['seo_description']));
    }
}
add_action('save_post', 'save_seo_meta_data');

3. Настройка разных <h1> и <title>

Если вам нужно, чтобы <h1> на странице отличался от <title>, вы можете использовать следующий код в шаблоне страницы (например, single.php или page.php):

php
Copy
<?php
$post_id = get_the_ID();
$custom_h1 = get_post_meta($post_id, 'custom_h1', true);

if (!empty($custom_h1)) {
    echo '<h1>' . esc_html($custom_h1) . '</h1>';
} else {
    echo '<h1>' . get_the_title() . '</h1>';
}
?>

И добавьте поле для ввода кастомного <h1> в админке, аналогично тому, как мы добавляли поля для SEO-заголовка и описания:

php
Copy
function add_custom_h1_meta_box() {
    add_meta_box(
        'custom_h1_meta_box',
        'Кастомный H1',
        'render_custom_h1_meta_box',
        'post',
        'normal',
        'high'
    );
    add_meta_box(
        'custom_h1_meta_box',
        'Кастомный H1',
        'render_custom_h1_meta_box',
        'page',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_custom_h1_meta_box');

function render_custom_h1_meta_box($post) {
    wp_nonce_field('custom_h1_meta_box', 'custom_h1_meta_box_nonce');

    $custom_h1 = get_post_meta($post->ID, 'custom_h1', true);

    echo '<label for="custom_h1">Кастомный H1:</label>';
    echo '<input type="text" id="custom_h1" name="custom_h1" value="' . esc_attr($custom_h1) . '" style="width: 100%;">';
}

function save_custom_h1_meta_data($post_id) {
    if (!isset($_POST['custom_h1_meta_box_nonce']) || !wp_verify_nonce($_POST['custom_h1_meta_box_nonce'], 'custom_h1_meta_box')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['custom_h1'])) {
        update_post_meta($post_id, 'custom_h1', sanitize_text_field($_POST['custom_h1']));
    }
}
add_action('save_post', 'save_custom_h1_meta_data');

4. Проверка и тестирование

После добавления кода, проверьте, что все работает корректно:

  1. Перейдите в админку WordPress и откройте любую запись или страницу.
  2. Вы должны увидеть новые поля для ввода SEO-заголовка, описания и кастомного H1.
  3. Заполните эти поля и сохраните изменения.
  4. Откройте страницу на фронтенде и проверьте, что мета-теги и заголовки отображаются правильно.

Заключение

Теперь у вас есть базовая настройка SEO мета-тегов без использования плагинов. Вы можете расширить этот функционал, добавив дополнительные поля, такие как ключевые слова, канонические ссылки и т.д., в зависимости от ваших потребностей.

В какой файл добавить? » И добавьте поле для ввода кастомного <h1> в админке, аналогично тому, как мы добавляли поля для SEO-заголовка и описания:»

Код для добавления поля ввода кастомного <h1> в админке WordPress нужно добавить в файл functions.php вашей темы. Этот файл находится в папке вашей активной темы, например:

Copy
wp-content/themes/ваша-тема/functions.php

Как добавить код:

  1. Откройте файл functions.php в текстовом редакторе или через встроенный редактор WordPress (Консоль → Внешний вид → Редактор тем → functions.php).
  2. Вставьте следующий код в конец файла (перед закрывающим тегом ?>, если он есть, или просто в конец файла):
php
Copy
// Добавляем метабокс для кастомного H1
function add_custom_h1_meta_box() {
    add_meta_box(
        'custom_h1_meta_box', // ID метабокса
        'Кастомный H1', // Заголовок метабокса
        'render_custom_h1_meta_box', // Функция для отображения содержимого метабокса
        'post', // Тип записи (post, page или другой)
        'normal', // Контекст (normal, side, advanced)
        'high' // Приоритет (high, core, default, low)
    );
    add_meta_box(
        'custom_h1_meta_box',
        'Кастомный H1',
        'render_custom_h1_meta_box',
        'page',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_custom_h1_meta_box');

// Функция для отображения поля ввода кастомного H1
function render_custom_h1_meta_box($post) {
    wp_nonce_field('custom_h1_meta_box', 'custom_h1_meta_box_nonce');

    $custom_h1 = get_post_meta($post->ID, 'custom_h1', true);

    echo '<label for="custom_h1">Кастомный H1:</label>';
    echo '<input type="text" id="custom_h1" name="custom_h1" value="' . esc_attr($custom_h1) . '" style="width: 100%;">';
}

// Сохраняем данные кастомного H1
function save_custom_h1_meta_data($post_id) {
    if (!isset($_POST['custom_h1_meta_box_nonce']) || !wp_verify_nonce($_POST['custom_h1_meta_box_nonce'], 'custom_h1_meta_box')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['custom_h1'])) {
        update_post_meta($post_id, 'custom_h1', sanitize_text_field($_POST['custom_h1']));
    }
}
add_action('save_post', 'save_custom_h1_meta_data');

Что делает этот код:

  1. add_custom_h1_meta_box — добавляет метабокс «Кастомный H1» в редактор записей и страниц.
  2. render_custom_h1_meta_box — отображает поле ввода для кастомного <h1> внутри метабокса.
  3. save_custom_h1_meta_data — сохраняет значение кастомного <h1> в базе данных при сохранении записи или страницы.

Как это будет выглядеть в админке:

  1. Перейдите в редактор записи или страницы.
  2. Вы увидите новый метабокс «Кастомный H1» с полем для ввода текста.
  3. Введите желаемый текст для <h1> и сохраните изменения.

Как вывести кастомный <h1> на фронтенде:

Чтобы вывести кастомный <h1> на странице, добавьте следующий код в шаблон вашей темы (например, single.php для записей или page.php для страниц):

php
Copy
<?php
$post_id = get_the_ID();
$custom_h1 = get_post_meta($post_id, 'custom_h1', true);

if (!empty($custom_h1)) {
    echo '<h1>' . esc_html($custom_h1) . '</h1>';
} else {
    echo '<h1>' . get_the_title() . '</h1>';
}
?>

Этот код проверяет, есть ли кастомный <h1>. Если он есть, выводит его, иначе выводит стандартный заголовок записи.

Важно:

  • Не забудьте сохранить изменения в файле functions.php.
  • Если что-то пойдет не так, вы всегда можете восстановить файл из резервной копии или через FTP.

Related Posts

Добавить комментарий