Несмотря на понедельник, предлагаю заняться бестолковым делом 🙂

Если на YouTube ввести фразу “do the harlem shake” и нажать Enter, то можно увидеть пляску элементов под уже поднадоевшую мелодию из трендового видео-безумства. Окончательную идею реализовать что-то подобное для своего сайта, мне подкинул один из посетителей, который вбил эту фразу в поисковую строку на моем блоге (увидел через плагин Search Meter). Можете попробовать поискать, а под катом реализация.

harlem shake для сайта

Приступим.

  1. Во-первых, нужно найти js-скрипт и мелодию. Воспользуемся скриптом с сайта HSKmaker, который за нас уже успели вытащить из кода страницы.
<script src="http://files.time2hack.com/time2hack.harlem.shake.min.js" type="text/javascript"></script>

<div style=" height:0px; width:0px; overflow:hidden;">

<audio controls="controls" autoplay="autoplay" loop="loop">

<source src="http://files.time2hack.com/time2hack.harlem.shake.ogg" type="audio/ogg" />

</audio>

<script type="text/javascript">

ready(function () {

harlemShake();

});

</script>

</div>
  1. Теперь нам нужно чтобы WordPress реагировал на фразу “do the harlem shake” или какое-либо другое слово, это уж на ваше усмотрение.

Для этого откроем файл темы с отображением результатов поиска, обычно это search.php. Находим в коде:

<?php if (have_posts()) : ?>

И перед этим фрагментом вставляем код с Harlem Shake:

<?php if($_GET[&#8216;s&#8217;] == &#8216;do the harlem shake&#8217;) { ?>

<script src="http://files.time2hack.com/time2hack.harlem.shake.min.js" type="text/javascript"></script>

<div style=" height:0px; width:0px; overflow:hidden;">

<audio controls="controls" autoplay="autoplay" loop="loop">

<source src="http://files.time2hack.com/time2hack.harlem.shake.ogg" type="audio/ogg" />

</audio>

<script type="text/javascript">

ready(function () {

harlemShake();

});

</script>

</div>

<?php } ?>
  1. При необходимости очищаем кэш и проверяем 🙂

Как видите, создать “пасхальное яйцо” для WP-поиска очень даже просто.

harlem shake для сайта
Опубликовано

Похожие записи

Подробнее

ArtsLab

Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.

4gray artslab artslabinfo