Плагин WPRemark для создания блоков внимания на сайте

Здесь мы подробно рассмотрим особенности плагина WPRemark для сайта на CMS WordPress. Это новый продукт от компании WPShop.

Я его уже успел попробовать на своем сайте.

Поэтому в этом обзоре я покажу его настройки и возможности. Обязательно рассмотрим все достоинства и недостатки данного плагина.

Что такое плагин WPRemark и для чего он нужен


WPRemark — это плагин для удобного и быстрого создания блоков внимания на сайте WordPress. Это своего рода примечания для привлечения внимания к важным частям текста.

Вы наверное, уже неоднократно видели такие блоки на различных интернет-ресурсах.

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

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

В зависимости от информации, блоки бывают разных видов. В плагине ВПРемарк изначально имеется 35 таких блоков.

Все они находятся в разделе Пресеты. В дальнейшем эта коллекция будет постоянно пополняться.

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


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

Блок опасность


Примеры блоков опасности в плагине WPRemark

Недостатки


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

Достоинства


Примеры информационных блоков достоинств на сайте

Блоки пользы


Примеры блоков для полезной информации на сайте WordPress

Для справки


Инфоблоки блоки для справки на сайте плагином ВпРемарк

Вопросы и цитаты


Примеры информационных блоков вопросов и цитаты на блоге WordPress

Для других задач


Информационные блоки под разные задачи на сайте

Принцип работы плагина

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

Для каждого блока есть много настроек. Начиная от выбора шаблона и заканчивая заданием отступов.

Все основные настройки находятся в редакторе. Их мы ниже еще рассмотрим.

Еще одной особенностью является то, что модуль не подключает каких-либо скриптов и стилей. Все необходимое оформление прописывается прямо на странице в виде inline css.

Обзор всех возможностей и настроек плагина WPRemark


Давайте теперь покажу вам все возможности и настройки данного плагина.

Основное меню

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

Основное меню плагина WPRemark

Там просто вставьте ключ, который вам вышлют после покупки. Сохраните настройки.

Далее переходим в раздел Пресеты.

Там отображается вся коллекция информационных блоков. При наведении, появляются две кнопки — Удалить и Шорткод.

Пресеты в плагине WPRemark

Первые несколько блоков по умолчанию уже экспортированы в плагин. Остальные блоки можно экспортировать по желанию.

Ненужные блоки можно удалить, чтобы потом не загромождать пресетами редактор статей.

Добавление шорткодов

Обратите внимание, что для каждого блока доступны шорткоды. Их полезно использовать, когда приходится выводить блоки вне области контента.

К шорткоду добавляются свои атрибуты, которые можно поменять.

[wpremark preset_name="white_rounded_purple_shadow" icon_image="info-circle-regular" icon_color="#6428fc" background_color="#ffffff" shadow_show="1" shadow_y="4" shadow_blur="20" shadow_color="#1b29c4" border_radius="10"]Пример блока внимания[/wpremark]

К примеру, можно поменять цвет или иконку.

В настройках плагина есть отсылка к документации по всем атрибутам. Но я рекомендую вам забить на нее и сделать все по-другому.

Полезный лайфхак!

Чтобы задавать атрибуты к шорткоду было намного проще, рекомендую воспользоваться классическим редактором. А если используете Гутенберг, то добавить блок через классический параграф.

Прямо по классике вы легко создаете нужный блок внимания. В расширенных настройках указываете вывод стилей возле блока.

Вывод стилей возле блока внимания

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

Но это так, для справки.

В общем, сохраняетесь.

Потом переключаетесь на просмотр исходного кода. Вкладка «Текст» в классическом редакторе и «Редактировать как HTML» в Гутенберге.

Там уже можно взять шорткод с готовыми атрибутами.

Пример готового шорткода с атрибутами для вывода блока в классическом редакторе
Готовый шорткод с атрибутами

Затем этот код вставляете в нужное вам место. Например, можно вставить в плагин вывода рекламы и вывести блок после комментариев.

С блоком WPRemark для Гутенберга такой метод пока что не прокатит. Потому что там создается сразу исходный код, а не шорткод. И стили по умолчанию не выводятся рядом с блоком.

