Як використовувати кастомні поля для створення мета-блоків із оглядами

Огляди — мабуть, один із найпотужніших інструментів для ведення блогів. Правильно оформлені та наповнені цільною інформацією, блоги з оглядами належать до однієї з найприбутковіших категорій ресурсів у блогосфері щодо монетизації. Але кожен блог повинен пропонувати єдність дизайну, включаючи розділ із оглядами. У цьому пості мова піде про те, як створити практично ідеальний блок з оглядами книг, фільмів або товарів (бо блок оглядів, що втікають, — це розділ, який читачі перевіряють насамперед, перш ніж перейти до читання повного відгуку).

| Завантажити вихідні |

Що ми плануємо створити

Як приклад створимо блок з відгуком на кінофільм. Візьмемо один із улюблених моїх фільмів: В гонитві за щастям (В гонитві за щастям). Блок відображатиме наступну інформацію про фільм:

• Назва: The Pursuit of Happyness
• рік: 2006
• режисер: Габріеле Муччіно
• Автор сценарію: Steve Conrad
• У головних ролях: Will Smith, Jaden Smith, Thandie Newton
• Жанр: Біографія, Драма.
• Тривалість: 117 хвилин
• Сюжет: Фільм створений на основі реальної історії людини на ім'я Крістофер Гарднер Він вклав багато засобів і сил у пристрій під назвою "Bone Density scanner" (щось на зразок портативного рентгенографа). Але жоден із створених пристроїв він не міг продати, оскільки вони були хоч і кращі, ніж усі існуючі технології, але суттєво дорожчі. Як тільки Гарднер зрозумів, що не зможе продати жодного з цих пристроїв, дружина покинула його, він втратив будинок, йому закрили кредитку та рахунок у банку. Залишившись без грошей і змушений жити на вулиці зі своїм сином, Гарднер зневірився знайти постійну роботу; він отримує роботу брокера на біржі, але перш ніж він отримає першу зарплату, йому 6 місяців треба пройти випробувальний термін і за цей час примудритися розпродати сканери, що залишилися в нього.
• І звичайно ж – не забуваємо про картинці-ілюстрації до анотації фільму.

важливе зауваження: Всі дані про фільм ми беремо з рейтингу IMDB.

Крок 1. Підготовка мета-форми для заповнення її даними

Дані будуть введені в кастомні поля, але додавання таких полів вручну до кожного нового огляду — ще головний біль. Тож ми створимо налаштовуваний мета-блок, де зберігатимуться дані для наших кастомних полів.

Для початку треба створити функцію add_meta_box () для створення мета-блоку та написати функцію зворотного відгуку:

function wptuts_review_box_add_meta() {
    add_meta_box( 'review-box', 'The Review Box', 'wptuts_review_box_meta', 'post', 'normal', 'high' );
}
add_action( 'add_meta_boxes', 'wptuts_review_box_add_meta' );
 
function wptuts_review_box_meta() {
    // Hi there!
}

Функція відгуку створить поля для введення даних. Для цього нам потрібно текстове поле для "Сюжету" та поля для введення невеликого тексту для всіх інших розділів блоку зі швидким оглядом:

<?php
function wptuts_review_box_meta($post) {
    global $post;
    // get the custom field values (if they exist) as an array
    $values = get_post_custom( $post->ID );
    // extract the members of the $values array to their own variables (which you can see below, in the HTML code)
    extract( $values, EXTR_SKIP );
    wp_nonce_field( 'review_box_meta_action', 'review_box_meta_nonce' );
?>
    <p>
        <label for="review_name">Movie Name:</label>
        <input type="text" name="_wptuts_review_name" id="review_name" value="<?php echo $_wptuts_review_name[0]; ?>" />
    </p>
    <p>
        <label for="review_year">Year:</label>
        <input type="text" name="_wptuts_review_year" id="review_year" value="<?php echo $_wptuts_review_year[0]; ?>" />
    </p>
    <p>
        <label for="review_director">Director:</label>
        <input type="text" name="_wptuts_review_director" id="review_director" value="<?php echo $_wptuts_review_director[0]; ?>" />
    </p>
    <p>
        <label for="review_writer">Writer:</label>
        <input type="text" name="_wptuts_review_writer" id="review_writer" value="<?php echo $_wptuts_review_writer[0]; ?>" />
    </p>
    <p>
        <label for="review_stars">Stars:</label>
        <input type="text" name="_wptuts_review_stars" id="review_stars" value="<?php echo $_wptuts_review_stars[0]; ?>" />
    </p>
    <p>
        <label for="review_genre">Genre:</label>
        <input type="text" name="_wptuts_review_genre" id="review_genre" value="<?php echo $_wptuts_review_genre[0]; ?>" />
    </p>
    <p>
        <label for="review_runtime">Runtime:</label>
        <input type="text" name="_wptuts_review_runtime" id="review_runtime" value="<?php echo $_wptuts_review_runtime[0]; ?>" />
    </p>
    <p>
        <label for="review_image">Image:</label>
        <input type="text" name="_wptuts_review_image" id="review_image" value="<?php echo $_wptuts_review_image[0]; ?>" />
    </p>
    <p>
        <label for="review_storyline">Storyline:</label>
        <textarea name="_wptuts_review_storyline" id="review_storyline" cols="30" rows="10"><?php echo $_wptuts_review_storyline[0]; ?></textarea>
    </p>
<?php
}
?>

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

