TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Улучшение внутренних ссылок с помощью предварительного просмотра всплывающей подсказки

1 122

Одним из улучшений для сайта является предварительный просмотр подсказки по внутренней ссылке. Моей мотивацией для создания этого было привлечь больше внимания и полезности к внутренним ссылкам, уменьшая при этом заметность внешних ссылок. Инструмент, который я в итоге создал, весьма минимален. В конце этой статьи вы найдете его как бесплатный плагин WordPress с нулевой конфигурацией!

Короче говоря, вот как это работает:

  1. Определите внутренние ссылки на другие сообщения в контенте.
  2. Выясните заголовок, выдержку и избранное изображение.
  3. Измените ссылки, добавив информацию к атрибутам данных.
  4. Используйте скрипт всплывающей подсказки, чтобы действовать по ссылкам.
  5. Выберите доминирующий цвет из показанного изображения.
  6. Соответствующий цвет текста во всплывающей подсказке.

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

Классификация и изменение внутренних ссылок

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

Предварительный просмотр всплывающей подсказки

Движок для всплывающей подсказки представлен вам небольшим плагином jQuery под названием Tooltipster. Чтобы сэкономить время, я решил не писать свое решение для всплывающей подсказки, так как в итоге я повторял то, что люди до меня уже придумали. Его ключевой особенностью, которую я использую, является автоматическое позиционирование.

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

Автоматические цвета из изображений

Я всегда хотел сценарий, который определяет доминирующий цвет изображения. К счастью, мне не пришлось кодировать его самому, так как он уже существует под названием Color Thief. Эта технология основана на холстах, поэтому она отлично работает только для изображений, размещенных в том же месте. Для образов, размещенных на CDN, вам необходимо настроить несколько вещей, но это выходит за рамки этого поста.

Наш предварительный просмотр всплывающей подсказки по внутренней ссылке улавливает цвет изображения, что-то вроде того, как светятся телевизоры Philips Ambilight. Следовательно, должен быть способ определения его яркости, чтобы выбирать между светлым или темным текстом на нем. Andreas Wik вдохновил меня, используя уникальную формулу, которая учитывает человеческое восприятие цвета. Это называется HSP Color Model

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

Заключительные мысли

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

Источник записи: https://letswp.io

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее