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

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

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

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

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

 

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

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

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

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

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

Как добавить меню в footer
Ставим код навигации в footer

 

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

Сделать меню в низу сайта
Навигация моего сайта снизу

 

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

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

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

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

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

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

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

 

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

Код страниц и рубрик для нижней навигации
Ставим код для рубрик и страниц

 

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

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

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

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

 

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

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

 

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

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

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

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

заказать сайт на wordpress

Комментарии 7 комментариев

  • «Использование любого материала со страниц блога запрещено» — как жалко, что машенники так часто проходят мимо этой фразы(((

    Спасибо за урок)

  • А что лучше, когда использование материалов запрещено или разрешено только с активной ссылкой на первоисточник? Как это влияет на блог, если влияет? Спасибо.

    • Лучше если копируют контент, то чтобы была обратная ссылка на источник! Если только что написанную статью скопируют и опубликуют у себя, то возможно что робот проиндексирует материал быстрее чем у вас, а после придёт к Вам на сайт и увидит эту же статью, тогда он будет считать первоисточником тот сайт! А это может плохо сказаться на продвижении сайта в выдаче! Поэтому и нужна ссылка на первоисточник при копировании материалов.

  • Воспользовался вашим советом, и у меня всё получилось. Спасибо за статью! Только я обратил внимание, что у вас в футере две ссылки на главную. На сколько я знаю, это не очень хорошо для блога. Вам желательно убрать ссылку с фразы «SEO Wordpess», и оставить её на «Главная».

    Хотя, это ваше личное дело. Успехов!

  • Привет Андрей! Рад, что все получилось )) По поводу двух ссылок на главную в подвале я знаю и ты прав, что это не очень хорошо, но если посмотреть исходный код, то там их вообще нет, они закрыты. Так что, все нормально ))

  • Ты их закрыл через GoTo или просто niondex?

    • Подгрузка футера с помощью Ajax ))

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

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

19 + 3 =