Как изменить текст ссылки в html
Перейти к содержимому

Как изменить текст ссылки в html

  • автор:

Стилизация ссылок

Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:

  • ссылки без подчёркивания;
  • декоративное подчёркивание;
  • выделение фоновым цветом;
  • рамки;
  • рисунок возле ссылки.

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

Ссылки без подчёркивания

Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.

Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).

Пример 1. Отсутствие подчёркивания у ссылок

Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration , они наследуют свойства селектора a .

Подчёркивание ссылок при наведении на них курсора мыши

Чтобы добавить подчёркивание для ссылок, у которых установлено text-decoration : none , следует воспользоваться псевдоклассом :hover . Он определяет стиль ссылки, когда на неё наводится курсор мыши. Остаётся только добавить для псевдокласса свойство text-decoration со значением underline (пример 2).

Пример 2. Подчёркивание ссылок

Декоративное подчёркивание ссылок

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom , которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed , получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

Пример 3. Пунктирное подчёркивание для ссылок

При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none , чтобы одновременно не получилось две линии (рис. 1).

Использование пунктира для выделения ссылки

Рис. 1. Использование пунктира для выделения ссылки

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

Пример 4. Двойное подчёркивание ссылок

Изменяя толщину линии, её тип и цвет, можно получить множество разнообразных эффектов.

Использование фонового цвета

Чтобы добавить к ссылке цветной фон, достаточно воспользоваться свойством background , присвоив ему цвет в любом доступном формате. Аналогично можно использовать псевдокласс :hover , тогда цвет фона под ссылкой будет изменяться при наведении на неё курсора мыши (пример 5).

Пример 5. Фон под ссылкой

Фон под ссылкой точно соответствует области текста, поэтому в примере для селектора a добавлено свойство padding , создающее поля вокруг текста (рис. 2).

Изменение цвета фона при наведении на ссылку курсора

Рис. 2. Изменение цвета фона при наведении на ссылку курсора

Рамка вокруг ссылки

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

В примере 6 показано, как изменять цвет рамки, используя свойство border . Подчёркивание текста через text-decoration можно убрать или оставить без изменения.

Пример 6. Изменение цвета рамки у ссылок

Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding . Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background .

Если требуется добавить рамку к ссылкам при наведении на них курсора, то следует позаботиться о том, чтобы текст в этом случае не сдвигался. Достичь этого проще всего добавлением невидимой рамки вокруг ссылки и последующего изменения цвета рамки с помощью псевдокласса :hover . Прозрачный цвет указывается с помощью ключевого слова transparent , в остальном стиль не поменяется.

a < border: 1px solid transparent; /* Прозрачная рамка вокруг ссылок */ >a:hover < border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */ >

Рисунки возле внешних ссылок

Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. Чтобы пользователи отличали внешние ссылки от обычных, их следует выделять каким-либо способом. Например, поставить возле ссылки маленький рисунок, который показывает, что статус ссылки иной (рис. 3).

Выделение ссылки с помощью рисунка

Рис. 3. Выделение ссылки с помощью рисунка

Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a[href^=»http://»] <. >, как показано в примере 7.

Пример 7. Рисунок возле ссылки

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right . Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left .

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*=»//»] , он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.

См. также

  • text-decoration
  • Начертание
  • Оформление ссылок
  • Свойства текста в CSS

Как изменить текст и даже HTML ссылки «Читать далее»

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

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

Классический редактор

Это было когда-то очень давно ��, ещё до прихода Gutenberg. Я даже решил оставить те самые старые скриншоты, когда я впервые записывал этот урок.

кнопка далее в визуальном редакторе

кнопка далее в HTML-редакторе

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

И в таких случаях, для того, чтобы изменить текст ссылки «Читать далее», нам достаточно изменить этот тег, например на или или что угодно другое.

В редакторе Gutenberg

А тут совсем всё легко, правда в первый раз может быть не совсем очевидно, поэтому записал для вас это видео:

Изменяем текст или HTML ссылки сразу для всех постов при помощи фильтра the_content_more_link

Фильтр the_content_more_link находится внутри функции get_the_content() и про него я уже рассказывал ранее.

Тем не менее вот простейший пример изменения текста ссылки:

add_filter( 'the_content_more_link', 'true_new_more_text', 10, 2 ); function true_new_more_text( $more_link, $more_link_text ) { $new = "продолжить чтение. "; // вписываем своё return str_replace( $more_link_text, $new, $more_link ); }

А тут мы полностью перезаписываем её HTML:

add_filter('the_content_more_link', 'true_more_button_not_a_link' ); function true_more_button_not_a_link( $more_link ) { return ' '; }

Первый параметр функций the_content() или get_the_content()

Если вы сами занимаетесь разработкой темы для WordPress, об этом у меня кстати есть видеокурс, тогда вы можете контролировать текст ссылки «Читать далее» первым параметром этих функций $more_link_text , например для функции the_content():

the_content( 'Продолжить чтение..' );
$content = get_the_content( 'Продолжить чтение..' );

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

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

  1. В классическом редакторе
  2. В Gutenberg
  3. При помощи фильтра
  4. Параметр $more_link_text
Комментарии — 18

B.G. 3 Июл 2012
Очень интересно! Блин, ваще зачитался Вашим блогом. Спасибо!
Миша 4 Июл 2012
Пожалуйста)) очень приятно читать такие комменты)
Михаил 25 Июл 2012
Круто! Спасибо за совет!
Миша 25 Июл 2012
Дмитрий 28 Авг 2014

Помог. 2 дня искал как изменить more. У меня тема не стандартная. Другие примеры не подходили. Твое решение сработало сразу на 100%. Респект!

Миша 29 Авг 2014
Всегда пожалуйста, буду рад, если поделитесь статьёй в соц сетях 🙂
Fred 29 Авг 2014
add_filter( ‘the_content_more_link’, ‘new_more_text’, 10, 2 ); что означают цифры 10, 2?
Миша 30 Авг 2014

10 — приоритет фильтра (чем он меньше, тем раньше фильтр будет применен),
2 — количество параметров в фильтре.

Катерина 21 Янв 2015

Вставила ссылку как вы написали, думала не хватает именно фразы «продолжить чтение», чтобы запись сокращалась, но после все равно все осталось по-прежнему. В админке все верно, на деле — текст висит огромный. Влияет ли то, что я прикрепила на верхнюю панель запись вместо страницы или то, что запись пока одна. Буду рада ответу.

Миша 22 Янв 2015
Пожалуйста, вот инфа по теме: https://misha.agency/wordpress/the_content.html#global_more.
Андрей 8 Фев 2015
А как убрать эту кнопку вместе со ссылкой на полную статью?
Миша 9 Фев 2015
Попробуйте:

function true_remove_more( $more ) { return; } add_filter( 'excerpt_more', 'true_remove_more' );

Андрей 9 Фев 2015
Михаил, я так понимаю это нужно вставить в файл functions.php? Если да, то не срабатывает.
Миша 10 Фев 2015
А у вас через какую функцию выводятся анонсы постов со ссылкой далее?
Андрей 12 Фев 2015

Это сложный вопрос и я не совсем понимаю его суть. Есть тег по нему и обрезается статья на главной. При это размещается кнопка «Далее». Я могу ее скрыть визуально с помощью css файла, но при просмотре кода она все равно остается. И как убрать совсем, при этом открывать статью с главной нажав на заголовок — не знаю. Просто если эту кнопку оставить, то с главной на одну и туже статью идет 2 ссылки (одна с анкором заголовок, вторая далее), а если это, например, архив старых записей, то может быть все три ссылки, так как у меня наиболее популярные выводятся в сайтбаре

Изменить цвет ссылки

Учу HTML и CSS и не могу понять, почему у ссылки, у которой прописано text-decoration:none все равно остается цвет ссылки. Просто когда вчера писал, у меня после этого значения, цвет стал черный, а сейчас почему -то цвет нажатой ссылки.

.header < box-shadow: black; -webkit-box-shadow: none; /*background-color: black;*/ border-bottom: 1px solid #e8e8e8; max-height: 60px; z-index: 1000; >.container < width: 100%; max-width: 1170px; margin: 0 auto; display: table; >.container::before < content: " "; display: table; >.container::after < content: " "; display: table; clear: both; >.nav < display: flex; justify-content: space-between; position: relative; /*margin: 0.3rem;*/ >.nav__left < font-weight: 600; font-size: 1.3rem; margin: 0.3rem 0px 0rem 0rem; >.nav__left__names < font-weight: 300; font-size: 0.8rem; margin: -0.1rem 0px 0.3rem 0rem; >.nav__logo < width: 2.7rem; height: 2.7rem; display: block; float: left; margin: 0.3rem 0px 0.3rem 0rem; >.nav__right>ul>li < float: left; list-style: none; margin: 0; font-size: 1.1rem; padding: 0px 10px; >.nav__right>ul>li>a
It's name
My name
  • Главная
  • FAQ
  • Скачать
  • Протоколы

Как превратить ссылку в текст

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

  1. Как превратить ссылку в текст в Ворде
  2. Как скопировать ссылку и вставить в текст
  3. Как зашить ссылку в слово
  4. Как сделать перекрестную ссылку на текст
  5. Полезные советы и выводы

Как превратить ссылку в текст в Ворде

  1. Чтобы изменить вид гиперссылки, необходимо щелкнуть правой кнопкой мыши в любом месте ссылки и в открывшемся меню выбрать пункт «Изменить гиперссылку».
  2. В диалоговом окне «Изменение гиперссылки» выберите текст в поле «Текст».
  3. Введите текст, который вы хотите использовать для ссылки, и нажмите кнопку «ОК».

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

Как скопировать ссылку и вставить в текст

  1. Откройте страницу с текстом, в котором вы хотите разместить ссылку.
  2. Выделите текст, который будет являться ссылкой, нажав и удерживая левую кнопку мыши, и переместите указатель мыши на этот выделенный текст.
  3. Щелкните правой кнопкой мыши на выделенном тексте, чтобы открыть контекстное меню.
  4. Выберите пункт «Копировать ссылку на выделенный текст».

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

  1. Выделите слово или фразу, которые будут являться ссылкой.
  2. Нажмите на кнопку «Вставить/Редактировать ссылку», которая обычно напоминает перевернутую восьмерку со знаком плюс.
  3. В открывшемся окне вставьте адрес страницы, на которую должна вести ссылка.

Как сделать перекрестную ссылку на текст

  1. Выберите «Текст» > «Гиперссылки и перекрестные ссылки» > «Вставить перекрестную ссылку».
  2. Выберите «Окно» > «Текст и таблицы» > «Перекрестные ссылки» и затем «Вставить перекрестную ссылку» в меню палитры «Гиперссылки».
  3. Нажмите кнопку «Создать новую перекрестную ссылку» на палитре «Гиперссылки».

Полезные советы и выводы

  • При создании ссылок, попробуйте использовать лаконичный и понятный текст для удобства ваших читателей.
  • Регулярно проверяйте ваши ссылки, чтобы убедиться, что они все еще работают и не приводят к ошибке «404 Not Found».
  • Если вы хотите, чтобы ссылка открывалась в новой вкладке, можете добавить атрибут target=«_blank» в тег ссылки.
  • Разнообразьте текст ссылок, чтобы убедиться, что они выделяются на странице и чтобы сделать их более привлекательными для вашего аудитории.

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

  • Как узнать что за вами следят в Одноклассниках
  • Как посмотреть ссылку сайта
  • Что такое предпросмотр для ссылок в Телеграм
  • Как перейти на сайт по ссылке

Если вы хотите превратить ссылку в текст, необходимо выполнить несколько действий. Найдите ссылку, которую вы хотите изменить, и щелкните правой кнопкой мыши в любом месте ссылки. В появившемся контекстном меню выберите пункт «Изменить гиперссылки». Откроется диалоговое окно «Изменение гиперссылки». В поле «Текст» выберите слова, которые вы хотите использовать для создания ссылки. Затем введите этот текст в соответствующую строку и нажмите кнопку «ОК». Теперь ваш текст будет являться ссылкой на нужный веб-ресурс. Это простой и удобный способ улучшить внешний вид вашего сайта и сделать его более удобным для пользователей.

Все права защищены © 2018-2024.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *