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

Дата: / Автор поста:

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

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

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

оформление цитат wordpress

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

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

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

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

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

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

где прописывать 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 простой и не нагруженный. Устанавливается он из админки поиском по плагинам.

плагин оформления цитат wp-note

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

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

как пользоваться wp-note

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

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

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

Всем пока.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(2 голоса, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Руслан

    Цитаты, цитаты... :twisted:

    По плагину можно добавить? Все прекрасно, мне он очень нравился, но есть один жирный минус — он не адаптивный :(

    И еще, мы отчета дождемся (за два месяца!!!), мне очень интересно :)

    • Лифанов Валентин

      Привет, дождетесь завтра будет. Плагин да ты прав не адаптивен, надо над ним поработать может, альтернативы я пока не знаю.

  • Андрей

    Я тоже давно отчет жду

    • Лифанов Валентин

      И я )))

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.