Красивый вывод цитаты wordpress с помощью CSS и плагина
Опубликовано: 01.09.2018
Понятие цитаты в wordpress
Чтобы выделить какой-то важный кусок текста в статье, в вордпрессе существует такая классная вещь как цитаты (не те которые разбирали про неправильный обрыв текста ). На панели инструментов эта кнопочка выглядит так.
Использование шорткодов для оформления страниц и статей на сайте Вордпресс
Все ей пользоваться умеют- обводится левой кнопкой мыши тот текст, который хотим выделить, и нажимаем данную кнопку. Собственно сейчас вы видите этот текст в оформлении цитат.
Все шаблоны разные, и соответственно оформление цитат тоже. В ряде случаев вообще не красивое, и которое хочется поменять. Дальше буду учить как это исправить.
Начинаем работу.
Предупреждаю что работать будем с таким языком как CSS. Главное понять весь принцип происходящего а дальше будет не сложно.
Находим файл и искомый стиль.
Надо найти файл style.css в активной теме. Для это идем во внешний вид, а дальше редактор, находим style.css. Следующим действием надо найти стиль для blockquote . Последовательность всех действий смотрим на снимке.
Меняем оформление.
Надо понять что именно вы хотите видеть. Я советую, ничего не придумывать никаких картинок и тому подобного. Максимум что можно сделать
Сменить фон. Размер шрифта и его оформление. Рамку (сплошную, прерывистую, точками), можно с одной стороны либо с двух.Никаких картинок и тому подобного, иначе будет трудно их адаптировать , не нужны вам лишние проблемы. Предлагаю вам стандартный набор.
blockquote{ background-color: #f6f6f6; border-left: 4px solid #1F37FF; box-shadow: 1px 2px 2px 2px rgba(0,0,0,.4); margin: 10px 10px 20px 10px; font: 20px georgia,Helvetica,sans-serif; font-style: italic; color: #000000; text-shadow: 2px 2px 2px #FFFFFF; }Разберем данный код по строчкам.
Cам стиль для блока цитат с открывающейся скобкой. Цвет фона. Обводка, я сделал только слева, если есть желание, то можете сделать со всех сторон, либо же с двух. Тень блока. Отступы чтобы весь блок не прилипал к тексту статьи. Размер шрифта и его принадлежность. Стиль шрифта, я сделал курсив. Цвет шрифта. Тень от текста. Закрывающая скобка стиля.Язык CSS очень прост и интуитивно понятен, можете прочитать строчки и сами все поймете. Можете добавлять, наоборот убрать, но повторю картинки не вставлять, потому что ненужный нагруз на статью и адаптация. Если есть знания то примените, либо же спрашивайте в комментариях.
Второй способ- плагином для оформления цитат вордпресс блога
Из всего изобилия мне понравился один, это WP-NOTE простой и не нагруженный. Устанавливается он из админки поиском по плагинам.
Теперь научимся им пользоваться
Имеет он 5 вариантов оформления для разных ситуаций. Сначала расскажу как его прописывать. Когда пишете статью, тот текст который будет выделен надо заключить в специальные теги, я покажу на примере [ note ], смотреть скриншот.
Понятно, показываю все теги и к ним расшифровки.
Используйте на здоровье. Я не пользуюсь данным плагином, у меня на все отвечает blockquote, а так симпатичный и легкий плагин.
Всем пока.