Главная » Настройки

Использование произвольных полей для создания информационных обзоров

Использование произвольных полей для создания информационных обзоров | n-wp.ru
Автор Опубликовано Обновлено
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Использование произвольных полей для создания информационных обзоров

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

Попробуем оформить отзыв фильм “Бойцовский Клуб” (Fight Club). Информационный блок будет отображать следующую информацию о фильме:

  • Название: Fight Club
  • Год: 1999
  • Режиссёр: Gabriele Mucodeino
  • Сценарий: Джим Улс, Чак Паланик
  • В главных ролях: Edward Norton, Brad Pitt, Helena Bonham Carter
  • Жанр: Триллер, Драма, Криминал
  • Длительность: 131 минута
  • Сюжет: Терзаемый хронической бессонницей и отчаянно пытающийся вырваться из мучительно скучной жизни клерк встречает некоего Тайлера Дардена, харизматического торговца мылом с извращенной философией. Тайлер уверен, что самосовершенствование — удел слабых, а саморазрушение — единственное, ради чего стоит жить. Пройдет немного времени, и вот уже главные герои лупят друг друга почем зря на стоянке перед баром, и очищающий мордобой доставляет им высшее блаженство. Приобщая других мужчин к простым радостям физической жестокости, они основывают тайный Бойцовский Клуб, который имеет огромный успех. Но в концовке фильма всех ждет шокирующее открытие, которое может привести к непредсказуемым событиям…
  • Картинка к отзыву

Создадим функцию add_meta_box (), которая создаст мета-блоки и будет включать функцию обратного отклика, позволяющую отобразить поля для ввода данных.

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

Нижеуказанный код, создает текстовые поля для ввода «Названия», «Года», и других данных о фильме:

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="_some_review_name" id="review_name" value="" />
    </p>
    <p>
        <label for="review_year">Year:</label>
        <input type="text" name="_some_review_year" id="review_year" value="" />
    </p>
    <p>
        <label for="review_director">Director:</label>
        <input type="text" name="_some_review_director" id="review_director" value="" />
    </p>
    <p>
        <label for="review_writer">Writer:</label>
        <input type="text" name="_some_review_writer" id="review_writer" value="" />
    </p><script data-noptimize="" data-wpfc-render="false">
/* <![CDATA[ */
fpm_start( "true" );
/* ]]> */
</script>

    <p>
        <label for="review_stars">Stars:</label>
        <input type="text" name="_some_review_stars" id="review_stars" value="" />
    </p>
    <p>
        <label for="review_genre">Genre:</label>
        <input type="text" name="_some_review_genre" id="review_genre" value="" />
    </p>
    <p>
        <label for="review_runtime">Runtime:</label>
        <input type="text" name="_some_review_runtime" id="review_runtime" value="" />
    </p>
    <p>
        <label for="review_image">Image:</label>
        <input type="text" name="_some_review_image" id="review_image" value="" />
    </p>
    <p>
        <label for="review_storyline">Storyline:</label>
        <textarea name="_some_review_storyline" id="review_storyline" cols="30" rows="10"></textarea>
    </p>

Функция, позволяющая сохранить введенные значения в качестве произвольных поле:

function some_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(
        '_some_review_name',
        '_some_review_year',
        '_some_review_director',
        '_some_review_writer',
        '_some_review_stars',
        '_some_review_genre',
        '_some_review_runtime',
        '_some_review_image',
        '_some_review_storyline'
    );
    // create the "default" values for the array
    $review_array_defaults = array(
        '_some_review_name' => 'None',
        '_some_review_year' => 'None',
        '_some_review_director' => 'None',
        '_some_review_writer' => 'None',
        '_some_review_stars' => 'None',
        '_some_review_genre' => 'None',
        '_some_review_runtime' => 'None',
        '_some_review_image' => 'None',
        '_some_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', 'some_review_box_save_meta' );

Итак, функции для ввода данных готовы, теперь необходимо их отобразить. В WordPress есть функция, позволяющая получить значения настраиваемых полей:

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

Теперь необходимо загрузить значения произвольных полей в код HTML, он будет иметь следующий вид:

