Как сделать футер в wordpress

Обновлено: 03.07.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.

Добавление темы

Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.jpg.

Предварительный осмотр

Структура страниц

Большинство руководств по созданию тем для WordPress ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на WordPress в рамках предоставленных макетов.

Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.

После добавления, список страниц должен выглядеть вот так:

Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.

Header.php и Footer.php

Шапка в терминологии WordPress, это не только визуальная шапка на макете сайта. По сути, она содержит весь общий код, который встречается в начале всех страниц сайта. Давайте создадим файл header.php в папке нашего шаблона и наполним его содержимым.

Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:

В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.

Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.

Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.

Шаблон страницы

Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:

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

Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.jpg и images /h1-bg.jpg. Далее добавьте немного базовых стилей в файл style.css:

В результате должна получиться вот такая картина:

Логотип

После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.jpg. В шаблон шапки, в файле header.php вставьте разметку для логотипа:

Форма поиска

WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:

А в файл стилей запишите стили для формы:

Всё, что осталось сделать – это подключить searchform.php внутри header.php.

Добавить навигацию на страницу можно разными способами, например через функцию wp_list_pages, но более современным способом будет добавление через админку. По умолчанию функционал добавления меню не активирован, для того, чтобы это сделать, добавьте в файл темы functions.php следующий код:

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

После этого меню уже появится на страницах но без стилей. Стилизуем его:

Футер

Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

images/footer-logo.jpg – логотип футера
images/social.jpg – спрайты больших иконок
images/social-small.jpg – спрайты маленьких иконок

Далее делаем вёрстку в файле footer.php:

И прописываем стили в style.css:

В итоге главная страница сайта должна выглядеть вот так:

Главная страница

Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.

WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.

Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:

Он отличается от кода page.php только тем, что в нем нет заголовка страницы.

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

Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:

home-1.jpg
home-2.jpg
home-3.jpg
home-4.jpg
home-5.jpg
clients-1.jpg
clients-2.jpg
clients-3.jpg
clients-4.jpg
clients-5.jpg
clients-6.jpg
clients-7.jpg

Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:

Теперь осталось стилизовать данный код.

Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:

После этого, главная страница должна отобразиться правильно.

Сайдбар

Теперь, когда главная страница готова, давайте вернемся к шаблону внутренних страниц и добавим в него сайдбар.

Для этого создайте файл sidebar.php и поместите в него следующий код:

Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.

После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:

Далее нам нужно добавить стили для вёрстки:

Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.

Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:

about-1.jpg
about-2.jpg
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

Далее перейдите в редактирование страницы в панели администратора и добавьте код:

И стили в style.css:

Шаблон поста

После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:

Этот шаблон аналогичен предыдущим шаблонам с той лишь разницей, что здесь мы сначала отображаем контент поста, а затем комментарии к нему.

В самом начале, когда мы создавали шаблон шапки мы добавили в него поиск, однако страницы для отображения результатов поиска у нас еще нет. Создайте в папке темы файл search.php и добавьте в него содержимое:

От других шаблонов этот отличается тем, что мы выводим заголовок с текстом поиска, а затем список результатов поиска.

В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.

Заключение

На этом создание шаблона WordPress закончено. Готовый проект можно скачать здесь.

Что такое нижний колонтитул WordPress? Как это изменить? Какова цель нижнего колонтитула? Вы можете редактировать нижний колонтитул? Чтобы найти ответ на эти вопросы, читайте ниже.

Что такое WordPress footer?

При разработке шаблона WordPress раздел нижнего колонтитула обычно находится в footer.php, в некоторых шаблонах WordPress раздел нижнего колонтитула может быть доступен с помощью виджета. Нижний колонтитул, скорее всего, останется прежним и не сильно изменится. Кроме того, ссылки, которые вы используете в нижнем колонтитуле, являются общими и ни к чему не привязаны. С развитием HTML5 нижнему и верхнему колонтитулам уделяется больше внимания, чем раньше.

Размечая страницы на основе HTML5, вы можете использовать нижний колонтитул на каждой странице вашего веб-сайта. Это означает, что некоторые из ваших веб-страниц могут иметь разное количество нижнего и верхнего колонтитула.

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

Рекомендуется не вносить никаких изменений в этот файл напрямую, а следовать одному из следующих способов:

Создайте дочернюю тему и внесите в нее изменения.
Убедитесь, что вы полностью создали резервную копию своих файлов, прежде чем вносить какие-либо изменения в важные файлы.
Вы можете просто добавить необходимый код в файл footer.php, не удаляя существующий код.

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

Например, в теме Publisher параметр нижнего колонтитула имеет множество параметров. Эта тема позволяет вносить изменения в нижний колонтитул без необходимости добавлять какие-либо плагины или код в файлы.

Читайте также: