Как сделать шапку php

Добавил пользователь Валентин П.
Обновлено: 04.10.2024

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

Шапка сайта – какой она бывает

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

Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям.

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

Как в CSS можно оформить шапку сайта?

Вообще шапки бывают разными. По ширине их можно разделить на две группы: выровненные по центру и те, что на всю ширину веб-страницы.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш премиум-раздел, где вы можете посмотреть уроки по этой технологии.

Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:

Шапка для сайта — это и есть файл header.php. В большинстве шаблонов состав этого файла мало чем отличается друг от друга. Header обычно содержит наборы мета-тэгов, строки с подключаемыми скриптами и стилями.

Содержание headera

Рассмотрим содержимое заголовка для этого сайта:

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

> — содержит вызов функции. Если заменить её на , то мы уменьшим количество запросов к базе данных на единицу, тем самым улучшив и ускорив работу сайта.
— этот тег служит для хранения других элементов помогающих браузеру в работе с данными. Именно внутри него содержатся мета-тэги.
Остальные строки, содержащие обращения к базе данных можно также заменить.

Ускорение работы блога можно получить, заменив функции вызова на голый html код. Рекомендуется оставить только , чтобы заголовок менялся динамически. Для всего остального можно сделать так:

То есть, в итоге должен получиться примерно такой код файла заголовка:

Разный заголовок для разных страниц

Это самое интересное. Для создания landing page, или просто для придания уникальности своему сайту, можно сделать для некоторых записей и страниц свой отдельный файл заголовка header.php, то есть сделать уникальную шапку — от кода до дизайна.

Ярким примером такой замены может быть предыдущая запись о эффекте parallax на сайтах. Чтобы для некоторой записи сделать свой header, нужно выполнить несколько простых действий:

Для записи: нужно получить уникальный ID записи, затем создать там же, где создавали новый файл шапки, файл с включением в название этого ID. Допустим ID записи — 2344, тогда файл нужно назвать single-2344.php (single.php — файл одиночной записи сайта на Вордпресс).

Для страницы — аналогично предыдущему пункту, только название будет page-2345.php.

Подключение новой шапки для записи:

Подключение новой шапки для страницы:

здесь нужно просто открыть файл page-2345.php, вставить в него весь код из файла page.php. Остаётся только заменить get_header() на get_header( flat ).

Советуем прочитать:

2 комментария

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

Добрый день! Буду благодарен, что бы Вы разъяснили как поменять заголовок сайта и его описание. Дело в том, что по общей схеме в ВордПресс этого у меня не получается. Спасибо!

Довольно часто при создании реального сайта на 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.

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

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

Далее уже начинаем верстку. И как любая html верстка начинаем с тега html но к этому тегу стразу припишем определение языка основного контента. Это можно сделать двумя способами.

1. Первый способ - это прописать функцию, которая автоматически определяет какой язык выбран администратором WordPress в общих настройках. Это будет выглядеть следующим образом:
2. Второй способ - сразу в ручную прописать язык.Данным способом пользуюсь и я. первый способ использует функцию, а это лишнее обращение к базе данных. Поэтому если вы делаете сайт на русском языке, рекомендую просто прописать язык - русский. Аналогично для других языков
Выглядеть это будет так:

После открываем тег head и далее прописываем title

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

После названия сайта начинаем вставлять МЕТА - теги. Их несколько и тут я покажу не все существующие - только основные.

Можно также подключить функцию, которая автоматически установит кодировку.

Теперь Нужно подключить файл стилей, чтобы все работало правильно. Главное правильно укажите путь к файлу!

И на конец, перед закрывающим тегом head, нужно добавить функцию wp_head. Эта функция загружает стандартные скрипты, стили, мета-теги и другую важную информацию:

Теперь можно закрыть head и открыть body. После, Вы можете приступить к верстке уже видимой части будущей темы.Сверстаем все с помощью простого div без тегов html5. Если же Вы на отлично владеете html5 и знаете все правила кроссбраузерной верстки и как задать костыли для IE, то думаю вы без проблем замените все что надо.
Ну что же, начнем. По макету мы определились с шириной всего контента и расположением блоков. Теперь Мы создадим основной блок-контейнер в который поместим все остальные элементы, в том числе и блок с шапкой.
Зададим контейнеру id, например main.

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

Далее открываем Файл style.css и вносим в него первые строки и задаем стили для нашего контейнера.
Для начала внесите информацию о теме и о себе.

Далее предлагаю сбросить стандартные стили браузера и прописать свои. Также в этих стилях задаем стили для всех элементов редактирования текста, которые доступны в админ панеле. Можете использовать их всегда для всех тем.

Следующим шагом будет добавление стилей для уже нашей темы.
Зададим стили html, body, ссылкам и главное нашему контейнеру main.

Пока что закончим работать с стилями и вернемся к шапке. В header.php, после нашего контейнера добавляем блок шапки и все содержимое. В нашем случаи это Лого, слоган, форма поиска и меню.
Присвоим блоку шапки id - header, блоку с лого - logo,блоку с поиском - search, а блоку с меню - menu. Блоку с слоганом присвоим класс - desc.

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

Теперь в админ части можно будет выбрать область для меню под названием top-menu и создать в нем новое меню.
Что касательно поиска, то тут есть два варианта. Если все оставить как есть, то выведется форма поиска, которая встроена в WordPress по умолчанию. Чтобы создать свою форму и с своими стилями, то нужно создать новый файл для темы. searchform.php и в него поместить следующий код формы поиска:

Чтобы все стало отображаться так как мы задумали в макете, мы должны прописать стили. Для этого нужно вернуться в файл style.css и дописать для каждого элемента свои стили.

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

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

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)

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