Использование пользовательских полей для создания полей обзора

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

Что мы собираемся построить

В качестве примера, мы собираемся создать окно обзора для фильма.

Давайте возьмем один из моих любимых фильмов всех времен — « В погоне за счастьем» . Мы собираемся отобразить следующую информацию о фильме:

Название: В погоне за счастьем
Год: 2006
Режиссер: Габриэле Муччино
Автор сценария: Стив Конрад
Звезды: Уилл Смит, Джейден Смит, Тэнди Ньютон
Жанр: Биография, Драма
Продолжительность: 117 минут
Сюжетная линия: основана на реальной истории о человеке по имени Кристофер Гарднер. Гарднер вложил значительные средства в устройство, известное как «сканер плотности костей». Он чувствует, что сделал эти устройства. Тем не менее, они не продаются, поскольку они немного лучше, чем нынешние технологии по гораздо более высокой цене. Когда Гарднер пытается выяснить, как их продать, его жена покидает его, он теряет свой дом, свой банковский счет и кредитные карты. Вынужденный жить на улице со своим сыном, Гарднер сейчас отчаянно пытается найти постоянную работу; он устраивается на работу биржевым маклером, но прежде чем он сможет получать оплату, ему необходимо пройти 6 месяцев обучения и продать свои устройства.
(Давайте не будем забывать, что нам нужно изображение.)

Важно: эта информация заимствована из базы данных фильмов Интернета .

Шаг 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!
}

Функция обратного вызова создаст поля ввода для хранения наших данных. Я думаю, что мы можем использовать texarea для поля «основная сюжетная линия» и поля ввода текста для всего остального:

<?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];
    </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.
    </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/150×200&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.’
        <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:left; (или float:right; ) объявление для .review-box . Вы даже можете отцентрировать его, изменив margin: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’);

Вот что у вас получится, если вы будете следовать приведенным выше инструкциям точно так, как они написаны

Завершение

Эти поля обзора могут использоваться для множества различных обзоров, таких как программное обеспечение, веб-сайты, книги, телешоу и так далее. Или, если вы можете проявить творческий подход, вы даже можете использовать их в обычных блогах просто для удовольствия!

Некоторые статьи для проверки

Чтобы полностью понять код и даже улучшить его, вы должны прочитать некоторые другие статьи Wptuts +:

Как создавать собственные мета-блоки WordPress для записи / мета-бокса (вам следует прочитать эту статью, если вы хотите изучить концепцию пользовательских мета-блоков.)
Как интегрировать WordPress Media Uploader в настройках тем и плагинов (это может быть полезно, если вы хотите, чтобы ваши авторы могли напрямую загружать рецензируемые изображения.)
Санация и проверка данных с помощью WordPress (отличная статья о санации данных. Помните: вы даже не можете в этом поверить!)

Есть ли что-то, что вы хотели бы улучшить или у вас есть идея? Поделитесь с нами своими мыслями, комментируя ниже.

Использование пользовательских полей для создания полей обзора

Что мы собираемся построить

Шаг 1 Подготовка пользовательского мета-бокса для заполнения данными

Шаг 2 Создание функции для отображения окна обзора

CSS

Шаг 3 Создание шорткода для вызова функции

Завершение

Некоторые статьи для проверки

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC