Как добавить всплывающие приветствия в WordPress

Ранее мы рассказывали вам, как добавлять переключающиеся отзывы в WordPress. Сегодня же мы расскажем о том, как показывать какую-либо всплывающую информацию при наведении курсора на фото. Эта техника стала использоваться повсеместно, и в этой статье мы покажем, как создать всплывающие подсказки в WordPress

Фон:

От экспертов индустрии мы слышали то, что показ лиц придаёт персональный оттенок странице. Это причина, почему мы решили пойти этим путём. Вот почему мы решили использовать пользовательские типы постов и мета-поля, чтобы скомпоновать это с jQuery.

Пользовательские типы постов и мета-области

Нам необходимо, чтобы клиент имел возможность:

• Добавить фото пользователя (Иконка)
• Добавить имя пользователя (Заголовок поста)
• Добавить текст (Тело поста)
• Позиция клиента в компании (Выборочное поле или мета-область)

Первым делом мы добавили пользовательский тип поста, названный Приветствие, в котором всё есть, кроме одного поля (позиция клиента/компании). Если вы хотите добавить мета-область, то это ваше дело. Не будьте ленивыми, попробуйте сами добавить пару строк кода, чтобы сделать это!

Всё, что нужно сделать, это взять код снизу и сохранить его в пустой php файл, и назвать tooltip-testimonials.php.

<?php

//Add Image Size
add_image_size( 'testimonial-thumb', 96, 96, true ); // Hard Crop Mode

//Register Custom Post Types

add_action( 'init', 'register_cpt_testimonial' );

function 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 );
}

//Custom Meta Box

$key = "testimonial";
$meta_boxes = array(
"position" => array(
"name" => "position",
"title" => "Position and Company",
"description" => "Enter their position and their company name.")
);
 
function 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 htmlspecialchars( $data[ $meta_box[ 'name' ] ] ); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>
 
<?php } ?>
 
</div>
<?php
}
 
function save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;
 
foreach( $meta_boxes as $meta_box ) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}
 
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', 'create_meta_box' );
add_action( 'save_post', 'save_meta_box' );

Это послужит началом первоначальной настройки того, что мы хотим иметь. Теперь нужно начать добавлять текст, после чего вы можете отобразить его. Вспомним ещё раз, какие элементы нам нужны:

• Добавьте  фото пользователя (иконка/миниатюра записи). Мы советуем брать размер 96х96 пикселей.
• Добавьте имя пользователя (Заголовок поста)
• Добавьте текст (Тело поста)
• Позиция клиента в компании (Мета-область)

Отображение в теме

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

• Добавьте пользовательский код на jQuery в тему
• Создайте пользовательский цикл, который будет отображать информацию в той структуре, которая вам нужна.
• Добавьте больше стилей, чтобы всё это выглядело опрятней.

Сначала нужно скопировать и вставить данный код на jQuery в пустой файл и назвать его tooltip-testimonials.js:

jQuery(document).ready(function(){
     
    jQuery("#testimonials img[title]").tooltip({
 
       // tweak the position
       offset: [0, 0],
     
       // use the "slide" effect
       effect: 'slide'
     
    // add dynamic plugin with optional configuration for bottom edge
    }).dynamic({ bottom: { direction: 'down', bounce: true } });
     
});

Как только вы сделаете это, вам нужно загрузить этот файл в шапку вашей темы. Вы также можете отредактировать файл header.php вручную, вставив скрипт в область заголовка или же использовать функцию wp_enqueue_script. Давайте загрузим наш файл tooltip-testimonials.js в папку скриптов нашей темы. Если её нету, то создайте её и назовите scripts.

Добавьте следующий код к файлу functions.php вашей темы:

add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts');
function tooltip_enqueue_scripts() {
if (!is_admin()) {
    wp_register_script('jquery_tools', 'http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js?ver=3.4.2', 'jquery', '3.4.2', true);
        wp_enqueue_script('jquery_tools');
 
    wp_register_script('tooltip', get_stylesheet_directory_uri() . '/scripts/tooltip-testimonials.js', 'jquery', '1', true);
        wp_enqueue_script('tooltip');
}
}

Теперь он у нас в нужном месте, создадим цикл, который позволит нам показывать всплывающий текст с фотографиями в формате сетки. Откройте файл, где бы вы хотели показывать приветствия. Это может быть и боковая панель, и домашняя страница, да что угодно. После чего, скопируйте цикл:

<div id="testimonials">
<div class="wrap">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 6 );
$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 );
$user_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($loop->post->ID), 'testimonial-thumb');
?>    
    <div class="testimonials">
        <p class="center"><img class="frame" src="<?php echo $user_image_url[0] ?>" title="<?php echo get_the_content(); ?>" alt="<?php echo get_the_title(); ?>" /></p>
        <p class="testimonials-title"><?php echo get_the_title(); ?></p>
        <p class="company"><?php echo $data[ 'position' ]; ?></p>
    </div>
<?php
endwhile; 
endif; ?>

</div>
</div>

Код цикла будет отображать 6 элементов на странице. Вы можете стилизовать их так, как вам хочется. Вы также можете добавить orderby = rand ,если у вас около 20 приветствий.

Теперь давайте добавим CSS стили, чтобы всё было красиво. Внизу вы можете найти стили CSS, которые мы использовали. Возможно вам нужно подкорректировать их, чтобы они соответствовали стилям вашей темы и цветовой схеме.

#testimonials .testimonials{width: 116px; float: left; margin: 35px 30px 0 0;}

#testimonials .center{text-align: center; margin: 0px 0 15px;; padding: 0px;}

#testimonials .center img{box-shadow: 0px 2px 2px #d2d2d2; -moz-box-shadow: 0px 2px 2px #d2d2d2; -webkit-box-shadow: 0px 2px 2px #d2d2d2; border: 3px solid #fff;}

#testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px 0 0; padding: 0px;}

#testimonials .company{font-size: 12px; font-style: italic; text-align: center; margin: 0px; padding: 0px;}

#testimonials .tooltip {background: #111; color: #fff; width: 200px; padding: 20px; margin: 0 5px 20px;}

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520