Учебное пособие по темам WordPress для начинающих. Часть 7. Настройка темы и избранные изображения

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

Мы будем работать в основном с functions.phpфайлом, который мы добавили в предыдущем уроке. В конце мы добавим код для вывода избранных изображений внутри наших шаблонов.

Настройка темы

Всем темам нужен некоторый код для его настройки, сообщающий WordPress об активации определенных функций. Это включает в себя активацию меню, виджетов, перевод и так далее. Обычно это делается в «функции настройки темы», обычно подключаемой к хуку с удобным названием after_setup_theme. Для некоторых конкретных вещей нам нужно использовать инициализирующий хук WordPress, называемый init.

Написание необходимого кода настройки темы дляafter_setup_theme

Давайте настроим такую ​​«функцию настройки темы» в нашем functions.php, подключившись к after_setup_theme:

add_action('after_setup_theme', 'wptutorial_setup_theme');
function wptutorial_setup_theme() {
 
}

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

Сначала нам нужно определить максимальную ширину изображений и встраивания (например, видео). Это гарантирует, что когда авторы вставляют большие изображения в посты, они не превышают определенной ширины. Я установил его на 840 пикселей (потому что мне нужно место для боковой панели), но вы можете настроить его по своему вкусу.

$GLOBALS['content_width'] = 840;

Мы также должны сообщить WordPress, что тема является переводимой и где она может искать файлы перевода. Я подробно расскажу о переводе темы WordPress в следующем шаге этой серии руководств по темам.

load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');

Обратите внимание на использование новой функции для получения каталога вашей темы, get_stylesheet_directory(). Это очень похоже на get_stylesheet_directory_uri()то, с чем мы столкнулись на последнем шаге, но здесь нам нужен относительный путь, а не URL.

Затем нам нужно добавить некоторые «поддержки тем», которые активируют функциональность WordPress, которая не активирована по умолчанию.

Это была целая куча add_theme_supportзвонков! Как следует из названия, add_theme_supportуказывает WordPress активировать функции, которые не активированы по умолчанию. Например, рекомендуемые изображения («пост-миниатюры»), поддержка тегов HTML5 и функция пользовательского логотипа WordPress в Customizer (настройте желаемое изображение логотипа, если хотите!).

Есть еще много интересных функций, поэтому я рекомендую вам просмотреть документацию для add_theme_support. Например, есть довольно новый, title-tag, который обрабатывает тег title. Я пропустил это в этом уроке, так как мы уже добавили тег title header.phpвручную.

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

Наконец, мы добавили несколько add_theme_supportдля нового Гутенберга в WordPress. Мы добавим поддержку широких разделов, активируем функциональные стили блоков и поддержку адаптивных встраиваний:

add_theme_support('wp-block-styles');
add_theme_support('align-wide');
add_theme_support('responsive-embeds');

Окончательный результат

Вот окончательная функция настройки в нашем functions.php:

После сохранения вы сможете добавлять избранные изображения к сообщениям в админке! Давайте добавим еще одно исправление темы functions.php, прежде чем мы добавим избранные изображения в наши шаблоны; помните, что wp_titleв нашем header.phpпо умолчанию ничего не может выводиться на главной странице? Давайте исправим это.

Добавление фильтра вwp_title

Давайте добавим нашу первую правильную функцию модификации фильтра, используя add_filter(). Фильтр, к которому мы подключимся, имеет то же имя, что и функция, которую мы использовали для WordPress для динамического получения заголовка страницы; wp_title. Что мы исправим, так это убедитесь, что заголовок не пуст на главной странице, что по умолчанию в WordPress. Находясь на главной странице, мы хотим, чтобы она была заполнена именем сайта WordPress.

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

Знать, когда нужно настроить заголовок

Мы хотим настроить переменную title только в том случае, если мы находимся на главной странице. Для всех остальных страниц мы хотим оставить его в покое (просто вернуть как есть). Но как мы узнаем, что находимся на первой полосе?

Мы можем воспользоваться условными тегами WordPress, представляющими собой целую кучу полезных функций, которые возвращают true или false в зависимости от условия. Чаще всего они используются, чтобы спросить, находимся ли мы на определенной странице или шаблоне. Мы можем просто спросить: «Мы на главной странице?». Если этот метод возвращает true, только тогда мы изменим переменную title.

Стоит отметить, что для главной страницы есть два условных тега, а именно is_home()и is_front_page().Они различаются в зависимости от вашей настройки «Чтение» — независимо от того, показывает ли ваша главная страница последние сообщения или она настроена на фиксированную страницу. Если вы следуете этому руководству с совершенно новой установкой WordPress с настройками по умолчанию, вы используете is_front_page().

Получение имени сайта WordPress

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

Для получения информации о текущей установке WordPress мы используем bloginfo()функцию. В качестве параметра мы просим вернуть имя сайта, что делается установкой параметра в ‘ name‘. И поскольку это фильтр, и нам нужно вернуть его, а не эхо, мы используем родственный метод get_bloginfo(). Вызов bloginfo()всегда будет выводиться эхом.

add_filter('wp_title', 'wptutorial_title_filter');
function wptutorial_title_filter($title) {
    if (is_front_page()) {
        return get_bloginfo('name');
    }
    return $title;
}

Если вы обновите свою главную страницу, вы увидите, что название вашего сайта появилось в <title>теге (и на вкладке браузера)! Наш фильтр влияет только на главную страницу, поэтому любые другие страницы, такие как отдельный пост, должны по-прежнему возвращаться так же, как и раньше; название поста.

Вывод избранных изображений в файлы шаблонов

Ранее, когда мы настраивали поддержку темы, мы добавили поддержку избранных изображений. Теперь, когда это активировано, мы можем выводить эти изображения в наши шаблоны. Давайте сделаем это сейчас!

Откройте index.phpи найдите для них место внутри петли. Я решил разместить его после заголовка, но вам решать, где вы хотите их. Вы используете функцию the_post_thumbnail()для вывода изображения. Рекомендуется сначала проверить, установлено ли в сообщении избранное изображение, что мы и делаем с помощью has_post_thumbnail().

Если в вашем сообщении нет избранного изображения, вы не увидите ничего после заголовка. Однако, если вы установите избранное изображение в одном из своих сообщений, the_post_thumbnail()будет выведен <img>тег с выбранным изображением. Эта функция принимает некоторые дополнительные параметры. Например, вы можете определить, какой размер изображения вы хотите использовать, и управлять атрибутами, добавляемыми к изображению. Как обычно, я рекомендую вам быстро просмотреть документацию и настроить ее по своему вкусу.

Документация по используемым методам

• add_action
• load_theme_textdomain
• get_stylesheet_directory
• add_theme_support
• add_filter
• is_front_page
• get_bloginfo
• has_post_thumbnail
• the_post_thumbnail