Если у вас есть блог или Сайт WordPress Вы всегда должны искать способы улучшить пользовательский интерфейс для ваших посетителей. Независимо от того, как выглядит ваш сайт, вы хотите, чтобы посетители вашего сайта получали наилучшие впечатления, чтобы они продолжали возвращаться (и, возможно, даже делиться вашим сайтом с другими).
Один из основных способов сделать это - просто создать высококачественный контент. Если вы предоставляете своим посетителям контент, который им интересен, значит, вы уже заложили основу для хорошего взаимодействия с пользователем.
Однако есть и другие стратегии, которые можно использовать для создания более удобного веб-сайта. В этой статье я расскажу о девяти плагинах WordPress, которые по-разному улучшают пользовательский опыт.
Ниже я разберу плагины по функциям, которые они добавляют. В некоторых случаях я уже упоминаю несколько расширений, потому что некоторые из них являются платными, но я все же хочу предоставить вам бесплатные альтернативы, где это возможно. Так что технически существует более девяти надстроек - это всего лишь девять различных типов надстроек 😃
Лучшие плагины WordPress для улучшения пользовательского опыта
1. Добавьте индикатор выполнения чтения с помощью WP Reading Progress.
В Интернете много всего происходит. Поэтому, когда посетитель переходит к статье, он хочет знать, сколько времени требуется на часть контента, чтобы он знал, сколько времени ему нужно потратить на то, что ему нравится.
Полоса прогресса чтения позволяет людям легко видеть, где они находятся в статье и сколько осталось. Если вы посмотрите вверх, вы увидите, что мы уже используем полосу прогресса чтения здесь, в Dz Techs (это красная линия в верхней части экрана).
Чтобы создать индикатор выполнения чтения, мы используем бесплатное дополнение WP Reading Progress (Прогресс чтения). Он очень прост в использовании, и вы также сможете настроить индикатор выполнения:
- Выберите другой цвет.
- Индикатор выполнения может отображаться в нижней части экрана.
- Индикатор выполнения добавляется только к определенным типам контента.
- Примените индикатор выполнения ко всей странице или только к контенту в редакторе WordPress.
2. Добавьте расчетное время чтения с помощью Reading Time WP.
Еще один способ помочь людям понять, сколько времени им нужно потратить на статью, - это показать примерное время чтения. Например, вы можете сказать посетителю, что чтение сообщения займет около 10 минут, что может побудить его сохранить его на потом, если у него всего пятиминутный перерыв на кофе.
Самый простой способ отобразить приблизительное время чтения - использовать команду add Чтение времени WP Халява. Это автоматически добавит ваше расчетное время чтения вверху ваших сообщений. Если вам нужен больший контроль, вы также можете вручную ввести время чтения с помощью короткого кода.
Вы также можете использовать бесплатное дополнение Считайте счетчик , который добавляет расчетное время чтения и индикатор выполнения чтения. Который исходит от того же разработчика, который создал тему Astra.
3. Оптимизация производительности WordPress с помощью WP Rocket (или других плагинов для оптимизации производительности)
Невероятно важный, но часто упускаемый из виду аспект взаимодействия с пользователем - это скорость загрузки веб-сайта. Если ваш сайт загружается слишком долго, у ваших посетителей будет плохой опыт, даже если вы будете использовать все эти другие плагины.
Чтобы ускорить работу вашего сайта, вы можете использовать плагин кеширования / оптимизации производительности для WordPress. Как минимум, у вас должно быть решение для кэширования страниц, но в идеале вы должны использовать расширение, которое поможет вам реализовать и другие рекомендации по производительности.
Отличный вариант, который хорошо виден - это дополнение WP Rocket Он начинается с 49 долларов, но позволяет очень легко реализовать все важные передовые практики по скорости.
Или вы также можете найти бесплатные высококачественные дополнения. Хорошие варианты:
Конечно, есть и другие аспекты для создания Быстрая загрузка сайта , одним из наиболее важных вариантов является использование Быстрый хостинг WordPress. Но если у вас, по крайней мере, есть надежный хостинг, такое расширение, как WP Rocket, может иметь огромное значение.
4. Добавьте параметр темного режима с помощью Blackout.
Если у вас легкий веб-сайт, цвета могут вызывать стресс у посетителей, особенно если они просматривают его ночью. Он может отображать много синий свет Позже у людей возникают проблемы со сном и зрительное напряжение, поэтому было создано так много инструментов, которые обеспечивают Темный режим. Например, начиная с iOS13, все пользователи iPhone теперь могут использовать темный режим.
С помощью специального плагина вы можете воспользоваться этой же опцией на своем сайте WordPress. Здесь есть несколько вариантов, но я бы хотел добавить Затемнение Бесплатно, потому что добавляет виджет, который позволяет посетителям выбирать предпочтительный режим.
Он также использует смешанный режим CSS, что означает, что он должен работать с любой темой WordPress, хотя вы определенно захотите протестировать его самостоятельно. Он также включает в себя функции, которые позволяют сохранять настройки пользователя с помощью файлов cookie и / или автоматически сопоставлять их с настройками их операционной системы.
Например, если посетитель использует Темный режим Windows Ваш веб-сайт автоматически загрузится в темном режиме, чтобы обеспечить бесперебойную работу.
5. Добавьте кнопку "Назад" вверху с помощью WPFront Scroll Top.
Если вы разместите длинный контент Тем не менее, посетителей может раздражать необходимость вручную прокручивать страницу до самого верха после того, как они закончили читать сообщение и захотят перейти в главное меню навигации. Кнопка "Разрешает"Вернуться наверхЛегко переходите к началу страницы одним щелчком мыши. Вы можете увидеть именно этот эффект в правом нижнем углу сайта Dz Techs.
Для кнопки Dz Techs мы используем функцию возврата к началу страницы, которая включена в шаблон. Однако вы также можете добавить кнопку Вернуться наверх К любому шаблону WordPress с помощью надстройки Верхняя часть передней прокрутки WPF Халява.
Расширение позволяет настроить текст / значок кнопки. Вы также можете скрыть его на определенных устройствах, например для пользователей смартфонов.
6. Добавьте предварительный просмотр изображения / лайтбокс.
Если вы публикуете много интересных фотографий, посетители вашего сайта могут захотеть воспользоваться опцией увеличения, чтобы увидеть более подробную информацию. С помощью соответствующего расширения Lightbox вы можете разрешить своим посетителям видеть изображение в полном разрешении, когда они нажимают на него. Это не уберет их со страницы, так как изображение в полном разрешении просто загрузится во всплывающем окне.
Большинство плагинов галереи WordPress включают Lightbox, но вы также можете использовать свои собственные изображения, которых нет в галерее, с помощью плагина. Простой лайтбокс Халява.
7. Добавить анимированное меню навигации
Меню навигации позволяет посетителям легко переходить к ключевым областям вашего веб-сайта. Однако многие шаблоны скрывают меню навигации, когда пользователь начинает прокручивать вниз, что может оставить их «в ловушке» в этой части содержимого.
Один из способов избежать этой проблемы - использовать кнопку. Вернуться наверх , о котором мы говорили ранее. Однако еще один хороший вариант - сделать меню навигации «статическим», чтобы оно оставалось видимым, даже когда посетитель прокручивает страницу до конца. Это то, что мы используем в Dz Techs - вы можете увидеть, как главное меню навигации остается видимым, даже если вы прокрутите вниз.
Многие шаблоны включают возможность использования статического меню навигации (включая шаблон Astra), поэтому сначала стоит проверить, предлагает ли ваш шаблон такую возможность. Если нет, вы можете перейти к использованию специального расширения, которое поможет вам.
Чтобы просто сделать меню навигации статическим в любом шаблоне, вы можете использовать расширение с творческим названием. Прикрепленное меню, липкий заголовок (или что угодно!) В прокрутке. Расширение очень просто в использовании - единственная немного сложная часть процесса установки - это найти селектор CSS для меню навигации вашей темы.
Вы можете найти селектор CSS, используя Инструменты разработчика Chrome. Щелкните правой кнопкой мыши заголовок и выберите проверка элементов. Далее ищем CSS класс Что выбирается при наведении курсора на меню навигации:
8. Найдите средство проверки неработающих ссылок для средства проверки неработающих ссылок.
Битые ссылки Действительно неприятные впечатления для посетителей, особенно неработающие внутренние ссылки. Посетитель нажимает на ссылку, потому что он хочет просмотреть этот контент ... но неработающая ссылка означает, что вместо этого он столкнулся со страницей с ошибкой. Неработающие ссылки также вредны для SEO, что является большим стимулом для их исправления.
Чтобы найти и исправить битые ссылки в WordPress, вы можете использовать плагин Рассеянная проверки Ссылка Халява. Что автоматически обнаружит все неработающие ссылки на вашем сайте и даст вам возможность исправить их в одном удобном интерфейсе.
- Установите его.
- Ищите битые ссылки.
- Отключите его.
- Включите его повторно только тогда, когда вы снова захотите проверить неработающие ссылки.
Если вас действительно беспокоит производительность, вы также можете использовать Cloud Broken Link Checker как инструмент Ahrefs Халява.
9. Оптимизируйте поиск в WordPress с помощью SearchWP.
Если ваши посетители полагаются на встроенный поиск, они могут в конечном итоге разочароваться в том, что поисковая система WordPress по умолчанию не очень надежна.
Чтобы исправить это, вы можете использовать плагин поиска для WordPress, чтобы получать более точные и релевантные результаты.
Если вы готовы платить деньги, добавление SearchWP Это дает вам множество возможностей для улучшения функциональности поиска на веб-сайте. Он также может помочь вам добавить живой поиск Ajax, который показывает подсказки поиска в реальном времени, когда посетители начинают вводить текст (как это делает Google).
Если ваш бюджет ограничен, бесплатное дополнение Relevanssi Это также хороший вариант, хотя в нем нет функции Ajax для прямого поиска. Если вы хотите искать напрямую, вы также можете использовать расширение Облегченный поиск Ajax.
Улучшите свой пользовательский интерфейс WordPress сегодня
Хотя большинство вышеперечисленных плагинов не вносят серьезных изменений в Сайт WordPress ваш сайт, но все они собраны вместе, чтобы немного улучшить пользовательский интерфейс.
Важно отметить, что никогда не следует недооценивать важность времени загрузки вашей страницы для улучшения взаимодействия с пользователем. Даже если вы больше ничего не меняете, ускорение вашего сайта на самом деле улучшит работу ваших посетителей.
Я поделился одной тактикой с использованием WP Rocket (или расширения кеширования). Чтобы узнать больше о стратегиях, ознакомьтесь с этим руководством на Как ускорить WordPress.
Вы знаете кого-нибудь Плагины WordPress Еще один отличный способ улучшить ваш пользовательский опыт? Вы можете поделиться им в комментариях!
