Анимация подчеркивания ссылок в WordPress

Пример эффекта ссылки, который мы делаем.

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

Гиперссылка существовала с момента появления Интернета и оставалась довольно стандартной до конца 2010-х годов. В этот момент дизайнеры начали удалять подчеркивание, добавлять интересные эффекты при наведении и изменять общий стиль <a>.

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

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

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

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

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

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

Наш любимый пример — стиль ссылки в блоге Kinsta. Мы решили использовать ссылки в этом блоге в качестве вдохновения. Вот кусок CSS, который применяет к гиперссылкам красивые эффекты наведения. Его легко установить на веб-сайте WordPress, о чем мы поговорим ниже.

CSS для оформления гиперссылок в WordPress

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

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

a { color : #6699CC ; background-image : linear-gradient (transparent calc( 100% - 2px ), #6699CC 1px ); text-decoration : none; background-size : 100% 100% ; background-position : 100% ; position : relative; background-repeat : no-repeat; transition : all . 2s ; } a :hover { background-size : 0 100% ; }
 Язык кода: CSS ( css )

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

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

Вот код (созданный автором этого комментария):

 body{ padding : 1.5 rem; } a{ position : relative; text-decoration: none; color: purple; &:after{ content : '' ; position: absolute; bottom: 0 ; left: 0 ; width: 100 %; height: 0.1 em; min-height: 1 px; background-color: currentColor; transform-origin: right; transition: transform .25 s ease; } &:hover{ &:after{ transform : scaleX( 0 ); } } }
 Язык кода: JavaScript ( javascript )

И вот что он делает:

Пример ссылки, оформленной с помощью этого метода.

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

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

Как стилизовать ссылки в WordPress

На самом деле стилизация гиперссылок в Word Press довольно проста. Все, что вам нужно сделать, это скопировать и вставить код в редактор CSS, который применит его к стилям на вашем сайте WordPress. Вы можете сделать это несколькими способами, но самый простой и легкий способ применить пользовательский CSS к WordPress — использовать встроенный редактор CSS, который можно найти в разделе «Внешний вид» -> «Настроить».

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

Как только появится интерфейс настройщика, просто нажмите на вкладку настраиваемого CSS (обычно это самая нижняя ссылка в меню) и вставьте свой код. Нажмите кнопку публикации, и стиль гиперссылки должен быть применен к вашему веб-сайту WordPress.

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

На нашем веб-сайте мы указали (с помощью CSS), что стиль гиперссылки должен применяться только к содержимому сообщения в блоге.

Мы сделали это, специально выбрав содержимое публикации, используя идентификатор элемента, например:

 #post-content a {ваш код здесь}

Выполнение этого зависит от темы к теме, так как некоторые на самом деле помечают оболочку, окружающую содержимое публикации, а другие нет. Фактический метод и селектор, которые вы используете, уникальны для вашего собственного веб-сайта. Вы можете использовать набор инструментов разработчика, такой как Chrome Dev Tools, чтобы выяснить, какой селектор окружает содержимое вашего сообщения, и применить его к коду.

Вывод

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

Если у вас есть какие-либо вопросы о применении стилей CSS к гиперссылкам в WordPress, не стесняйтесь обращаться в комментариях.