Виртуальная акция “Георгиевская ленточка”

Всем привет! В сегодняшней статье я расскажу вам как добавить ленту на сайт. Совсем скоро, наступит один из самых главных праздников – 9 мая “День Победы”. Уже традиционно с 20-ых чисел апреля стартовала акция “Георгиевская ленточка” в рамках которой, всем желающим раздают георгиевские ленты – символ победы. Вот и я и решил выразить свою благодарность и солидарность ветеранам победителям, и сказать свое маленькое “спасибо!”, всем ветеранам нашей страны – добавить георгиевскую ленту на сайт.

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

Итак, ну а теперь давайте ближе к делу. Добавлять ленту на сайт будем при помощи кода, т.е. без использования плагинов. И этому есть 2 причины:

• каждый плагин – это дополнительная нагрузка на сайт;
• при помощи кода, вы сможете добавить на свой сайт, не только георгиевскую ленточку, но и любую другую ленточку, т.е. метод универсальный и подойдет для различных целей.

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

Но в данной статье, я рассмотрю несколько вариантов расположения ленты:

• в левом верхнем углу;
• в правом верхнем углу;
• с фиксацией(плавающая лента).

Ну и конечно же, для того чтобы добавить ленту на сайт, нам потребуется и само изображение ленты – рисуем или ищем подходящую вам ленту. Я воспользуюсь следующим изображением:

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

Далее открываем файл стилей вашей темы: /wp-content/themes/имя_вашей_темы/style.css; и в самый конец файла добавляем следующий код:

Не забудьте изменить название файла и изменить размеры файла(отредактировать поля width и height) при необходимости. Чтобы узнать какого размера выбранное вами изображение, достаточно перейти в каталог с файлом и навести курсор мыши на интересующий вас файл и в появившемся окне вы увидите размеры файла:

В данной строчке “Размеры: 300 х 200″; первое значение – это ширина изображения; а второе его высота, т.е.

width:300px;

height:200px;

По завершению сохраняем все изменения сделанные в файле style.css и загружаем его на хостинг, с заменой предыдущего файла. Но не спешите открывать страницы своего сайта и смотреть как выглядит ваша лента, мы еще не все сделали. Открываем файл header.php используемой вами темы wordpress и сразу после html-тега body вставляем вывод нашей ленты:

Наша лента выводится при помощи div элемента: <div id=’lenta’></div>. Сохраняем файл header.php и загружаем его на хостинг. Ну вот теперь, вы можете переходить и любоваться своей лентой. Вот, что получилось у меня:

Так ну а теперь, давайте я расскажу вам как зафиксировать ленту на одном месте, т.е. сделать так, чтобы она передвигалась вместе с прокруткой страницы сайта. Для этого, достаточно слегка подправить файл style.css вашей темы, изменить одно поле position с absolute на fixed, т.е. весь код стилей ленты будет выглядеть следующим образом:

Ну а для того, чтобы лента располагалась не с левого края, а с правого, достаточно поменять свойство left: 0px; на right: 0px; в итоге код стилей ленты ориентированной на правую сторону будет выглядеть так:

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

Ну и на этом пожалуй на сегодня всё! Теперь вы знаете как добавить ленту на сайт, и не важно, что это будет за лента, георгиевская или же какая-либо еще. Спасибо всем за внимание, до новых встреч