Flector

Как присвоить первой записи в цикле отдельный css класс?

Свой класс у первой записи

При настройке темы сайта может возникнуть вопрос о том, как выделить первую запись. Самый простой способ - это добавить нужный css класс первой записи. Для этого вам необходимо добавить в файл functions.php вашей темы следующий код:

//свой класс у первой записи в цикле start
function wph_first_post_in_query($classes) {
    global $wp_query;
    if (0 == $wp_query->current_post) {
        $classes[] = 'first';
    }
    return $classes;
}
add_filter('post_class', 'wph_first_post_in_query');
//свой класс у первой записи в цикле end

Это самый простой пример, который добавит класс 'first' каждой первой записи в каждом цикле вывода записей сайта. Этот код можно модернизировать, чтобы выделять первую запись только в конкретном месте сайта. Например, так:

//свой класс у первой записи на главной start
function wph_first_post_in_query($classes) {
    global $wp_query;
    if (is_home() and !is_paged()) {
        if (0 == $wp_query->current_post) {
            $classes[] = 'first';
        }
    }
    return $classes;
}
add_filter('post_class', 'wph_first_post_in_query');
//свой класс у первой записи на главной end

В этом случае класс 'first' будет добавлен только первой записи на главной странице (страницы, образованные постраничной навигацией также будут проигнорированы). Таким же образом легко изменить сниппет так, чтобы он присваивал нужный класс первым записям в конкретных рубриках сайта (is_category вместо is_home).


Комментарии (9 комментариев)
  1. Игорь:

    А зачем отдельный код, если на скриншоте у вас видно, что первая запись выделяется классом "post-1"?

    • Flector:

      это ID записи, а не ее порядковый номер в цикле :) то есть у меня на сайте это запись "Привет мир!".

  2. Константин:

    Не получается , ругается на строку

    add_filter('post_class', 'wph_first_post_in_query');

    • Константин:

      кому не тяжело обьясните пожалуйста, может что я делаю не так , но вставляя код в файл functions.php, он ругается на последнюю строку кода.
      Если можете обьясните пожалуйста как сделать что б для первой новости выводился отдельный класс , к примеру post1 , а для последующих просто class=post

      • Flector:

        ругается как именно?

        • Константин:
          1
          
          Fatal error: Call to undefined function add_filter() in M:hometest2.ruwwwwp-includesfunctions.php on line 505
        • Flector:

          ну какой wp-includes то? в functions.php, который находится в папке вашей темы.

        • Константин:

          Спасибо ) получилось ) файла такого не было в папке с шаблоном, шаблон только верстается в первой)
          Если не тяжело , подскажите пожалуйста как теперь к ней прописать css стиль ?

        • Flector:

          да стандартно:

          .first {
              background: yellow;
          }

          или я вас не так понял?

Написать комментарий

Для вставки кода воспользуйтесь кнопкой "Код". Используйте предпросмотр!