При наведении на определенную информацию требуется уточняющая вспомогательная информация, какие-либо параметры, описание или какая-либо подсказка.. На сайте КИНОПОИСКА (в старой версии) есть такой функционал при наведении курсора на ссылку с названием фильма, внизу слева появляется блок с краткой информацией об этом фильме. Повторим данный функционал.
Я создал гибрид из двух решений: Появляющееся окно-подсказка и Запись во всплывающем окне.
Блок контейнер
Создаем на сайте (лучше в подвале) блок для последующей вгрузки в него информации.
<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