Рубрика | Решения RSS-лента этой рубрики

[YouTube API] Как сделать, чтобы кнопка под видео появлялась плавно в определенное время?

Привет! Давно обещал в комментах разобраться с API YouTube плеера, и поделиться как сделать так, чтобы можно было разместить на странице (например, подписной) видео с Ютуба. И чтобы под ним кнопка или форма подписки появлялась на определенном моменте видео. И не просто по таймеру, который стартует с момента загрузки страницы, а по таймеру, который связан с видео. То есть, если видео стоит на паузе, то таймер не идет. Вот как раз решением этого вопроса я и поделюсь с вами в этой заметке.

Также эта заметка будет продолжением, моей предыдущей заметки на аналогичную тему, но касательно JW Player-а:(которая оказалась весьма популярной судя по статистике)

[JW Player скрипт] Как сделать, чтобы кнопка под видео появлялась через время? %)

Ну что, перейдем к решению.

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

Этот код встраивает ваше видео в указанное место вашей страницы динамическим образом (то есть, вы не вставляете код видео вручную <iframe src="...">). И это дает доступ к YouTube IFrame API, интерфейс, через который можно захватить управление плеером. Код отслеживает, когда плеер загрузился и при воспроизведении вешает таймер (интервал) с функцией на проверку текущего времени видео. Которая отображает вашу кнопку

<div id="player"></div>

<div id="button_wrap" style="display: none;">
	<a href="http://google.com/" id="button">ВПЕРЕД</a>
</div>

<script type="text/javascript">
var YOUR_TIME = 10; // Время видео, на котором должна появиться кнопка в секундах (если 2 минуты, то пишете 120)
var VIDEO_HEIGHT = 390; // Высота вашего видео
var VIDEO_WIDTH = 640; // Ширина вашего видео
var VIDEO_ID = 'nRlMzuhr5aI'; // ID вашего видео на YouTube, берется из ссылки на видео

var timer, player;

var tag = document.createElement('script');
var button = document.getElementById('button_wrap');

var time_current = 0;

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady()
{
	player = new YT.Player('player', {
		height: VIDEO_HEIGHT,
		width: VIDEO_WIDTH,
		videoId: VIDEO_ID,
		events: {
			'onReady': onPlayerReady,
			// 'onStateChange': onPlayerStateChange // расскомментируйте, если вам нужно автовоспроизведение
		}
	});
}

function onPlayerStateChange(event)
{
	if( event.data == YT.PlayerState.PLAYING )
	{
		timer = setInterval( checkTime, 400 );
	}
	else
	{	
		clearInterval( timer );
	}
}

function onPlayerReady(event)
{
	event.target.playVideo();
}

function checkTime()
{
	time_current = player.getCurrentTime().toString();

	time_current = time_current.substring( 0, time_current.indexOf('.') );

	if( parseInt( time_current ) >= parseInt( YOUR_TIME.toString() ) )
	{
		button.style.display = 'block'; // jQuery('#button_wrap').show().animate({'opacity':1}, 500); // для анимации, если есть jQuery

		clearInterval( timer );
	}
}
</script>

В этом коде есть 4 ключевых значения, которые вам захочется изменить. Это ширина VIDEO_WIDTH и высота вашего плеера VIDEO_HEIGHT, ID уникальный код вашего видео VIDEO_ID (который можно взять из ссылки на ваше видео на YouTube) и конечно время в секундах, когда вы хотите, чтобы ваша кнопка появлялась на странице YOUR_TIME. Вы можете найти эти четыре переменные в начале кода на строчках с 8 до 11 и указать там ваши значения.

Также уточню, что код в первой строке обозначает место, куда будет вставлено ваше видео. Тег div#player будет заменен на YouTube iframe. А div#button_wrap на строках 3 и 5 это обертка, в которую на 4 строке обернута ваша кнопка.

Если у вас что-то не будет получаться, пожалуйста, пишите в комментариях ниже, и я вам попробую помочь.

Хорошего времени суток!

Изменить css стили в админке wordpress (например, скрыть часть меню)

Привет!

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

Как изменить меню в админке WordPress

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

Есть 2 глобальных способа изменения интерфейса админки Вордпресс, и у них есть свои плюсы и минусы.

Первый способ (как изменить css в админке wordpress)

