Как поставить иконку RSS в шапку блога

Как самому встроить кликабельную иконку в хедер блога…

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

Какоже прихожане возопят, типа, зачем оно это надо нам, православным? Поясним на примере, дорогие мои блоготворцы и блоготворини.

Как поставить иконку RSS в шапку блога

Предположим, други мои во блоготворении, что ваш любый вам блог выглядит так:

Так выглядит шаблон блога до изменения

И все бы ничего, славяне, но не нравится якоже блоготворцам, когда иконка RSS стоит в футере блога. Как то более привычно прихожанам искать кликабельную картинку RSS в хедере, согласитесь? Как у Блоготворца вы видите вверху слева понеже.

Давайте же, православные, посмотрим как самому изменить шаблон Вордпресса и сделать в шапке блога кликабельную картинку с иконкой RSS и ссылкой доброй на вашу ленту RSS. То бишь как вставить в картинку хедера иконку, которую полюбовно подберем зелененькую (см. ниже, православные).

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

Как найти картинку хедера

Первым делом поперву идеше мы, православные, в папку с картинками вашего шаблона, которая находится по адресу /wp-content/themes/ваша_тема/images как-то так. И искаше мы картинку, выведенную на хедере. Проще всего, други, найти ее визуально. Скачайте все файлы к себе на локальный компьютер и пролистайте их.

Мы найдем картинку. В нашем случае это окажется файл art-Header.jpg

Картинка в хедере

Сохраняем резервную копию файла у себя на компьютере.

Потом берем ваш любимый графический редактор и вставляем выбранную иконку RSS в картинку хедера. Теперь она выглядит вот так.

Картинка шапки блога с вставленной иконкой RSS

Закачиваем новую картинку art-Header.jpg обратно в папку images.

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

Как сделать хедер кликабельным

Откроем, братия и сестры мои, исходник любой страницы вашего сайта и найдем упоминание того, как выводится ваша картинка хедера. Вы увидите что-то типа такого:

<div clаss=”art-Hеаder“>

</div>

Понеже теперь нам други, пойти в папку /wp-content/themes/ваша_тема/ и найти там файл styles.css

Перво-наперво, ДО РЕДАКТИРОВАНИЯ, сохраняем резервную копию файла у себя на компьютере. Не устану повторять то, братия и сестры мои, и выделять то красным цветом.

Затем открывает тот файл стилей на редактирование в вашем любимом редакторе и ищем там найденный нами выше стиль art-Header, убеждаемся, что в теге стоит position: relative; и если нет, то вставляем оный. Будет оно нам выглядеть теперь вот так:

div.art-Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 888px;
height: 150px;
}

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

Теперь, православные, лепо нам будет вставить в файл стилей следующие строки:

#rss {
 position: absolute;
 bottom: 80px;
 right: 20px;
 }

Где, поясним, 80 пикселов будет расстояние от правого нижнего угла до нашей иконки по вертикали. А 20 пикселов – по горизонтали. Это мы можем выяснить точно позднее, опытным путем, когда кликабельное окошко появится в нашем хедере. Поиграв с этими двумя цифрами – вы можете опытным путем совместить иконку RSS и кликабельное окошко, описанное ниже.

Сохраняем файл styles.css

Как сделать шапку блога кликабельной

Теперь, православные, понеже мы аки заблаговременно определили стиль rss в файле стилей – ищем файл хедера вашего сайта на Вордпрессе. Сохраняем на локальный комп резервную копию.

После сего открываем файл на редактирование и вставляем следующие строки.

  <!– RSS ikonks start –>
<div id=”rss”>
<a target=”_blank” href=”http://адрес вашей RSS ленты“>
<img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/spacer.gif”
alt=”RSS” height=”50px” width=”50px” /></a>
</div>
<!– RSS ikonka end –>

Понеже аки пояснить тут якоже требуется – поясним, други.

1) Вставить надо адрес вашего RSS фида.
2) spacer.gif – крошечный графический файлик, который будет накладываться на иконку и, собственно, и будет кликабельным. Возможно, он уже есть в вашем шаблоне в папке /wp-content/themes/ваша_тема/images. Если нет – скачайте (правая кнопка -> Сохранить ссылку как…) и поместите его туда вручную.
3) 50х50 пикселов – это размеры иконки. Подберите размер на свое усмотрение.

Теперь осталось только сохранить файл хедера, перезагрузить страницу вашего сайта и посмотреть, совпадает ли кликабельное окошко (в нашем случае 50х50) и иконка RSS в хедере. Если не совпадает – поварируйте параметры в файле стилей (в нашем случае выше это было, как вы помните, други мои во блоготворении, 80 и 20 пикселей).

Отступы для сайла стилей

Вот и все, православные братия и сестры мои, творцы блогов и сайтов добрых. Наслаждаемся RSS иконкой в хедере и радуемся лучам солнца и свободы.