Красиво и удобно для чтения оформить статью ничуть не менее важно, чем написать качественный текст. Оформление подразумевает добавление тематичного медиаконтента, а также выделяющихся блоков. В этой статье рассмотрю, как сделать, чтобы цитата в WordPress-статье выглядела привлекательно.
- Зачем выделять цитату (прямую речь) в теле статьи
- Как оформить стили цитат вручную с помощью CSS
- CSS цитата с кавычками
- Цитата в рамке на CSS
- Блок с закругленными краями и тенью
- Как добавить градиент к фону
- Использование шрифтов Google
- WPRemark – лучший способ создания цитат на сайте WordPress
- Другие плагины для цитат на WordPress
- Spectra для редактора Gutenberg
- WP-Note 2019 для быстрого создания блоков внимания
- Quotes llama для афоризмов и отзывов
- You can quote me on that для слайдера цитат
- Шаблоны WPShop со стильными цитатами
Зачем выделять цитату (прямую речь) в теле статьи
Прямая речь эксперта, автора или комментатора в статье должна выделяться, отличаясь визуально от основного контента.
Это позволяет:
Привлечь дополнительное внимание и упростить восприятие контента. Такие компоненты выступают как «островки» информации, которые легко заметить при беглом просмотре статьи.
Усилить доверие. Использование слов известных личностей, экспертов в определенной области или авторитетных источников может значительно повысить уровень доверия к статье. Читатели склонны больше доверять информации, которая подкреплена мнениями или выводами признанных специалистов.
Подтвердить тезис. Данным инструментом в статье подтверждают аргументы. Это особенно важно в научных и аналитических материалах, где каждое утверждение должно быть подкреплено доказательствами.
Помимо смысловой и визуальной составляющей, добавление цитат в статью на сайте полезно и с других точек зрения:
Для SEO. Поисковые системы воспринимают заключенные в тег <blockquote> слова иначе, чем весь другой контент. Предполагается, что в таких блоках текста могут быть заимствования с других сайтов, которые не будут понижать общую уникальность материала в «глазах» робота ПС.
Для соблюдения авторских прав. Когда заимствуется большой кусок текста с другого сайта или используется чья-то прямая речь, лучше выделять это цитатой. Тогда ниже риск спора из-за авторских прав с правообладателем контента.
Заметными плашками текста можно выделять не только прямую речь эксперта. Такой способ оформления контента также подойдет для отзывов, уместных афоризмов и пословиц, публикации статистических данных, отрывков произведений и другого текста.
Как оформить стили цитат вручную с помощью CSS
В WordPress по умолчанию в визуальном редакторе предусмотрена кнопка (значок кавычек) для создания цитаты в тексте. Но в большинстве стандартных шаблонов достаточно простые и непривлекательные стили для текста внутри тега <blockquote>.
Ниже рассмотрим способ улучшить внешний вид таких элементов WordPress, добавив стили.
Все приведенные ниже коды CSS вы можете использовать в неизменном виде на своем сайте, либо их кастомизировать. Я сразу добавляю в код стили для адаптивности, чтобы компоненты хорошо смотрелись не только на больших экранах, но и на мобильных устройствах.
CSS цитата с кавычками
Чтобы выделить прямую речь в тексте, логично заключить ее в кавычки. А для привлечения дополнительного внимания к блоку, рекомендую добавить фон.
Используйте следующий код, чтобы создать текст на фоне с кавычками:
blockquote {
font-style: italic;
margin: 2% 5%;
padding: 20px;
position: relative;
background-color: #f9f9f9;
}
blockquote:before {
content: "«";
position: absolute;
top: -15px;
left: -15px;
font-size: 4vw;
color: #555;
}
blockquote::after {
content: "»";
position: absolute;
bottom: -25px;
right: -15px;
font-size: 4vw;
color: #555;
}
@media (max-width: 768px) {
blockquote {
margin: 5% 10%;
padding: 15px;
}
blockquote:before, blockquote::after {
font-size: 6vw;
}
}
Так будет выглядеть заключенный в тег <blockquote> текст при использовании указанного выше кода:
Если вы хотите сменить цвет кавычек, то поменяйте значение color в псевдоэлементах before и after. За цвет фона отвечает свойство background-color.
Цитата в рамке на CSS
На сайтах, где не всегда при помощи тега <blockquote> оформляется прямая речь, имеет смысл задать более нейтральные стили. Например, выделить элемент с помощью фона и рамки.
Можно использовать следующий CSS-код для решения такой задачи:
blockquote {
font-size: 16px;
font-style: italic;
color: #333;
background-color: #eaf6f9;
border: 2px solid #003366;
padding: 20px;
margin: 20px;
}
@media (max-width: 768px) {
blockquote {
font-size: 14px;
padding: 15px;
margin: 10px;
}
}
В результате получится следующий дизайн у блока:
Чтобы поменять цвет фона в рамке, замените значение у свойства background-color. А толщину, цвет и стиль рамки поправьте в свойстве border.
Блок с закругленными краями и тенью
Приведенный выше стиль выглядит достаточно формально. Он отлично смотрится на серьезных ресурсах, но для блогов лучше чуть изменить код, добавив скругления краев и небольшую тень. Тогда этот элемент станет выглядеть более «мягко».
Пример такого кода:
blockquote {
font-size: 16px;
font-style: italic;
color: #333;
background-color: #eaf6f9;
border: 2px solid #003366;
border-radius: 20px;
box-shadow: 2px 2px 5px rgba(128, 0, 128, 0.3);
padding: 20px;
margin: 20px;
}
@media (max-width: 768px) {
blockquote {
font-size: 14px;
padding: 15px;
margin: 10px;
}
}
Ниже посмотрите, как это будет выглядеть на сайте:
В код CSS я добавил два дополнительных свойства: border-radius (отвечает за скругление рамки) и box-shadow (создает у элемента тень).
Как добавить градиент к фону
Если хочется сделать фон более индивидуальным, достаточно добавить ему градиент. Это легко сделать при помощи замены значения в свойстве background-color на линейный градиент, как в приведенном ниже коде:
blockquote {
font-size: 16px;
font-style: italic;
color: #ffffff;
background: linear-gradient(to bottom, #ffd700, #800080);
border: 2px solid #003366;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(128, 0, 128, 0.5);
padding: 20px;
margin: 20px;
}
@media (max-width: 768px) {
blockquote {
font-size: 14px;
padding: 15px;
margin: 10px;
}
}
Поскольку я выбрал достаточно насыщенные цвета для градиента на фоне, также в коде я заменил цвет шрифта в свойстве color. Результат можно посмотреть ниже:
Для подбора сочетаемой цветовой гаммы фонового градиента, рамки и цвета текста, я рекомендую использовать различные онлайн-сервисы. Например, решение от Abode Color — цветовой круг от создателей Photoshop и очень удобную таблицу css-цветов для профессиональных веб-дизайнеров.
Использование шрифтов Google
Чтобы цитата еще сильнее выделялась в тексте, для тега <blockquote> зачастую используют отдельные шрифты. В случае с WordPress-сайтом можно выбрать один из уже подключенных шрифтов, либо подключить новый.
Проще всего для этих целей использовать шрифты от Google.
На сайте fonts.google.com найдите нужный шрифт и подключите его к своему ресурсу. Чтобы это сделать:
- Зайдите на страницу понравившегося шрифта и нажмите в правом верхнем углу «Get font».
Не забудьте заранее убедиться, что шрифт поддерживает кириллицу, если на сайте используется она.
- Далее выберите пункт «Get embed code».
- Теперь скопируйте указанный код и вставьте его в <head> своего сайта. После чего начинайте использовать выбранный шрифт.
Обратите внимание: Имеются и другие способы подключения шрифта к своему сайту.
Подключив дополнительный шрифт Google к своему ресурсу, просто добавьте параметр font-family с названием шрифта в свой код для цитаты. Например, рассмотренный выше код с градиентом на фоне будет выглядеть следующим образом при использовании в нем шрифта Lobster.
blockquote {
font-family: 'Lobster';
font-size: 16px;
font-style: italic;
color: #ffffff;
background: linear-gradient(to bottom, #ffd700, #800080);
border: 2px solid #003366;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(128, 0, 128, 0.5);
padding: 20px;
margin: 20px;
}
@media (max-width: 768px) {
blockquote {
font-size: 14px;
padding: 15px;
margin: 10px;
}
}
Как видно на получившемся примере, выбранный шрифт может сильно повлиять на вид блока внимания.
WPRemark – лучший способ создания цитат на сайте WordPress
Рассмотренные выше способы с использованием стилей для выделения цитат не особо удобны на практике. Они позволяют сохранить только один дизайн для оформления плашек с текстами, либо нужно добавлять несколько вариантов стилей и варьировать их через параметр class. Это достаточно сложно и отнимает много времени.
Быстро и удобно создавать цитаты на сайте ВордПресс позволяет плагин WPRemark. Это премиальное расширение, которое разработано студией WPShop.
После его установки можно выводить цитаты, блоки внимания, преимущества и многие другие выделяющиеся элементы внутри статей, как при использовании классического редактора, так и с помощью Gutenberg.
Чтобы создать текстовую имитацию прямой речи при помощи WPRemark:
- Нажмите на значок плагина на панели визуального редактора (или найдите блок в Gutenberg).
Далее я рассмотрю вариант с классическим редактором WordPress, но при работе с конструктором Гутенберг кардинальных отличий нет.
- Выберите один из доступных пресетов. По умолчанию имеется подходящий шаблон.
- Далее введите произвольный текст и отредактируйте параметры самого блока, если это необходимо. Настроить предлагают иконку, фон, рамку, тень, заголовок, текст и некоторые дополнительные параметры.
Если вы делаете цитату, можно установить в разделе «Расширенные настройки» тег <blockquote> для создаваемого блока.
- После всех настроек нажмите «OK», и цитата будет вставлена.
Подробнее настройки WPRemark рассмотрены в видео.
Почему WPRemark является лучшим решением для создания цитат:
Быстрая скорость работы. На странице загружаются только те стили, которые необходимы на конкретной странице. Это означает, что он не подключает массивных CSS и JS файлов, которые могли бы замедлять скорость работы ресурса.
Широкая функциональность и понятные настройки. Кастомизировать цитаты и блоки внимания разрешено по десяткам параметров. При этом сами опции понятные, а плагин полностью на русском языке. Разобраться в работе с ним не составит труда без навыков программирования, знаний CSS или HTML.
Более 200 оригинальных иконок в комплекте. Тогда как большинство аналогичных плагинов используют иконки Font Awesome, создатели WPRemark отрисовали более 200 собственных иконок, которых будет достаточно вебмастеру в повседневной работе. Если требуется, можно добавить свою SVG-иконку в массив.
Команда разработчиков из России. Документация полностью на русском языке, плюс есть возможность обратиться в службу поддержку. Кроме того, приобрести WPRemark удастся без сложностей с любой российской банковской карты.
Немаловажный плюс WPRemark – это наличие в комплекте десятков подготовленных пресетов для блоков внимания на любой вкус, в том числе для цитат.
Несколько примеров блоков на базе WPRemark:
Стоимость WPRemark тоже является выгодным отличием расширения от конкурентов. Его можно приобрести за 2900 рублей на 1 домен или за 6900 рублей на неограниченное число сайтов.
Если вы хотите сэкономить, то можете использовать мой промокод, который даст 15% скидку.
Промокод на WPRemark
Другие плагины для цитат на WordPress
В репозитории WP большое количество расширений для оформления постов. Есть специализирующиеся на цитатах плагины с широкой функциональностью. Рассмотрю некоторые из них.
Spectra для редактора Gutenberg
Один из масштабных плагинов для Gutenberg – это Spectra. В его бесплатной версии есть блок цитат, который максимально просто использовать для оформления статей.
Стандартный блок цитат («Quotcoll») от Spectra включает в себя место для самого текста, указание автора и аватар. Также разрешается в настройке компонента установить отображение линка на твит, если фраза берется из этой социальной сети.
Фон, шрифт, положения элементов настраиваются, как и у других блоков Гутенберг.
В бесплатной версии Spectra есть еще несколько элементов, которые удастся кастомизировать под цитату. В частности: «Инфо-бокс», «Призыв к действию», «Отзыв» и другие.
В платном варианте плагина “Спектра” еще больше возможностей, но стоимость пожизненной лицензии на 1 домен составляет внушительные $199.
WP-Note 2019 для быстрого создания блоков внимания
Вебмастеры со стажем могут помнить достаточно популярное расширение WP-Note для оформления блоков внимания. WP-Note 2019 является его реинкарнацией, которая полностью совместима со старым плагином.
WP-Note 2019 более современный вариант, чем базовый WP-Note. Но сейчас уже и он смотрится устаревшим с точки зрения дизайна.
После установки WP-Note 2019 на панели визуального редактора WordPress появляется 5 кнопок. Каждая из них позволяет создать блок внимания в определенном дизайне.
Данный плагин полностью бесплатный. Его главный минус — устаревший дизайн создаваемых элементов.
Quotes llama для афоризмов и отзывов
Когда нужно вывести в нескольких статьях (или сквозным образом через весь сайт) афоризмы, краткие анонсы, цитаты или отзывы, хорошим вариантом является плагин Quotes llama.
После установки расширения в админке появляется отдельный пункт Quotes. В нем заводится на портал список цитат. Для каждой требуется указать автора, добавить аватарку, иконки, источник и настроить расположение элементов.
Далее простым шорткодом можно вывести случайные цитаты из списка или конкретные на нужной странице веб-проекта. Дизайн практически не кастомизируется, при этом он выглядит устаревшим.
Quotes llama является бесплатным расширением.
Решение достаточно сложно использовать для массового добавления цитат в каждую отдельную статью. Оно скорее подойдет, чтобы вывести «Афоризм дня» в сайдбаре или отзывы на странице услуг.
You can quote me on that для слайдера цитат
Плагин You can quote me on that позволяет создавать простые слайдеры с цитатами.
Хороший вариант, чтобы использовать его для демонстрации отзывов клиентов.
Ниже пример слайдера на You can quote me on that.
Шаблоны WPShop со стильными цитатами
Российская команда WPShop известна среди профессиональных вебмастеров своими шаблонами: Root, Bono, Reboot, Yelly, JournalX и Cook It. В них уже изначально встроены функции для красивого оформления цитат.
-15% на все шаблоны WPShop
На примере темы Reboot рассмотрим 2 способа стильно оформить цитату.
Через тег <blockquote>. Разработчики WPShop прописали красивые стили для этого тега. При его использовании цитата получает серый фон, а слева добавляется вертикальная линия в выбранном основном цвете шаблона.
Через блоки внимания. Прямо в визуальный редактор WordPress тема Reboot добавляет пункт “Блоки внимания”.
Нажав на него, можно получить доступ к нескольким вариантам выделения отдельных моментов в тексте. Среди них есть и пресет для создания цитат.
В результате получится красивый выделяющийся блок с цитатой.
Для оформления цитат на своих сайтах я использую плагин WPRemark. Достаточно один раз купить его неограниченную лицензию, после чего можно не задумываться о том, какое решение установить для конкретного проекта, когда необходимо оформить цитаты, блоки внимания, преимущества и многое другое.
Расширение быстрое, функциональное и недорогое, полноценных аналогов ему я так и не нашел.
Лицензия WPRemark со скидкой