Он осуществляется через вставку вашего css через правильное событие (action /  filter hook, экшн или фильтр хук) в формате плагина или в файл functions.php вашей темы.

Плюсы:

  • вы можете скрыть любые элементы
  • вы можете изменить стили элементов
  • этот способ проще в осуществлении и понимании

Минусы:

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

Как это делается?

Вам понадобится следующий код...

function gb_custom_css_admin()
{
 // чтобы отображать эти стили только рядовым пользователям, раскомментируйте строку ниже и строку в конце кода
 // можно также изменить user на admin, чтобы отображать код наоборот только администраторам
 // if( current_user_can( 'user' ) ):

 echo PHP_EOL . '<style type="text/css">
 /* Ваши любые стили ниже */
  
  /* Например, скрыть пункт меню "Консоль" */
  #menu-dashboard {
   display: none;
  }

 /* Ваши любые стиле выше */
</style>' . PHP_EOL;

 // endif;
}
add_action('admin_head', 'gb_custom_css_admin');

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

Чтобы скрыть любой элемент, нам нужно:

  • открыть страницу, где он присутствует
  • правой кнопкой (в браузере Chrome) кликнуть по нужному элементу и выбрать в появившемся меню пункт "Проверить элемент" (или открыть "инспектор" в любом другом браузере)
  • найти какой-то уникальный (неповторяющийся) идентификатор (обычно это id, а иногда class) для этого элемента и скопировать его
  • в нашем коде выше изменить #menu-dashboard на ваш найденный #id или .class
  • сохранить изменения

Верстка вордпресса очень продумана и подготовлена к расширению, поэтому вы найдете у элементов интерфейса множество разных классов и правильных id.

Например, мы может пробежаться по id в основном меню: Записи - #menu-posts, Медиафайлы - #menu-media, Страницы - #menu-pages и так далее. Или, еще пример, id знакомой вам надписи "Привет, (ваше имя)" в правом верхнем углу - #wp-admin-bar-my-account.

Таким образом вы можете скрыть или изменить любые стили практически любого элемента в админке вордпресс.

Второй способ (редактирование админки WordPress)

Второй способ предполагает активное использование документации WordPress для того, чтобы редактировать разные элементы интерфейса. Мы ищем различные события, к которым можно привязать свои функции, и с помощью PHP кода творим различные изменения в админке.

Плюсы:

  • вы можете менять названия разделов и подпунктов меню и многих других элементов
  • вы можете менять порядок разделов меню
  • вы можете блокировать доступ к разным разделам админ-панели WordPress

Минусы:

  • этот способ требует вложения времени и умения искать нужные события (action и filter) в документации wordpress, на форумах и блогах разработчиков

Как его использовать?

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

В этой заметке опишу пару примеров, чтобы вы могли представить о чем идет речь.

Вот этот код меняет название раздела Записи и его подразделов:

function gb_post_menu_labels()
{
 global $menu;
 global $submenu;
 
 $menu[5][0] = 'Контакты';
 $submenu['edit.php'][5][0] = 'Контакты';
 $submenu['edit.php'][10][0] = 'Добавить контакт';
 
 // изменить имя подраздела Записи - Рубрики
 $submenu['edit.php'][15][0] = 'Категории';

 // изменить имя подраздела Записи - Метки
 $submenu['edit.php'][16][0] = 'Свойства';
}
add_action( 'admin_menu', 'gb_post_menu_labels' );

А вот этот код, меняет различные названия элементов внутри раздела "Записи". То есть заголовок, кнопки, ссылки и так далее. Можете проверить у себя, вставить его в functions.php вашей темы.

function gb_post_submenu_labels()
{
 global $wp_post_types;
 
 $labels = &$wp_post_types['post']->labels;
 $labels->name = 'Контакты';
 $labels->singular_name = 'Контакт';
 $labels->add_new = 'Добавить новый';
 $labels->add_new_item = 'Добавить новый контакт';
 $labels->edit_item = 'Редактировать контакт';
 $labels->new_item = 'Контакт';
 $labels->view_item = 'Просмотреть контакт';
 $labels->search_items = 'Искать контакты';
 $labels->not_found = 'Контактов нет';
 $labels->not_found_in_trash = 'Контактов в корзине нет';
}
add_action( 'init', 'gb_post_submenu_labels' );

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

Богдан