Вспомогательная информация

При наведении на определенную информацию требуется уточняющая вспомогательная информация, какие-либо параметры, описание или какая-либо подсказка.. На сайте КИНОПОИСКА (в старой версии) есть такой функционал при наведении курсора на ссылку с названием фильма, внизу слева появляется блок с краткой информацией об этом фильме. Повторим данный функционал.

Я создал гибрид из двух решений: Появляющееся окно-подсказка и Запись во всплывающем окне.

Блок контейнер

Создаем на сайте (лучше в подвале) блок для последующей вгрузки в него информации.

<div id=»help-block»></div>

Либо создаем функцию его создания

add_action( 'get_footer', 'actionposthint', 5 );
function actionposthint() {
echo '<div id="help-block"></div>';
}

Задаём ему стили, изначально он невидимый

#help-block {
    position: fixed;
    width: 300px;
    height: 50px;
    background-color: #FFEB3B;
    left: 25px;
    bottom: 75px;
    z-index: 99;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
	display: none;
}

#help-block img {border-radius: 0; float:left; margin-right: 10px;}

#help-block p {padding: 5px; float: left; box-sizing: border-box; width: 240px;}

Скрипты

Создаем и подключаем необходимые скрипты:

function addsiteposthint() {
wp_enqueue_script( 'post-hint' );
}
add_action( 'get_footer', 'addsiteposthint' );

add_action( 'wp_enqueue_scripts', 'siteposthint_scripts', 1 );

function siteposthint_scripts() {

/* Register JavaScript Functions File */
wp_register_script( 'post-hint', plugins_url('/site-post-hint.js', __FILE__), array( 'jquery' ), '1.0', true );

/* Localize Scripts */
$php_array = array( 'admin_ajax' => admin_url( 'admin-ajax.php' ) );
wp_localize_script( 'post-hint', 'php_array', $php_array );

}

Создаем и настраиваем шаблон вывода информации

add_action( 'wp_ajax_theme_hint_post_example', 'theme_hint_post_example_init' );
add_action( 'wp_ajax_nopriv_theme_hint_post_example', 'theme_hint_post_example_init' );

function theme_hint_post_example_init() {

/* Made Query */
$args = array( 'p' => $_POST['id'],'post_type' => array( 'post', 'page', 'track', 'product' ) );
$theme_post_query = new WP_Query( $args );
while( $theme_post_query->have_posts() ) : $theme_post_query->the_post();
?>
<div id="hint-content">
<?php
if( has_post_thumbnail() )
{the_post_thumbnail('square-xs');}
else
{echo '<img src="'.get_template_directory_uri().'/images/img-default-square.jpg" />';}
?>
<p><strong><?php the_title(); ?></strong>
<?php echo get_post_meta($_POST['id'], 'post_views_count', true); ?>
</p>
</div>

</div>
<?php
endwhile;
exit;
}

}

echo get_post_meta($_POST[‘id’], ‘post_views_count’, true); — Таким образом выводятся мета поля.

Скрипт обмена

И создаем основной скрипт обмена — site-post-hint.js, который мы уже подключили. Данный скрипт по ID записи подгружает и выдает необходимую вспомогательную информацию. Принцип действия следующий: наводим курсор на блок .hentry он берет id блока (необходимо убедится что id прописывается чистый id=»<?php the_ID(); ?>», а не post-456) и выдает информацию по записи с данным id. Когда мы убираем курсор блок с информацией исчезает и отчищается.

(function($) {

/** jQuery Document Ready */
$(document).ready(function(){

$( '.hentry' ).on( 'mouseenter', function( e ) {

// Вызвать подсказку
$( '#help-block' ).show();


/** Prevent Default Behaviour */
e.preventDefault();

/** Get Post ID */
var post_id = $(this).attr( 'id' );

/** Ajax Call */
$.ajax({

cache: false,
timeout: 8000,
url: php_array.admin_ajax,
type: "POST",
data: ({ action:'theme_hint_post_example', id:post_id }),

success: function( data, textStatus, jqXHR ){

var $ajax_response = $( data );
$( '#help-block' ).html( $ajax_response );

},

error: function( jqXHR, textStatus, errorThrown ){
console.log( 'The following error occured: ' + textStatus, errorThrown );
},

complete: function( jqXHR, textStatus ){
}

});

});

$( '.hentry' ).on( 'mouseleave', function( e ) {
$( '#help-block' ).html( "" );	
$( '#help-block' ).hide();
});

});

})(jQuery);

Данный функционал можно настроить на любые данные. Для отлавливания информации необходим id необходимого материала.

Получаем ID по ссылке

Объектом воздействия данного функционала могут быть внутренние ссылки. Но в данном случае у ссылок будет отсутствовать атрибут id. Получим его с помощью функции url_to_postid.

Немного изменяем скрипт, а конкретнее объект воздействия:

$( '#post-content a:not([href^="https://"], [href^="http://"])' ).on( 'mouseenter', function( e ) {

#post-content a — воздействуем на ссылки внутри контейнера #post-content — это пространство статьи
:not([href^=»https://»], [href^=»http://»]) — отсекаем ссылки с упоминанием в адресе http или https, т.к. в идеале внутренние ссылки у нас вида href=»../url-ssyilki-stranits-chpu/».

И также немного корректируем функцию формирования вывода информации

$url = $_POST['id']; 
$post_ID = url_to_postid($url);

$args = array( 'p' => $post_ID,'post_type' => array( 'post', 'page', 'track', 'product' ) );

Мы добавили 2 строки

$url = $_POST[‘id’]; — получаем ссылку переданную скриптом
$post_ID = url_to_postid($url); — обрабатываем и получаем id записи

‘p’ => $post_ID — выводим запись по id