Домой / Mozilla Firefox / Основы шаблонов. Структура шаблонов темы WordPress, их иерархия и порядок работы движка с файлами страниц Что в папке wp includes

Основы шаблонов. Структура шаблонов темы WordPress, их иерархия и порядок работы движка с файлами страниц Что в папке wp includes

По умолчанию в WordPress папкой для хранения загружаемых изображений и других мультимедийных (и не очень мультимедийных) файлов является wp-content/uploads/ . Хоть этот адрес и выглядит нормально, но бывают случаи когда его необходимо изменить на другой, например, для того чтобы сделать картинки на поддомене или просто чтобы был более эстетичный и радующий глаз адрес до ваших картинок и медиафайлов, типа: http://paperplane.su/images/ . Это можно легко сделать как на новых, так и на существующих веб-сайтах на WordPress. Но есть некоторые различия в разных версиях WordPress, в последних версиях это стало сделать немного сложнее (притом изменения разработчиков не совсем обоснованы).

Изменить папку загрузки в WordPress версии 3.5 и новее¶

В одном из последних (почти) обновлений WordPress 3.5 удалили возможность вводить свой пользовательский путь к папке для закачек. Все новые блоги WordPress по умолчанию будут использовать wp-content . Опция изменения его была вообще удалена из пользовательского интерфейса, чтобы избежать путаницы. Но по-прежнему можно установить пользовательскую папку для закачек с помощью добавления нужной константы в файл wp-config.php :

  • Откройте файл wp-config.php вашего блога, который лежит в корне сайта (с помощью FTP-доступа). Затем необходимо добавить небольшой фрагмент PHP-кода, чтобы установить свой каталог для загрузок, но будьте осторожны, неверное редактирование файла можете обрушить сайт. Потому зарезервируйте у себя на компе этот файл и редактируйте только через FTP, а не через интерфейс самого WordPress.
  • Чтобы поменять на свою папку, например, просто images от корня сайта (т.е. адреса картинок будут начинаться с http://paperplane.su/images/ ) необходимо добавить следующий код:

Если же вы хотите, чтобы ваша папка для загрузок находилась вне директории wp-content, например http://www.example.com/files/ , то вам нужно установить путь для загрузок в wp-config.php вот так:

1 define("UPLOADS" , "" . "files");

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

Изменить папку загрузки в старых версиях WordPress (до 3.5)¶

В старых версиях WordPress изменить папку очень просто (я до сих пор не понимаю почему эту возможность аннулировали). В принципе и объяснять нечего, но до кучи я это сделаю:

  • В админке WordPress, пройдите в меню Параметры -> Медиафайлы . Чуть ниже увидите раздел , в который и нужно добавить адрес папки. В поле Сохранять файлы в этой папке введите имя папки, которые вы хотите использовать вместо wp-content/uploads .
  • Во втором поле Полный URL-путь к файлам , если нужно, то введите полный URL-путь к новой папке изображений вместе доменом. Но нужно это в редких случаях, например, чтобы организовать хранения картинок на поддомене.

Не забудьте сохранить изменения. И обязательно после изменений проверьте вступили ли они в силу путём создания тестового поста и добавления в него изображений. Если всё прошло хорошо, то ваши картинки закачаются куда надо и будут доступны для добавления в пост.

Возможные проблемы¶

Неправильный полный путь URL - необходимо наверняка знать свой абсолютный путь сайта на сервере от корня файловой системы. Вы этот путь должны либо знать, либо посмотреть где-нибудь, либо спросить у поддержки вашего хостинга. Например в панели администрирования хостингом CPanel ожно посмотреть свой точный путь, в других по идеи тоже можно. Он должен выглядеть в большистве случаем примерно следующим образом /home/username/public_html/images .

Права на папку - неверная настройка прав на выбранную вами папку не позволит добавлять в неё ничего. Убедитесь, что выбранная вами папка имеет права доступа 777 (возможность записи в неё всем). Вы можете сделать это в админке своего хостинга или в FTP-клиенте, что юзаете.

Шпаргалка о том, как устроен сайт на Вордпресс.

Корневой каталог WordPress содержит три папки: wp-content , wp-includes и wp-admin вместе с кучей разных PHP файлов, которые требуются для основных операций WP. Наиболее значимым из этих файлов является «wp-config.php ». Изменяя этот файл, можно добавить кучу ключевых вариантов настройки WordPress, которые не доступны из консоли администратора. Также в корне сайта лежат и другие системные файлы (например, wp-settings.php , wp-config.php ) которые влияют на настройки сайта.

Рассмотрим вкратце анатомию движка ВордПресс и за что отвечают те, или иные файлы и папки.

wp-admin
Эта папка содержит различные файлы, такие как CSS, JavaScript, и PHP, которые обеспечивают функциональность консоли и административной части сайта.

wp-content
Папка wp-content содержит все загруженные пользовательские данные и разделяется на другие вложенные папки:

  • languages
  • plugins
  • themes
  • uploads

Папка «languages » содержит файлы переводов и локализации движка в формате.mo и.po. Если вы хотите , вам нужно начинать с этой папки.

Каталог «themes » содержит все загруженные темы (шаблоны).
Вы можете загрузить в эту папку много тем, но активировать сможете только одну тему (не считаем некоторые плагины, которые позволяют активировать больше). Кроме того, каталог «themes » не может быть пустым, так как для WordPress необходима по крайней мере !
По умолчанию папка «themes » уже содержит внутри две темы: Twenty Thirteen и Twenty Fourteen.

Аналогичным образом, «plugins » используется для хранения установленных плагинов на вашем сайте. В отличие от каталога «themes », этот каталог может быть пуст и WordPress будет прекрасно работать без использования каких-либо сторонних плагинов. Вы также можете активировать столько плагинов, сколько необходимо (правда, хорошая практика заключается в установке только необходимых плагинов, поскольку количество установленных плагинов влияет на скорость работы сайта).

Все картинки (и другие медиа-файлы) хранятся в каталоге «uploads », с разбивкой по годам, месяцам и/или дням. Эта папка представляет собой базу данных для всего не-текстового контента: изображения, видео, MP3, PDF-файлы, и т.д.
Сразу после установки WordPress папки «uploads » не будет, она будет создана автоматически после того, как вы начнете загружать медиа-файлы через консоль.

wp-includes
Папка «wp-includes » содержит в себе все основные и необходимые файлы для запуска WordPress через фронтэнд (пользовательский интерфейс). Папка содержит файлы PHP, CSS, JavaScript, и файлы изображений WordPress, которые обеспечивают основные функции программного обеспечения. Другими словами – это ядро движка ВордПресс.

Папки wp-admin и wp-includes являются основными папками WP, поэтому в них желательно ничего не изменять. При каждом обновлении ВордПресс происходят изменения файлов в этих папках, и ваши правки будут утеряны.

Анатомия темы

Теперь от структуры ядра WP перейдем к рассмотрению анатомии темы (шаблона)
Путь к файлам темы следующий /wp-content/themes/название-темы/ .
Основная структура папок темы может включать в себя такие папки, как:

  • /css/ – файлы стилей CSS, которые использует тема; ВАЖНО : файл style.css должен размещаться в корневой папке темы
  • /js/ – файлы JavaScript
  • /images/ – хранит встроенные в тему изображения
  • /languages/ – каталог хранит файлы переводов темы

Есть только два основных файла, которые необходимы :

  • index.php – файл, который создает блог
  • style.css – стилевое оформление блога

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

  • header.php — глобальный файл, который отображает мета-данные страницы в разделе и меню верхнего уровня.
  • sidebar.php – этот файл отвечает за генерацию боковой колонки сайта. В основном здесь выводятся: список рубрик (категорий), последние записи, теги, различные баннеры.
  • footer.php – этот файл отвечает за вывод футера, нижнего меню, копирайта и закрывает HTML-теги.
  • index.php – это шаблон главной страницы сайта. По умолчанию этот файл отображает список последних постов и подгружает информацию с sidebar.php (сайдбара).
  • single.php – отвечает за отображение отдельных постов. Файл содержит цикл, который запрашивает только один пост и формирует его вывод.
  • page.php – формирует отдельные (статические) страницы (например, «Контакты», «О нас» и т.п.)
  • archive.php – этот файл отвечает за вывод страницы архива записей
  • category.php – формирует шаблон страницы, которая выводит посты по категориями
  • tag.php – шаблон страницы, которая выводит список постов по тегам
  • comments.php – этот файл управляет выводом комментариев
  • functions.php – позволяет добавлять пользовательский код PHP и может влиять на основные элементы темы. Он добавляет функции и расширяет возможности вашего сайта. Работает как плагин WordPress.
  • style.css – основной файл CSS-стилей темы.

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

Сайты, созданные на движке WordPress, имеют особенную структуру, отличающуюся от структуры

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

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

Вот поэтому возникает необходимость разобраться, как устроен сайт на WordPress.

Кстати, если вы хотите научиться делать сайты и блоги, используя CMS WordPress, причем с уникальным дизайном, вам лучше всего воспользоваться курсом «Уникальный сайт с нуля». Познакомиться с ним вы можете по ссылке ниже.

Уникальный сайт с нуля

В структуре любого сайта можно выделить три основных направления:

  1. Внешняя структура. Она показывает нам внешний вид страницы, размещение отдельных элементов, блоков относительно друг друга.
  2. Внутренняя структура, то есть структура связей между отдельными материалами, образующими контент.
  3. Файловая структура, показывающая взаимосвязь файлов, составляющих весь сайт.

Итак, каков внешний вид сайта на WordPress?

Сразу следует отметить, что он зависит от выбора шаблона. Таких шаблонов огромное количество и, конечно, сайты могут сильно отличаться друг от друга. Но есть и общие черты, на которые мы и обратим внимание. В качестве примера можно рассматривать данный сайт.

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

Под шапкой, а иногда под ней, чаще всего находится основное меню.

В нижней части страницы мы видим подвал (footer) . В нем может быть расположена служебная информация. Например, об авторах сайта, авторских правах. Иногда там можно встретить кнопки социальных сетей, некоторые элементы навигации и т. д.

В средней части страницы находится лента записей и боковая колонка (sidebar) .

Записи (post) – главная часть сайта на WordPress. Именно в них находится основной контент, то, о чем хотел рассказать создатель сайта его посетителям.

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

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

Сбоку от ленты записей находится боковая колонка (sidebar) . В его расположении тоже могут быть различные варианты. Сайдбар может располагаться слева или справа, он может быть один или два.

Например, шаблон Admired , примененный на данном сайте, позволяет использовать следующие варианты расположения сайдбара:

Сайдбар состоит из отдельных блоков-виджетов (widget) . Их количество и расположение определяется администратором сайта и достаточно легко модифицируется.

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

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

Для навигации по записям используется другая система, основанная на понятиях «рубрика» и «метка».

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

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

Внешняя структура страницы и структура размещения материалов сайта важны для , а вот файловая структура им не видна. Она, в основном, интересует разработчиков сайта.

Коротко об этой структуре. Как и любой сайт, сайт на WordPress состоит из множества файлов. Рассмотрим самое важное.

Во-первых, весь контент хранится отдельно на сервере в базе данных MySQL.

Во-вторых, в отдельных папках находятся файлы изображений.

И, в-третьих, сами страницы формируются из отдельных php-файлов. Количество этих файлов может быть различным, это тоже зависит от выбора шаблона, но есть основные, обязательные файлы.

Чтобы увидеть эти файлы, нужно в консоли управления WordPress выбрать Внешний вид? Редакто р. С правой стороны откроется список всех файлов WP. Например:

  • Архивы
    (archive.php)

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

Об иерархии файлов темы я упоминал в статье «Условные теги в WordPress» . А ниже тоже самое, только подробнее и понятнее.

Подключения файлов темы (теория)

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

Например, мы заходим на страницу рубрики «Плагины» с ярлыком plugins и id 25 - http://example.com/category/plugins . Тогда для генерации кода этой страницы WordPress будет по очереди проверять наличие следующих файлов (проверка прервется на первом существующем файле):

  • category-plugins.php
  • category-25.php
  • category.php
  • archive.php
  • index.php

Полная схема для всех видов страниц и их файлов выглядит так:

Еще одна схема, возможно она понятнее (старая):

Типы страниц и названия файлов

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

Ниже указана страница сайта и соответствующий ей список PHP файлов. Такие файлы должны находится в корневой папке темы.

Записи

Страница (запись page)

  • {любое_название}.php (когда используется шаблон страницы)
  • page-{ярлык_записи}.php
  • page-{ID_записи}.php
  • page.php
  • singular.php
  • index.php

Запись (запись post)

  • single-post-{ярлык_записи}.php
  • single-post.php
  • single.php
  • singular.php
  • index.php

Произвольный тип записи

  • {любое_название}.php (для древовидного типа с поддержкой шаблонов . С WP 4.7)
  • single-{post_type}-{ярлык_записи}.php
  • single-{post_type}.php
  • single.php
  • singular.php
  • index.php

Вложение

  • {начало_MIME_типа}.php
  • {конец_MIME_типа}.php
  • {начало_MIME_типа}-{конец_MIME_типа}.php
  • attachment.php
  • single-attachment-{ярлык_вложения}.php (позволяет указать шаблон для отдельной картинки)
  • single-attachment.php (тоже что и attachment.php)
  • single.php
  • singular.php
  • index.php

Под началом и концом MIME типа, имеется виду первая и последняя часть MIME типа, разделенная / . Например, MIME-тип текстового файла: "text/plain" и значит будет проверяться наличие файл text.php , затем plain.php , затем text-plain.php .

Архивы

404 страница

  • 404.php
  • index.php

Страница поиска

  • search.php
  • index.php

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

  • front-page.php
  • (логика постоянных страниц, если для главной выбрана страница)
  • home.php
  • index.php

Страница блога

Страница блога появляется, когда для главной выбрана постоянная страница

  • home.php
  • index.php

Встраивания (embeds)

Шаблоны встраивания используются когда запрашивается запись через REST API. Встраивания появились в версии 4.5 и позволяют встраивать ваши записи в чужие сайты. См. get_post_embed_url()

  • embed-{post-type}-{post_format}.php
  • embed-{post-type}.php
  • embed.php

Чтобы изменить только контент встраивания, можно в теме создать файл embed-content.php и описать там HTML. Оригинальный HTML находится в файле движка /wp-includes/theme-compat/embed-content.php

Как это работает

За всю логику: какой файл подключать, отвечает файл ядра wp-includes/template-loader.php . Если разобраться, в нем все описано. Но, это занятие не особо интересное, поэтому я его распишу.

Прежде всего. template-loader.php подключается после того как загрузится вся среда WordPress. После того, как отработает файл wp-load.php и обработается основной запрос - функция wp() . Т.е. template-loader.php подключается в самом-самом конце PHP скрипта...

Сначала срабатывает хук template_redirect . В этом хуке можно произвести какие-то проверки и если надо перенаправить на другой URL. В нем нужно обрывать работу скрипта через die() . Т.е. если этот хук что-то меняет, то на этом работа файла template-loader.php должна закончиться и мы «улетаем» на какую-то другую страницу.

Файлы шаблонов это основной строительный материал вашего сайта на WordPress. Они соединяются вместе как кусочки пазла для формирования web-страниц на вашем сайте. Некоторые шаблоны, например, заголовок (header) и "подвал" (footer) обычно используются на всех web-страницах сайта, в то время как остальные могут использоваться только при некоторых условиях.

Традиционная web-страница состоит из двух файлов:

  • содержит структуру и контент страницы
  • содержит параметры внешнего вида страницы.

В WordPress присутствует структура (X)HTML и стили CSS, но контент формируется "за кулисами" различными . Файлы шаблона и таблицы стилей хранятся вместе с . Чтобы узнать больше про создание тем, прочтите статью .

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

Простая web-страница WordPress сделана из трех основных блоков: заголовок (header), контент и подвал (footer). Каждый из этих блоков формируется на основе файла шаблона текущей темы WordPress.

Заголовок

  • Заголовок содержит всю информацию, которая должна быть наверху — т.е. внутри тега — вашей XHTML web-страницы, так же, как и теги , и ссылки на таблицы стилей. Он также включает открытый тег и видимый вашего блога (который обычно содержит название вашего сайта, а также может содержать навигационное меню, логотип, описание сайта и т.д.).
  • Блок контента содержит записи и страницы вашего блога, т.е. "основу" сайта.
  • Подвал содержит информацию, которая находится в самом низу страницы, например ссылки на остальные или категории вашего сайта в , авторские права, контактную информацию и т.п.

Основные файлы шаблона

Чтобы сформировать структуру , начните с файла шаблона index.php в папке вашей темы. У этого файла две основные функции:

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

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

Если нужно показать записи и страницы вашего блога (и настроить их внешний вид), файл index.php должен запустить между вызовами файлов заголовка и подвала.

Более сложные структуры страниц

Заголовок

Боковая панель

Множество тем WordPress используют одну или несколько , которые содержат и дополнительную информацию о вашем сайте. Боковая панель формируется с помощью файла шаблона sidebar.php . Он может быть включен в файл шаблона index.php с помощью следующей строки ():

А где все остальное?

Заметьте, что мы не включили шаблонный тег для "получения" контента нашей web-страницы. Это потому, что контент формируется в , внутри index.php .

Файлы шаблонов внутри файлов шаблонов

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

Например, sidebar.php может содержать файл шаблона, который формирует строку поиска — searchform.php . Т.к. это не один из стандартных файлов шаблона WordPress, код для включения будет немного отличаться:

Нам больше не нужно использовать "include" и "TEMPLATEPATH" для вставки нашей формы поиска в темы, т.к. WordPress предоставляет нам вышеуказанный тег шаблона.

Заголовок

Форма комментариев

Боковая панель

Форма поиска

Множество тем WordPress включают в себя различные файлы шаблона для формирования web-страниц на сайте. Ниже приведен список типичных файлов для основного шаблона (index.php) сайта на WordPress:

  • header.php
    • theloop.php (контент)
    • wp-comments.php
  • sidebar.php
    • searchform.php
  • footer.php

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

Специальные файлы шаблона

В WordPress существуют два основных вида страниц на сайте. Вид одиночной записи используется, когда web-страница показывает одну запись из блога. Вид нескольких записей выводит список множества записей блога или сводку записей, и применяется к архивам категорий, архивам дат, архивам автора и (обычно) к "нормальному" виду домашней страницы блога. Вы можете использовать файл шаблона index.php для формирования всех этих типов страниц или положиться на для выбора других файлов шаблона в зависимости от ситуации.

Иерархия шаблонов WordPress отвечает на следующий вопрос:

Какой файл шаблона будет использовать WordPress при формировании определенного типа страниц?

WordPress автоматически распознает файлы шаблона с определенными стандартными именами и использует их для определенного типа страниц. Например, когда пользователь кликает на заголовок записи блога, WordPress знает, что тот хочет увидеть именно эту статью на своей собственной странице. WordPress будет использовать файл шаблона single.php вместо index.php для формирования страницы — если в вашей теме есть файл single.php . Так же, если пользователь кликнет на ссылку для конкретной категории, WordPress будет использовать шаблон category.php , если найдет его; если нет, он будет искать archive.php , а если и этот шаблон не существует, WordPress будет использовать основной шаблон index.php . Вы можете сделать специальный шаблон для конкретной категории (см. ), или даже шаблоны .

Здесь приведены несколько советов по созданию файлов шаблонов:

Отслеживайте открывающие и закрывающие теги Файлы шаблона подразумевают использование тегов и ссылок на . Элементы HTML и ссылки на CSS могут "пересекать" файлы шаблона, т.е. начинаться в одном файле и заканчиваться в другом. Например, HTML элементы html и body обычно начинаются в header.php и заканчиваются в footer.php . Большинство тем WordPress используют HTML элементы div , которые также могут охватывать несколько файлов. Например, основной div для контента страницы может начаться в header.php и закончиться либо в index.php , либо в single.php . Отслеживание начала и конца элементов HTML может быть довольно сложным в процессе . Используйте