Урок 257: Как украсить сайт к празднику

Данный статья является гостевой и подготовлена Виталием, автором сайта mojwp.ru. Хотите так же написать гостевой пост – смотрите страницу Контакты на WPnew.ru

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

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

Украшать мы будем без применения плагинов, а воспользуемся небольшой вставкой кода и правкой файла стилей сайта (style.css, css.css или другое название).

Внимание!!!

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

1. Изменяем маркированный список

Если не знаете, что такое маркированный список, то велком в справочник http://htmlbook.ru/html/ul. Кто пишет статьи на сайт при помощи закладки “Визуально”, то это такая кнопка:

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

На reclampa.ru маркированный список отображается таким образом:

• пункт 1
• пункт 2
• пункт 3

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

Для задуманного нам понадобится помощь бесплатного дополнения к браузерам Firefox или Chrome под названием Firebug (https://getfirebug.com/). Как им пользоваться уже рассказывалось ранее https://reclampa.ru/udobnaya-rabota/firebug-for-firefox.html. Так же можете глянуть видео, где наглядно показано как работать с этим дополнением к браузеру (вычислим как сделан маркированный список на reclampa.ru):

Итак. Нашли в какой строке файла стиля у нас стоит атрибут list-style (в правом нижнем окошке Firebug пишет номер строки). Теперь заменяем его параметры на блокирующие:

было list-style: square inside none; стало list-style: none inside none;

В данном примере square обозначал черный квадрат. Есть и другие параметры (смотрим http://htmlbook.ru/html/li/type).

После блокировки нужно прописать путь до нашей картинки. Для этого нужно в файле стилей добавить новую строку со следующими параметрами:

.hentry-content ul li  {background: url("images/ul-li.png") no-repeat scroll 0 7px transparent; padding-left: 14px;}

Здесь показано на примере верстки шаблона reclampa.ru. Начало .hentry-content ul мы взяли с предыдущего пункта и добавили li, который дает понять браузеру, что далее нужно отображать картинку для каждого пункта в маркированном списке.

В параметре background мы указали путь к картинке (в данном случае она лежит в папке шаблона images). Остальные параметры скопируйте. Цифра 7 показывает вертикальный отступ картинки. Цифра 0 – горизонтальный отступ. Меняйте их, пока не найдете нужно вам значение (Firebug в помощь)

Так же не забудем о padding, который означает здесь отступ текста от картинки. Запоминайте как описываются отступы в пикселях:

padding: 1px 2px 3px 4px; - здесь соответственно: сверху справа снизу слева;

Если цифры одинаковые, то можно написать как в примере padding:14px;.

2. Меняем стиль курсора на произвольный

Теперь заменим стандартную “руку” курсора, которая появляется при наведении на ссылку, на любой другой рисунок (елку, конфету, Деда Мороза…). Посетителям сайта понравится подобная штука.

Так же необходимо вычислить название класса для тела стать, а точнее для ссылки. На reclampa.ru открываем FireBug, подводим его на любую ссылку в статье и смотрим справа класс – он будет .hentry-content a (непосредственно класс hentry-content, буква a – тег ссылки, для которой мы и будем делать).

В файле стилей прямо под искомой строкой прописано .hentry-content a:hover. В данном случае hover обозначает, что следующие параметры будут работать, если курсор наведен на ссылку. Это именно то, что мы ищем. Добавляем в эту строку с hover к уже существующим параметрам:

cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;

Здесь мы указываем путь до картинки 1, через запятую до картинки 2, и в конце говорим ставить курсор по умолчанию. Все это делается для того, если вдруг не обработается курсор №1 (утеряется на сервере, браузер не поймет), то подгрузится второй. Если и второй не получится загрузить, то появится по-умолчанию. Чуть подробнее об этом http://mojwp.ru/cursor-css.html

3. Долой Человека-загадку

Если у вас на блоге кто-то оставляет комментарий, и этот человек не зарегистрирован в сервисе Gravatar.com, то вместо красивой персональной аватарки появится Человек-загадка, либо некрасивый “покемон”. Давайте сделаем на этот случай свою картинку.

Раз уж украшаем сайт к празднику, то и подберите тематичную картинку размером 64*64 px (в помощь фотошоп или любой другой графический редактор). Закачайте ее к себе на хостинг (обычно подобное размещают в папке images, которую найдете в шаблоне).

Далее необходимо сделать небольшую вставку кода в файл functions.php, который найдете у себя в папке шаблона сайта. Открываем его, листаем в самый конец и, перед закрывающим символом ?> вставляем следующее:

function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/prazdnik.gif';
$avatar_defaults[$myavatar] = "Праздничная аватарка";
return $avatar_defaults;
}

Немного пояснений:

• get_bloginfo(‘template_directory’) . ‘/images/prazdnik.gif’ – путь до картинки (в данном случае она в папке images шаблона);
• Праздничная аватарка – произвольное название.

Сохранили файл functions.php, закачали его на хостинг и убедились что сайт работает. Далее идем в админку сайта > Параметры > Настройки обсуждения и видим снизу нашу картинку. Выбираем ее, нажимаем сохранить и теперь на сайте у вас на “незаграватарившихся” комментаторах красуется нужный рисунок.

Послесловие

На сегодня закончили. Пробуйте, только не забывайте делать резервные копии файлов на всякий случай.

Если есть идеи как украсить сайт, но не владеете навыками, чтобы подобное реализовать – пишите в комментариях к данной статье и попробуем решить “проблему”.