Одной из основных функций на WordPress, которые позволяют расширить его функциональные возможности, является Meta Box API. С помощью этих мета-боксов можно легко добавить дополнительные данные к вашему контенту. К примеру, мета-бокс Post Tags позволяет установить теги для вашей записи.

Сегодня мы попробуем создать базовый SEO плагин, который добавляет мета-описание, Open Graph заголовок и тег описания в элемент head для страниц WordPress. Кроме этого вы узнаете, как создать пользовательские мета-боксы, обезопасить пользовательские данные, сохранить данные к записи или странице, и как извлечь сохраненные данные.

| Скачать исходники |

Смотрите также:

Создаем мета-бокс

Для начала нужно определиться, где должен быть мета-бокс. В нашем плагине мета-бокс будет добавлен в post и page (для Записей и Страниц). Для того, чтоб этого достичь, создается функция с переменной, которая определяет, где показывать мета-бокс, и цикл "foreach", через который добавляется мета-бокс с помощью функции add_meta_box.

Функция подключается к add_meta_box следующим образом:

function tes_mb_create() {

    /**
     * @array $screens Write screen on which to show the meta box
     * @values post, page, dashboard, link, attachment, custom_post_type
     */
    $screens = array( 'post', 'page' );

    foreach ( $screens as $screen ) {

        add_meta_box(
            'tes-meta',
            'Search Engine Listing',
            'tes_mb_function',
            $screen,
            'normal',
            'high'
        );
    }
}
add_action( 'add_meta_boxes', 'tes_mb_create' );

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

function tes_mb_create() {

    add_meta_box(
        'tes-meta',
        'Search Engine Listing',
        'tes_mb_function',
        'post',
        'normal',
        'high'
    );

    add_meta_box(
        'tes-meta',
        'Search Engine Listing',
        'tes_mb_function',
        'page',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'tes_mb_create');

Кодирование полей мета-бокса

В нашем примере мы только задаем два поля HTML-форм для того, чтоб управлять данными Заголовка и Описания.

function tes_mb_function($post) {

    / /retrieve the metadata values if they exist
    $tes_meta_title = get_post_meta( $post->ID, '_tes_meta_title', true );
    $tes_meta_description = get_post_meta( $post->ID, '_tes_meta_description', true );

    // Add an nonce field so we can check for it later when validating
    wp_nonce_field( 'tes_inner_custom_box', 'tes_inner_custom_box_nonce' );

    echo '<div style="margin: 10px 100px; text-align: center">
    <table>
        <tr>
            <td><strong>Title Tag:</strong></td><td>
            <input style="padding: 6px 4px; width: 300px" type="text" name="tes_meta_title" value="' . esc_attr($tes_meta_title) . '" />
            </td>
        </tr>
        <tr>
            <td><strong>Meta Description:</strong></td><td>           <textarea  rows="3" cols="50" name="tes_meta_description">' . esc_attr($tes_meta_description) . '</textarea></td>
        </tr>
    </table>
</div>';

}

Теперь немого разберемся в вышеуказанном коде tes_mb_function:

  • Извлекаем и сохраняем метаданные в переменную, при условии, что она существует. Это делается для того, чтоб заполнить поля при наличии переменной в базе данных.
  • Случайный код (nonce) добавлен, так что мы можем проверить его позже, до того как заполненные данные в полях будут сохранены в базе данных.

После использования этого кода, вы должны увидеть мета-бокс к записи или странице.

Сохраняем данные мета-бокса

Мета-бокс не завершен, пока он не может сохранить данные в базе данных. Функция для управления сохраненными данными называется tes_mb_save_data. Ее код выгладит следующим образом:

function tes_mb_save_data($post_id) {

    /*
     * We need to verify this came from the our screen and with proper authorization,
     * because save_post can be triggered at other times.
     */

    // Check if our nonce is set.
    if ( ! isset( $_POST['tes_inner_custom_box_nonce'] ) )
        return $post_id;

    $nonce = $_POST['tes_inner_custom_box_nonce'];

    // Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $nonce, 'tes_inner_custom_box' ) )
        return $post_id;

    // If this is an autosave, our form has not been submitted, so we don't want to do anything.
    if ( defined( 'DOING_AUTOSAVE') && DOING_AUTOSAVE )
        return $post_id;

    // Check the user's permissions.
    if ( 'page' == $_POST['post_type'] ) {

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

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

    /* OK, its safe for us to save the data now. */

    // If old entries exist, retrieve them
    $old_title = get_post_meta( $post_id, '_tes_meta_title', true );
    $old_description = get_post_meta( $post_id, '_tes_meta_description', true );

    // Sanitize user input.
    $title = sanitize_text_field( $_POST['tes_meta_title'] );
    $description = sanitize_text_field( $_POST['tes_meta_description'] );

    // Update the meta field in the database.
    update_post_meta( $post_id, '_tes_meta_title', $title, $old_title );
    update_post_meta( $post_id, '_tes_meta_description', $description, $old_description );
}
add_action( 'save_post', 'tes_mb_save_data' );

Давайте рассмотрим его по порядку:

  • Сначала нам нужно убедиться, что он имеет правильное расширение, потому что save_post может быть использовано и в других случаях. Также необходимо проверить или случайный код (nonce), ранее использованный в tes_mb_function, является действительным.
  • Затем, когда вход уже есть в базе данных, мы получим его и сохраним в переменной $old_title и $old_description. Мы делаем это по той причине, что функция update_post_meta, которая сохраняет данные в базу данных, требует проверки старых значений перед обновлением базы данных мета-бокса с новыми значениями.
  • После этого полученные данные улучшаются благодаря функции update_post_meta, которая конвертирует HTML, вырезает теги, удаляет разрывы строк, табы и лишние пробелы.
  • Метаданные обновляются в базе данных через update_post_meta.
  • И наконец, функция подключена к sanitize_text_field для сохранения данных мета-бокса, после обновления записи или страницы.

Использование сохраненных данных

Не забывайте, что сохраненные данные будут использоваться для заголовка в Open Graph и описания вместе с тегом мета-описания в head-элементе каждой страницы.

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

function tes_mb_display() {

    global $post;

    // retrieve the metadata values if they exist
    $tes_meta_title = get_post_meta( $post->ID, '_tes_meta_title', true );
    $tes_meta_description = get_post_meta( $post->ID, '_tes_meta_description', true );

    echo ' <!-- Tutsplus Easy SEO (author: http://tech4sky.com) -->
    <meta property="og:title" content="' . $tes_meta_title . '" />
    <meta property="og:description" content="' . $tes_meta_description . '" />
    <meta name="description" content="' . $tes_meta_description . '" />
    <!-- /Tutsplus Easy SEO -->
    ';
}
add_action( 'wp_head', 'tes_mb_display' );
  • Чтоб успешно определить ID записи, нам нужно взять ссылку на эту запись с помощью $post.
  • Метаданные затем берутся с базы данных и сохраняются в переменные $tes_meta_title и $tes_meta_description.
  • Затем определяем мета-тег, который должен быть перенаправлен в шаблон head-элемент.
  • И наконец крепим функцию в wp_head.

Заключение

Теперь, если вы добавили и сохранили заголовок и описание от поста или страницы, при просмотре исходного кода этой страницы должно показаться наличие заголовка Open Graph и тег описания наряду с мета описанием, используемым поисковыми системами.

Источник: code.tutsplus.com

Вам понравился материал?

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.