Добавляем теннисный мяч туда, где его не должно быть

Моя философия веб-разработки простая — не лезь в код своей CMS. Это важно для корректного обновления того же WordPress и купленной темы. 

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

Теннисный мячик потребовал пары часов размышлений, как сделать так, чтобы не лезть в код сайта и оставить его обновляемым.

Опишу решение (ради интереса):

1) у нас справа от поиска была иконка «Случайная запись». Странная функция, я решил ее заменить на теннисный мячик. Нам нужно заменить иконку и ссылку. 

2) замена на теннисный мяч происходит средствами каскадной таблицы стилей, на лету. Добавил код следующего вида:

.fa-random:before {  content: «🎾»;

}

Выглядит несложно, если не учитывать поиск UTF-8 знака мяча (это не картинка, а символ), а также дебаггинг страницы с помощью Google Chrome Console, чтобы узнать, какой именно элемент отвечает за случайную запись.

3) у нас есть мячик, но неправильная ссылка (на случайную запись). Мы не можем средствами каскадной таблицы стилей изменить ссылку, поэтому приходится использовать язык JavaScript. Мы не можем напрямую написать код (чтобы сохранить обновляемость), поэтому ставим плагин Simple CSS JavaScript для WordPress, и добавляем в его тело следующий код:

jQuery(document).ready(function( $ ){

  $(‘.random-post’).html(‘<a href=\»http://tennis-tver.ru/\» title=\»Теннисный клуб Румянцево\» target=\»_blank»><i class=\»fa fa-random\»></i></a>’);

});

Обратите внимание, символы кавычек экранированы, иначе работать не будет. 

Буквально это значит, что ждем пока страница загрузится полностью, ищем элемент рандом-пост и меняем его содержимое на лету.

Смотрим на результат: мячик на месте, ссылка правильная. Задача выполнена.