Код блока в Гутенберге

Если вы этот код решите вставить в другое место сайта, то блок будет показываться без стилей оформления.

Поэтому при формировании шорткода в Гутенберге, блоки нужно добавлять через классический параграф, а не через блок WPRemark.

Добавление блока внимания через классический параграф в редакторе Гутенберг
Классический параграф в Гутенберге

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

Ниже переходим к настройкам в редакторе.

Настройки в редакторе Гутенберг

В этом редакторе разработчики создали отдельный блок WPRemark.

Блок плагина WPRemark для редактора Гутенберг

С его помощью и добавляют блоки в статьи.

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

Настройки блока внимания в плагине WPRemark

Пресеты

В этой настройке можно сразу выбрать нужный пресет из общей коллекции блоков.

Настройка пресетов в плагине WPRemark

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

Иконка

Дальше идут настройки иконки. По желанию можно показать или скрыть ее.

Настройки иконки для блоков внимания на сайте Вордпресс

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

При желании можно добавлять свою картинку.

Чуть ниже можно подобрать подходящий цвет для иконки.

Обратите внимание, что он работает только для иконок. Цвет картинки не изменится.

Ниже можно задать ширину, высоту, отступ и положение иконки.

Настройки положения иконки для информационного блока внимания на сайте

Фон

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

Настройки задания фона для блоков внимания в плагине WPRemark

Также имеются настройки для отображения фонового изображения. Можно указать размер, положение и повторение.

Пример блока внимания с фоновой картинкой
Пример с фоновой картинкой

Рамка

Теперь переходим к настройкам рамки. Тут тоже все довольно понятно.

Настройки отображения рамки в блоках внимания

Можно задать расположение, толщину, стиль и цвет.

Пример информационного блока внимания с двойной рамкой по границам
Блок с двойной рамкой

Тени

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

Примеры настройки тени в плагине WPRemark для блоков внимания
Настройки тени

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

В итоге, под любой блок можно задавать многие варианты теней.

Блок внимания с тенью на сайте WordPress
Блок с тенью

Заголовок

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

Опции по настройке заголовка для блоков внимания от плагина ВПРемарк
Настройки заголовка

Можно задать сам заголовок в отдельном поле. Также можно выбрать выравнивание, цвет, размер, высоту строки и другие стили шрифта.

Пример информационного блока с заголовком в верхнем регистре
Блок с заголовком

Текст

Если можно стилизовать заголовок, значит обязательно нужно задать настройки и для основного текста в блоке внимания.

В принципе, тут такие же параметры, как и для заголовка.

Пример настройки основного текста для блока внимания
Настройки текста

Расширенные настройки

Ну и в самом конце идут дополнительные настройки для блока внимания.

Расширенные настройки плагина WPRemark для создания блоков внимания
Дополнительные опции

Тут есть возможность задать множество отступов, скругление, тег и дополнительные классы для CSS стилей.

Блок внимания с различными отступами и скруглением углов
Блок с отступами и скруглением углов

Настройки в классическом редакторе

Плагин WPRemark также работает и в классическом редакторе. Здесь есть специальная кнопка для добавления блоков внимания.

Пример работы плагина WPRemark в классическом редакторе WordPress
WPRemark в классическом редакторе

При клике по кнопке, всплывает окошко с теми же настройками, которые мы рассматривали выше.

Здесь тоже можно сразу выбрать нужный пресет, задать параметры для иконки, фона и так далее.

Единственное, тут в расширенных настройках добавлена опция вывода стилей. Можно выводить в теге head или непосредственно, возле самого блока.

Расширенные настройки плагина WPRemark в классическом редакторе WordPress
Вывод стилей

В Гутенберге такой опции нет.

Там по умолчанию все inline стили добавляются в тег head. Поэтому если нужно вывести стили возле блока, то добавляете такой элемент через классический параграф.

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

Ну а мы двигаемся дальше.

Основные достоинства плагина ВПРемарк для сайта


Давайте теперь перечислим основные достоинства плагина. Это то, ради чего стоит обратить на него внимания.

