Хотите ли вы добавить четные и нечетные классы к постам в вашей теме WordPress? Добавление четных и нечетных классов позволяет стилизовать каждый второй пост по-разному. В этой статье мы покажем вам, как добавить четный/нечетный класс к посту в темах WordPress.
Зачем добавлять четные/нечетные классы к вашим постам в темах WordPress?
Многие темы WordPress используют старый или даже класс для комментариев WordPress. Это помогает пользователям визуализировать, где заканчивается один комментарий и начинается следующий.
Аналогично, вы можете использовать эту технику для ваших постов WordPress. Это выглядит эстетично и помогает пользователям быстро сканировать страницы с большим количеством контента. Это особенно полезно для главной страницы журналов или новостных сайтов.
Сказав это, давайте посмотрим, как добавить четные и нечетные классы к вашим постам в теме WordPress.
Добавление класса чет/нечет к постам в теме WordPress
WordPress генерирует классы CSS по умолчанию и добавляет их к различным элементам на вашем сайте на лету. Эти CSS-классы помогают разработчикам плагинов и тем добавлять свои собственные стили для различных элементов.
WordPress также поставляется с функцией post_class, которая используется разработчиками тем для добавления классов к элементам поста. Посмотрите наше руководство о том, как стилизовать каждый пост WordPress по-разному.
Класс post_class также является фильтром, что означает, что вы можете подключать к нему свои собственные функции. Это именно то, что мы будем делать здесь.
Просто добавьте этот код в функции вашей темы.php или в плагин для конкретного сайта.
function oddeven_post_class ( $classes ) < global $current_class; $classes[] = $current_class; $current_class = ($current_class == 'odd') ? 'even' : 'odd'; return $classes; >add_filter ( 'post_class' , 'oddeven_post_class' ); global $current_class; $current_class = 'odd';
Эта функция просто добавляет к первому сообщению четное, затем нечетное и так далее.
Вы можете найти четные и нечетные классы в исходном коде вашего сайта. Просто подведите курсор к заголовку поста, а затем щелкните правой кнопкой мыши и выберите Inspect или Inspect Element.
Теперь, когда вы добавили четные и нечетные классы к вашим постам. Следующим шагом будет придание им стиля с помощью CSS. Вы можете добавить свой пользовательский CSS в таблицу стилей дочерней темы или с помощью плагина Simple Custom CSS.
Вот пример CSS, который вы можете использовать в качестве отправной точки:
.even < background:#f0f8ff; >.odd
Вот как это выглядело на нашем тестовом сайте:
Если вы не знаете, как использовать CSS, то вам стоит ознакомиться с CSS Hero. Это позволяет вам добавить CSS в любую часть вашего сайта WordPress без написания кода.
Мы надеемся, что эта статья помогла вам узнать, как добавить класс четности/нечетности к вашим сообщениям в темах WordPress. Вы также можете посмотреть наше руководство о том, как стилизовать макет комментариев WordPress.
Источник: www.wpbeginner.com