«

»

Авг 18

Как настроить подвал сайта, footer.

Все предварительные изменения и правки внесены, блог запущен в индексацию и наполняется контентом. Но, осмотрев дизайн, создаётся впечатление, что чего-то нахватает. Возникает вопрос: как настроить подвал сайта ?

Как настроить подвал сайта

Попробуем подойти к этому вопросу более детально. Не хватает конечно же кнопок социальных сетей — добавим. В самом низу сайта пустое чёрное поле, footer, пустой. Надо бы в него внести сведения о себе любимом и о своей разработке данного блога — добавим. Нет ссылок на похожие статьи, или, как они в простонародии называются, рекомендательные ссылки на смежные статьи — добавим. Слоган сайта надо придумать. И как-то исправим это чёрно-серую, бесхозную башку сайта. Я не знаю, как это назвать, в таком отвратительном виде. Я, конечно,  не дизайнер, но то, что я вижу у себя на сайте, как: слоган и название сайта на сером поле без логотипа, печалит.

Начнём с самого быстрого и простого, как настроить подвал сайта, footer. Разберём его более детально. Как правило, он изменяется во Внешний вид – Виджеты. Заходим.

Как настроить подвал сайта

Sidebar – это наше правое или левое, в зависимости от настроек, меню.

Как настроить подвал сайта

Header – (заголовок) Может что перепутали в названии ?) Пробуем добавить туда обычный текст.

Как настроить подвал сайта

 

Ой!!! Не перепутали с названием, это точно. Зато мы теперь точно знаем, как нам дописать текст в шапку и прикрутить туда свой логотип. Что делать дальше? Наверно правильнее вернуться к ранней статье, где мы удалили к чертям подпись в Future самого разработчика ). Ну да, поспешили, зато удалили ссылку на буржуйский сайт. Но, нет ничего полезнее, чем пройти обратный путь, допустим вы не удаляли этой самой ссылки самостоятельно  и не читали мою статью про удаление вредоносных ссылок. Вы в замешательстве, у вас другой шаблон в отличии от моего. Что же тогда делать? Звать на помощь друзей из леса, Хромоножку, Нотепад++ и Годзиллу. Ещё проще найти ту злосчастную ссылку, что мы удалили в статье Удалить лишние ссылки с сайта WordPress, исправить её на необходимый нам текст и забыть как страшный сон. Для тех, кто хочет научиться это делать самостоятельно, продолжаем.

Открываем Chrome, наводим на  Footer, правой кнопкой меню «просмотреть код».

 

Как настроить подвал сайта

Долго искать не будем, выделяем div id=»footer-text и поиском ищем на нашем скаченном на ПК сайте.

Как настроить подвал сайта

 

Находим  footer.php.  Сравниваем показания Нотепад++ с тем, что показывает нам Хромоножка.

Как настроить подвал сайта

Похоже? Очень даже. Добавляем в разрез наш текст,  как обычный  html.

<p>Вставляем свой заветный текст</p>

<p>Можно даже в две строки</p>

Как настроить подвал сайта

 

Лицезреем наше детище.

Как настроить подвал сайта

Текст на месте, но промежуток между нашими строками огромен. Необходимо чуть подправить это расстояние. За него отвечает:

<div id=»footer-text» class=»site-info»>

Обращаемся к помощникам и ищем этот class=»site-info» . Однозначно, первым делом смотрим style.css  в нашем шаблоне. Открываем, находим сам стиль.

Как настроить подвал сайта

.site-footer .site-info {
float: left;
padding: 2.5em 0;

float: понятно- прижать текст влево.

padding: (набивка, прокладка) странное название. Предлагаю поставить 0 и проверить, что изменится.

Как настроить подвал сайта

Это просто толщина отступов. Какая печаль.

Как настроить подвал сайта

Предлагаю вернуть всё на месте, то есть 0 вернуть на 2.5. А в самом файле footer.php заменить class. Что нам это даст?

Во-первых, мы не меняем class, который может использоваться ещё в каком-то другом месте.
Во-вторых, у нас отступ такой огромный по всему сайту, то есть при наборе текста, нажимая Enter, один большой отступ по всему тексту. Скорее всего, ноги растут именно оттуда. Чтобы не менять основной стиль сайта, который, скорее всего, наложен на весь контент, создадим новый стиль и в нём сделаем маленький отступ, и прикрутим его в месть class=»site-info» . Что отвечает за это расстояние? Предположу, что это высота – height (высота), ищем его в теле файлов, открываем первый попавшийся файл и видим — line-height: 50%; почти похоже (высота линии) 😉

Добавляем свой стиль в файл стилей style.css . Назовём его .footer-indent , добавим только line-height: 5%;
Как настроить подвал сайта

.footer-indent {
line-height: 5%;
}

Зафутболиваем style.css на хостинг. И меняем в footer.php класс class=»site-info» на class=» footer-indent «

Как настроить подвал сайта

Заливаем footer.php на хостинг. Проверяем наше творение.

Как настроить подвал сайта

 

Отличная работа мистер ФИКС!

Понятно, что настройки можно варьировать, оставить старый стиль, изменить толщину отступов над строками тёмным и добавить новый стиль, сократить расстояние между строками. Можно запихать туда картинку ) Главное, мы научились искать и находить нужное нам место для вставки текста, обычными подручными средствами.

Удачи в ваших трудах. Теперь вы точно знаете как настроить подвал сайта.

Да прибудет с вами сила воли!

1 комментарий

  1. Алина

    Сколько же всяких мелочей всплывает, когда дело доходит до того, чтобы сделать свой сайт…Я вот раньше даже не задумывалась о том, что тот же футер – это отдельный элемент, который надо оформлять отдельно, пока не начала искать всякую информацию о сайтах.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *