Как добиться подобного оформление статьи Wordpress?

Question

[RomaShumeyko]

Может кто-то сталкивался и решал такую задачу. Хочу добиться подобного оформление (что бы и картинки во всю ширину, и текст отцентрован красиво, и разные шрифты, и заглавные буквы, и красивые цитаты, и слайдер, но я по ходу слишком нуб и не особо понимаю как это можно реализовать. Буду благодарен, если кто то подскажет, даст наводку на путь истинный :)

Пример статьи (можно полистать сайт, там много красивого и интересного):
https://birdinflight.com/ru/vdohnovenie/opyt/20170...

Answer 1

[Aleksey Chernikov]

Картинки во всю ширину

Проблема - картинки по умолчанию помещаются в теги p. На выходе получается такая конструкция:
<p> <img src='....'> </p>
Поскольку параграфы включают текст, а он должен быть уже, чем изображения, то придется от них избавится. Способы есть (ссылка, ещё ссылка); Далее задаем css:
img {max-width: 100%; height: auto);
Картинки растягиваются на всю ширину контейнера.

Текст отцентрован красиво

Задаем p, h1-h6, ul, ol (и прочие blackquote) стили нужной ширины и центруем. Например:

p {
    max-width: 580px;
     width: 100%;
     margin-left: auto;
     margin-right: auto;
}

Весь текстовый контент теперь имеет ширину 580px. Контейнер, допустим - 900px. Картинки растягиваются на всю ширину.

Разные шрифты

Можно задать параграфам - одни стили, заголовкам - другие. Соответсвенно, просто задайте разные шрифты.
Нужно более гибкое изменение - делаем shortcode для разных текстовых блоков. То же самое касается слайдера - лично я сделал бы его шорткодом.
"Красивые цитаты" делать шорткодом не требуется - просто сделайте стили для тега blackquote.

Comments

[RomaShumeyko]

Решил. Правда не совсем так, как хотелось бы, с помощью шорткодов, но пока устраивает, а дальше будет видно.)