Как сделать ссылку на определенное место другой страницы. Как в wordpress сделать ссылку на определенное место на странице
Как сделать ссылку на определенное место другой страницы
Привет! Сегодня рассмотрим, как создать ссылку на определенное место страницы. Казалось бы, элементарная вещь, но далеко не все знают, как это осуществить. Иногда появляется необходимость добавлять такие ссылки в свои статьи, чтобы посетитель сайта мог одним кликом мышки перейти не только на другую страницу сайта, но и в нужное место на этой странице. Чтобы понять, как это работает, перейдите по этой ссылке.
Вы перейдете на другую страницу, и в место, где описывается, как установить и настроить плагин WP Social Buttons. Иногда это очень полезно, что позволяет избежать лишних объяснений в статье. Человек переходит по ссылке, и сразу может прочитать нужную информацию.
Как сделать ссылку на определенное место данной страницы
Возможно, Вы замечали, что на многих сайтах, почти в самом начале статьи, добавляют ссылки на нужное место в статье. Это удобно для посетителей, так как при клике на такую ссылку, он может перейти к нужной ему информации, и почитать то, что его интересует.
Такие ссылки создавать достаточно просто. Для этого надо в нужном месте на странице создать «якорь», а затем на этой же странице надо добавить ссылку на этот «якорь».
1. Ссылка на якорь <a href=“#anchor”>Текст</a>2. Якорь <a id=“anchor”></a> Текст на странице… Вместо id, можно написать атрибут name
В кавычках ссылки и якоря, может быть любой текст, но он должен быть одинаковым:
1. Ссылка <a href=“#biz”>Текст</a>2. Якорь <a id=“biz”></a> Текст на странице
Если Вы кликните по этой ссылке, то перейдете в самое начало страницы.
Как сделать ссылку на определенное место другой страницы
Здесь принцип тот же, только переход осуществляется на другую страницу. Для этого надо создать на другой странице сайта, в нужном участке текста «якорь», как b в примере выше <a id=“anchor”></a>, а затем создать ссылку с якорем на эту страницу:
<a href=“http://link.html#anchor”>Текст </a> - ссылка на другую страницу, где вместо anchor, можно написать любые знаки, но такие же, как у якоря на другой странице.
<a id=“anchor”></a>
Как сделать ссылку в виде картинки на другую страницу в определенное место
Здесь принцип тот же, что и в примерах выше, но, если у Вас сайт на Worpress, тогда нужно перейти в редактор картинки, затем выбрать «Произвольный URL» и добавить ссылку с якорем на другую страницу.
dvpress.ru
Как сделать ссылку с одной части страницы сайта на другую часть этой же страницы?
Вы обращали внимание, что в википедии с оглавления нас не переносят на другие страницы, а просто отправляют к нужной главе этой же статьи? Данная функция может пригодиться тем, кто создает сайты-одностраничники или просто пишет очень большие статьи.
Также иногда бывает необходимо отправить читателя к конкретному абзацу другой статьи, здесь эта функция также будет незаменимой. Поэтому давайте разберемся, как делают переходы на внутренние части HTML страниц. Для примера возьмем сайт, установленный на WordPress.
Итак, рассмотрим две возможности:
- Как установить ссылку с одной части страницы на другую.
- Как установить ссылку с одной страницы на определенную часть другой.
Как установить ссылку с одной части страницы на другую
1. Заходим в админку сайта, выбираем статью, с которой будем работать и переходим в HTML.
2. В нужное место вставляем следующий код:
<a href=»#abzac 4″>Ссылка на абзац 4</a>
Здесь главная штука, это — #, поэтому не забываем о нем. Кстати, та часть ссылки, которая будет видимой, называется «якорь». У нас это: «Ссылка на абзац 4».
3. Перед 4 абзацем ставим другую метку:
<a name=»abzac 4″></a>
Смотрите на картинку:
4. Переходим в визуальный редактор и смотрим, что вышло, должно получиться так:
5. Сохраняем статью и проверяем, что получилось, должно выйти вот так:
То есть мы видим только якорь, сами абзацы выглядят как обычно, но после клика по якорю, мы попадаем в нужное место.
Получилось? Отлично! Я долго радовалась, когда научилась так делать. Давно уже хотела научиться этому! Надеюсь, вам так же оказалась полезной эта статья.
Как установить ссылку с одной страницы на определенную часть другой
Здесь также нет ничего сложного. У нас есть страничка, где стоит метка <a name=»abzac 4″></a>. Допустим это http://frilka.com/kurs-13-zarplata.html. Сделаем так, чтобы с другой страницы читатели попадали к 4 абзацу нашей первой статьи.
Для этого переходим на вторую страничку, также открываем HTML и создаем следующую ссылку:
<a href=» http://frilka.com/kurs-13-zarplata.html#abzac 4″>Ссылка на абзац 4</a>
то есть указываем полный путь к нужному участку.
Вставляем ее в нужное место текста, сохраняем и проверяем результат. Он должен быть таким:
1. в визуальном редакторе это будет выглядеть так:
2. в статье так:
Причем, если все сделано правильно, то кликнув по ссылке, мы попадем именно в начало четвертого абзаца первой статьи.
Вот такая вот, не хитрая перелинковка у нас получается! 
Если вам понравилась статья, поделитесь ее с друзьями в социальных сетях!
С Уважением и Любовью, Марина Лазарева! 
Похожие записи:
frilka.com
Ссылка на определенное место страницы сайта
В некоторых случаях, требуется указать ссылку на определенное место страницы сайта. Такая потребность может возникнуть, например, для отсылки посетителя на какую-то определенную позицию большого прайс-листа или демонстрации ему определенного изображения. Кроме того, таким специфическим образом, можно настроить любой баннер на сайте. В общем, использовать данную функцию вы можете на свое усмотрение в соответствии со своими потребностями и полетом мысли.
Пример использования: Запрет вывода на определенной странице
Опубликованный ниже код подходит для использования на любых сайтах, в том числе и на сайтах WordPress. Разумеется, в WordPress это нужно делать в режиме html. Для того, чтобы иметь возможность установки ссылки на определенное место любой страницы сайта, необходимо обозначить это место специальной меткой, сделать это можно при помощи следующего кода:
| <a>место для вашей метки</a> |
<a>место для вашей метки</a>
После этого, нужно правильно установить саму ссылку, код ссылки будет выглядеть следующим образом:
| <a href="http://Ваш-Сайт.ru/Страница-сайта/#metka " target="_blank">Анкор вашей ссылки</a> |
<a href="http://Ваш-Сайт.ru/Страница-сайта/#metka " target="_blank">Анкор вашей ссылки</a>
target="_blank" говорит о том, что страница будет открыта на новой вкладке!
В том случае, если нужно установить несколько ссылок на разные места одной страницы, вам, соответственно, придется задать необходимое число разных меток, например:
| <a>место для вашей метки</a> |
<a>место для вашей метки</a>
| <a>место для вашей метки</a> |
<a>место для вашей метки</a>
И так далее...
Как видите, ничего сложного в этом нет. Однако, в том случае, если у вас что-то не получилось - обязательно пишите в комментариях, будем разбираться вместе. Также интересен ваш опыт использования подобных ссылок на ваших сайтах.
Это полезно знать:
на Ваш сайт.
site-s-nulya.ru
Как создать ссылку на конкретную часть страницы — Lavnik.net
Многие видели меню навигации в различных обзорных статьях или просто в объемных страницах. Его обычно располагают в начале и при нажатии на один из пунктов меню вас перебрасывает на определенную часть страницы. Пример можно посмотреть в статье — Nexus 5X обзор. С помощью этого способа можно так же создать ссылку на часть страницы в другой статье.
Якорь (anchor) html
Якорь html — это закладка на веб странице. Обозначается следующим кодом <a id=“anchor”></a>. Где слово в кавычках и есть название закладки и может быть любым. Вставляем код в том месте куда предполагаем перемещаться.
Код ссылки при нажатии которой переместимся к якорю выглядит вот так <a href=“#anchor”>Текст ссылки</a>. В случае если это якорь в другой статье то просто нужно прописать полный путь и в конце добавить наш якорь, например вот так <a href=“https://lavnik.net/gadgets/nexus-5x-obzor-dva-mesyatsa-ispolzovaniya#foto”>Примеры фотографий</a>.
Якорь с помощью плагина
Для расширения возможностей встроенного редактора WordPress удобно использовать плагин TinyMCE Advanced.
Extends and enhances TinyMCE, the WordPress Visual Editor.
By Andrew Ozz
Last Updated: 2 месяца ago
1+ Million Active Installs
Compatible with WordPress 4.9.6
В настройках плагина нужно добавить в панель редактора ярлык «Якорь».
Уже в тексте статьи выделяем нужный абзац, нажимаем на «Якорь» и придумываем название.
Пример
На этой странице установлено два якоря:
Якорь (anchor) html — код <a href=»#html»>Якорь (anchor) html</a>
Якорь с помощью плагина — код <a href=»#plugin»>Якорь с помощью плагина</a>
lavnik.net
Ссылки внутри страницы | htmlbook.ru
Большие документы читаются лучше, если они имеют оглавление со ссылками на соответствующие разделы. Для создания ссылки следует вначале сделать закладку (якорь) в соответствующем месте и дать ей имя при помощи атрибута name тега <a>, как показано в примере 1.
Пример 1. Создание внутренней ссылки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Закладка</title> </head> <body> <p><a name="top"></a></p> <p>Друг уронил утюг в унитаз. И разбил его. Не утюг разбил, а унитаз. Причем так разбил, что по назначению унитаз и использовать никак нельзя, ни боком, ни передом. Мгновением назад только что вот все было хорошо и вот уже дыра прямо в унитазе, да такая, что можно забыть, что есть такой предмет в доме. Махнул рукой нечаянно, а потом мучайся... <p><a href="#top">Наверх</a></p> </body> </html>Между тегами <a name="top"> и </a> отсутствует текст, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике.
Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки (пример 2).
Пример 2. Ссылка на закладку из другой веб-страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Закладка</title> </head> <body> <p><a href="text.html#bottom">Перейти к нижней части текста</a></p> </body> </html>В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom.
htmlbook.ru