Малая нагрузка на сайт

Самый важный вопрос, который волнует все при установки нового расширения — это нагрузка на сам сайт.

Я тут провел ряд некоторых тестов на проекте. В качестве теста взял 1 большую статью и проверил ее по скорости работы. Поэтому ниже хочу поделиться с вами некоторыми данными.

Все тесты проводились в три этапа:

  1. Страница без плагина
  2. Просто активный плагин
  3. Активный модуль с расставленными блоками в статье

Важно понимать, что тут нет точных данных!

Везде они будут отображаться по-разному. Главная задача — увидеть разницу до и после использования расширения.

Тестирование проводилось с установленной темой Reboot. Сам сайт находится на виртуальном хостинге Beget.

Запросы, время и объем оперативной памяти

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

УсловияКоличество запросовВремя до первого байта (сек)Время полной загрузки (сек)Объем памяти (Мб)
Страница без плагина1030.120.217.6
Просто активный плагин1050.120.217.9
Активный модуль с блоками в статье1050.130.2217.9

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

Google PageSpeed Insights

Теперь давайте посмотрим результаты проверки скорости работы сайта в Google PageSpeed. Все результаты я покажу только для мобильных устройств.

Во-первых, это главный приоритет для поисковых систем. Во-вторых, на декстопах сайты и так всегда загружаются быстрее.

ПараметрыБез плагинаАктивный плагинС установленными блоками
Общий балл818078
First Contentful Paint (сек)2.11.92.1
Speed Index (сек)2.62.42.7
Largest Contentful Paint (сек)2.82.72.8
Time to Interactive (сек)3.43.63.5
Total Blocking Time (мс)480540570
Cumulative Layout Shift0.0680.0680.068

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

Из таблицы заметно только вырос Total Blocking Time с 480 до 570. Но опять же, это все усреднено. Цифры записал при первых тестированиях. Потому что при каждой проверке они меняются.

Проверка скорости загрузки страницы в Гугле
Результаты 4 проверки страницы с установленными блоками

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

Pingdom

Ну и напоследок решил прогнать страницу в сервисе Pingdom и посмотреть разницу там. Результаты доступны ниже.

Основные параметры Без плагинаАктивный модульС блоками
Оценка производительности858484
Время загрузки (сек)1.401.32 1.41
Размер страницы (Мб)1.61.6 1.6
Запросы747475

Как видно, результаты практически идентичны.

Вес контента Без плагина Активный модуль С блоками
Изображения1.3 Мб 1.3 Мб1.3 Мб
Шрифты114.4 Кб 114.4 Кб114.4 Кб
HTML39.6 Кб 39.7 Кб41.3 Кб
CSS75 Кб 75 Кб75 Кб
Скрипты68.3 Кб 68.3 Кб68.3 Кб

Тут тоже особой разницы нет. Вес страницы вырос всего лишь на пару килобайт.

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

Удобная настройка каждого блока

Ко второму важному плюсу можно отнести быструю и легкую настройку блоков. Плагин хорошо работает как с новым, так и классическим редактором.

А в Гутенберге все можно настроить практически налету.

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

Но я его уже давно не использую. Поэтому для меня это не минус.

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

Еще нравится, что все опции аккуратно расположены справой стороны и раскрываются при клике.

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

Те, что мы удалили, отображаться в настройках не будут.

Главные недостатки плагина WPRemark


Ну а теперь переходим к самому интересному. Как говорится, обзор продукта без упоминания недостатков — это не обзор.

Ниже я перечислю те минусы, которые присутствуют в плагине. Это просто мое сугубо личное мнение.

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

Нельзя загрузить SVG иконку

Первая проблема касается svg иконок. Ее просто так не загрузишь. Да, там можно загрузить свое изображение.

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

А по умолчанию загрузить svg файлик в медиабиблиотеку вы не сможете. В WordPress стоит блокировка на загрузку такого формата.

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

Однако, эта иконка будет вставлена в тег img и расцениваться, как обычная картинка. А это неправильно!

Иконка должна быть в теге svg. Тогда и поисковики будут знать, что это иконка, а не изображение.

