Ранее мы рассказывали вам, как добавлять переключающиеся отзывы в 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

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

Внимание: Данная статья требует существенных знаний HTML и CSS.

Замена стандартного меню на скользящее

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

Первым делом вам нужно открыть редактор на вашем компьютере и создать новый файл. Скопируйте и вставьте код:

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

Замените example.com своим доменным именем, а также замените your-themeназванием вашей темы. Сохраните этот файл как slidepanel.js на своём рабочем столе. Этот код использует jQuery для включения скользящего меню, а также создаёт анимацию перехода.

Откройте FTP клиент, например Filezilla и подключитесь к своему сайту. Далее, перейдите в папку вашей темы. Если в есть папка js, то откройте её, если нету, то создайте её и загрузите файл slidepanel.js в эту папку.

Следующим делом, вам надо создать или найти иконку меню. Обычно используют такую иконку с тремя линиями. Вы можете создать её, используя PhotoShop или же найти её в интернете. Для данной статьи, мы используем иконку размером 27х23 пикселя. Как только у вас будет иконка, переименуйте её в menu.png и загрузите в папку с картинками в директории вашей темы.

Следующим шагом будет добавление файла JavaScript для скользящего меню в WordPress. Просто скопируйте и вставьте этот код в файл вашей темы functions.php.

wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );

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

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

Цель — завернуть навигационное меню в HTML код, чтобы показывать ваше навигационную панель на маленьких экранах. Мы вставим его между <div id="toggle"> и <div id="popout">. Вот так:

<div id="toggle"><img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>




<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Замените example.com на ваше имя домена и your-theme на имя папки вашей темы. Сохраните изменения.

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

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

Помните, что навигационное меню вашей темы может использовать другие CSS классы и это может вызвать конфликт. Вы можете отладить данные проблемы, используя средство Chrome Inspector, чтобы обнаружить, какие классы css конфликтуют с вашими стилями. Поиграйтесь с CSS, чтобы достичь желаемого результата.

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