Как сделать шапку php
От автора: приветствуем вас на нашем блоге о сайтостроении. У любого сайта есть то, чем он обычно запоминается и выделяется среди остальных. Обычно это именно шапка сайта. 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. Он будет меняться в зависимости от того, на какой странице Вы находитесь. То есть он будет выводить название страницы, а после название сайта.
После названия сайта начинаем вставлять МЕТА - теги. Их несколько и тут я покажу не все существующие - только основные.
-
Для начала определяем кодировку документа, в нашем случаи это UTF-8
Можно также подключить функцию, которая автоматически установит кодировку.
Теперь Нужно подключить файл стилей, чтобы все работало правильно. Главное правильно укажите путь к файлу!
И на конец, перед закрывающим тегом 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 минуты :)
Читайте также: