Всплывающий тизер (Add this)

Всплывающий тизер вызывает больше доверия у посетителя, т.к. свои видом напоминает системные сообщения. Данный функционал частично имитирует сервис (плагин) Add this.

Верстка и стили тизера

Вставляем блок в футер. В данном примере в блок подгружается последняя запись.

<div id="addthis-block">
<?php
query_posts('posts_per_page=1');
if (have_posts()) : while (have_posts()) : the_post(); ?>

<a href="<?php the_permalink(); ?>">
<?php
if( has_post_thumbnail() )
{the_post_thumbnail('square');}
else
{echo '<img src="'.get_template_directory_uri().'/images/img-default-square.jpg" />';}
?>
</a>

<div class="text">
<span>Рекомендации для вас</span>

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

<span><?php bloginfo( 'name' ); ?>.ru</span>
</div>

<?php
endwhile; endif;
wp_reset_query();
?>

<div class="addthis-block-hide"><i class="fa fa-caret-down" aria-hidden="true"></i></div>

</div>

Стили CSS

/* Add This block */

#addthis-block {
    position: fixed;
    right: 0px;
    bottom: -122px;
    width: 390px;
    height: 120px;
    background-color: #fff;
    border: 1px solid #c5c5c5;
  -o-transition: bottom 0.3s;
  transition: bottom 0.3s ease;
  -webkit-transition: bottom 0.3s ease 0s;
}

.addthis-block-active {bottom: 0px !important;}
.addthis-block-deactive {bottom: -122px !important;}

#addthis-block img {
    height: 120px;
    width: 120px;
    border-radius: 0;
    float: left;
    opacity: 1;
}

#addthis-block .text {
    position: absolute;
    top: 15px;
    right: 20px;
    bottom: 15px;
    left: 140px;
    text-align: left;
    height: 105px;
}

#addthis-block .text span {
    float:left;
    width: 100%;
    margin: 0;
    padding: 0 0 3px;
    font-size: 12px;
    color: #666;
}

#addthis-block .text a {
    float:left;
    width: 100%;
    margin: 5px 0;
    padding: 0;
    line-height: 1.2em;
    font-size: 14px;
    height: 3pc;
    font-weight: 400;
    color: #464646;
}

#addthis-block .text a:hover {color: #000;}

.addthis-block-hide {
    position: absolute;
    right: 5px;
    cursor: pointer;
    display: none;
}

#addthis-block:hover > .addthis-block-hide {display: block !important;}

.addthis-block-show {
    position: absolute;
    right: -5px;
    top: -25px;
    cursor: pointer;
    display: none;
}

.addthis-block-hide .fa {
    padding: 5px 10px;
    font-size: 20px;
    margin: 0;
    color: #bfbfbf;
}

Скрипт тизера

Скрипт тизера основан на скрипте стрелки прокрутки вверх, с небольшими изменениями.

jQuery(function(){
	$("#addthis-block").removeAttr("href");
		if ($(window).scrollTop()>="1000") $("#addthis-block").addClass("addthis-block-active");
	$(window).scroll(function(){
		if ($(window).scrollTop()<="1000") $("#addthis-block").removeClass("addthis-block-active");
		else $("#addthis-block").addClass("addthis-block-active");
	});
 
	$('.addthis-block-hide').click(function() {
		$("#addthis-block").addClass("addthis-block-deactive");
	});
});	

Наполнение блока

Блок работает, но в него подгружается последняя запись, которая быстро примелькается. По хорошему нужно к нему прикрутить механизм похожие записи или запрос случайной записи.

Сделаем вывод в виде функции.

// Блок тизера
function siteteaser() {
	echo '<div id="addthis-block">';

	query_posts('orderby=rand&showposts=1&cat=376');
	if (have_posts()) : while (have_posts()) : the_post();
  
	echo '<a href="';
	echo the_permalink();
	echo '">';					

	if( has_post_thumbnail() ) 
	{the_post_thumbnail('thumbnail');} 
	else 
	{echo '<img src="'.get_template_directory_uri().'/images/img-default-square.jpg" />';}

	echo '</a>';
  
	echo '<div class="text"><span>Рекомендации для вас</span>';
  
	echo '<a href="'; 
	echo the_permalink(); 
	echo '">';
	$title = get_the_title();
	echo mb_strimwidth($title, 0, 100, "...");
	echo '</a>';
  
	echo '<span>Site.ru</span></div>';
  
	endwhile; endif;
	wp_reset_query();
  
	echo '<div class="addthis-block-hide"><i class="fa fa-caret-down" aria-hidden="true"></i></div></div>';
}
add_action( 'get_footer', 'siteteaser' );

Также можно сделать проверку и выводить данный блок например только в записях.

Поделиться в соц. сетях: