Меню футера на WordPress | на HTML и CSS

Привет! В этом небольшом посте я рассажу как сделать меню футера (в footer.php) вашего сайта. Многие, уже авторитетные СЕО — шники рекомендуют продублировать главное меню блога в низу страницы. Делается это, как для лучшей перелинковки, так и для улучшения индексации вашего блога. Я с ними абсолютно согласен, и также это удобно для пользователей. Если оказался внизу страницы, не нужно возвращаться наверх, для того чтобы выбрать другой раздел.

Показываю на примере моего сайта.

Страницы моего сайта

Рубрики моего сайта

У меня на блоге есть сверху два меню, на одном находятся страницы, а на другом рубрики. Это у меня такой шаблон. Я хочу разместить эти два меню в нижней части сайта ( в подвале) в виде ссылок. Ничего сложного в этом нет, справится любой пользователь.

Как добавить меню футера на сайте!

Перед редактированием файлов сайта, обязательно делайте копию этих файлов, если вдруг что нибудь нужное удалите!

Для начала скопируйте файл footer.php на рабочий стол. Находится он в папке с темой вашего блога.Если вы пользуйтесь файловым менеджером FileZilla то путь к файлу такой (wp-content/themes/тема вашего сайта/footer.php). Или также можете это сделать через редактор в консоли управления (внешний вид, редактор).

Откройте файл с помощью Notepad++ и ищем место, куда хотим вставить меню футера. В моем случае она находится по центру самого верха футера, и в файле это выглядит вот так:

Ставим код навигации в footer

А вот так получилось на самом сайте! Мне кажется довольно неплохо.

Навигация моего сайта снизу

Что это за код, и что обозначают все эти непонятные символы в нем!?

В файле footer найдите место для отображения навигации, и вставьте этот код:

<a href="http://ваша страница.ru/">Название страницы</a> | <a href="http://ваша страница.ru/">Название страницы</a> | <a href="http://ваша страница.ru/">Название страницы</a>

Ссылку на страницу и ее название прописывайте свои, и как видите разделено это через слеш ( прямая палка) :)  Можно в код добавлять различные стили, делать отступы и менять шрифт. Да, и если у вас вылезли вместо названий страниц какие то каракули, то в файле footer.php зайдите в кодировки свеху в панели и выберите преобразовать в UTF-8 без BOM.

<p style="margin-top:10px" - отступ сверху на 10 пикселей;
<p style="margin-left:50px" - отступ слева на 50 пикселей;
<p style="margin-bottom:20px" - отступ снизу на 20 пикселей;
<p style="margin-right:5px" - отступ справа на 5 пикселей;
<p style font-size:14px; - размер шрифта;
<p style color:#fff; или <p style color:red; - цвет шрифта;
А можно все в одну строчку объединить только расставляя правильно все кавычки, тире и пробелы
<p style="margin-top:10px; margin-left:50px; margin-bottom:20px; margin-right:5px; font-size:14px; color:#fff">Ваш код с ссылками для навигации</p>
В конце кода закрываем </p>

По мере добавления страниц на вашем сайте, добавляйте в этот код новые ссылки вручную. Добавлять можно любое количество не только страницы но и рубрики или статьи.  Настраивайте и экспериментируйте! Я на сайте добавил страницу HTML-CSS-PHP, загляните и может возьмете что нибудь полезное для вас.

Как я уже говорил, у меня на блоге две навигации, и вторую с рубриками я также добавляю в меню футера (footer.php).

Я ее расположу над первой навигацией, мне так хочется. Для этого повторю почти все тоже самое, что делал с первой.

Страницы и рубрики моего сайта в footer

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

Ставим код для рубрик и страниц

Ничего сложного вообще нет, согласитесь! Что угодно можно сделать, на что горазда ваша фантазия, и конечно знание языка HTML.

Давайте попробуем еще сделать навигацию меню в виде колонок, возможно вам это будет интересно и решите у себя так сделать.

Вот такая колонка у меня получилась:

Нижняя навигация в виде колонки

Код, который выводит у меня такое меню:

Ставим код для колонки навигации

Вариантов создания такого меню масса! Можете использовать таблицу для такой навигации, можете еще чего придумать. Смысл добавления навигации в подвал сайта - перелинковка блога и улучшенная индексация.

Также писал ранее статью где участвовал файл footer.php при установке счетчика Liveinternet!

Изучайте язык HTML, CSS, PHP!

Если понравилась статья, можете подписаться на обновления блога и будете в курсе новых событий!