Однією з основних функцій 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 запису, нам потрібно взяти посилання на цей запис за допомогою $ пост.
- Метадані потім беруться з бази даних і зберігаються у змінні $tes_meta_title и $tes_meta_description.
- Потім визначаємо мета-тег, який має бути перенаправлений у шаблон head-елемент.
- І нарешті зміцнюємо функцію в wp_head.
Висновок
Тепер, якщо ви додали та зберегли заголовок та опис від поста або сторінки, при перегляді вихідного коду цієї сторінки має з'явитися наявність заголовка Open Graph та тег опису поряд з мета описом, що використовується пошуковими системами.
Джерело: code.tutsplus.com
Коментарі до запису: 0