Привлечение внимания пользователей

Пришло время оставить позади отрывочные фрагменты кода и приступить к работе! Возвращаясь в созданный нами «гипотетический мир», представим себе, что предыдущие клиенты восторженно разрекламировали наши jQuery решения остальным партнерам, многим из которых также требуется помощь с WordPress сайтами. Давайте посмотрим, что мы можем для них сделать. Для начала мы реализуем проект, который позволит освежить прилепленные записи с помощью jQuery анимации.

Проект: Анимация предупреждающих прилепленных записей

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

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

Однако, несмотря на то, что родители детей постоянно проверяли сайт, работники организации нередко сталкивались с различными недоразумениями. Люди утверждали, что проверяли сайт, однако никаких заключительных предупреждений не видели. Несмотря на то, что сообщения были сделаны прилепленными, пользователи не обращали на них внимание, поскольку они были похожи на остальной контент.

Естественно, вы вызвались помочь этой организации (тем более, что работа была вам порекомендована клиентом, который хорошо платит за свои проекты). Помогает еще и то, что это относительно простая задача. Для начала, вы можете просто добавить несколько стилей к классу .sticky, чтобы выделить прилепленные записи на фоне общего контента.

Чтобы привлечь внимание посетителей к важным записям, можно использовать соответствующую иконку. Скачаем иконку по следующей ссылке: http://commons.wikimedia.org/wiki/File:Nuvola_apps_important.svg.

Откроем загруженный SVG файл в InkScape, изменим его размер до 48 пикселей в ширину, после чего сохраним файл в формате .png (я добавил к теням небольшую размытость). Назовем файл sticky-alert.png.

Теперь загрузим наш png файл в папку с изображениями темы и добавим к style.css стили для представления класса .sticky (если такой класс уже существует, объявлять стили необходимо после него).

...
/*изменяем фон .sticky */
.home .sticky { background-color: #ffff9c;}
/*добавляем изображение к entry-content div внутри прилепленной записи*/
.home .sticky .entry-content{ 
  background: url(images/sticky-alert.png) no-repeat 0 20px; }
/*устанавливаем отступ слева для параграфов и списков*/
.home .sticky .entry-content p,
  .sticky .entry-content ul{margin-left: 60px;}
... 

На следующем скриншоте можно увидеть результат нашей работы:

Этого более чем достаточно. Теперь любой посетитель сайта увидит предупреждение. Однако, для достижения более сильного эффекта, вы всегда можете зарегистрировать jQuery и плагин Color, который поставляется вместе с WordPress, подключить страницу custom-jquery.js к файлу header.php и разместить на ней следующие строки кода:

jQuery(function(){
     jQuery('.home .sticky')
      .animate({'backgroundColor':'#ff6600'}, 'slow')
      .animate({'backgroundColor':'#ffff99'}, 'slow')
      .animate({'backgroundColor':'#ff6600'}, 'slow')
      .animate({'backgroundColor':'#ffff99'}, 'slow');
}); 

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

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