Если вы ведете блог или управляете информационным ресурсом, вероятно, активно используете функцию цитирования в WordPress. В этой статье я расскажу о различных способах оформления этого элемента.
Почему необходимо выделять цитаты в отдельный блок в статьях на сайтах WordPress
Цитаты являются важным инструментом для оформления материалов на сайтах, использующих WordPress. С их помощью администраторы и контент-менеджеры достигают следующих целей:
- Для SEO. Правильное оформление цитат осуществляется с помощью тегов blockquote. Текст, заключенный в такие теги, не считается поисковыми системами при проверке уникальности. Таким образом, при использовании фрагмента текста другого автора уникальность вашего материала не понижается.
- Для соблюдения авторских прав. Цитаты необходимо оформлять корректно, чтобы избежать юридических конфликтов с владельцем авторских прав. Чужие высказывания обычно выделяются в отдельную область со ссылкой на источник.
- Для удобства восприятия. Длинные статьи желательно разбивать на логические части, применяя различные приемы для акцентирования текста в зависимости от его содержания. Это помогает лучше воспринимать информацию и повышает качество контента на сайтах на WordPress.
- Для привлечения внимания к важным данным. Цитаты можно использовать как акценты. Они позволяют выделять важные моменты, которые читателю стоит заметить.
- Для создания анонса или вывода итогов статьи. Это еще один случай, когда цитаты могут помочь. Вы можете вынести ключевой момент или заключение статьи, чтобы акцентировать на них внимание.
Как оформлять цитаты на WordPress самостоятельно с применением CSS-кода
Вставка цитат осуществляется через специальную кнопку в визуальном редакторе WordPress с изображением кавычки. Она добавляет HTML-обертку с тегом blockquote для текста цитаты.
Мы будем добавлять стили CSS к этому тегу. Для этого нужно будет редактировать файл CSS вашего шаблона на сайте WordPress.
Текстовый блок с кавычкой
Стандартный метод оформления цитат в WordPress создает область с рамкой, выделяющимся фоном и/или шрифтом. Тем не менее, главное отличие заключается в большой открывающей кавычке, для отображения которой используется код «\201C».
Чтобы добиться такого эффекта на сайте, вставьте в файл стилей следующий код 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
После сохранения файла вы увидите, что все цитаты на сайте теперь отображаются в области с светло-желтым фоном и текстом зеленого цвета.
Если возникнут проблемы, попробуйте очистить кэш в админке WordPress.
Текст на плашке с рамкой
В следующем примере цитаты будут отображаться в блоке, имеющем желтый фон и тонкую пунктирную рамку. Для этого добавьте в файл CSS следующий код:
blockquote
Вы можете настроить стиль рамки. Например, заменив слово dashed на solid, получите сплошную линию.
Блок с закругленными углами и тенью
Следующий код придаст тексту вид плашки со светло-зеленым фоном и необычной рамкой:
blockquote
Добавляем фон с градиентом
С помощью онлайн-сервиса генерации CSS-градиента вы можете украсить фон вашей плашки. Я использую для этого сервис CSS Gradient Generator.
Сервис имеет интуитивно понятный интерфейс. У вас есть возможность задавать ваши собственные цветовые сочетания для градиента или воспользоваться случайной генерацией.
Используем Google шрифты
Выбор красивого шрифта поможет сделать вашу плашку более привлекательной. Вам в этом поможет сервис Google Fonts. Вот как им пользоваться.
- Нажмите на кнопку Filters. Появится боковая панель с настройками фильтров.
- Введите произвольный текст или абзац, который хотите увидеть на вашей плашке.
- В поле Language вы можете выбрать опцию Cyrillic, чтобы получить только кириллические шрифты.
- Закройте боковую панель и просмотрите шрифты, которые остались в главном окне после фильтрации. Выберите тот, который вам понравится, нажав на его название.
- На странице шрифта нажмите на кнопку 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 вы сможете создать свою коллекцию цитат, для которой в админке WordPress генерируется отдельный тип записи.
К цитатам можно добавлять фотографии авторов и их имена. Вы можете отображать эти записи в блоках, виджетах, постах, галереях и прочих местах.
Плашки имеют стильный вид с портретами в круглых рамках и подписями с именами авторов.
Easy Quotes: модуль для вывода случайных цитат
Easy Quotes — это бесплатный плагин, который позволяет размещать на вашем сайте WordPress случайные цитаты из заданной коллекции. Для удобства работы с цитатами он создает специальный тип записи.
Данная программа обладает возможностью, позволяющей пользователям оценивать каждую цитату по рейтингу.
Модуль включает блок Гутенберга, который легко интегрируется в любой шаблон WordPress или прямо в статьи.
XV Random Quotes: генерация случайных цитат
XV Random Quotes — еще один бесплатный плагин для WordPress, который предоставляет возможность вывода случайных цитат. Он использует технологию AJAX, что позволяет обновлять цитаты без перезагрузки страницы.
Цитаты можно выводить в любом месте сайта, используя шорткоды.
Настройки данного плагина позволяют изменить внешний вид цитат без необходимости редактировать код.
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, который предлагает обширный набор инструментов для оформления различных цитат или акцентных блоков.
Получите скидку 10% на WPRemark.