<div class="review-box">
    
    <ul class="review-box-list">
        <li><strong>Name:</strong> Fight Club</li>
        <li><strong>Year:</strong> 1999</li>
        <li><strong>Director:</strong> Gabriele Mucodeino</li>
        <li><strong>Writer:</strong> Джим Улс, Чак Паланик</li>
        <li><strong>Stars:</strong> Edward Norton, Brad Pitt, Helena Bonham Carter</li>
        <li><strong>Genre:</strong> Триллер, Драма, Криминал</li>
        <li><strong>Runtime:</strong> 131 минута</li>
        <li><strong>Storyline:</strong> Терзаемый хронической бессонницей и отчаянно пытающийся вырваться из мучительно скучной жизни клерк встречает некоего Тайлера Дардена, харизматического торговца мылом с извращенной философией. Тайлер уверен, что самосовершенствование — удел слабых, а саморазрушение — единственное, ради чего стоит жить. Пройдет немного времени, и вот уже главные герои лупят друг друга почем зря на стоянке перед баром, и очищающий мордобой доставляет им высшее блаженство. Приобщая других мужчин к простым радостям физической жестокости, они основывают тайный Бойцовский Клуб, который имеет огромный успех. Но в концовке фильма всех ждет шокирующее открытие, которое может привести к непредсказуемым событиям…</li>
    </ul>
</div>

В итоге, соединив все в одно целое, получим (вставлять в файл functions.php):

function some_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($_some_review_image == '') {
        if(has_post_thumbnail()) {
            $get_some_review_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
            $_some_review_image = $get_some_review_image[0];
        } else {
            $_some_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()
    );
    $_some_review_name_output = wp_kses($_some_review_name[0], $allowed_html);
    $_some_review_year_output = wp_kses($_some_review_year[0], $allowed_html);
    $_some_review_director_output = wp_kses($_some_review_director[0], $allowed_html);
    $_some_review_writer_output = wp_kses($_some_review_writer[0], $allowed_html);
    $_some_review_stars_output = wp_kses($_some_review_stars[0], $allowed_html);
    $_some_review_genre_output = wp_kses($_some_review_genre[0], $allowed_html);
    $_some_review_runtime_output = wp_kses($_some_review_runtime[0], $allowed_html);
    $_some_review_storyline_output = wp_kses($_some_review_storyline[0], $allowed_html);
    $_some_review_image_output = wp_kses($_some_review_image[0], $allowed_html);
    $output = '<div class="review-box">
        
        <ul class="review-box-list">
            <li><strong>Name:</strong> '.$_some_review_name_output.'</li>
            <li><strong>Year:</strong> '.$_some_review_year_output.'</li>
            <li><strong>Director:</strong> '.$_some_review_director_output.'</li>
            <li><strong>Writer:</strong> '.$_some_review_writer_output.'</li>
            <li><strong>Stars:</strong> '.$_some_review_stars_output.'</li>
            <li><strong>Genre:</strong> '.$_some_review_genre_output.'</li>
            <li><strong>Runtime:</strong> '.$_some_review_runtime_output.'</li>
            <li><strong>Storyline:</strong> '.$__review_storyline_output.'</li>
        </ul>
    </div>';
    return $output;
}

Теперь необходимо заняться оформлением. Стиль – дело, конечно, личное, но кто не хочет уделять ему много внимания, представляю код с готовым оформлением (файл style.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;}

Хотите, чтобы обзор автоматически выводился в конце поста? Тогда используйте этот код (файл functions.php):

function some_review_box_add($content) {
    $review_box = some_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','some_review_box_add');

Возможно вам захочется поместить данный блок в конце или середине вашего поста. Тут нам на помощь приходят шорт-коды. Активируем шорткод (файл functions.php):

add_shortcode('reviewbox','some_review_box');

Выбираем место, где хотим видеть наш обзор и вставляем шорткод:

[reviewbox]

Если вы все сделали правильно, то при выводе должны увидеть подобный обзор:

.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;}

Бойцовский клуб (1999)
  • Name: Fight Club
  • Year: 1999
  • Director: Gabriele Mucodeino
  • Writer: Джим Улс, Чак Паланик
  • Stars: Edward Norton, Brad Pitt, Helena Bonham Carter
  • Genre: Триллер, Драма, Криминал
  • Runtime: 131 минута
  • Storyline: Терзаемый хронической бессонницей и отчаянно пытающийся вырваться из мучительно скучной жизни клерк встречает некоего Тайлера Дардена, харизматического торговца мылом с извращенной философией. Тайлер уверен, что самосовершенствование — удел слабых, а саморазрушение — единственное, ради чего стоит жить. Пройдет немного времени, и вот уже главные герои лупят друг друга почем зря на стоянке перед баром, и очищающий мордобой доставляет им высшее блаженство. Приобщая других мужчин к простым радостям физической жестокости, они основывают тайный Бойцовский Клуб, который имеет огромный успех. Но в концовке фильма всех ждет шокирующее открытие, которое может привести к непредсказуемым событиям…

источник: Utilizing Custom Fields to Create Review Boxes

Создай свой первый сайт на WordPress

Рут
Оцените автора
Добавить комментарий