Темы WordPress: элементы и структура

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

Основная структура темы WordPress состоит из различных исходных файлов PHP (известных как файлы шаблонов), таблиц стилей и данных локализации, а также дополнительных файлов JavaScript и графики. Мы расскажем, с какими элементами темы WordPress вы должны быть знакомы, какие функции они выполняют и как отдельные базовые компоненты работают вместе.

Основные элементы темы WordPress

Статические веб-страницы, по сути, основаны на отдельных HTML-документах, которые содержат все содержимое, а также элементы JavaScript и вставки CSS. Тема WordPress, с другой стороны, состоит из нескольких файлов шаблонов. Они связаны между собой тегами include и с помощью тегов шаблонов описывают, как содержимое из базы данных на сервере должно быть внедрено в веб-страницу и отображено в веб-браузере. Условные теги используются, если отображаемое содержимое зависит от определенных условий. Дополнительно могут быть интегрированы плагины Template hook. Доставка контента управляется с помощью механизма, который в терминологии WordPress называется петлей.

Файлы шаблонов

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

Тема WordPress является функциональной, если она содержит файлы шаблонов index.php и style.css. Как правило, в теме WordPress можно найти множество различных файлов шаблонов, которые могут представлять различные виды контента и, следовательно, максимально использовать набор функций блога. В следующем списке представлены основные файлы шаблонов, которые можно найти практически в каждой теме WordPress:

  • style.css: включает в себя один из двух обязательных элементов тем WordPress. Файлы шаблона содержат заголовочную информацию, такую как название темы, краткое описание, имя автора, номер версии, лицензию, а также ссылку на лицензию. Style.css действует как основная таблица стилей сайта WordPress и предлагает место для CSS-кода выбранной вами темы.
  • index.php: вторым обязательным элементом каждой темы WordPress является index.php. Он обычно служит для обзора статей и может быть использован в качестве домашней страницы. Index.php удобен в качестве последнего запасного файла. Другими словами: если для доставки контента не создан специальный файл шаблона, программа использует index.php. Структура index.php в первую очередь зависит от того, сколько кода передано другим файлам шаблона. В простых темах index.php часто содержит большую часть всего исходного кода, включая корневой каталог HTML, заголовок, нижний колонтитул, боковую панель и навигацию, тогда как в более сложных темах эти элементы определяются в дополнительных файлах шаблонов, таких как header.php, footer.php или sidebar.php. Это делается для того, чтобы index.php мог просто выполнять функцию основной структуры. Index.php обычно отображает в сокращенном виде ряд статей, определенных в области администратора.
     
  • header.php: если в WordPress используется header.php, этот файл шаблона обычно содержит важную информацию о сайте, такую как doctype, открывающий HTML-тег, а также элемент head (включая мета-теги), ссылки на таблицы стилей и скрипты. Кроме того, тег body обычно открывается в заголовке. Видимый заголовок темы, включая навигацию, может быть вынесен в header.php.
  • footer.php: footer.php служит аналогом header.php. Здесь находится видимый нижний колонтитул сайта. В footer.php закрыты как тег body, так и тег HTML.
  • sidebar.php: В файле WordPress sidebar.php размещается содержимое боковой панели. Именно здесь вы вводите код, либо напрямую, либо используя специальные виджеты WordPress, которые могут быть вызваны через функцию dynamic_sidebar. Преимуществом этой процедуры является то, что содержимым боковой панели можно управлять через область администратора WordPress.
  • content.php: сообщения в обзоре блога обычно содержат связанный заголовок, изображение для предварительного просмотра, тизер или сокращенную версию статьи, включая ссылку «Читать далее». Этот контент может быть встроен с помощью content.php. То же самое относится и к мета-информации, такой как дата публикации, автор, категории или ключевые слова (теги).
  • single.php: в то время как index.php предлагает обзор статей, WordPress single.php используется, когда пользователь хочет получить доступ к статьям по отдельности.
  • home.php: этот файл шаблона предоставляет возможность создания отдельной домашней страницы для веблога. Если вы откажетесь от структуры с помощью home.php, то ваш сайт (основанный на index.php) будет показывать обзор последних сообщений в качестве домашней страницы.
  • page.php: Темы WordPress оптимизированы для отображения записей блога в хронологическом порядке. Помимо динамического контента, многие операторы веб-сайтов предоставляют специфический контент, например, разделы «Обо мне» или контактную информацию в виде статических веб-страниц. WordPress page.php делает это возможным, создавая отдельные страницы, которые не зависят от макета и дизайна других файлов шаблона, таких как index.php или single.php.
  • 404.php: если вы хотите создать страницу ошибки 404 для своего блога WordPress, вы можете использовать одноименный файл шаблона. Можно встроить строку поиска WordPress, чтобы дать посетителям возможность искать на вашем сайте любую необходимую им информацию.
     
  • search.php: способ отображения результатов поиска может быть определен в WordPress с помощью search.php.
     
  • archive.php, category.php, tag.php, author.php, date.php: в дополнение к функции поиска WordPress предлагает ряд файлов шаблонов, которые можно использовать для упорядочивания записей блога в соответствии с определенными критериями поиска. Возможные фильтры включают категории, ключевые слова (теги), авторов и даты публикации. То, как содержимое отображается в WordPress, зависит от category.php, tag.php, author.php или date.php. Если эти конкретные файлы шаблонов отсутствуют, программное обеспечение блога полагается на файл archive.php.
  • comments.php: если вы хотите, чтобы ваши читатели могли оставлять комментарии, вам нужен отдельный файл шаблона, который содержит форму комментария. В WordPress это можно определить с помощью файла comments.php.
  • attachment.php: файл шаблона attachment.php используется, когда операторы сайта хотят просматривать дополнительный контент, например, графику, PDF или медиафайлы в одном представлении.
  • image.php: специальной версией attachment.php является image.php, который позволяет определить отдельный файл шаблона для одиночного просмотра графики. Если файл image.php отсутствует, вместо него используется файл attachment.php.
  •  rtl.css: если ваша тема WordPress будет поддерживать языки, которые пишутся справа налево (например, арабский или иврит), также необходима таблица стилей rtl.css.

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