function wptuts_review_box_save_meta( $post_id ) {
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
    if( !isset( $_POST['review_box_meta_nonce'] ) || !wp_verify_nonce( $_POST['review_box_meta_nonce'], 'review_box_meta_action' ) ) return;
    if( !current_user_can( 'edit_post' ) ) return;
    // create an array of our custom fields
    $review_array = array(
        '_wptuts_review_name',
        '_wptuts_review_year',
        '_wptuts_review_director',
        '_wptuts_review_writer',
        '_wptuts_review_stars',
        '_wptuts_review_genre',
        '_wptuts_review_runtime',
        '_wptuts_review_image',
        '_wptuts_review_storyline'
    );
    // create the "default" values for the array
    $review_array_defaults = array(
        '_wptuts_review_name' => 'None',
        '_wptuts_review_year' => 'None',
        '_wptuts_review_director' => 'None',
        '_wptuts_review_writer' => 'None',
        '_wptuts_review_stars' => 'None',
        '_wptuts_review_genre' => 'None',
        '_wptuts_review_runtime' => 'None',
        '_wptuts_review_image' => 'None',
        '_wptuts_review_storyline' => 'None'
    );
    // parse 'em!
    $review_array = wp_parse_args($review_array, $review_array_defaults);
    // HTML elements that are allowed inside the fields
    $allowed_html = array(
        'a' => array(
            'href' => array(),
            'title' => array()
        ),
        'em' => array(),
        'strong' => array()
    );
    // update the post meta fields with input fields (if they're set)
    foreach($review_array as $item) {
        if( isset( $_POST[$item] ) )
            update_post_meta( $post_id, $item, wp_kses($_POST[$item], $allowed_html) );
    }
}
add_action( 'save_post', 'wptuts_review_box_save_meta' );

Готово!

Щоб дізнатися більше про створення настроюваних мета-блоків і конкретне значення того чи іншого коду, ви можете прочитати ось цю чудову статтю, що опублікована на Wptuts+.

Крок 2. Пишемо функцію для відображення блоку з оглядом

Тепер, коли ми визначилися, як налаштувати виведення інформації, настав час вивчити, як отримуватимемо інформацію. Якщо ви вже працювали з кастомними полями, то у вас особливих труднощів не виникне. Ми просто зіставимо введення і виведення полів, що настроюються.

У WordPress є проста у використанні функції для отримання значень полів, що настроюються:

$meta_values = get_post_meta($post_id, $key, $single);

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

<div class="review-box">
    <img src="http://ourwebsite.com/uploads/the-pursuit-of-happyness.jpg" alt="The Pursuit of Happyness (2006)" class="review-box-image" />
    <ul class="review-box-list">
        <li><strong>Name:</strong> The Pursuit of Happyness</li>
        <li><strong>Year:</strong> 2006</li>
        <li><strong>Director:</strong> Gabriele Muccino</li>
        <li><strong>Writer:</strong> Steve Conrad</li>
        <li><strong>Stars:</strong> Will Smith, Jaden Smith, Thandie Newton</li>
        <li><strong>Genre:</strong> Biography, Drama</li>
        <li><strong>Runtime:</strong> 117 minutes</li>
        <li><strong>Storyline:</strong> Based on a true story about a man named Christopher Gardner. Gardner has invested heavily in a device known as a "Bone Density scanner". He feels like he has made these devices. However, they do not sell as they are marginally better than the current technology at a much higher price. As Gardner tries to figure out how to sell them, his wife leaves him, he loses his house, his bank account, and credit cards. Forced to live out in the streets with his son, Gardner is now desperate to find a steady job; he takes on a job as a stockbroker, but before he can receive pay, he needs to go through 6 months of training, and to sell his devices.</li>
    </ul>
</div>

І коли ми все це зведемо разом, то отримаємо готову функцію:

