Как сделать footer и header в отдельных файлах

Обновлено: 03.07.2024

как создать сайт на wordpress, настроить и оптимизировать wordpress

Приступим к созданию новой шапки.

Допустим, что вы уже создали индивидуальный шаблон для конкретной страницы, если нет, то причитайте мою статью:

В вышеуказанной статье я рассказывал как создать шаблон с именем moishablon.php. Вот с ним и продолжим работать.

Данная инструкция состоит из 5 шагов.

Шаг 1. Подключаем в индивидуальном шаблоне moishablon.php другой файл шапки.

Открываем его в редакторе кода, для этого заходим в панель управления вашим сайтом, в левом меню выбираем пункт Внешний вид, и далее подпункт Редактор, справа в списке шаблонов ищем наш индивидуальный шаблон moishablon.php и выбираем его.

В коде находим следующую строчку

Данной заменой мы подключаем не header.php, а свой отдельный шаблон для шапки с именем moiheader.php. Соответственно нам нужно его создать.

Шаг 2. Создаем шаблон moiheader.php.

Для этого копируем файл header.php с текущей темы вашего сайта, находим в его коде следующую строчку:

Данной строчкой мы поменяли блок header на блок headernew.

Так как путь к фоновому изображение в моей теме прописывается в файле стилей style.css в блоке header.

То есть, чтобы сменить изображение шапки, мы просто создадим новый стиль отображения для нашего нового блока headernew.

Шаг 3. Создаем стиль оформления для нового блока headernew.

Открываем в панели управления Редактор кода, для этого в левом меню выбираем пункт Внешний вид, далее подпункт Редактор, выбираем в нем справа в списке шаблонов файл style.css (Список стилей).

В нем ищем стиль оформления для блока header и копируем его, далее вставляем его в конце файла style.css, меняем его название с header на headernew.

В моей теме в файле style.css стиль оформления блока header выглядел так:

Далее я скопировал его и вставил в самый конец и переименовал, вот так у меня получилось:

Как видите я поменял также название самой картинки шапки, об этом в шаге 4.

Шаг 4. Создаем новую картинку для нашей шапки.

Скачиваем картинку вашей шапки и редактируем ее или же создаем новую, но с тем же разрешение.

После того как вы изменили или создали новое изображение в графическом редакторе (ну например Adobe Photoshop) сохраните его под новым именем (старое имя картинки шапки у меня было header-bg1.jpg, а новое стало header-bg.jpg), закачайте в текущую тему вашего сайта и укажите путь до него в файле style.css для блока headernew.

Шаг 5. Подключаем наш индивидуальный шаблон к нужной страничке.

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

По аналогии можно сменить картинку в подвале (footer) или фоновое изображение в сайдбаре (sidebar).

PS: Иногда в коде стилей (файл style.php) вместо фонового изображения стоит просто цвет:

Тогда вам нужно убрать параметр color и поставить вместо него background.

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

В некоторых темах, путь к изображения может прописываться не через стили (файл style.css), а непосредственно в шаблоне, для этого вам достаточно скопировать данный шаблон, переименовать его, поменять в нем путь к изображению и подключить его к индивидуальному шаблону нужной странички.

Как видите нюансов очень много и зависит все от структуры темы, но в большинстве тем данный метод срабатывает.

PS:
Ответ на вопрос Юлии:
Юля,
1. создайте шаблон для шапки (для примера назову его 111.php – название связанно с последней моей статьей) на основе файла header.php и удалите в нем вывод всего, что не нужно, вот например так:

2. Я так понимаю, вы используете шаблон без сайдбара, который уже есть в теме Twenty Twelve, давайте же тогда его немного подкорректируем (уберем в нем вывод стандартной шапки и заменим на вывод нашей шапки – файл 111.php)

Для этого входим в панели управления, в левом меню, в пункт “Внешний вид” – “Редактор” и справа в списке шаблонов выбираем шаблон “page-templates/full-width.php”, открываем его и заменяем строчку:

Индивидуальный шаблон: каждой страничке своя шапка : 20 комментариев

Юля, ответ на ваш вопрос написал в конце данной статьи в PS.

Константин, большущее спасибо! Все получилось. А вы знаете еще, как сделать так, что бы такие страницы на главной не высвечивались,где список всех страниц?

Оксана, да файл шапки (в данном примере moiheader.php) тоже нужно закачать в папку с текущей темой сайта.

Оксана, в самый конец файла style.css.

*/
Вставлять код между скобкой и */ или вообще после */

Все получилось, все работает, но шапки теперь вообще никакой нет. У меня тема F2 и шапка в ней грузится прямо из админ-панели. Но как загрузить сразу две шапки, да еще чтобы они отображались в разных шаблонах, я совсем пока не соображаю. Загрузила картинку и на сервер и в медиафайлы, прописывала оба пути, но реакции ноль. В этой теме такой фокус не срабатывает.

Здравствуйте, Константин! Я хочу сменить для определённой страницы не всю шапку, а только её часть (шапка состоит из трёх картинок, а я хочу сменить только одну из них). Не подскажете, как это можно сделать?
С уважением, Александр.

Довольно часто при создании реального сайта на PHP возникает необходимость использования одного и того же участка кода (сценария), но на разных web-страницах (файлах). Для реализации такой задачи использует оператор: include (). Давайте разберем подробнее работу оператора include().

В одной из прошлых статей: Чем отличается Статический сайт от Динамического сайта мы уже говорили, что каждая из web-страниц динамический сайт собирается как бы из отдельных кусочков (блоков).

В такие блоки, а точнее в отдельные файлы можно вынести часто повторяющиеся участки кода. Рассмотрим упрощенную схему (рисунок 1) web-страницы php-сайта:

Рисунок 1

На рисунке 1 вся web-страница, разбита на отдельные блоки (файлы): header . php (шапка), footer . php (подвал), menu.php (меню), content.php (основное содержание web-страницы). Это и есть повторяющиеся части web-страницы, код которых можно вынести в отдельные файлы.

Как практически реализовать такую конструкцию? Один из способ реализации задачи с помощью оператора include(). Синтаксис инструкции include представлен в Листинге 1.

Листинг 1.

В нужном месте web-страницы (в данном случае на месте шапки сайта) указываем код Листинга 1. А сесь код, который отностится к шапке сайта, выностится в отдельный файл header.php .

В данном случае файл header.php лежит в корневой папке сайта, но обычно создается отдельная папка, например blocks, куда выносятся все аналогичные файлы, подключаемые с помощью оператора include(). Но теперь уже путь до файла header.php будет выглядеть вот так: blocks/header.php смотрите Листинг 2:

Листинг 2.

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

Что же касается основное содержание web-страницы (файл content.php ), то обычно эту информацию размещают в базе данных (БД), но об этом мы поговорим в одном из следующих уроков.

Упрощенная схема построения web-страницы рисунка 1, представлен в Листинге 3.

Листинг 3.

<?php include ("blocks/header.php"); ?>

<?php include ("blocks/menu.php"); ?>

<?php (content.php); ?>

<?php include ("blocks/footer.php"); ?>

Мы рассмотрели упрощенную блок-схему динамической web-страницы сайта. На практике таких вставой может быть сколько угодно. А в выносных файлах, подключаемых с помощью оператора include(), может находится все что угодно: и небольшие вставки кода в 1 - 2 строчки и целые скрипты содержащие несколько страниц кода.

Когда интерпритатор PHP на сервере встречает в коде оператор include, он обращается к указанному файлу, обрабатывает его (выполняет все что написано в выносном файле), подставляет результаты в основную web-страницу и идет дальше выполнять программу.

Всего Вам доброго.

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

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): Виктор
Дата: 2012-10-18

Комментарии добавил(а): АндрейК
Дата: 2012-10-17

ВИКТОРУ. По большому счету используя оператор <?php include(); ?> можно подставить любой файл, в том числе и footer.html, т.е. с расширением .html. Но здесь нужно следить, чтобы подставляемый код вписывался в существующий код web-страницы, ведь мы по сути дела добавляем в исходный файл дополнительную инструкцию (сценарий/программу). На практике чаще всего сначала пишется код исходной web-страницы, а затем нужные части (блоки) кода просто вырезают и выносят в другой файл. В таком варианте лучше использовать файл с расширение .php, т.е. footer.php

