Первый пост другого стиля 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 - её нажимают когда флуд не по теме...

Новые блоги и статьи Все статьи Все блоги /
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .
Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .	Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .

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