Загрузка контента по таймеру

На некоторых сайтах (и в особенности, предлагающих что-либо скачать), Вы наверняка встречали окошко с таймером, который отсчитывал секунды и предлагавший подождать чуть-чуть для получения заветной ссылки.

У такого функционала есть две стороны (как и у медали): позитивная - пользователь будет ждать, отведенное ему время (а куда он денется), накручивая таким образом поведенческие факторы (ПФ) и негативная - поисковые системы (ПС) не очень дружелюбны к такого рода махинациям со стороны вебмастера.

Оставим в стороне размышления о рисках, ведь в некоторых ситуациях такой функционал просто необходим. Например, для увеличения кликабельности контекстной рекламы на download-трафике.

Кстати, с помощью такого ухищрения можно показывать по таймеру не только ссылку, но и контент (текст, фотографию и т.д.), область применения, я думаю, вы придумаете самостоятельно. Я же покажу, как это реализовать.

Код, который открывает скрытый текст по таймеру

В реализации кода, который открывает невидимый элемент через определенное время, ничего сложного:

<script type="text/javascript">
timer_num = 45;//сколько секунд будет отсчитывать таймер
function timer_fc(){
if(timer_num>0){
$('#timer_num').text(timer_num);
timer_num--;
setTimeout("timer_fc()", 1000)
}else{
$('#timer_1').hide(); $('#timer_2').show();
}}
timer_fc();
</script>

Текст, который скрыт при открытии страницы, должен быть обрамлен в элемент с id="timer_2":

<div style="display:none" id="timer_2">
Контент, который откроется по завершении таймера
</div>

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

Как пример использования, рассмотрим внедрение описанного функционала на сайты под управлением WordPress.

Контент с обратным отсчетом времени на WordPress

Если вам необходимо сделать подгрузку некоего контента (ссылка, текст, фото и т.д.) по таймеру на WordPress сайте, достаточно добавить в файл functions.php (вашей текущей темы) следующий код:

<?php
add_action('wp_head', 'add_script_timer');
function add_script_timer() {
?>
<script type="text/javascript">
timer_num = 45;//сколько секунд показывать таймер
function timer_fc(){
if(timer_num>0){
$('#timer_num').text(timer_num);
timer_num--;
setTimeout("timer_fc()", 1000)
}else{
$('#timer_1').hide(); $('#timer_2').show();
}}
timer_fc();
</script>
<?php
}

//добавляем кнопку в редактор WordPress
add_action( 'admin_print_footer_scripts', 'add_timer_text' );
function add_timer_text() {
if ( wp_script_is('quicktags') ){
?>
<script type="text/javascript">
QTags.addButton( 'eg_timer', 'timer', '<span id="timer_1"><b>Ожидайте контент:</b><span id="timer_num" style="font-size: 36px;"></span> сек.</span><div style="display:none" id="timer_2">', '</div>', 'q', 'Ожидание контента с таймером', 111 );
</script>
<?php
}
}

Этот код добавит в шапку вашего сайта JavaScript код, необходимый для работы скрипта и кнопку "timer" в редактор WordPress сайта, с помощью которой, вы можете пометить любую текстовую область, которая будет скрыта вашим таймером (в режиме редактора "Текст" выделите мышкой необходимый текст или область текста и нажмите кнопку "timer").

Если вы вы все сделали правильно, то при сохранении и открытии записи в WordPress, в том месте, где должен быть помеченный вами текст, вы увидите примерно следующее:

Ожидайте контент: 45 сек.

Отрегулировать время ожидания скрытого контента пользователем, можно в строчке:

timer_num = 45;//сколько секунд показывать таймер

P.S. Если таймер не работает (не отсчитывает секунды), не забываем, что он работает на jquery. Подключить можно, например, так:

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>