Как я могу отобразить первый пост в его исходном одном столбце, а все остальные в двух столбцах? wordpress

То, что мне нужно, немного похоже на этого парня, но немного сложнее, я думаю:
как я могу отобразить первый пост в одном столбце, а другие в 2 столбцах? wordpress

Таким образом, в настоящее время мои сообщения отображаются таким образом:

Новый пост)

Си

С

D (старый пост)

так далее.

Я бы хотел, чтобы они появились вот так:

Есть

B C

D E

F G

так далее.

Проблема в том, что, начиная с поста B, заголовки и выдержки будут сохранять тот же размер шрифта, что и поста A — который является двумя большими, чтобы отлично выглядеть в разделе двух столбцов. Я мог бы исправить это, уменьшив размер шрифта, но это уменьшило бы размер шрифта заголовка сообщения и отрывка, а также заголовок и текстовое содержимое на странице сообщения.

Таким образом, есть ли какой-либо способ на домашней странице уменьшить размер шрифта заголовков и отрывков сообщений B-G на домашней странице, не затрагивая заголовки сообщений A и заголовки страниц сообщений и текстовое содержимое?

Или, делая это по-другому, настраивая размер шрифта заголовка и текстового контента на странице публикации, не влияя на заголовок и выдержку записей на домашней странице?

Любая помощь или другие способы сделать очень ценится!

1 ответ

  1. Чистым решением CSS было бы установить стиль для сообщений в целом. Этот стиль будет 2-столбец стиль. Затем задайте стиль для первой записи с помощью CSS псевдо-селектора: first-of-type

    Пример CSS

    .post {
        display: block;
        width: 50%;
    }
    .post p {
        //style your heart out
    }
    .post:first-of-type {
        width: 100%;
    }
    .post:first-of-type p {
        //larger font style
    }
    

    Селектор’ first of type ‘ не будет вводить никаких дополнительных классов для обслуживания или дополнительного кода PHP. Он также в настоящее время используется 97% пользователей интернета .

    Другой вариант был бы ввести дополнительный класс css, напримерfirst-post, с его собственным стилем. Затем в цикле, который представляет записи, можно добавить счетчик, и когда этот счетчик равен 1, выполните один стиль, иначе выполните стиль 2 столбца.

    Пример PHP псевдо-кода

    for ($i = 0; $i<count($posts); $i++) {
        if ($i == 0) {
            // do single column
        } else {
            // do double column
        }
    }