function wptuts_review_box() {
    global $post;
    // get the custom field values as an array
    $values = get_post_custom( $post->ID );
    // extract the members of the $values array to their own variables (which you can see below, in the HTML code)
    extract( $values, EXTR_SKIP );
    // if there's no image link in the "review_image" custom field, try to get the featured image
    if($_wptuts_review_image == '') {
        if(has_post_thumbnail()) {
            $get_wptuts_review_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
            $_wptuts_review_image = $get_wptuts_review_image[0];
        } else {
            $_wptuts_review_image = 'http://placehold.it/150x200&text=No+Image';
        }
    }
    // escape the output, just in case
    $allowed_html = array(
        'a' => array(
            'href' => array(),
            'title' => array()
        ),
        'em' => array(),
        'strong' => array()
    );
    $_wptuts_review_name_output = wp_kses($_wptuts_review_name[0], $allowed_html);
    $_wptuts_review_year_output = wp_kses($_wptuts_review_year[0], $allowed_html);
    $_wptuts_review_director_output = wp_kses($_wptuts_review_director[0], $allowed_html);
    $_wptuts_review_writer_output = wp_kses($_wptuts_review_writer[0], $allowed_html);
    $_wptuts_review_stars_output = wp_kses($_wptuts_review_stars[0], $allowed_html);
    $_wptuts_review_genre_output = wp_kses($_wptuts_review_genre[0], $allowed_html);
    $_wptuts_review_runtime_output = wp_kses($_wptuts_review_runtime[0], $allowed_html);
    $_wptuts_review_storyline_output = wp_kses($_wptuts_review_storyline[0], $allowed_html);
    $_wptuts_review_image_output = wp_kses($_wptuts_review_image[0], $allowed_html);
    $output = '<div class="review-box">
        <img src="'.$_wptuts_review_image_output.'" alt="'.$_wptuts_review_name_output.' ('.$_wptuts_review_year_output.')" class="review-box-image" />
        <ul class="review-box-list">
            <li><strong>Name:</strong> '.$_wptuts_review_name_output.'</li>
            <li><strong>Year:</strong> '.$_wptuts_review_year_output.'</li>
            <li><strong>Director:</strong> '.$_wptuts_review_director_output.'</li>
            <li><strong>Writer:</strong> '.$_wptuts_review_writer_output.'</li>
            <li><strong>Stars:</strong> '.$_wptuts_review_stars_output.'</li>
            <li><strong>Genre:</strong> '.$_wptuts_review_genre_output.'</li>
            <li><strong>Runtime:</strong> '.$_wptuts_review_runtime_output.'</li>
            <li><strong>Storyline:</strong> '.$_wptuts_review_storyline_output.'</li>
        </ul>
    </div>';
    return $output;
}

CSS-стилі

Само собою, що стилістично блок із відгуком можна оформити на свій смак. Якщо такого бажання особливо немає, то можете скористатися нашим готовим стилем оформлення:

.review-box {width:550px;border:1px solid #DDD;border-radius:5px;margin:10px;}
.review-box-image {float:right;width:150px;border:10px solid #fff;border-width:0 0 10px 10px;margin:10px 10px 0 0;}
.review-box-list {margin:10px;padding:0;list-style:none;}
.review-box-list li {margin-bottom:5px;padding-top:5px;border-top:1px solid #EEE;}
.review-box-list li:first-child {border-top:0;}
.review-box-list li strong {display:inline-block;width:75px;}

Якщо ви хочете прикріпити блок з оглядом до лівого або правого краю, не забудьте додати оголошений параметр поплавок: ліворуч; (або float: праворуч;) до .review-box. Ви навіть можете вирівняти блок по центру, змінивши значення параметра запас: 10px; на margin:10px auto;.

Крок 3. Створюємо шорт-код для виклику функції

Ми знаємо, як налаштувати і як отримати інформаційні дані... Саме час вивчити, як ми відображатимемо наші дані.

Блок з оглядом можна автоматично додати в кінці або на початку вашого поста приблизно так:

function wptuts_review_box_add($content) {
    $review_box = wptuts_review_box();
    // show the box at the end of the post:
    return $content.$review_box;
    // show the box at the beginning of the post:
    // return $review_box.$content;
} add_action('the_content','wptuts_review_box_add');

Але що нам робити, якщо ви хочете вставити блок із текстом огляду в середині посту? І ось тут настає час мого улюбленого інструменту. шорт-кодів.

Цей крок ще простіше, ніж попередній, тому що вся попередня робота по завантаженню блоку з оглядом вже була зроблена. Все, що залишилося зробити, - це викликати функцію за допомогою шорт-коду:

add_shortcode('reviewbox','wptuts_review_box');

І ось що ви отримаєте в результаті, якщо всі попередні кроки ви зробили точно так, як було написано в цьому пості:

завершуємо роботу

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

Інші корисні статті на цю тему:

• Посібник з кастомних типів записів WordPress
• Custom Post Types: таксономії, фільтри та архіви в WordPress

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

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/