Теги шаблонов

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

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

bloginfo('name')

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

<title><?php bloginfo('name'); ?> |<?php wp_title(); ?></title>

В то время как функция bloginfo(‘name’) выступает в качестве заполнителя для названия сайта, wp_title() выдает заголовок текущей подстраницы. Какое содержимое должно быть выдано при обращении к сайту, определяется базой данных на сервере. Затем программа создает заголовок по следующей схеме:

Name of blog | Title of subpage 

Что касается статических веб-сайтов, вы должны ввести заголовок страницы в фактический текст каждой HTML-страницы вашего веб-проекта:

<title>Name of blog | Title of subpage</title>

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

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

the_title() 
the_content()
the_author() 
the_time()
the_category() 
the_tags() 

Обзор всех тегов шаблонов можно найти в Codex на WordPress.org.

Включить теги

Особым вариантом тегов шаблонов WordPress являются теги include, которые используются в теме для загрузки файлов шаблонов, таких как header.php, footer.php или sidebar.php. Теги include — это внутренние функции WordPress, которые интегрируются в основные файлы шаблонов, такие как index.php, single.php или page.php:

get_header()
get_footer()
get_sidebar() 

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

Шаблонные крючки

Шаблонные крючки (также известные как «крючки действий») — это интерфейсы, которые соединяют темы с отдельными функциями программного обеспечения веб-блога или плагинами. Большинство этих интерфейсов уже доступны в ядре WordPress. Так разработчик темы или пользователь может указать действие до начала вывода или после завершения запроса к базе данных. Например, конкретная информация может быть встроена в хедер, футер или боковую панель. Разработчики могут дополнительно интегрировать собственные хуки в свои темы.

Условные теги

Условные теги — это утверждения PHP, такие как if, else или while, которые в сочетании с WordPress позволяют отображать определенный контент при выполнении условий. Например, это может быть приветственное сообщение для зарегистрированных пользователей:

if ( is_user_logged_in() ):
    echo 'Welcome, registered user!';
else:
    echo 'Welcome, visitor!';
endif;

Петля

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

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   <h2><?php the_title(); ?></h2>
   <div class="entry">
      <?php the_excerpt(); ?>
   </div>
<?php endwhile; endif; ?>

Секция кода if (have_post()) в строке 1 инструктирует WordPress проверить наличие записей в блоге. Если посты в базе данных найдены, секция кода while (have_posts()) : the_post() заставляет программу выполнять следующие функции в цикле, пока have_posts() не перестанет быть истиной — другими словами, пока не останется больше постов.

Таким образом, цикл включает все функции вплоть до PHP-оператора endwhile в строке 6 — в данном примере the_title(), который используется для отображения заголовка статьи, и функцию the_excerpt(), которая дает указание программе загрузить выдержку из поста из базы данных. Когда дело доходит до представления контента, заголовок статьи выдается в формате заголовка h2. Превью статьи размещается в блоке div с именем CSS-класса entry.

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

Оцените статью
cdelat.ru
Добавить комментарий