Наиболее популярным у читателей блогов являются разделы с обзорами. Интересный, грамотный и правильно составленный обзор будь то книги, фильма или музыкального альбома привлекает внимание огромного числа пользователей интернета. Давайте посмотрим, как создавать информационные обзоры, и выводить их в любом месте, используя произвольные поля. Ну а чтобы не заниматься простым изложением теоретических аспектов, лучше сразу применим их на практике.
Попробуем оформить отзыв фильм “Бойцовский Клуб” (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;}

- 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