Поэтому в плагине не хватает дополнительного окна для вставки исходного кода именно svg иконки.

Здесь хоть и есть своя коллекция иконок, но их мало.

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

Дублирование стилей

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

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

Единственное, будет только отличаться идентификационный номер блоков. А так все инлайн стали будут одинаковыми.

Дублирование инлайн стилей в плагине WPRemark
Номера разные, но стили одни и те же

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

Не хватает градиентов

В редакторе Гутенберг они есть. А вот в плагине WPRemark нет. Поэтому чтобы вывести блок с градиентом, приходится загружать фоновую картинку.

Это неудобно.

Все же хочется такой же градиент, как и в новом редакторе.

Мало тегов

В расширенных настройках можно выбрать, через какой тег HTML выводить сам блок внимания. Доступно два варианта — div и blockuote (цитата).

Теги для вывода информационных блоков внимания на сайте

Однако этого мало!

К примеру, мне нужно вывести маркированный или нумерованный список в статье с красивыми иконками.

Список достоинств и недостатков через плагин WPRemark
Список через плагин WPRemark

В принципе, визуально это можно сделать. Однако в исходном коде поисковики не поймут, что это список.

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

Некоторые проблемы с текстом

Когда нужно написать несколько абзацев в блоке, то они будут сливаться между собой. Такой текст неудобно читать.

Слитые абзацы текста в блоке внимания

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

Настройка междустрочного интервала тут не поможет, потому что все строки будут на одинаковом уровне.

Единственное, просто нужно дополнительно продублировать перенос строки.

Также у меня возникли некоторые трудности при оформлении основного текста. В плагине можно указать его начертание.

Но проблема в том, что оно применяется на весь текст целиком.

Отображение жирного начертания текста в блоке внимания
Весь жирный текст

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

Кстати, таким образом можно вставлять дополнительные картинки в блок внимания. Однако выравнивание будет согласно параметрам для текста.

Дополнительная картинка в блоке внимания

А вот какую-нибудь кнопку вставить в блок вы уже не сможете. Это конечно же, тоже плохо.

Мало возможностей для маневра

И последний, но по моему мнению, самый важный недостаток в плагине WPRemark заключается в том, что он слишком узконаправленный.

Сколько обычно вы используете блоков внимания?

Я так использую 14 штук под разные варианты.

Больше мне не нужно.

Да, классно прямо в редакторе формировать блоки внимания. Но вы же не будете постоянно создавать новые блоки.

Вы создадите 10 — 20 таких блоков, сохраните их в Мои блоки и как правило, больше возвращаться к настройкам не будете.

Но за такую цену мне бы хотелось, чтобы в плагине было больше добавочной ценности.

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

Все же, желательно переработать принцип работы плагина в редакторе.

Сейчас в Гутенберге доступен только один блок WPRemark для добавления. Он отвечает полностью за все.

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

В Гутенберге каждый блок отвечает за определенные задачи. Блок картинки — за изображение, блок абзаца — за основной текст, групповой блок — за группировку и так далее.

Блоки для создания колонок в редакторе Губенберг
Блоки для создания колонок

Точно также нужно сделать и для плагина.

Один блок за иконку, другой за заголовок, третий по основному тексту, четвертый — как основной контейнер при оформлении и так далее.

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

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

А для этого нужно добавлять новый функционал, которого пока нет в Гутенберге.

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

В плагине есть опции по отступам, работе с тенями и так далее. Их нет в Гутенберге. Поэтому если все разделить на отдельные блоки, то у пользователей будет возможность как-то обойти этот пробел.

Выводы

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

Но не более того!

Плагин узкоспециализирован. Поэтому по оформлению тут сильно не разгуляешься.

Конечно же, есть некоторые недочеты по работе. Однако уверен, со временем они будут решены.

А так плагин неплохой. Он легкий и не нагружает сайт.

Сказать спасибо кнопками ниже:
Сергей

Занимаюсь созданием и продвижением информационных сайтов в интернете. Интересуюсь маркетингом, SEO и SMM. Осваиваю возможности полезного софта для работы.

WPRemark - Отзывы пользователей

Adblock
detector