Красивый вывод цитаты wordpress с помощью CSS и плагина

Опубликовано: 01.09.2018

видео Красивый вывод цитаты wordpress с помощью CSS и плагина

Добавление буквиц в WordPress

Приветствую. В этом уроке хочу вас научить как правильно менять оформление цитат в wordpress. Для начала разберемся что вообще такое циатты в тексте.

Понятие цитаты в wordpress

Чтобы выделить какой-то важный кусок текста в статье, в вордпрессе существует такая классная вещь как цитаты (не те которые разбирали про неправильный обрыв текста ). На панели инструментов эта кнопочка выглядит так.


Использование шорткодов для оформления страниц и статей на сайте Вордпресс

Все ей пользоваться умеют- обводится левой кнопкой мыши тот текст, который хотим выделить, и нажимаем данную кнопку. Собственно сейчас вы видите этот текст в оформлении цитат.

Все шаблоны разные, и соответственно оформление цитат тоже. В ряде случаев вообще не красивое, и которое хочется поменять. Дальше буду учить как это исправить.

Начинаем работу.

Предупреждаю что работать будем с таким языком как CSS. Главное понять весь принцип происходящего а дальше будет не сложно.

Находим файл и искомый стиль.

Надо найти файл style.css в активной теме. Для это идем во внешний вид, а дальше редактор, находим style.css. Следующим действием надо найти стиль для blockquote . Последовательность всех действий смотрим на снимке.

Сам путь до файла style.css Запрос в поиске. Поиск открывается нажатием клавиш CNTRL+F, а дальше вставляйте запрос. Найденные строчки кода, они и нужны.

Меняем оформление.

Надо понять что именно вы хотите видеть. Я советую, ничего не придумывать никаких картинок и тому подобного. Максимум что можно сделать

Сменить фон. Размер шрифта и его оформление. Рамку (сплошную, прерывистую, точками), можно с одной стороны либо с двух.

Никаких картинок и тому подобного, иначе будет трудно их адаптировать , не нужны вам лишние проблемы. Предлагаю вам стандартный набор.

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, а так симпатичный и легкий плагин.

Всем пока.

IRC (Internet Relay Chat)
rss