Комментарии добавил(а): Курмангалий
Дата: 2012-10-16

Я солидарен со всеми,что изложено всё отлично.Много полезной информации.Спасибо всего хорошего.

Комментарии добавил(а): Виктор
Дата: 2012-10-16

Комментарии добавил(а): Галина
Дата: 2012-10-16

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

Комментарии добавил(а): Александр
Дата: 2012-10-14

Доброго времени суток Андрей! хороший подход к изучению php? но это моё мнение, я думаю что вам над записать диск, или книгу по PHP. вы зарекомендовали уже себя с хорошей стороны! Что я вам могу пожелать только успехов в нашей не лёгкой работе. С уважением Александр.

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

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

Теперь же рассмотрим способы подключения файлов подробнее:

Использование include и require

Принципиальной разницы между этими двумя инструкциями Вам обнаружить не удастся при всем желании, но нюансы присутствуют:

В случае возникновения ошибки во время выполнения команды require парсер получит ответ fatal error и произойдет остановка выполнения кода страницы, в то время как include выдаст лишь warning и выполнение файла продолжится (просто не произойдет подключение файла).

Давайте для лучшего понимания темы разберем простейший пример.

У нас есть наш минисайт в котором хедер и футер одинаковые на всех страницах, а тело документа меняется.

Создаем файлы header.php и footer.php в которые помещаем код, который будет на всех страницах одинаковым, а в файлах index.php и newpage.php выполним подключение статичных частей. В итоге получаем:

Содержимое прочих страниц сайта

В результате загрузки нашей страницы получаем следующую картину:

Как мы видим, все прекрасно работает.

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

В рассмотренном примере мы использовали для подключение хедера require, а футера include. Чем пользоваться на своих сайтах – решать Вам. Как уже говорилось особой разницы между ними нет. Разве что require считается несколько более строгой инструкцией.

По факту строка <?php require "путь к файлу" ; ?> попросту копирует все содержимое файла, путь к которому мы указываем, внутрь документа в котором находится.

Использование include _once и require _once

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

Предположим это произошло из-за того, что над сайтом работали несколько человек, и когда произошло объединение кодов, то вышел вот такой казус…

Чтобы исключить возможность появления подобных проблем разработчики часто используют инструкции include _once и require _once. Принцип действия у них точно такой же как и у include с require, но если файл в такой инструкции уже был подключен к нашему, то повторного подключения не произойдет.

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

В этом мастер классе я еще добавила эффект залипания. Это когда при прокрутке экрана шапка остается на месте.

Перед тем, как вы приступите к просмотре, пара замечаний:

1.Если вы решили создать произвольную шапку, придется создать и футер. Они работают в паре. Не получится создать только шапку, а футер оставить прежним. Или наоборот, футер создать в Elementor, а шапку оставить от шаблона.

Почему так происходит?

Если мы посмотрим файлы шаблона, то увидим, что у шапки и футер есть отдельные файлы (header.php и footer.php). Разработчики шаблонов обычно в файл шапки прописывают открывающий тег HTML, а в футер закрывающий. Делается это, чтобы не повторять один и тот же тег во всех файлах шаблона. И когда мы создаем произвольную шапку в Elementor и прикрепляем к страницам сайта, он полностью заменяет файл header.php, тоже самое и с footer.php. Таким образом наш сайт остается без основного открывающего и закрывающего тега. А к этому тегу могут быть прописаны стили и ширина.

Как решить эту проблему?

Выбирать шаблон сайта интегрированный с Elementor
Создавать шаблоны страниц для всех страниц сайта (одиночная страница, архив, страница статьи, 404, поиск)

Приятного просмотра мастер-класса. Если у вас еще остались вопросы, пишите в комментариях

Что такое залипший элемент (фиксированный) на странице/лендинге сайта на WordPress.
В чем особенность создания шапки (header) и подвала (footer) с помощью Elementor.
Какую шапку с залипшим меню мы сделаем на этом вебинаре.
Что необходимо сделать перед созданием шапки и подвала сайта с помощью Elementor.
С чего начать создание шапки с залипающим меню.
Где в Elementor расположено множество уже готовых настроенных шаблонов шапки для выбора и применения.
Какие элементы Elementor можно использовать для создания шапки сайта, которую мы решили создать на этом вебинаре.
Какой код прописать в шапке для телефон и email, чтобы при клике на них появлялось окошко для звонка и отрывалась форма отправки почты.
Как настроить цвет и шрифт в верхней полоске (бар сайта) шапки сайта.
Как настроить значки социальных сетей и их цвет в верхней полоске (бар сайта) шапки сайта.
Как создать второй ряд шапки с логотипом и меню сайта, которые будут прилипать (оставаться неподвижнымb) при прокрутке страницы/лендинга сайта.
Как установить в процентах колонки второго ряда шапки сайта.
Как настроить отображение меню на мониторе компьютера/ноутбука, на планшете и на мобильном телефоне.
Как разместить и настроить во втором ряде шапки вход в личный кабинет и корзину магазина.
Как настроить отображение входа в личный кабинет и корзины магазина на мониторе компьютера/ноубука, на планшете и на мобильном телефоне.
Как сделать, чтобы шапка с меню не сливалась с фоном страницы/лендинга сайта.
Сколько можно создавать разных шапок для своего сайта на WordPress с помощью Elementor.
Для каких шаблонов Elemetor работает правила отображения шапки.
Как сделать, чтобы второй ряд шапки был фиксированным (прилипал) при прокрутке страницы / лендинга.
Какие особенности настройки шапки для мобильной версии сайта.
Как разместить элементы шапки логотипом, меню, входа в личный кабинет и корзину магазина в один ряд в мобильной версии сайта.
Как отредактировать отображение шапки логотипом, меню, входа в личный кабинет и корзину магазина в один ряд в мобильной версии сайта.
Как настроить условия отображения шапки в нужном нам месте сайта.
Как настроить подвал (футер) сайта на WordPress с помощью Elementor для разных версий сайта.
Какие особенности отображения элементов подвала (футера) сайта.
Примеры большой шапки (header) сайта.
О предстоящем вебинаре по созданию меню для инстаграм по аналогии меню Taplink.

Этот и другие видео уроки бесплатных вебинаров входят в видео курс «Elementor — конструктор лендингов на WordPress».

Добавляем корневой элемент html. Пока никакой вложенности нет, поэтому без отступов. Обратите внимание, что атрибуты тегов записываются в круглых скобках. Закрывающие теги не прописываются. Они будут автоматически сгенегированы

Добавляем два основных элемента HTML-страницы - head и body. Так как они должны быть вложены в корневой элемент html, то в строке перед head ставим один отступ Tab и в строке перед body ставим один отступ Tab. Это значит что элементы head и body будут находится внутри корневого элемента html. Опять же никаких закрывающих тегов мы не прописываем

В head добавляем мета-тег кодировки документа. Атрибуты записываем в круглых скобках. Так как мета-тег кодировки должен быть внутри элемента head, то у мета-тега должен быть на один отступ Tab больше, чем у элемента head

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

Также в head добавляем тег title для названия страницы и теги link для подключения файлов стилей

Добавим первый элемент в body - тег header. У header на один отступ Tab больше, чем у body, так как он должен быть расположен внутри body

Чтобы добавить класс для header, добавляем название класса через точку после названия тега, аналогично селекторам в файлах стилей CSS

Далее добавляем div с классом container. В Pug если не указывать название тега перед названием класса, то по-умолчанию назначается тег div. Поэтому вместо записи div.container , мы просто указываем название класса как в файлах стилей CSS - .container . Так как container внутри header, то у container на один отступ Tab больше, чем у header

Далее все аналогично - добавим header__flex внутри container, добавим header__logo внутри header__flex.

Теперь мы хотим добавить второй класс для header__logo - добавляем его через точку без пробелов - .header__logo.logo

Добавим logo__title c текстом. Текст записывается через пробел после названия тега или тега с классом

Добавим в header__flex еще тег nav c классом header__nav и внутри него список ul c элементами списка li, которые в свою очередь содержать ссылки a c текстом.

