Учебное пособие по темам WordPress для начинающих — Часть 3: Динамический контент
В этом уроке по теме WordPress для начинающих мы узнаем о хуках в WordPress и добавим несколько хуков в нашу тему, которые необходимы для правильной работы темы с WordPress и плагинами. Мы также начнем получать доступ к динамическому контенту из WordPress в нашем заголовке, например, автоматически получать текущий заголовок страницы.
Сначала нам нужно немного узнать о хуках в WordPress. Хуки — это основная функциональность, с которой вам нужно ознакомиться. Я не сторонник просто показывать целую кучу кода, в котором нужно копировать+вставлять, не зная, что он на самом деле делает. Если вы следуете этому руководству, вы хотите изучить это должным образом, верно?
Не волнуйтесь, я пока буду краток. Мы узнаем больше об этом позже в этом уроке.
Хуки в WordPress
Короче говоря; Поскольку WordPress выполняет весь код для загрузки и рендеринга страницы, существуют определенные «контрольные точки», которые мы называем хуками. В этих точках WordPress позволяет разработчикам изменять или добавлять свой собственный код. В WordPress определен целый ряд «контрольных точек», на которых, каждый из которых имеет уникальное имя. Если вы знаете его имя, вы можете добавить свой собственный код в эти контрольные точки и, таким образом, легко сказать WordPress запускать ваш код, когда он достигает этой контрольной точки, как часть своего процесса.
Есть два типа крючков; действия и фильтры. Действия — это точки в коде, куда вы можете добавить пользовательский код, например, что-то вывести или сделать что-то для своих целей. Фильтры — это точки в коде, где вы можете изменить определенную переменную перед ее использованием или выводом. Они очень похожи, но фильтры привязаны к одной конкретной переменной, а действия — нет.
Плагины, темы и сам WordPress могут «перехватывать» свой код, используя add_action()как действия, так и add_filter()фильтры. Эти две функции говорят WordPress запускать перехваченный код всякий раз, когда выполнение достигает этих перехватчиков.
Чтобы определить хуки, которые вы используете do_action()для действий и apply_filters()для фильтров.
Для тех, кто хочет узнать больше, у меня есть еще один пост, в котором подробно рассказывается о хуках в WordPress.
Тема WordPress должна включать некоторые важные крючки (действия). Эти хуки позволяют WordPress, плагинам и самой нашей теме подключаться и делать важные вещи. Давайте посмотрим на те критические крючки, которые нам нужно добавить.
Хуки заголовка и нижнего колонтитула темы
Все темы WordPress должны иметь два хука в шаблонах. Одно действие должно быть размещено в шапке (внутри <head>тега), а другое — в футере (прямо перед закрывающим </body>тегом). Эти два хука абсолютно необходимы, чтобы WordPress, ваша тема и любой плагин могли добавлять свои сценарии и код стилей в вашу тему.
Нам нужны хуки wp_headи wp_footerдля шапки и футера соответственно.
Обычно, когда мы хотим запустить хук, мы вызываем do_action(<hook name>). Но поскольку эти два хука очень важны, WordPress упростил их для нас, поместив в простой вызов функции. Таким образом, для этих двух хуков вы можете просто использовать wp_head()и wp_footer(). В фоновом режиме эти двое запускают do_action().
Давайте добавим эти два хука (вызовы функций) в наши шаблоны верхнего и нижнего колонтитула и посмотрим, что произойдет.
Нажмите «Обновить» в интерфейсе. Если вы вошли в систему, вы должны увидеть панель администратора WordPress! Это означает, что WordPress теперь может успешно добавлять свои скрипты и стили в вашу тему.
Вы можете проверить свой исходный код HTML и увидеть, что ваш заголовок теперь содержит довольно много кода. Это код, который вы не добавили в свою тему. Как видите, сам WordPress использует хуки, которые мы добавили, для своих целей.
Давайте перейдем от хуков и начнем изучать, как мы можем динамически извлекать контент из WordPress и выводить его в наш заголовок.
Динамический контент в шапке
Скажем WordPress динамически устанавливать заголовок документа (для <title>тега). Для этого мы будем использовать функцию (у которой, кстати, есть фильтр), называемую wp_title(). Как мы узнали выше, поскольку wp_title()это фильтр, вы, WordPress или плагины можете изменить вывод. Мы добавим фильтр к этому позже в этом уроке.
Функция wp_title()принимает несколько аргументов, которые вы можете настроить по своему вкусу, но сейчас я добавлю пустую строку, чтобы она отображала только заголовок любой страницы, на которой мы находимся.
Замените свой <title>тег header.phpна это:
Увлеченные из вас, возможно, заметили, что главная страница не будет генерировать заголовок. Это стандартное поведение WordPress, которое мы исправим позже в этом руководстве (сделаем это с помощью фильтра). Если вы посещаете один пост или страницу, вы должны получить заголовок поста.
В WordPress есть отличная функция, которая динамически генерирует набор классов для <body>тега в зависимости от того, на какой странице мы находимся; называется body_class. Обновите <body>тег в header.phpэто:
Обновите и просмотрите все классы, добавленные в <body>тег. Взгляните на разные страницы (главная, одиночная, категория). Все эти классы очень полезны для стилизации и различения разных похожих частей. Скорее всего, вы будете использовать некоторые из них в своем CSS.
Чтобы следовать хорошей практике HTML, мы также должны указать язык сайта в HTML. Для этого мы используем функцию WordPress, чтобы получить язык из настроек; языковые_атрибуты.
И, наконец, я хотел бы добавить некоторые метатеги и тому подобное, которые не являются специфическими для WordPress, но соответствуют общепринятым практикам веб-дизайна. header.phpВот как выглядит полный файл:
Для следующего шага в этом руководстве мы уйдем header.phpи углубимся в index.phpизучение того, как получать более динамичный контент, например записи.