Други мои во светлом блоготворении,
мир вам и блогам вашим и хорошей им индексации. Сегодня понеже речь мы
поведем о том, как улучшить дизайн сайта и усовершенствовать шаблон
блога на Вордпрессе. А именно, други,
как сделать шапку блога кликабельной.
Какоже прихожане возопят, типа, зачем
оно это надо нам, православным? Поясним на примере, дорогие мои
блоготворцы и блоготворини.
Как поставить иконку RSS в шапку блога
Предположим, други мои во блоготворении, что ваш любый вам блог выглядит так:
Так выглядит шаблон блога до изменения
И все бы ничего, славяне, но не нравится
якоже блоготворцам, когда иконка RSS стоит в футере блога. Как то более
привычно прихожанам искать кликабельную картинку RSS в хедере,
согласитесь? Как у Блоготворца вы видите вверху слева понеже.
Давайте же, православные, посмотрим как самому изменить шаблон Вордпресса и сделать в шапке блога кликабельную картинку с иконкой RSS и ссылкой доброй на вашу ленту RSS. То бишь как вставить в картинку хедера иконку, которую полюбовно подберем зелененькую (см. ниже, православные).
Понадобятся нам, други, для того не
столько знания языков басурманских, сколько бесстрашие и умение
ориентироваться в чужом коде.
Как найти картинку хедера
Первым делом поперву идеше мы, православные, в папку с картинками вашего шаблона, которая находится по адресу /wp-content/themes/ваша_тема/images
как-то так. И искаше мы картинку, выведенную на хедере. Проще всего,
други, найти ее визуально. Скачайте все файлы к себе на локальный
компьютер и пролистайте их.
Мы найдем картинку. В нашем случае это окажется файл art-Header.jpg
Картинка в хедере
Сохраняем резервную копию файла у себя на компьютере.
Потом берем ваш любимый графический редактор и вставляем выбранную иконку RSS в картинку хедера. Теперь она выглядит вот так.
Картинка шапки блога с вставленной иконкой RSS
Закачиваем новую картинку art-Header.jpg обратно в папку images.
Полдела сделано, иконка видна на вашем блоге, но кликать по ней пока что прихожанам бесполезно. Надо сделать ее кликабельной.
Как сделать хедер кликабельным
Откроем, братия и сестры мои, исходник
любой страницы вашего сайта и найдем упоминание того, как выводится ваша
картинка хедера. Вы увидите что-то типа такого:
</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 иконкой в хедере и
радуемся лучам солнца и свободы.
Други мои во светлом блоготворении, мир вам и блогам вашим. Ныне Блоготворец начитает серию постов об экспериментах по ускорению загрузки сайта,
понеже загрузка оная дюже важна как прихожанам добрым для чтения, так и
поисковым роботам Гоши и Яши для оценки блоголепости блога. Как ускорить работу сайта?
Други мои во светлом 
Братья
и сестры мои блоготворцы, други во блоготворении, мир вам! Доколь
сегодняше пришло Рождество неправославное, чуждое нам и неведомое,
надумалось мне пост написать о том, как изменить шрифт на сайте, ибо этом занимался я не далее как вчерась. 
