Вы хотите добавить нечетные и четные классы к статьям на тему вашей WordPress блог ? Добавление класса позволит вам отображать определенный стиль для каждой статьи.
В этом уроке мы покажем вам, как отображать четные или нечетные классы в WordPress.
Зачем добавлять классы? пар "Или" Нечетный » на тему вашего WordPress блог ?
Многие Темы WordPress используйте старый или тот же класс для комментариев WordPress. Это позволяет пользователям видеть, где заканчивается один комментарий и начинается другой.
Точно так же вы можете использовать эту технику для своих статей. Это выглядит эстетично, позволяя пользователям быстро сканировать объемные страницы. Это особенно полезно для домашней страницы газет или журналов.
Тем не менее, мы посмотрим, как добавить класс в статьи вашего WordPress блог.
Как добавить класс чет / нечет на WordPress
WordPress генерирует классы CSS по умолчанию и добавляет их в различные статьи на вашем сайте на лету. Эти CSS-классы помогают разработчикам плагинов и тем добавлять свои собственные стили для каждой отдельной статьи.
WordPress также предлагает функцию под названием post_class Который используется разработчиками тем для добавления классов в статьи.
Функция post_class Это также фильтр, который означает, что вы можете манипулировать этим с. Это именно то, что мы собираемся сделать здесь.
Просто добавьте этот код в свой файл functions.php. WordPress тема.
oddeven_post_class функция ($ класс) {глобальный $ current_class; $ Классы [] = $ current_class; Current_class $ = ($ current_class == 'нечетное')? «Даже» «нечетное»; вернуть $ классов; } Add_filter ( 'post_class', 'oddeven_post_class'); глобальный $ current_class; $ Current_class = 'нечетное';
Эта функция просто добавляет класс для четных и нечетных элементов.
Вы найдете четные и нечетные классы в исходном коде вашего сайта. Просто наведите указатель мыши на заголовок статьи, затем щелкните правой кнопкой мыши, чтобы проверить элемент.
Теперь, когда вы добавили в свои статьи нечетные и четные классы. Следующий шаг - придать им уникальный стиль с помощью CSS. Вы можете добавить свой собственный код CSS в свою дочернюю тему или с помощью простого плагина CSS.
Вот пример кода CSS, который вы можете использовать в качестве отправной точки:
.EVEN {фон: #f0f8ff; .odd} {фон: #f4f4fb; }
Вот как может быть результат:
Вам понадобится немного практики, чтобы добиться хороших результатов, но для этого вам нужно будет освоить CSS или просто использовать такой инструмент, как CSS Hero.
Это так просто. Я надеюсь, что этот урок будет вам очень полезен. Не стесняйтесь задавать нам вопросы или делиться этим учебником со своими друзьями в ваших любимых социальных сетях.
