Однією з функцій ядра, що подається WordPress розширеної конфігурації, є Мета Box API. Вона дозволяють легко додавати до контенту додаткові дані. Наприклад, через панель Мітки можна задати теги для вашого поста.

У цій статті я розповім, як створити базовий SEO плагін, який додає мета-опис, а також Open Graph теги тайтлов і описів в елемент head сторінки WordPress. При цьому ви також дізнаєтеся, як створювати користувальницькі мета-бокси, як перевіряти надані користувачами дані, як зберігати дані для запису або сторінки і як витягати збережені дані.

Я не буду детально пояснювати, що робить кожен фрагмент коду, використаний у цій статті, тому передбачається, що ви маєте базові знання з мета-боксів, а також по роботі функцій PHP. Якщо ви ще не володієте такими базовими знаннями, то можете почати з вивчення статті Як створювати користувальницькі мета-бокси WordPress.

Створення Meta Box

По-перше, ми повинні вирішити, де буде виводитися вікно мета-боксу.

У нашому плагіні мета-бокс буде виводитися в панелях post page. Для цього створюється функція, що містить змінну, в якій зберігається масив значень, де буде виводитися мета-бокс, і цикл foreach, який буде обробляти кожен елемент масиву, і виводити мета-бокс у тих, панелях, для яких це задано, використовуючи функцію add_meta_box.

І, нарешті, функція підключається до дії add_meta_boxes:

function tes_mb_create() {
/**
* @array $screens записує назви панелей, в яких буде виводитися мета-бокс
* @values запису, сторінки, панелі інструментів, посилання, вкладення, 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-код вводиться в панелі, наводиться як tes_mb_function – третій аргумент, який надається функції add_meta_box.

У нашому плагіні ми задаємо код тільки для двох полів форми, в яких обробляються дані тайтла і опису:

function tes_mb_function($post) {
/ /отримання значень мета-даних, якщо вони існують
$tes_meta_title = get_post_meta( $post->ID, ‘_tes_meta_title’, true );
$tes_meta_description = get_post_meta( $post->ID, ‘_tes_meta_description’, true );
// Додавання поля приватного випадку, щоб ми могли перевірити його пізніше при валідації
wp_nonce_field( ‘tes_inner_custom_box’, ‘tes_inner_custom_box_nonce’ );
echo’

Title Tag:
Meta Description: ‘. esc_attr($tes_meta_description) . ‘

‘;
}

Ось що робить код tes_mb_function:

  • отримує та зберігає значення мета-даних в змінну, тільки якщо вони існують. Це робиться для того, щоб заповнити поля відповідними значеннями, коли вони представлені у базі даних;
  • додає поле приватного випадку, щоб ми могли перевірити його пізніше, під час валідації, перед тим, як дані додаються в поля форми, будуть збережені в базі даних;
  • повторює / виводить HTML-форму, що складається з елемента поля для введення тексту і текстової зони для захоплення даних тегів тайтла і опису.

    На даний момент, у вас вже повинен з’явитися мета-бокс в панелях редагування записів та сторінок:

    Збереження даних Meta Box

    Meta Box не є повноцінним, поки він не може записати дані в базу даних. Ім’я функції для обробки збереження даних буде tes_mb_save_data. Її код виглядає наступним чином:

    function tes_mb_save_data($post_id) {
    /*
    * Ми повинні переконатися, що дані виходять з нашої панелі і від авторизованого
    належним чином джерела,
    * тому що save_post може бути викликаний у будь-який час.
    */
    // Перевіряємо, чи заданий приватний випадок.
    if ( ! isset( $_POST[‘tes_inner_custom_box_nonce’] ) )
    return $post_id;
    $nonce = $_POST[‘tes_inner_custom_box_nonce’];
    // Перевіряємо валідність окремого випадку.
    if ( ! wp_verify_nonce( $nonce, ‘tes_inner_custom_box’ ) )
    return $post_id;
    // Якщо використовується автозбереження, наша форма не повинна містити
    запит на підтвердження, і ми не хочемо робити більше нічого.
    if ( defined( ‘DOING_AUTOSAVE’) && DOING_AUTOSAVE )
    return $post_id;
    // Перевірка прав доступу користувача.
    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, дані не містять загроз і можуть бути збережені. */
    // Якщо існують старі записи, витягаємо їх
    $old_title = get_post_meta( $post_id, ‘_tes_meta_title’, true );
    $old_description = get_post_meta( $post_id, ‘_tes_meta_description’, true );
    // Проводимо перевірку безпеки введених користувачем даних.
    $title = sanitize_text_field( $_POST[‘tes_meta_title’] );
    $description = sanitize_text_field( $_POST[‘tes_meta_description’] );
    // Оновлюємо мета-поля в базі даних.
    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 можуть викликатися в будь який інший час, а також переконуємося, що приватний випадок, встановлений раніше в tes_mb_function, дійсний;
    • потім, якщо запис вже існує в базі даних, ми витягуємо її і зберігаємо в змінних $old_title і $old_description. Це робиться тому, що функція update_post_meta, яка зберігає дані в базу даних, необов’язково вимагає старе значення, щоб перевірити його перед внесенням в рядок мета-бокс бази даних нового значення;
    • після цього представлені дані перевіряються на безпеку функцією WordPress sanitize_text_field, яка конвертує HTML-код в його подання, очищає всі теги, видаляє розриви рядків, відступи і зайві прогалини, очищає октеты;
    • мета дані додаються в базу даних з допомогою функції update_post_meta;
    • і нарешті, tes_mb_save_data підключається до дії save_post, щоб зберегти дані мета-боксу, коли повідомлення або сторінка оновлюється.

      Використання збережених даних

      Не забувайте, що дані зберігаються, щоб використовуватися для додавання в Open Graph теги тайтла і опису, а також в мета-тег опису в елемент head кожної сторінки.

      Для цього ми створимо функцію tes_mb_display, яка буде містити теги, і після цього підключимо її до дії wp_head:

      function tes_mb_display() {
      global $post;
      // отримуємо значення мета-даних, якщо вони існують
      $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’
      ‘;
      }
      add_action( ‘wp_head’, ‘tes_mb_display’ );

      • Для виявлення ID повідомлення, ми захоплюємо посилання на пост, глобально використовуючи об’єкт $post;
      • Потім мета дані витягуються з бази даних і зберігаються у змінні $tes_meta_title і $tes_meta_description відповідно;
      • Після цього ми визначаємо мета-тег, щоб вставити його в елемент head шаблону;
      • Нарешті, ми підключаємо функцію до wp_head.

      Коли ви додали і зберегли тайтл і опис запису або сторінки, можна перевірити, що джерело сторінки містить Open Graph теги тайтла і опису, а також мета-опис.

      Для цього використовується пошукова система:

      Використання мета-боксів WordPress для створення SEO-плагіна

      Висновок

      У цій статті ми розглянули створення базового SEO-плагін, який додає мета-опис і Open Graph теги, використовуються пошуковими системами соціальних мереж розділу заголовка WordPress.

      Ви дізналися, як створити мета-бокси, поля їх форм, перевіряти на безпеку дані перед збереженням у базу даних і отримувати збережені дані для подальшого використання.

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

      Переклад статті «Using WordPress Meta Boxes to Build a Basic SEO Plugin» був підготовлений дружною командою проекту Сайтостроение від А до Я.