Как добавить стиль для отдельного поста на блоге Wordpress? Статья-инструкция

7 апреля, 2018 Максим Метелев 104080 просмотров Комментариев нет

Всем привет дорогие друзья! Вы наверняка хоть раз, но сталкивались с сайтами на которых по разному был оформлен стиль заметок. От сайта к сайту можно наблюдать тенденцию «липких» записей, выделенных особым цветом или, например, каждый пост из отдельной категории выполнен по особому стилю. Вы спросите как же этого достичь, чтобы для каждого поста было свое стилистическое оформление CSS. Подробности раскрою ниже.

Уникальный стиль для каждого поста в WordPress

Примечание: Вам необходимо будет вносить изменения и пользовательский файл CSS. Для этого нужно обладать базовыми навыками и пониманием как работают стили в верстке и программировании.

Содержание

1 Создание стиля для отдельных индивидуальных постов в WordPress
2 Функция post_class
3 Добавляем стиль постов в зависимости от авторства
4 Стилизация постов популярных записей
5 Стиль для постов, основанных на произвольных полях

Создание стиля для отдельных индивидуальных постов в WordPress

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

Основная функция WordPress, называемая post_class () , используется темами, чтобы сообщить WordPress, где добавить эти классы CSS по умолчанию для записей.

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

Классы CSS по умолчанию в WordPress

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

.post-id
.post
.attachment
.sticky
.hentry (hAtom микроформат страниц)
.category-ID
.category-name
<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span style="font-size: 16px; background-color: #ffffff;">.tag-name
.format-{format-name}
.type-{post-type-name}
.has-post-thumbnail
.post-password-required
.post-password-protected

Пример вывода будет выглядеть вот так:

<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">

1	<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">

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

Например, если вы хотите создать отдельный пост, то вы можете использовать класс post-id в своем пользовательском CSS.

.post-412 { 
background-color: #FF0303;
color:#FFFFFF; 
}

.post-412 {

background-color: #FF0303;

color:#FFFFFF;

}

Не забудьте переопределить идентификатор контейнера на свой!

Добавление стиля для отдельного поста

Давайте взглянем еще на один пример. Попробуем добавить стили к постам, которые объединены категорией под названием news.

Мы можем это сделать добавив вот этот код в пользовательский CSS:

.category-news { 
    font-size: 18px;
    font-style: italic;
}

.category-news {

font-size: 18px;

font-style: italic;

}

Теперь наши записи будут иметь стиль, который задает контейнер .category-news

Функция post_class

Программисты и создатели тем используют функцию post_class , чтобы сообщить WordPress, где добавить классы post. Обычно он находится в теге <article> .

Функция post_class не только загружает созданные по умолчанию WordPress классы CSS, но также позволяет добавлять собственные классы.

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

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

1	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Давайте добавим свой собственный CSS-класс с таким атрибутом:

<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>

1	<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>

Функция post_class выведет соответствующие классы CSS по умолчанию вместе с вашим собственным.

Если вам нужно задать несколько классов, то можно сделать это, определив их в массив, а потом вызвать их в функции post_class

<?php 
$custom_classes = array(
        'longform-article',
        'featured-story',
        'interactive',
    );
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>>

<?php

$custom_classes = array(

'longform-article',

'featured-story',

'interactive',

);

Добавляем стиль постов в зависимости от авторства

Классы CSS по умолчанию, сгенерированные функцией the_posts , не включают имя автора как класс CSS.

Если вы хотите настроить стиль каждого сообщения на основе автора, вам нужно сначала добавить имя автора в качестве класса CSS.

Вы можете сделать это, используя следующий фрагмент:

<?php $author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>

1 2	<?php $author = get_the_author_meta('user_nicename'); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>

Этот код добавит никнейм пользователя в качестве класса CSS. Nicename — это URL-адрес, используемый WordPress. Он не имеет пробелов, и все символы в нижнем регистре, что делает его идеальным для использования в качестве класса CSS.

Вышеприведенный код даст вам такой вывод:

<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">

1	<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">

Теперь зададим для класса .peter стиль и применим его ко всем записям автора:

.peter { 
background-color:#EEE;
border:1px solid #CCC; 
}

.peter {

background-color:#EEE;

border:1px solid #CCC;

}

Стилизация постов популярных записей

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

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

Для этого нужно добавить некоторый код в файл темы. Этот код входит в цикл WordPress, его вы можете добавить непосредственно перед тегом <article> .

<?php 
    $postid = get_the_ID();
    $total_comment_count = wp_count_comments($postid);
        $my_comment_count = $total_comment_count->approved;
    if ($my_comment_count <10) {
        $my_comment_count = 'new';
    } elseif ($my_comment_count >= 10 && $my_comment_count <20) {
        $my_comment_count = 'emerging';
    } elseif ($my_comment_count >= 20) {
        $my_comment_count = 'popular';
    }
?>

<?php

$postid = get_the_ID();

$total_comment_count = wp_count_comments($postid);

$my_comment_count = $total_comment_count->approved;

if ($my_comment_count <10) {

$my_comment_count = 'new';

} elseif ($my_comment_count >= 10 && $my_comment_count <20) {

$my_comment_count = 'emerging';

} elseif ($my_comment_count >= 20) {

$my_comment_count = 'popular';

}

Данная конструкция кода проверяет количество комментариев для отображаемых постов и присваивает им значение, основанное на счете. Например, посты у которых меньше чем 10 комментариями получают класс под названием new, менее 20 называются появляющимися, и все, что имеет более 20 комментариев попадает в класс popular.

Затем вам нужно добавить класс CSS с комментариями к функции post_class .

<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>

1	<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>

Таким образом у нас будут добавлены классы с названиями new, emerging и popular в зависимости от того, какое количество комментариев присвоено им.

Добавим пользовательские CSS стили для них:

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

.new {border: 1px solid #FFFF00;}

.emerging {border: 1px dashed #FF9933;}

.popular {border: 1px dashed #CC0000;}

В этом примере мы добавили просто границы-рамки разных цветов.

Стиль для постов, основанных на произвольных полях

Классы CSS с жестким кодом в вашем файле темы ограничивают вас только этими конкретными классами CSS. Что делать, если вы хотите решить, какой класс CSS добавить к статье, когда вы ее пишете?

С помощью произвольных полей вы можете добавлять классы CSS на лету.

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

Добавление имя класса в произвольные поля

Добавьте post-class в качестве имени, которое будет ключом произвольного поля и все, что вы хотите использовать в качестве класса CSS в поле значений.

Не забудьте нажать кнопку «Добавить настраиваемое поле», чтобы сохранить его, а затем сохранить сообщение.

Затем отредактируйте свои файлы тем, чтобы отобразить свое настраиваемое поле в качестве класса post.

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

Включение произвольных полей в админ панели

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>

1 2	<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>

Это выдаст нам следующий HTML код:

<article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">

1	<article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">

Теперь вы можете добавить пользовательский CSS для добавляемого post_class с помощью произвольного поля.

.trending{
background-color:##ff0000;
}

.trending{

background-color:##ff0000;

}

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

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

Приятного изучения и отличного настроения!

Рубрики: WordPress