Недавно мы делали переключающиеся отзывы на WordPress для одного из наших клиентов. Мы искали в интернете, но так и не нашли плагин, который нам был нужен. Мы решили не искать плагин, а создать его с нуля. В этой статье мы покажем вам как создавать область переключающихся отзывов, где они будут появляться и исчезать автоматически. Вы можете использовать данную технику и для цитат, интересных фактов и так далее.
Помните, что вам необходимо понимать принципы работы WordPress, чтобы освоить данный материал.
Данный метод довольно прост: Зарегистрируйте пользовательский тип поста и назовите его Отзывы. Мы покажем следующую информацию: имя клиента, его позицию в компании, имя компании и ссылка на наше портфолио. Вместо использования пользовательских полей, мы решили добавить мета-области, чтобы сделать ввод информации более удобным. Также мы добавили эффекты появления и исчезновения на JavaScript для смены приветствий на самой странице.
Шаг 1: Зарегистрируйте пользовательский тип поста
Не будем вдаваться в подробности о том, как создавать пользовательский тип поста. Мы уже писали статью о том, как создавать пользовательские посты в WordPress. В данной статье вы сможете полностью понять весь процесс. Там также показывается метод с плагинами, а не метод с кодом. Если вы хотите назвать пользовательский пост «Отзывы», то всё что вам нужно — вставить данный код в файл темы functions.php.
add_action( 'init', 'wpb_register_cpt_testimonial' );
function wpb_register_cpt_testimonial() {
$labels = array(
'name' => _x( 'Testimonials', 'testimonial' ),
'singular_name' => _x( 'testimonial', 'testimonial' ),
'add_new' => _x( 'Add New', 'testimonial' ),
'add_new_item' => _x( 'Add New testimonial', 'testimonial' ),
'edit_item' => _x( 'Edit testimonial', 'testimonial' ),
'new_item' => _x( 'New testimonial', 'testimonial' ),
'view_item' => _x( 'View testimonial', 'testimonial' ),
'search_items' => _x( 'Search Testimonials', 'testimonial' ),
'not_found' => _x( 'No testimonials found', 'testimonial' ),
'not_found_in_trash' => _x( 'No testimonials found in Trash', 'testimonial' ),
'parent_item_colon' => _x( 'Parent testimonial:', 'testimonial' ),
'menu_name' => _x( 'Testimonials', 'testimonial' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => false,
'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields', 'revisions' ),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);
register_post_type( 'testimonial', $args );
}
Шаг 2: Добавление пользовательских мета-областей
Как мы уже говорили, вот информация, которую мы хотим показать:
- Имя
- Позиция в компании
- Имя компании
- Ссылка на портфолио
Теперь вы можете начать использовать пользовательские поля, но мы предпочли бы иметь более красивое отображение данного блока. Вот код, который мы использовали для добавления мета-области:
$key = "testimonial";
$meta_boxes = array(
"person-name" => array(
"name" => "person-name",
"title" => "Person's Name",
"description" => "Enter the name of the person who gave you the testimonial."),
"position" => array(
"name" => "position",
"title" => "Position in Company",
"description" => "Enter their position in their specific company."),
"company" => array(
"name" => "company",
"title" => "Company Name",
"description" => "Enter the client Company Name"),
"link" => array(
"name" => "link",
"title" => "Client Link",
"description" => "Enter the link to client's site, or you can enter the link to your portfolio page where you have the client displayed.")
);
function wpb_create_meta_box() {
global $key;
if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Information', 'display_meta_box', 'testimonial', 'normal', 'high' );
}
}
function display_meta_box() {
global $post, $meta_boxes, $key;
?>
<div class="form-wrap">
<?php
wp_nonce_field( plugin_basename( __FILE__ ), $key . '_wpnonce', false, true );
foreach($meta_boxes as $meta_box) {
$data = get_post_meta($post->ID, $key, true);
?>
<div class="form-field form-required">
<label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label>
<input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo (isset($data[ $meta_box[ 'name' ] ]) ? htmlspecialchars( $data[ $meta_box[ 'name' ] ] ) : ''); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>
<?php } ?>
</div>
<?php
}
function wpb_save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;
foreach( $meta_boxes as $meta_box ) {
if (isset($_POST[ $meta_box[ 'name' ] ])) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}
}
if (!isset($_POST[ $key . '_wpnonce' ]))
return $post_id;
if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
update_post_meta( $post_id, $key, $data );
}
add_action( 'admin_menu', 'wpb_create_meta_box' );
add_action( 'save_post', 'wpb_save_meta_box' );
Теперь, если вы перейдёте в раздел New Testimonial, вы увидите, что у вас появится пользовательская мета-область.
Если вы хотите добавить дополнительные поля для мета-области, просто добавьте их в $meta_boxes = array(.
Шаг 3: Добавление меняющегося контента
Первым делом нам надо добавить JavaScript, который будет менять контент.
<script language="javascript">
$(document).ready(function(){
$('#testimonials .slide');
setInterval(function(){
$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('.slide').size()){
$(this).next().fadeIn(1000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(1000);
}
});
},15000);
});
</script>
Убедитесь, что jQuery загружен. Если нет, то его необходимо добавить.
Далее мы создадим цикл, который будет показывать отзывы. Вот код, который мы использовали:
<div id="testimonials">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
static $count = 0;
if ($count == "1") { ?>
<div class="slide" style="display: none;">
<div class="client-contact-info"><?php echo $data[ 'person-name' ]; ?>, <?php echo $data[ 'position' ]; ?>, <a href="<?php echo $data[ 'link' ]; ?>" title="<?php echo $data[ 'company' ]; ?>"><?php echo $data[ 'company' ]; ?></a></div>
<div class="clear"></div>
<div class="testimonial-quote"><?php the_content(); ?></div>
</div>
<?php }
else { ?>
<div class="slide">
<div class="client-contact-info"><?php echo $data[ 'person-name' ]; ?>, <?php echo $data[ 'position' ]; ?>, <a href="<?php echo $data[ 'link' ]; ?>" title="<?php echo $data[ 'company' ]; ?>"><?php echo $data[ 'company' ]; ?></a></div>
<div class="clear"></div>
<div class="testimonial-quote"><?php the_content(); ?></div>
</div>
<?php
$count++; }
endwhile;
endif; ?>
</div>
Нужно вставить данный код в любое место, чтобы показать отзывы, вне зависимости от того, является ли это страницей, пользовательским постом, боковой панелью или нижним колонтитулом. Выберите место и вставьте код.
Небольшое пояснение, почему этот цикл немного более сложный, чем обычный цикл. Сначала цикл вытягивает посты из типа постов «Отзывы». Мы показываем лишь 10 недавних отзывов. Скрипт работает так, что нужно показывать лишь один пост, остальные 9 должны быть невидимыми, и могут появляться или исчезать.
Как только вы вставили код, нужно применить к нему стили.
#testimonials{}
#testimonials .slide{color: #9c968e;}
#testimonials .client-contact-info{margin: 25px 0 0 0; float: left;}
#testimonials .testimonial-quote{padding: 3px 0 0 65px; line-height: 1.5em; font-family: "proxima-nova-1", "proxima-nova-2", Helvetica, Arial, sans-serif !important; font-size: 16px; font-weight: normal; font-style: italic; margin: 10px 0 20px 0;}
Теперь результат будет выглядеть так:
Имя клиента, Его позиция в компании, Имя компании (ссылка)
Текст приветствия
Осталось лишь упомянуть пару мелочей. Если вы хотите добавить дополнительные поля, то нужно также добавить их к циклу. Стили можно изменять когда и как хотите.
Так как эта вещь довольно специфична, то и не стоит выпускать специальный плагин для этого. Однако, если вы хотите добиться точно такого же результата как и в нашей статье, то вам повезло.
Просто создайте новый файл и назовите его testimonials.php, сохраните его в папке с плагинами (/wp-content/plugins/). После вставьте следующий код в файл:
<?php
add_action( 'init', 'wpb_register_cpt_testimonial' );
function wpb_register_cpt_testimonial() {
$labels = array(
'name' => _x( 'Testimonials', 'testimonial' ),
'singular_name' => _x( 'testimonial', 'testimonial' ),
'add_new' => _x( 'Add New', 'testimonial' ),
'add_new_item' => _x( 'Add New testimonial', 'testimonial' ),
'edit_item' => _x( 'Edit testimonial', 'testimonial' ),
'new_item' => _x( 'New testimonial', 'testimonial' ),
'view_item' => _x( 'View testimonial', 'testimonial' ),
'search_items' => _x( 'Search Testimonials', 'testimonial' ),
'not_found' => _x( 'No testimonials found', 'testimonial' ),
'not_found_in_trash' => _x( 'No testimonials found in Trash', 'testimonial' ),
'parent_item_colon' => _x( 'Parent testimonial:', 'testimonial' ),
'menu_name' => _x( 'Testimonials', 'testimonial' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => false,
'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields', 'revisions' ),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);
register_post_type( 'testimonial', $args );
}
$key = "testimonial";
$meta_boxes = array(
"person-name" => array(
"name" => "person-name",
"title" => "Person's Name",
"description" => "Enter the name of the person who gave you the testimonial."),
"position" => array(
"name" => "position",
"title" => "Position in Company",
"description" => "Enter their position in their specific company."),
"company" => array(
"name" => "company",
"title" => "Company Name",
"description" => "Enter the client Company Name"),
"link" => array(
"name" => "link",
"title" => "Client Link",
"description" => "Enter the link to client's site, or you can enter the link to your portfolio page where you have the client displayed.")
);
function wpb_create_meta_box() {
global $key;
if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Information', 'display_meta_box', 'testimonial', 'normal', 'high' );
}
}
function display_meta_box() {
global $post, $meta_boxes, $key;
?>
<div class="form-wrap">
<?php
wp_nonce_field( plugin_basename( __FILE__ ), $key . '_wpnonce', false, true );
foreach($meta_boxes as $meta_box) {
$data = get_post_meta($post->ID, $key, true);
?>
<div class="form-field form-required">
<label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label>
<input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo (isset($data[ $meta_box[ 'name' ] ]) ? htmlspecialchars( $data[ $meta_box[ 'name' ] ] ) : ''); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>
<?php } ?>
</div>
<?php
}
function wpb_save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;
foreach( $meta_boxes as $meta_box ) {
if (isset($_POST[ $meta_box[ 'name' ] ])) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}
}
if (!isset($_POST[ $key . '_wpnonce' ]))
return $post_id;
if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
update_post_meta( $post_id, $key, $data );
}
add_action( 'admin_menu', 'wpb_create_meta_box' );
add_action( 'save_post', 'wpb_save_meta_box' );
function wpb_display_testimonials() { ?>
<script language="javascript">
$(document).ready(function(){
$('#testimonials .slide');
setInterval(function(){
$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('.slide').size()){
$(this).next().fadeIn(1000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(1000);
}
});
},15000);
});
</script>
<style type="text/css">
#testimonials .slide{color: #9c968e;}
#testimonials .client-contact-info{margin: 25px 0 0 0; float: left;}
#testimonials .testimonial-quote{background: url(images/quotebg.png) repeat-y; padding: 3px 0 0 65px; line-height: 1.5em; font-family: "proxima-nova-1", "proxima-nova-2", Helvetica, Arial, sans-serif !important; font-size: 16px; font-weight: normal; font-style: italic; margin: 10px 0 20px 0;}
</style>
<div id="testimonials">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 100, 'orderby' => 'menu_order', 'order' => 'ASC' );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
static $count = 0;
if ($count == "1") { ?>
<div class="slide" style="display: none;">
<div class="client-contact-info"><?php echo $data[ 'person-name' ]; ?>, <?php echo $data[ 'position' ]; ?>, <a href="<?php echo $data[ 'link' ]; ?>" title="<?php echo $data[ 'company' ]; ?>"><?php echo $data[ 'company' ]; ?></a></div>
<div class="clear"></div>
<div class="testimonial-quote"><?php the_content(); ?></div>
</div>
<?php }
else { ?>
<div class="slide">
<div class="client-contact-info"><?php echo $data[ 'person-name' ]; ?>, <?php echo $data[ 'position' ]; ?>, <a href="<?php echo $data[ 'link' ]; ?>" title="<?php echo $data[ 'company' ]; ?>"><?php echo $data[ 'company' ]; ?></a></div>
<div class="clear"></div>
<div class="testimonial-quote"><?php the_content(); ?></div>
</div>
<?php
$count++; }
endwhile;
endif;
echo '</div>';
}
?>
Теперь откройте ваш файл темы, в которой вы хотите отобразить всё это, и вставьте код:
<?php wpb_display_testimonials(); ?>
Вы также можете изменить стили. Помните, что если jQuery не был добавлен в тему, то нужно его добавить.
Надеемся, данная статья вам помогла, если у вас есть вопросы, то напишите его в комментариях.
Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520
