Если ведете блог или поддерживаете информационный сайт, наверняка часто пользуетесь таким инструментом, как цитата WordPress. В статье расскажу, какие есть способы оформления этого элемента.
Почему необходимо выделять цитаты в отдельный блок в статьях на сайтах WordPress
Цитаты — полезный инструмент для оформления текстов на веб-ресурсах WordPress. Администраторы и контент-менеджеры применяют их в следующих целях:
- Для SEO. Корректное оформление цитат требует использования тегов blockquote. Текст, заключенный в эти теги, не учитывается поисковиками при расчете уникальности. Следовательно, при заимствовании куска статьи у другого автора уникальность вашего текста не уменьшается.
- Для соблюдения авторских прав. Чужие мысли и высказывания нужно правильно оформлять на WordPress, чтобы не возникло конфликта с правообладателем. Такие текстовые выдержки принято выносить на отдельную плашку и указывать ссылку на источник информации.
- Для удобства чтения. Длинные тексты необходимо разбивать на смысловые части и использовать различные инструменты для выделения контента в зависимости от смысла, который в нем заложен. Это делает тексты понятнее для чтения и повышает ценность контента на WordPress сайтах.
- Для привлечения внимания к важной информации. Цитаты можно использовать в качестве блоков внимания. С их помощью вы можете выделять ценную информацию, которую читатели не должны пропустить.
- Для выделения краткого анонса и заключения статьи. Еще один хороший случай использования этого инструмента. На плашку можно вынести отрывок или итоговую часть статьи, чтобы акцентировать на них внимание.
Как оформлять цитаты на WordPress самостоятельно с применением CSS-кода
За вставку цитат в текст отвечает специальная кнопка в визуальном редакторе ВордПресс с изображением кавычки. Она добавляет HTML-обертку с тегом blockquote для текста, заключенного в цитату.
Для этого тега мы и будем добавлять стили CSS. Чтобы это сделать, потребуется править файл CSS шаблона, который вы используете на сайте WordPress.
Текстовый блок с кавычкой
Стандартный способ оформления цитат на WordPress. Создается плашка с рамочкой, выделяющимся фоном и/или необычным шрифтом. Но главное ее отличие — крупная открывающая кавычка, для отображения которой используется код «\201C».
Чтобы получить на сайте WordPress такой эффект, вставьте в файл стилей следующий код CSS:
blockquote {
background: none repeat scroll 0 0 #fea;
color: #009a82;
font-family: Georgia,serif;
font-size: 18px;
font-style: italic;
line-height: 1.45;
padding: 1.25em 50px;
position: relative;
}
blockquote:before {
color: #009a82;
content: "\201C";
display: block;
font-size: 60px;
left: 1px;
position: absolute;
top: 1px;
}
После сохранения файла вы обнаружите, что все цитаты на сайте стали отображаться на плашке со светло-желтым фоном и текстом зеленого цвета.
Если что-то пошло не так, попробуйте почистить кэш в админке WordPress.
Текст на плашке с рамкой
В следующем примере цитаты будут выводиться в блоке с желтым фоном и тонкой пунктирной рамкой. Добавьте в CSS-файл следующий код:
blockquote {
color: #333;
font-family: Verdana, Geneva, sans-serif;
border: 1px dashed #999;
background: #F8F4AB;
padding: 10px 20px;
}
Вы можете менять настройки рамки. Например, если замените слово dashed на solid, рамка приобретет вид сплошной линии.
Блок с закругленными углами и тенью
Следующий код выведет кусок текста в виде плашки со светло-зеленым фоном и оригинальной рамкой:
blockquote {
background-color: #D4F4EA;
border: 1px solid #00B37C;
border-radius: 6px;
box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.4);
font-family: Georgia,serif;
font-size: 16px;
font-style: italic;
margin: 20px;
padding: 20px 15px;
width: 550px;
}
Добавляем фон с градиентом
С помощью одного из онлайн-сервисов генерации CSS-градиента вы можете добавить эффектный фон к плашке с текстом. Для этих целей я использую сервис CSS Gradient Generator.
Сервис обладает интуитивно-понятным интерфейсом. Можно задавать собственные пары цветов для градиента или воспользоваться рандомной генерацией вариантов.
Используем Google шрифты
Если подобрать красивый шрифт, можно сделать плашку еще более интересной и выделяющейся. В этом поможет сервис Google Fonts. Расскажу, как им пользоваться.
- Нажмите на кнопку Filters. Откроется боковая панель с настройками фильтрации.
- Теперь введите произвольный текст или абзац, который хотите вывести на плашке.
- Ниже в поле Language вы можете выбрать опцию Cirillic, чтобы отобразились только кириллические шрифты.
- После этого можно закрыть боковую панель. Просмотрите шрифты, которые остались в основном окне после сортировки и выберите нужный, нажав на его название.
- На странице шрифта кликните по кнопке Get Font.
После этого у вас будет два варианта действий:
Первый — скачать шрифты себе на жесткий диск и вставить на сайт через CSS-файл темы.
Но я предлагаю воспользоваться более простым способом. Нажмите кнопку Get Embed Code. После этого вы получите два куска готового кода. Первый нужно вставить в секцию head шаблона WordPress, а примеры из второго — использовать в файле CSS для вашего блока цитаты.
WPRemark: безграничные возможности для дизайна цитат
WPRemark — это премиальный плагин WordPress от русской компании WPShop, содержащий огромное количество настроек для оформления плашек с текстом.
Добавляйте на страницу столько блоков внимания, сколько вам нужно. При этом не пострадает скорость загрузки: плагин работает быстро, не подключает тяжелых скриптов или файлов стилей.
Преимущества плагина WPRemark:
- Гибкие настройки. Можно добавлять или убирать фон, иконку, рамку, менять расположение текста и значка относительно друг друга, задавать отступы, размеры и др.
- Своя коллекция иконок. Значки нарисованы дизайнерами WPShop, имеют минимальный вес, хорошо смотрятся на всех устройствах. Всего в наборе более 239 иконок.
- Набор пресетов. Если вы не хотите создавать свой дизайн для плашек с контентом, можете воспользоваться одним из готовых шаблонов.
- Поддержка классического редактора и Гутенберг. Независимо от того, в каком редакторе WordPress предпочитаете работать, вы всегда сможете добавить эффектный блок контента.
- Шорткоды. Выводите плашки с текстом в любом месте сайта WordPress с помощью шорткодов. К каждому короткому коду можно добавлять атрибуты, чтобы менять установки по умолчанию.
Рекомендую ознакомиться с подробным видеообзором настроек WPRemark.
С помощью WPRemark вы можете добавлять в ваши статьи следующие виды плашек:
- Цитаты и классические блоки внимания. Такие плашки используются на большинстве сайтов. Кроме цитаты, это может быть бокс с важной информацией, справкой, вопросом, предупреждением и т.д.
- Преимущества и недостатки. Расположите два блока рядом, добавьте иконки с плюсом и минусом, сделайте фон первой плашки светло-зеленым, а второй — светло-красным.
- Красивые списки. Разместите боксы друг под другом в виде списка, добавьте к каждому пункту иконки «галочки» или «цифры» слева от текста.
Забрать WPRemark со скидкой
Цитата на WordPress: другие плагины для блоков контента
WP-Note 2019: простой способ добавлять цитаты
WP-Note 2019 — бесплатный плагин, единственная функция которого — вставлять блоки контента в статьи на WordPress. Добавляет в классический редактор несколько кнопок. С помощью них вы сможете создавать в своих постах такие плашки, как важная информация, предупреждение, помощь, примечание и совет.
Текстовые боксы имеют довольно приятный, но немного устаревший дизайн: цветной фон, иконка, тонкая рамка и тень.
Quotes llama: собственная коллекция цитат
С помощью бесплатного плагина Quotes llama вы можете создать свою коллекцию изречений, для которых в админке WP генерируется отдельный тип записи.
К цитатам можно добавлять портрет автора и его имя. Вы можете выводить их в блоках, виджетах, постах, галереях и т.д.
Плашки имеют красивый вид с портретом в круглой рамке и подписью, содержащей имя автора.
Easy Quotes: виджет для вывода случайной цитаты
Easy Quotes — бесплатный модуль, предназначенный для отображения на сайте WordPress случайного изречения из вашей коллекции. Для цитат плагин создает кастомный тип записи.
Особенность плагина — возможность для пользователей выставлять оценку рейтинга каждому изречению.
Модуль предоставляет блок Гутенберга для вывода плашек в любом месте WordPress шаблона или внутри статьи.
XV Random Quotes: отображение рандомных цитат
XV Random Quotes — еще один бесплатный модуль WordPress для вывода случайных цитат. Плагин использует технологию AJAX, что позволяет выводить новое изречение без перезагрузки страницы.
Плашки можно разместить в любом месте сайта WordPress с помощью шорткодов.
Гибкие настройки плагина позволяют менять внешний вид цитат без необходимости вмешиваться в код.
Qi Addons: бесплатные расширения для конструктора Elementor
Плагин Qi Addons предоставляет коллекцию, которая содержит более 60 виджетов для конструктора Elementor. В этом наборе есть инструменты для оформления блоков контента, таких как Blockquote, Message Boxes и Icon With Text.
Пользоваться виджетами Elementor просто: достаточно перетащить элементы с панели инструментов в запись при ее создании.
Master Addons: бесплатные виджеты и эффекты для Elementor
Master Addons — еще один плагин с набором инструментов для популярного пейджбилдера Elementor. Содержит более 50 виджетов и 20 дополнений.
Текстовые боксы можно создавать с помощью виджетов Blockquote, Infobox, Call To Action. Как и в предыдущем случае, цитаты добавляются простым перетаскиванием элементов в текст записи.
Spectra: дополнительные блоки для редактора Гутенберг
Бесплатный плагин Spectra предлагает огромный набор элементов и пресетов для редактора Гутенберг. Вы можете использовать такие инструменты, как Infobox, Blockquote, Call To Action, FAQ для создания эффектных плашек.
Также с помощью встроенных инструментов Spectra можно создавать собственные пресеты для блоков контента. Это позволит использовать их повторно в новых постах.
Quotes and Tips от BestWebSoft: вывод цитат и полезных советов
Плагин Quotes and Tips предоставляет удобный способ создавать и выводить цитаты и советы на сайтах WordPress. Перед вставкой на сайт цитаты нужно добавлять в админке как отдельный тип записи.
Доступен редактор TinyMCE для оформления текстовых боксов. Для каждого из них можно добавить имя автора. Также вы можете настраивать внешний вид плашки: добавлять значок, картинку или цвет фона, кастомные стили и т.д. На сайте цитаты выводятся с помощью шорткода.
Модуль распространяется бесплатно.
Blockquote в премиальных шаблонах от WPShop
Контентные темы для WordPress от команды WPShop уже включают цитаты и блоки внимания, что избавляет от необходимости устанавливать дополнительные плагины. Речь идет о таких популярных шаблонах, как Root, Reboot, Yelly, Journal X и Cook It.
Расскажу на примере темы Reboot, как добавить цитату в статью.
- В классическом редакторе используйте специальные кнопки для вставки цитат, которые появятся после установки темы.
- В редакторе Гутенберг блоки контента можно добавлять с помощью элемента «Цитата». При вставке блока вы можете выбрать дизайн, изменить иконку и цвет фона.
Из всех готовых вариантов лучший — плагин WPRemark. Он предоставляет самый полный набор инструментов для оформления любой цитаты или блока внимания.
Скидка 15% на WPRemark
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
