До сих пор в этой серии я представил вам, что такое форматы постов и как использовать разные шаблоны для разных форматов постов в цикле. В этом посте я покажу вам, как настроить применение разных CSS к частям контента поста в зависимости от формата поста.
Примеры, которые я покажу вам, довольно просты, они просто меняют цвет фона, но как только вы поймете эти базовые понятия, вы сможете использовать их для применения различных дизайнов к разным форматам постов и действительно выделите свою тему тем, как она обрабатывает СМИ и другой специализированный контент.
Использование почтовых форматов почтовых классов
post_class() стандартами темы используют функцию post_class() чтобы установить классы для контейнера, окружающего содержимое публикации. Эта функция добавляет класс на основе формата записи. Так, например, если сообщение имеет формат «изображение», оно будет иметь класс «формат-изображение». Это позволяет очень легко ориентировать контейнеры внутри поста через CSS без необходимости изменения каких-либо шаблонов страниц или написания каких-либо специальных функций.
Чтобы изменить цвет фона содержимого сообщения во всех сообщениях с изображениями, вы можете просто добавить этот CSS в style.css вашей темы:
|
1
2
3
|
.format-image .entry-content {
background-color: red;
}
|
Иногда вы не можете достичь того, чего хотите, без добавления дополнительных классов или полного изменения макета. Второй вариант — почему мы используем разные части контента. Я изложил, как использовать разные части контента для формата поста в своем последнем посте из этой серии.
Если у вас есть другая часть контента, вы можете вносить любые изменения, например, в сообщениях с изображениями, которые вы хотите сделать изображенным изображением контейнером полной ширины, а не маленьким плавающим элементом.
Выделение различных почтовых форматов в блоге
Если вы просто хотите изменить внешний вид поста в индексе блога, чтобы сделать его лучше, вы можете добавить фильтр для добавления дополнительных классов в post_class() в определенных ситуациях. Мы можем использовать фильтр post_class для добавления определенных классов в сообщение в определенных ситуациях, например, если оно имеет формат изображения и не является просмотром одного сообщения.
|
1
2
3
4
5
6
7
|
function slug_preview_image_class( $classes ) {
global $post;
if ( has_post_format( ‘image’, $post->ID ) && !is_single( $post->ID ) )
$classes[] = ‘preview-image-post’;
return $classes;
}
add_filter( ‘post_class’, ‘slug_preview_image_class’ );
|
Этот фильтр позволяет настроить таргетинг на посты изображений в индексе или архиве блога, не влияя на то, как они выглядят как отдельные посты, нацелив класс «preview-image-post».
Вы также можете просто добавить класс предварительного просмотра к любому сообщению с форматом сообщения, отличным от стандартного формата. Фильтр, который я только что показал, можно изменить, чтобы сделать это, либо вручную добавив все форматы has_post_format() поддерживаемые темой, в массиве в has_post_format() .
Конечно, вы можете не знать, какие форматы сообщений поддерживает тема, если, например, вы добавляете эту функцию в плагин вместо темы. В этом случае было бы лучше получить список зарегистрированных в данный момент get_theme_support( 'post-formats' ) используя get_theme_support( 'post-formats' ) как вы можете видеть в этой модифицированной функции фильтра.
|
1
2
3
4
5
6
7
8
|
function slug_post_format_preview_class( $classes ) {
global $post;
$post_formats = get_theme_support( ‘post-formats’ );
if ( has_post_format( $post_formats[0], $post->ID ) && !is_single( $post->ID ) )
$classes[] = ‘preview-format’;
return $classes;
}
add_filter( ‘post_class’, ‘slug_post_format_preview_class’ );
|
С помощью этого фильтра вы все равно можете настроить таргетинг на отдельные форматы постов по отдельности или все вместе. Этот CSS вместе с фильтром, который использует фильтр предварительного просмотра, изменяет фон содержимого публикации для каждого формата сообщения на синий, если только это не публикация изображения, в этом случае цвет фона будет красным.
|
1
2
3
4
5
6
7
|
.preview-format .entry-content {
background-color: #00F;
}
.preview-format.format-image .entry-content {
background-color: #F00;
}
|
Существует больше форматирования, чтобы сделать
Эта статья дала вам представление о том, как вы можете отформатировать различные форматы записей, чтобы они выделялись в цикле, или даже настраивать их внешний вид в режиме просмотра отдельных сообщений. Как всегда, я советую вам поэкспериментировать с примером кода и справочными темами, поддерживающими форматы постов, такими как тема Socially Awkward от Theme Hybrid.
Если вы не используете форматы постов только потому, что у вас так много постов без установленного формата поста, обязательно посмотрите следующий пост из этой серии. Я буду освещать массовое обновление формата сообщений.