Шаблоны страниц сайта. Разбираемся, как устроен сайт.

x

Оглавление:


Добрый день, друзья. В прошлой вводной статье я попытался вас убедить, что лучше писать свой сайт с нуля, чем пользоваться стандартной темой вечно. Конечно же, можно понять начинающих сайтостроителей и блоггеров — многие из них, конечно же, непрофессионалы (как и я), разобрались, как выбрать хостинг и установить на него систему управления WordPress, поставили стандартную тему — и вперед! Покорять мир блоггинга и инфобизнеса, громко заявить о себе со страниц собственного блога, зарабатывать копейки мильёны или просто делиться своими мыслями с другими. Заодно в прошлой статье я немного рассказал о том, как я пришел к написанию сайта с нуля, немного морально подготовил вас и дал кое-какие рекомендации. Да и правда — если вы всерьез хотите заниматься сайтостроением и блоговедением, вам придется углублять ваши знания. И я постараюсь помочь вам в этом.

Сайт! Как много в этом слове! Все мы регулярно заходим на какие-то сайты, ищем нужную информацию, покупаем или продаем что-то, общаемся, качаем и т.д. и т.п. Но давайте задумаемся, как устроен сайт (в нашем с вами случае — блог)? На самом деле любой сайт — это сложный механизм, в котором есть отдельные детали и агрегаты — ну прямо как у автомобиля. Каждый из них отвечает за что-то и несет определенную функцию. Когда вы начнете верстку сайта на HTML, вы будете создавать по отдельности каждый элементик сайта — представьте себе, что это и есть те самые детали, о которых я говорил чуть выше. Кнопочка, иконка, менюшка, заголовок — вот они. Вместе они объединяются в страницу — тот самый агрегат. А страницы  (связанные друг с другом) в свою очередь объединяются в сайт.

Допустим, вы зашли на главную страницу моего блога. Что мы тут видим? Мой блог (да и любой другой) состоит из следующих частей:

  • шапка сайта (header, хидер), в которой, как правило, располагается название сайта и описание, логотип и картинка сайта, верхнее меню и т.п;
  • контентная часть, в которой на главной странице мы обычно видим анонсы последних статей или статическую страницу с информацией. Если мы перейдем по ссылке анонса, то в контентной части отображается сам контент — содержание поста или страницы;
  • боковая колонка (sidebar, сайдбар) где обычно располагаются меню рубрик, виджеты, ссылки, облако меток, поиск, реклама, подписка и многое другое;
  • подвал сайта (footer, футер), в котором обычно располагается информация об авторских правах и владельце сайта, иногда — урезанное меню и т.п.

Как мы видим, главная страница сайта состоит из нескольких частей. Некоторые из них могут меняться (например, содержание контентной части), а некоторые остаются неизменными (шапка сайта, сайдбар, подвал). Есть и другие страницы сайта — например, страница поиска, на которую мы попадаем, когда вбиваем в поисковой строке на сайте интересующий нас запрос. Или страница ошибки, если мы ввели несуществующий запрос. Если говорить простым языком, шаблоны страниц сайта — это элементы структуры, каждый из которых отвечает за определенную область на сайте. А целиком они образуют структуру сайта.

Что такое шаблоны страниц сайта?

Определение и описание

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

шаблоны страниц сайта

Давайте еще посмотрим на картинку, на которой схематично отображена структура сайта:

шаблоны страниц сайта

За отображение главной страницы сайта отвечает шаблон страницы, который называется index.php. К этому шаблону подключаются остальные шаблоны. Проще говоря, главная страница собирается из из кусочков в единое целое. Зачем же так сделано? Для удобства и гибкости управления каждым отдельным элементом сайта.Согласитесь, ведь отремонтировать или доработать какую-то деталь в большом агрегате проще, когда эта деталь находится отдельно — например, перед вами на столе, а не когда вам приходится искать ее в массиве целого механизма и ремонтировать, не извлекая ее оттуда.

Теперь я вкратце расскажу последовательность нашей работы.

  • Мы создадим один текстовый документ и в нем напишем (сверстаем) всю структуру и внешний вид сайта на HTML.
  • Затем разобьем один общий файл на отдельные (шапку сайта, подвал, сайдбар, анонсы статей) и добавим в них элементы php, чтобы сделать наш сайт динамическим (если вы еще не знаете, чем отличается статический сайт от динамического — тогда читайте эту статью).
  • Эти отдельные файлы обзовем стандартными названиями — header.php, sidebar.php, footer.php и т.п. и подключим их к шаблону главной страницы index.php.

Таким образом, мы создадим структуру нашего сайта. Потом все эти файлы мы поместим в папку на нашем хостинге — и все. Наша самописная тема для сайта готова. После вы сможете вести ваш блог, а параллельно дорабатывать тему — делать адаптацию, шлифовать дизайн, внедрять всякие фишки. Главное — вы будете знать, как все работает. Главное — не пугайтесь. Я потратил на создание собственной темы с нуля четыре месяца — быть может, вы управитесь быстрее.

Теперь попробую ответить на некоторые вопросы, которые могли возникнуть у читателей:

ВОПРОС: обязательно ли главным шаблонам страницам сайта давать именно такие названия — header.php, sidebar.php, footer.php?

ОТВЕТ: Да, обязательно. Система управления WordPress по названию распознает шаблон страницы. Например, если вы назовете шаблон sidebar.php, Вордпресс будет знать, что это шаблон страницы для боковой колонки и никакой иной. Эти названия-вехи уже заложены в «мозгах» системы управления WordPress, и по ним она будет выстраивать структуру сайта.

ВОПРОС: зачем разбивать один общий файл на отдельные?

ОТВЕТ: Для гибкости структуры сайта. Например, на определенных страницах вы можете скрывать боковую колонку (сайдбар) или подвал сайта. К тому же разбиение ускоряет загрузку вашего сайта.

ВОПРОС: как подключить шаблоны подвала, шапки сайта, сайдбара и т.п. к главной странице?

ОТВЕТ: С помощью специальных команд на языке РНР. Пока для вас это темный лес, но когда мы дойдем до освоения РНР, вы наглядно увидите, как все это работает. Например, для того, чтобы подключить на главную страницу шапку сайта, в файле index.php достаточно прописать стандартную команду на языке РНР (см. ниже)

Все, после этого подключится шаблон страницы с шапкой сайта. Также к основной странице подключается и сайдбар, и подвал и т.п.

Ну как, друзья, немного разобрались, что такое шаблоны страниц сайта? Поначалу все кажется довольно сложным, но скоро вы начнете вникать в процесс создания сайта и в итоге поймете, как устроен сайт. На следующих занятиях мы поговорим вкратце о языках программирования HTML и CSS и вскоре начнем потихоньку создавать наш сайт с нуля. А пока немного отдохнем и наберемся сил перед боем.

Если вам нравятся мои статьи — оставляйте комментарии, делайте репосты и рассказывайте об этом блоге друзьям. Я вам буду искренне признателен за это, а кому-то эта информация, возможно, пригодится smile

Расскажи друзьям:
  Лучшее "спасибо" - репост статьи! Репост
ПОДПИСАТЬСЯ НА ОБНОВЛЕНИЯ САЙТА:

Обсуждения закрыты для данной страницы