Как сделать правильный обратный счетчик и появление контента?

Question

[nulledbox]

Много решений перебрал, но не нашел рабочего.

Имеется вордпресс, в полной новости в конце статьи необходим счетчик к примеру 10 секунд и появятся данные с поля Advanced Custom Fields PRO:

<?php the_field( 'link' ); ?>

Все варианты выбивают ошибку в консоле и не работает.
Тема Pluto 4.3.0
Скрин консоли прилагаю.


Спасибо.

Answer 1

[nulledbox]

Использовал это в файле single-content.php:

<script>
(function(d){
  var display = d.querySelector('#countdown .display') // меняющаяся цифра
	var timeLeft = parseInt(display.innerHTML) // оставшееся время
  
  var timer = setInterval(function(){
    if (--timeLeft >= 0) { // если таймер всё еще больше нуля
    	display.innerHTML = timeLeft // обновляем цифру
    } else {
    	d.querySelector('#countdown h1').style.display = 'none' // прячем теекст
      d.querySelector('#countdown button').style.display = 'block' // показываем кнопку
      clearInterval(timer) // удаляем таймер
    }
  }, 1000)  // таймер срабатывает каждые 1000 msec (1 sec)
})(document)
</script>

<div id="countdown">
  <h1>Ожидайте <span class="display">10</span> секунд</h1>
  <button style="display: none;">Bang!</button>
</div>

Comments

[Артем Золин]

Можете этот скрипт добавить через функцию wp_add_inline_script()

[nulledbox]

Артем Золин, не подскажешь решение готовое ?

Answer 2

[Николай Миронов]

Здравствуйте. jQuery запускается в WordPress в compatibility mode и $ не работает. Поэтому простое копирование решений из интернета часто не помогает. Судя по логу, это ваш случай.

Как обойти #1

jQuery(document).ready(function($){
  //Код из интернета с использованием jQuery
});

Как обойти #2
Обычно делаю проще и перед кодом с $ пишу следующую строчку
$ = jQuery;

Comments

[Николай Миронов]

Ну и на всякий случай -- простое решение задачи.
1) Выводим спрятанный контент сразу в шаблоне страницы
2) Прячем контент с помощью CSS
3) По таймауту добавляем скрытому блоку класс, который покажет контент

Пример: https://codepen.io/solidcreature/pen/PoGBmqm