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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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;
}

Разберем данный код по строчкам.

1. Cам стиль для блока цитат с открывающейся скобкой.
2. Цвет фона.
3. Обводка, я сделал только слева, если есть желание, то можете сделать со всех сторон, либо же с двух.
4. Тень блока.
5. Отступы чтобы весь блок не прилипал к тексту статьи.
6. Размер шрифта и его принадлежность.
7. Стиль шрифта, я сделал курсив.
8. Цвет шрифта.
9. Тень от текста.
10. Закрывающая скобка стиля.

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

Второй способ- плагином для оформления цитат вордпресс блога

Из всего изобилия мне понравился один, это WP-NOTE простой и не нагруженный. Устанавливается он из админки поиском по плагинам.

Теперь научимся им пользоваться

Имеет он 5 вариантов оформления для разных ситуаций. Сначала расскажу как его прописывать. Когда пишете статью, тот текст который будет выделен надо заключить в специальные теги, я покажу на примере [ note ], смотреть скриншот.

Понятно, показываю все теги и к ним расшифровки.

• Блокнот или заметка, тег- [ note ]
• Помощь, тег- [ help ]
• Что-то важное, тег- [ tip ]
• Опасность, предупреждение, тег- [ warning ]
• Записать, запомнить, тег- [ important ]

Используйте на здоровье. Я не пользуюсь данным плагином, у меня на все отвечает blockquote, а так симпатичный и легкий плагин.

Всем пока.

Подробнее читайте тут