Первый пост другого стиля CSS и циклы

@Qusaze123 · Регистрация: 05.10.2019

Студворк — интернет-сервис помощи студентам

Приветствую всех. Надеюсь на вашу помощь, ибо не силен в PHP. Знаю, что для решения моей проблемы надо иметь дело с циклами, но не получается их подстроить под свой код. Мне надо, чтобы первый пост имел другой стиль, оставив уже имеющие классы и создав новые для первого поста. Стили задам сам, мне просто надо отделить первый пост и остальные. Спасибо

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<article id="post-<?php the_ID(); ?>" <?php post_class( array( 'card', 'archive' ) ); ?>>
    <div class="post-head" style="background-image: url( <?php the_post_thumbnail_url(); ?> )">
    <div class="entry-meta">
        <div class="cat-links"><?php pixigo_post_categories(); ?></div>
        <div class="post-meta">
            <?php echo get_the_date('j.n'); ?>
        </div>
    </div>
    </div>
 
    <header class="entry-header">
        <?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
    </header><!-- .entry-header -->
 
    <div class="excerpt">
        <?php do_excerpt(get_the_excerpt(), 20); ?>
    </div><!-- .excerpt -->
</article><!-- #post-<?php the_ID(); ?> -->

@wwowa · 06.10.2019, 18:27

Сообщение от Fedor92

Учитесь кодить правильно!

Допустим в теме 1000 постов. Мы точно знаем, что нам нужно выделить только первый пост. Получается, что мы точно знаем, что 999 раз у нас будет холостая проверка условия и
операция index++.
Так что это рабочее решение, но далеко не идеальное. имхо

@Fedor92 · 06.10.2019, 18:41

Сообщение от wwowa

Так что это рабочее решение, но далеко не идеальное. имхо

Чаво?

А какое идеальное тогда?

CSS - топор? Проверка первый ли пост списке всегда делается на стороне бэка, а не фронта! А теперь конкретная задача: в первом посте нужно вывести миниатюру, в остальных нет. Будете херачить миниатюры во все посты и скрывать их с помощью display:none?

@wwowa · 06.10.2019, 19:49

Сообщение от Fedor92

А какое идеальное тогда?

я не знаю. Идеального может и не быть

Сообщение от Fedor92

CSS - топор?

Какая между ними особая разница

CSS
1
2
3
4
5
6
#blog_post > article.card:first-child {
        background: aqua;
}
.first{
    color:red
}

Сообщение от Fedor92

А теперь конкретная задача: в первом посте нужно вывести миниатюру

А если завтра война?? Задачи с изменением разметки не было, только стилизация...
Ну да ладно, спор то ни о чем как бы.Решение найдено..

@Fedor92 · 06.10.2019, 21:11

Не по теме:

Сообщение от wwowa

А если завтра война??

И дальше что? Вот Вам абстрактный пример раз так-то не понятно о чём я говорю. Представьте, что Вы дантист. И к Вам человек пришёл лечить больной зуб. Он наполовину прогнил, а на половину живой. То есть на ту часть, что жива пока ещё можно поставить штифт. А на штифт коронку. И тут он Вам говорит: доктор, помогите мне, но чтобы быстро и не больно. Вы слышите слово "не больно" и вместо коронки ставите временную пломбу. Проходит время - он возвращается. Вы ему опять ставите временную пломбу и так происходит до тех пор пока у пациента не сгнил зуб целиком. И он остался благодаря Вашей помощи без зубов, зато не больно. То же самое и в кодинге, сколько костылей не пиши рано или поздно придётся переделывать и лучше сразу сделать по-человечески и надолго, чем писать костыли на CSS или JS.

@Qusaze123 · 07.10.2019, 00:55 **[ТС]**

Ну решение "топором" имеет минусы. Каждый первый пост на любой странице принимает общий заданный вид через CSS.

@wwowa · 07.10.2019, 08:27

Сообщение от Qusaze123

Ну решение "топором" имеет минусы.

При любом решении у вас добавляется класс к первому посту или вы его определяете. И почему на любой странице? Только в том месте, где выводится данный шаблон. К тому же у вордпресс есть куча проверок, является ли это страницей, постом и тд...

Сообщение от Fedor92

раз так-то не понятно о чём я говорю.

Да понятно. И стало еще понятней

Я как раз обхожу стороной таких дантистов, которые при каждой дырочке предлагают поставить коронку.Тетенька доктор, к которой я хожу говорит, что не надо раскидываться зубами и лечить зуб до последнего.
Современные пломбы это позволяют. А для штифта достаточно корня. Чего бы ему гнить, если вовремя лечить зуб.
ps А на какую кнопочку нажать, чтобы сделать текст на маленьким и серым?

@Fedor92 · 07.10.2019, 11:10

Сообщение от Qusaze123

Ну решение "топором" имеет минусы. Каждый первый пост на любой странице принимает общий заданный вид через CSS.

Поверьте - это только один из. К примеру, со временем может измениться вёрстка. Или понадобится изменить внешний вид первого поста, к примеру воткнуть только для первого поста какие-то медиа-элементы. Или в код влезет ламер, который увидит в CSS(#blog_post > article.card:first-child) "ненужные стили" и удалит их. Или со временем появятся страницы на которых будут биться идентификаторы. К примеру, на сайте появится новые страницы, где будет идентификатор blog_post и класс article.card А дебажить отвал стилей куда сложнее, чем PHP. И это только варианты возможных событий навскидку - из личного опыта.

Не по теме:

Сообщение от wwowa

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

А, ну в таком случае желаю Вам найти нормально дантиста. Я, например, свои зубы тётенькам не доверяю...

А, также, желаю Вам получить такой опыт, когда придётся править код после нерешительных верстальщиков, которые долгие годы писали костыли на CSS и JS лишь бы PHP не трогать. Поверьте, Вы вспомните столько мата - сколько никогда не знали при жизни.

Сообщение от wwowa

А на какую кнопочку нажать, чтобы сделать текст на маленьким и серым?

Тег OFF - её нажимают когда флуд не по теме...

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Qusaze123 0 / 0 / 0 Регистрация: 05.10.2019 Сообщений: 30
	07.10.2019, 00:55 [ТС]
	Ну решение "топором" имеет минусы. Каждый первый пост на любой странице принимает общий заданный вид через CSS. 0