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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После установки и активации плагина вам нужно сразу привязать лицензионный ключ. Сделать это можно в меню 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.

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

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

Пресеты

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

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

Иконка

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

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

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

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

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

Фон

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

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

Рамка

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

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

Тени

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

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

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

Заголовок

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

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

Текст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я тут провел ряд некоторых тестов на проекте.

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

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

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

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

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

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

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

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

Условия	Количество запросов	Время до первого байта (сек)	Время полной загрузки (сек)	Объем памяти (Мб)
Страница без плагина	103	0.12	0.2	17.6
Просто активный плагин	105	0.12	0.2	17.9
Активный модуль с блоками в статье	105	0.13	0.22	17.9

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

Google PageSpeed Insights

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

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

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

Параметры	Без плагина	Активный плагин	С установленными блоками
Общий балл	81	80	78
First Contentful Paint (сек)	2.1	1.9	2.1
Speed Index (сек)	2.6	2.4	2.7
Largest Contentful Paint (сек)	2.8	2.7	2.8
Time to Interactive (сек)	3.4	3.6	3.5
Total Blocking Time (мс)	480	540	570
Cumulative Layout Shift	0.068	0.068	0.068

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

Из таблицы заметно только вырос Total Blocking Time с 480 до 570.

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

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

Pingdom

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

Основные параметры	Без плагина	Активный модуль	С блоками
Оценка производительности	85	84	84
Время загрузки (сек)	1.40	1.32	1.41
Размер страницы (Мб)	1.6	1.6	1.6
Запросы	74	74	75

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

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

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

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

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

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

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

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

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

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

Также очень понравилось, что можно не загромождать свою коллекцию пресетов в редакторе.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мало тегов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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

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

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

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