Как добавить цитату на сайт WordPress

Цитата WordPress
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

Зачем выделять цитату (прямую речь) в теле статьи

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

Это позволяет:

Привлечь дополнительное внимание и упростить восприятие контента. Такие компоненты выступают как «островки» информации, которые легко заметить при беглом просмотре статьи.

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

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

Помимо смысловой и визуальной составляющей, добавление цитат в статью на сайте полезно и с других точек зрения:

Для 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> текст при использовании указанного выше кода:

Вариант цитаты на чистом CSS

Если вы хотите сменить цвет кавычек, то поменяйте значение 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 найдите нужный шрифт и подключите его к своему ресурсу. Чтобы это сделать:

  1. Зайдите на страницу понравившегося шрифта и нажмите в правом верхнем углу «Get font».

Добавление шрифта Google

Не забудьте заранее убедиться, что шрифт поддерживает кириллицу, если на сайте используется она.

  1. Далее выберите пункт «Get embed code».

Способ получить шрифт для своего сайта

  1. Теперь скопируйте указанный код и вставьте его в <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

WPRemark для оформления постов

Рассмотренные выше способы с использованием стилей для выделения цитат не особо удобны на практике. Они позволяют сохранить только один дизайн для оформления плашек с текстами, либо нужно добавлять несколько вариантов стилей и варьировать их через параметр class. Это достаточно сложно и отнимает много времени.

Быстро и удобно создавать цитаты на сайте ВордПресс позволяет плагин WPRemark. Это премиальное расширение, которое разработано студией WPShop.

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

Чтобы создать текстовую имитацию прямой речи при помощи WPRemark:

  1. Нажмите на значок плагина на панели визуального редактора (или найдите блок в Gutenberg).

Создание цитатаы на WPRemark

Далее я рассмотрю вариант с классическим редактором WordPress, но при работе с конструктором Гутенберг кардинальных отличий нет.

  1. Выберите один из доступных пресетов. По умолчанию имеется подходящий шаблон.

Выбор пресета

  1. Далее введите произвольный текст и отредактируйте параметры самого блока, если это необходимо. Настроить предлагают иконку, фон, рамку, тень, заголовок, текст и некоторые дополнительные параметры.

Кастомизация выбранного шаблона

Если вы делаете цитату, можно установить в разделе «Расширенные настройки» тег <blockquote> для создаваемого блока.

  1. После всех настроек нажмите «OK», и цитата будет вставлена.

Красивая цитата на WPRemark

Подробнее настройки WPRemark рассмотрены в видео.

Почему WPRemark является лучшим решением для создания цитат:

Быстрая скорость работы. На странице загружаются только те стили, которые необходимы на конкретной странице. Это означает, что он не подключает массивных CSS и JS файлов, которые могли бы замедлять скорость работы ресурса.

Широкая функциональность и понятные настройки. Кастомизировать цитаты и блоки внимания разрешено по десяткам параметров. При этом сами опции понятные, а плагин полностью на русском языке. Разобраться в работе с ним не составит труда без навыков программирования, знаний CSS или HTML.

Более 200 оригинальных иконок в комплекте. Тогда как большинство аналогичных плагинов используют иконки Font Awesome, создатели WPRemark отрисовали более 200 собственных иконок, которых будет достаточно вебмастеру в повседневной работе. Если требуется, можно добавить свою SVG-иконку в массив.

Команда разработчиков из России. Документация полностью на русском языке, плюс есть возможность обратиться в службу поддержку. Кроме того, приобрести WPRemark удастся без сложностей с любой российской банковской карты.

Немаловажный плюс WPRemark – это наличие в комплекте десятков подготовленных пресетов для блоков внимания на любой вкус, в том числе для цитат.

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

Несколько примеров блоков на базе WPRemark:

Блоки внимания на WPRemark

Стоимость WPRemark тоже является выгодным отличием расширения от конкурентов. Его можно приобрести за 2900 рублей на 1 домен или за 6900 рублей на неограниченное число сайтов.

Если вы хотите сэкономить, то можете использовать мой промокод, который даст 15% скидку.

Промокод на WPRemark

Другие плагины для цитат на WordPress

В репозитории WP большое количество расширений для оформления постов. Есть специализирующиеся на цитатах плагины с широкой функциональностью. Рассмотрю некоторые из них.

Spectra для редактора Gutenberg

Расширение Spectra для Гутенберг

Один из масштабных плагинов для Gutenberg – это Spectra. В его бесплатной версии есть блок цитат, который максимально просто использовать для оформления статей.

Стандартный блок цитат («Quotcoll») от Spectra включает в себя место для самого текста, указание автора и аватар. Также разрешается в настройке компонента установить отображение линка на твит, если фраза берется из этой социальной сети.

Фон, шрифт, положения элементов настраиваются, как и у других блоков Гутенберг.

Вариант цитаты на Spectra

В бесплатной версии Spectra есть еще несколько элементов, которые удастся кастомизировать под цитату. В частности: «Инфо-бокс», «Призыв к действию», «Отзыв» и другие.

В платном варианте плагина “Спектра” еще больше возможностей, но стоимость пожизненной лицензии на 1 домен составляет внушительные $199.

WP-Note 2019 для быстрого создания блоков внимания

Быстрые блоки внимания

Вебмастеры со стажем могут помнить достаточно популярное расширение WP-Note для оформления блоков внимания. WP-Note 2019 является его реинкарнацией, которая полностью совместима со старым плагином.

WP-Note 2019 более современный вариант, чем базовый WP-Note. Но сейчас уже и он смотрится устаревшим с точки зрения дизайна.

После установки WP-Note 2019 на панели визуального редактора WordPress появляется 5 кнопок. Каждая из них позволяет создать блок внимания в определенном дизайне.

Примеры блоков внимания

Данный плагин полностью бесплатный. Его главный минус — устаревший дизайн создаваемых элементов.

Александр
Александр
В рамках блога стремлюсь доступно передавать многолетний опыт по созданию, технической поддержке, безопасности и SEO-оптимизации WordPress-сайтов.
Если я использую это решение, то предпочитаю вносить корректировки в начальные стили самого плагина. У него простая структура, и достаточно самостоятельно отредактировать подключенный файл style.css, чтобы с его помощью в несколько кликов создать красивые блоки внимания. Но для этого необходимо иметь знания работы с CSS. Внести корректировки можно не только в цвета, но и в иконки, добавив свои собственные.

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 позволяет создавать простые слайдеры с цитатами.

Хороший вариант, чтобы использовать его для демонстрации отзывов клиентов.

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

Ниже пример слайдера на You can quote me on that.

Пример слайдера с цитатой

Шаблоны WPShop со стильными цитатами

Премиальные шаблоны

Российская команда WPShop известна среди профессиональных вебмастеров своими шаблонами: Root, Bono, Reboot, Yelly, JournalX и Cook It. В них уже изначально встроены функции для красивого оформления цитат.

-15% на все шаблоны WPShop

На примере темы Reboot рассмотрим 2 способа стильно оформить цитату.

Через тег <blockquote>. Разработчики WPShop прописали красивые стили для этого тега. При его использовании цитата получает серый фон, а слева добавляется вертикальная линия в выбранном основном цвете шаблона.

Цитата в шаблоне Reboot

Через блоки внимания. Прямо в визуальный редактор WordPress тема Reboot добавляет пункт “Блоки внимания”.

Выбор блока внимания

Нажав на него, можно получить доступ к нескольким вариантам выделения отдельных моментов в тексте. Среди них есть и пресет для создания цитат.

Добавление цитаты в Reboot

В результате получится красивый выделяющийся блок с цитатой.

Как выглядит цитата

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

Расширение быстрое, функциональное и недорогое, полноценных аналогов ему я так и не нашел.

Лицензия WPRemark со скидкой

Создай свой первый сайт на WordPress

Александр

В рамках блога стремлюсь доступно передавать многолетний опыт по созданию, технической поддержке, безопасности и SEO-оптимизации WordPress-сайтов.

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

×
Обнови свой WordPress!

Держи скидку 15% на премиум тему Reboot

Купить со скидкой ⋙