Рубрики

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

Петр Александров
Автор статьи Пётр Александров
38
Время прочтения: 5 мин.

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

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

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

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

Внимание!!!

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

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

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

маркированный список

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

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

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

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

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

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

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

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

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

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

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

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

Так же необходимо вычислить название класса для тела стать, а точнее для ссылки. На wpnew.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, закачали его на хостинг и убедились что сайт работает. Далее идем в админку сайта > Параметры > Настройки обсуждения и видим снизу нашу картинку. Выбираем ее, нажимаем сохранить и теперь на сайте у вас на «незаграватарившихся» комментаторах красуется нужный рисунок.

Послесловие

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

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

38 комментариев на «Урок 257: Как украсить сайт к празднику»
  1. tanichka
    http://tam-ara.ru/

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

  2. Элина
    https://philosoff.net/

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

  3. Андрей Долгов

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

    • Александр Красильный
      http://onlinemoneta.ru/

      Везет Вам со снегом, а на Украине у меня им даже не пахнет… 🙁

  4. Алексей
    http://prostoguitar.ru

    Да какой новый год? Конец света же

    • Александр Красильный
      http://onlinemoneta.ru/

      Конец света отменяется — блоггеры спасут мир! 🙂

    • Ирина

      В пророчествах о конце света не учтен один факт. Гай Юлий Цезарь в 45 г. до н.э. ввел високосный год, и их уже было 514. То есть, без одного лишнего дня через каждые четыре года, сегодня было бы 10 апреля 2014. А в Календаре Майя не учтены високосные года, значит, что технически конец света 21.12.2012 должен был наступить 16 месяцев назад.

      • Александр Красильный
        http://onlinemoneta.ru/

        Вот блин, где же Вы были раньше!? Мы вот взяли и конец света прозевали. Эх… 😉

      • Елена Егорова
        http://hobby-terra.ru

        Круто… пошла ожидающим конца света рассказывать 🙂

      • Алексей
        http://prostoguitar.ru

        Бабульки-соседки скупили всю соль, спички и свечки (почему то они все понимают фразу «конец света» буквально), так не хочется их разочаровывать))

  5. Александр Красильный
    http://onlinemoneta.ru/

    Спасибо за советы по украшению блога к Новому Году. Свой блог я уже украсил, изменив слегка дизайн сайта.

Добавить комментарий
Ваш адрес email не будет опубликован. Обязательные поля помечены
Нажав на кнопку «Отправить комментарий» вы принимаете соглашение на обработку персональных данных.
Подпишитесь на бесплатные уроки по e‑mail и получите книгу в подарок
Нажав на кнопку «Подписаться» вы принимаете соглашение на обработку персональных данных.
Книга по SEO