Все способы добавить цитату на WordPress: css-стили, плагины и шаблоны

Добавление цитат на сайт WordPress — это не просто способ украсить контент, но и возможность сделать его более информативным, авторитетным и привлекательным для читателей.

Цитаты помогают выделить ключевые мысли, подчеркнуть мнения экспертов и сделать текст более структурированным.

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

Зачем оформлять цитаты (прямую речь) в теле статей WordPress?

Прямую речь в интернете принято оформлять в виде цитат. Этому есть несколько причин:

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

Плагин WPRemark — современный дизайн цитат на WordPress

Плагин WPRemark от WPShop — это инструмент для WordPress, специально разработанный для визуального улучшения контента сайта с помощью привлекательных блоков внимания.

Инструкция по созданию цитаты с помощью WPRemark с фото:

1. Установите и активируйте плагин WPRemark на своем WordPress-сайте.
2. Перейдите в редактор записи и выберите опцию добавления цитаты (иконка с восклицательным знаком, заключенным в треугольник).

3. Вставьте текст цитаты и добавьте URL на фото (аватарку) цитируемого лица в пункте «Своя картинка».

4. Настройте внешний вид цитаты, выбрав подходящие цвета, шрифты, отступы. Если необходимо, добавьте также заголовок, например, с указанием автора добавляемого фрагмента текста.
5. Сохраните изменения и опубликуйте запись.

WPRemark со скидкой

Другие плагины WordPress для вставки блоков цитат в записях

В репозитории WordPress можно найти много других плагинов для вставки цитат в записи WordPress. Но все их объединяет одно — они гораздо слабее по функционалу, чем WPRemark и намного сильнее грузят сайт.

Вот некоторые из них:

• WP Note — бесплатный инструмент для создания заметок и цитат. Отличается интуитивно понятным интерфейсом, который позволяет мгновенно добавлять текстовые блоки с заметками или цитатами. Станет отличным выбором для пользователей, которые хотят быстро оформлять цитаты без сложных настроек.
• Simple Pull Quote — бесплатное решение для добавления цитат и комментариев на сайт при помощи шорткода. Для изменения дизайна потребуются знания CSS.
• Easy Quotes — free-плагин, который позволяет выводить группы цитат в материалах или сайдбаре. Имеет собственный блок Gutenberg.

Инструкция, как сделать цитату вручную с помощью css-стилей

Если вы предпочитаете создавать стиль цитат вручную, вот несколько примеров CSS-кодов, которые вы можете использовать для настройки внешнего вида цитат на вашем сайте WordPress.

CSS-цитата с кавычками

blockquote { 
    font-style: italic; 
    position: relative; 
    padding: 10px 40px 10px 60px; 
    margin: 20px 0; 
    background: #f9f9f9; 
    border-left: 5px solid #ccc; 
} 

blockquote:before { 
    content: "“"; 
    font-size: 4em; 
    position: absolute; 
    left: 10px; 
    top: -10px; 
    color: #ccc; 
} 

blockquote:after { 
    content: "”"; 
    font-size: 4em; 
    position: absolute; 
    right: 10px; 
    bottom: -10px; 
    color: #ccc; 
}

Цитата с рамкой

blockquote {
    border: 2px solid #ccc;
    padding: 15px;
    margin: 20px 0;
    background: #f9f9f9;
    border-radius: 10px;
}

Цитата с тенью и закругленными краями

blockquote {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 20px;
    background: #f1f1f1;
    margin: 20px 0;
}

Цитата с градиентным фоном

blockquote {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    color: white;
}

Цитата с подключением Google-шрифтов

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

blockquote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    padding: 20px;
    margin: 20px 0;
    background: #f9f9f9;
    border-left: 5px solid #ccc;
}

Цитата с png-иконкой

blockquote { 
    font-style: italic; 
    position: relative; 
    padding: 20px 20px 20px 60px; 
    margin: 20px 0; 
    background: #f9f9f9; 
    border-left: 5px solid #ccc; 
} 

blockquote:before { 
    content: ""; 
    position: absolute; 
    left: 10px; 
    top: 10px; 
    width: 40px; 
    height: 40px; 
    background-image: url('https://example.com/icon.png'); /* URL вашей иконки */
    background-size: contain; 
    background-repeat: no-repeat; 
}

Шаблоны WordPress со встроенными цитатами

Сейчас все чаще встречаю шаблоны WordPress, которые включают встроенные функции для оформления цитат. Рассмотрим некоторые из них, на мой взгляд, самые интересные.

Reboot

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

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

Reboot по сниженной цене

Hatch

Hatch — современный и минималистичный шаблон с поддержкой встроенных цитат на CMS WordPress. Подходит для блогов о дизайне и искусстве, где важно эстетическое оформление.

Writer

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

Glamour

Glamour — элегантный шаблон для модных и стильных блогов. Поддерживает встроенные цитаты и мультимедийные элементы, что делает его идеальным выбором для сайтов о моде и красоте.

BizPro

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

EduPro

EduPro — тема для образовательных сайтов и WordPress-блогов. Поддерживает встроенные цитаты и заметки, что делает ее подходящим решением для ресурсов, связанных с обучением и развитием.

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

Скидка на WPRemark