Каждый дочерний элемент должен иметь на один отступ Tab больше, чем родительский. Но есть еще более краткая запись, через двоеточие, которую лучше использовать только для элементов, которые содержат в себе только один дочерний элемент, например li: a(href="") Home

Первое время рекомендую самостоятельно, пошагово, добавляя по одному элементу в index.pug, смотреть на сгенерированный index.html, чтобы для себя более подробно понять, как из синтаксиса Pug генерируется разметка HTML

Нюансы синтакcиса Pug

Частая задача - в блоке с текстом необходимо определенную часть текста выделить в теги span (strong, i и другие) или сделать ссылкой a

В Pug есть два способа это сделать.

Первый способ - использовать обычные теги HTML - открывающий и закрывающий.

Javascript файлы подключаем, также как и остальные теги

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

Шаблонизатор

Когда верстаем многостраничный сайт, при внесении изменений, например в header, необходимо открыть каждый *.html файл, который содержит header и внести эти изменения в каждом файле.

Чтобы решить данную проблему, выделим общий фрагмент кода в отдельный файл и подключим его в шаблон

Предположим, у нас есть макет сайта с тремя страницами, где есть общие блоки header и footer, а блок main будет на каждой странице отличаться.

Когда сверстали главную страницу, сохраним блоки header и footer в соответствующие файлы header.pug и footer.pug в отдельную папку includes (создаем там же, где лежит основной файл index.pug)

Отдельная папка includes для общих фрагментов верстки нужна для того, чтобы они не генерировались как отдельные html файлы, а только подключались в шаблоны страниц. Если сохраним их рядом с index.pug, то они будут сгенерированы, как отдельные страницы header.html и footer.html, а это некорректно.

Рядом с файлом index.pug сохраняем только те файлы, которые должны быть сгенерированы, как отдельные страницы. Об этом чуть ниже

header.pug

footer.pug

Обратите внимание, что в отдельных файлах header и footer отступы сбрасываются - основные родительские элементы header.header и footer.footer в отдельных файлах не имеют отступа. Это важно при подключении этих файлов в шаблоны.

Подключим эти файлы в index.pug. Для этого используем служебное слово include .

Так как отступы в отдельных файлах header.pug и footer.pug сброшены, то при подключении header.pug через служебное слово include следим, чтобы подключение было именно в том месте, где изначально был header.header , то есть на один отступ Tab больше, чем у body. Тоже самое и с footer.pug

Теперь на основе шаблона index.pug, в этой же папке создадим еще два шаблона - portfolio.pug и about.pug

portfolio.pug

about.pug

Теперь генерируются 3 страницы - index.html, portfolio.html и about.html

При изменении header.pug или footer.pug, эти изменения будут применены сразу на всех трёх страницах

В простом примере польза шаблонизации не ощущается в полной мере, но когда реальный проект состоит более чем из 10 страниц и более 20 общих фрагментов, в которые так или иначе в процессе верстки вносятся изменения, то польза становится намного ощутимей

Возможные проблемы и их решения

В окне командной строки, где запущен Gulp, ошибки выглядят следующим образом

На скриншоте выше выделена наиболее информативная часть, где можно видеть код ошибки (code), информация об ошибке (msg), строка с ошибкой (line), файл с ошибкой (filename)

Основная ошибка - это использование в отступах Пробелы вместо Tab. В документации сказано, что в качестве отступов можно использовать или только Пробелы или только Tab.

Решить эту проблему очень просто. В редакторе кода, в файле index.pug выделяем весь код сочетанием клавиш Ctrl+A и ищем настройку Tab size (в Sublime Text и VS Code справа внизу), нажимаем и выбираем пункт Convert Indentation to Tabs - все отступы конвентируются в Tab

Преимущества верстки с Pug

У Pug много возможностей. Мы разобрали только базовые для ускорения и упрощения процесса верстки, но можем выделить следующие преимущества

Краткий, информативный, чистый синтаксис, не нужно следить за закрывающими тегами

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

Сгенерированна верстка является валидной (проверка W3C - Markup Validation Service)

В следующей статье познакомимся и разберем работу со вторым очень полезным инструментом для ускорения верстки и более комфортной работы со стилями - Stylus (препроцессор CSS)

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