WordPress. Ссылки внутри блога и на сторонние ресурсы
Ссылки в WordPress на сторонние ресурсы, между страницами и записями блога, внутри страниц и записей (на конкретный абзац, пункт, строку).
Проще всего в WordPress добавляются ссылки на сторонние ресурсы и ссылки между страницами и записями блога с помощью встроенного в редактор инструмента «Вставить/изменить ссылку». Немного сложнее вставляются ссылки на конкретный абзац, пункт, строку внутри страниц и записей, формируемые вручную в коде HTML.
- Ссылки на сторонние ресурсы
- Ссылки между страницами и записями блога
- Ссылки внутри страниц и записей
Ссылки на сторонние ресурсы
1. Открываем в браузере страницу постороннего сайта, на которую хотим вставить ссылку, и копируем URL из адресной строки в буфер обмена.
2. Переходим в окно редактирования своей записи или страницы, выделяем текст будущей ссылки или ставим курсор в то место, где должна быть ссылка, нажимаем на панели инструментов текстового редактора кнопку с подсказкой «Вставить/изменить ссылку». В предыдущих версиях WordPress сразу открывалось основное окно с названием «Вставить/изменить ссылку». Если не ошибаюсь, с версии 4.5 оно стало открываться в свернутом виде с полем для вставки адреса и двумя кнопками: «Применить» и «Настройки ссылки» — эта кнопка и разворачивает окно «Вставить/изменить ссылку».
3. В открывшееся окошко добавления ссылки вставляем адрес из буфера обмена и нажимаем на кнопку «Применить» (а если текст ссылки предварительно не выделяли, нажимаем соседнюю кнопку «Настройки ссылки», как в пункте 5, для добавления текста ссылки):
Так как в примере текст ссылки был выделен заранее, ссылка готова:
Ссылка на сторонний ресурс: Дешевые авиабилеты.
4. Чтобы изменить URL, добавить или отредактировать отображаемый текст, способ открытия (в текущем или новом окне), выделяем ссылку и в появившемся окошке нажимаем кнопку «Изменить»:
5. Откроется уже знакомое окошко с полем добавления URL, в котором нажимаем кнопку «Настройки ссылки» для получения развернутого окна:
6. Откроется основное окно «Вставить/изменить ссылку»:
В этом окне можно установить галочку у пункта «Открывать в новой вкладке», заменить, если нужно, URL, добавить или изменить текст ссылки. Так как вставлять ссылку можно, не выделяя заранее текст, а добавив его в поле «Текст ссылки» окна «Вставить/изменить ссылку» — ссылка будет добавлена в то место, где первоначально стоял курсор. Нажимаем кнопку «Обновить».
Ссылки между страницами и записями блога
Чтобы вставить ссылку на страницу или запись своего блога выделяем текст ссылки или ставим курсор в то место, куда должна быть добавлена ссылка. Нажимаем кнопку на панели инструментов «Вставить/изменить ссылку». В открывшемся окошке нажимаем кнопку «Настройки ссылки», после этого раскроется основное окно «Вставить/изменить ссылку»:
Из списка в нижней половине окна выбираем страницу или запись, кликаем по ней, URL вставляется автоматически, текст ссылки, если не выделяли заранее, можно вручную вписать в соответствующее окошко или вставить из буфера обмена, скопировав предварительно наименование страницы или записи прямо в списке. Если необходимо, отмечаем галочкой пункт «Открывать в новой вкладке» и, конечно, нажимаем кнопку «Добавить ссылку». Ссылка на страницу своего блога добавлена:
Ссылки внутри страниц и записей
Чтобы сослаться на какое-то определенное место на странице или в записи, это место необходимо как-то пометить. Для этого рядом с ним вставляется закладка или, как ее еще называют, якорь. Кстати, на вкладке «Визуально» эта закладка будет помечена фигуркой якоря. В качестве примера рассмотрим вставку ссылок в пункты оглавления этой статьи и вставку закладок (якорей) в названия соответствующих разделов для перехода к ним из оглавления.
Закладки вставляются в HTML-редакторе (на вкладке «Текст») и представляют из себя следующую конструкцию:
<a></a>
Вместо link1 вставляем имя закладки.
Ссылка на закладку выглядит так:
<a href="#link1">Текст ссылки</a>
Вместо link1 вставляем имя закладки, к которой необходимо перейти по ссылке, символ # (решетка, хэш) обозначает, что за ним следует id. Символ # без id в ссылке обозначает начало страницы и его используют для возврата к началу (вверх).
Теперь все по-порядку:
1. Придумываем имя закладки и переходим в HTML-редактор, выбрав вкладку «Текст».
2. Вставляем закладку в нужное место статьи. Я вставил якоря рядом с заголовками разделов:
<a></a>Ссылки на сторонние ресурсы <a></a>Ссылки между страницами и записями блога <a></a>Ссылки внутри страниц и записей
Если поместить текст между открывающим и закрывающим тегами a, он будет подкрашен как ссылка.
3. Вставляем ссылки на закладки в пункты оглавления:
1. <a href="#1">Ссылки на сторонние ресурсы</a> 2. <a href="#2">Ссылки между страницами и записями блога</a> 3. <a href="#3">Ссылки внутри страниц и записей</a>
В редакторе это выглядит так (раньше ссылки были с префиксом — сейчас оставлены только цифры):
4. Теперь можно тестировать, в том числе и ссылку «Вверх↑»:
<a href="#">Вверх↑</a>
5. Полная ссылка на закладку выглядит так: URLстраницы/#link1. Ее не нужно составлять вручную, достаточно перейти по ссылке на закладку и скопировать полный URL в адресной строке. Использовать этот адрес можно для перехода на закладку с других сайтов.
Вверх↑
Как делать ссылки внутри страницы | БРБ
Если сообщение объемное и занимает несколько экранных страниц, то бывает удобно разместить в его начале что-то вроде оглавления, пункты которого являются ссылками. При нажатии на них читатель сразу может переместиться к нужной части текста.Например, СЮДА вы попадете, нажав ссылку в конце этого поста.
Все эти варианты можно организовать при помощи добавления ссылок внутри страницы (не путать с внутренними ссылками, под которыми обычно понимают ссылки в одном сообщении блога на другое сообщение этого же блога. О них я пишу в посте «Как сделать перелинковку страниц блога»).
Как сделать ссылки внутри страницы?
Для этого надо в редакторе сообщения написать нужный текст, а потом перейти на вкладку HTML. Тогда текст будет отображаться в HTML-формате.
После этого надо поставить так называемый якорь — закладку в нужном месте текста, куда будет происходить перемещение по ссылке и дать ей имя.
Якорь пишется при помощи атрибута name тега <a>. Например,
(В примерах рекомендуют писать без адреса сообщения, вот так: <a name=»имя_закладки»></a>. Но у меня в Блоггере к нему создается автоматически адрес, ведущий в редактор Блоггера. Поэтому надо указывать точный адрес нужного сообщения).
Кстати, если этот якорь поставить в какое-то другое сообщение и указать его адрес, то переход выполнится из исходного сообщения туда.
А саму ссылку вида <a href=»
http://адрес_сообщения_блога
#имя_закладки»>Текст_ссылки</a> нужно поставить в то место текста, откуда нужен переход.
(Тут тоже вставлен полный адрес сообщения, хотя в примерах пишут вот так: <a href=»#имя_закладки»>Текст_ссылки</a>. Но в Блоггере это не работает).
Не знаю почему, но при повторном редактировании сообщения, редактор Блоггера сам убирает строку с якорем. Поэтому перед тем, как обновить сообщение, нужно опять посмотреть его HTML-код и при необходимости повторно вставить эту строчку.
Пробуем?
Ссылки внутри страниц Якоря
Ссылки внутри страниц — называемые «Якоря», предназначены для быстрого перемещения по странице, когда объём содержимого довольно велик, то есть для удобства быстрой навигации. Чтобы было более понятно рассмотрим пример на этой странице: вверху есть «Содержание», где вы отчётливо видите содержимое «меню страницы».При нажатии интересующей вас темы содержимое страницы автоматически мгновенно перемещается на нужный раздел, что тем самым сокращает ваше время на прокрутку и поиск нужного материала на вашем сайте. Вы часто видели на сайтах внизу страниц стоит ссылка «наверх», где при клике на неё, страница сразу перемещается в самое начало — это тоже является «ссылкой внутри страниц».
Пример заголовка якорной ссылки.
Как установить ссылки внутри страниц — Якоря на свои страницы.
Рассмотрим следующий пример: на название заголовка ( темы, новости и т.д. ) — ставим такую ссылку ( для полной ясности я использую пример на этой странице и сделаю ссылку в самом низу страницы «Якоря» на свой заголовок на этой странице с названием — «Пример заголовка якорной ссылки» ).
И так, заголовок мы прописываем следующим образом:
<a name="yakoray">Пример заголовка якорной ссылки</a>Где: <a name=»yakoray»> — это, если можно так назвать, ссылочное имя нашему заголовку. Имена, в нашем случае «yakoray», можно давать абсолютно любые (только чтобы не повторялись) из латинских букв и строго без цифр.
Далее рассмотрим пример ссылки, которая будет у вас стоять в содержании, меню или навигации, где при нажатии на неё произойдёт автоматическое перемещение на наш «Заголовок», в данном случае в нашем примере на заголовок «Пример заголовка якорной ссылки» (выше).
<a href="#yakoray">Якоря</a>Обратите внимание: «#» на этой ссылке ставится обязательно, а так же имена «yakoray» прописываются в обоих случаях строго одинаково.И последнее, смотрим что у нас получилось. При нажатии внизу на нашу ссылку «Якоря» (ниже) мы перемещаемся строго на наш заголовок Пример заголовка якорной ссылки.
Теперь рассмотрим пример, когда статья или новость находится на одной странице, а якорную ссылку мы хотим разместить на другой странице. Практически тоже самое, только здесь указываем полный путь в ссылке.
Заголовок остаётся без изменений:
<a name="yakoray">Пример якорной ссылки</a>Якорная ссылка выглядит уже так:
<a href="https://age-dragon.com/scripts/17-yakorya.html#yakoray"> Якоря </a>Соответственно, как и при работе с обыкновенными ссылками, здесь так же можно использовать вместо текста любую картинку.И наконец последнее, разберём тот случай, когда при клике на ссылку «Наверх» мы сразу перемещаемся в самое начало страницы.
Данная ссылка очень простая:
<a href="#"><h6>Наверх</h6></a>На этом описание ссылок внутри страниц закончено.
Нажмите — ЯКОРЯ
Дата публикации: 10.08.2018
Похожие статьи
Добавить комментарийВнутренние ссылки: грамотная перелинковка сайта
Если вы стремитесь к тому, чтобы ваш сайт оказался в ТОП поисковой выдачи, мало писать качественный контент и раскручивать сайт при помощи множества внешних ссылок. Не менее важно правильно применять на вашем ресурсе внутренние ссылки. Какое какое количество внутренних ссылок на странице считается оптимальным? Как их правильно оформлять? Не столь сложная задача, как кажется на первый взгляд Но для начала давайте разберемся, что вообще такое “внутренняя ссылка”.
Это – разновидность ссылок, которые ведут с одной страницы вашего сайта на другую. Это – антипод ссылок внешних, которые ведут с одного сайта на другой. И если внешние ссылки, которые располагаются на чужих сайтах, получать бывает сложно, то внутреннюю перелинковку (т.е. обмен ссылками между страницами сайта) можно проводить в любое удобное время и в любых объемах. Именно потому и возникает вопрос – а сколько же их нужно для продвижения?
Внутренние ссылки: зачем они нужны
Содержание статьи
Для того, чтобы понимать, зачем вообще производят внутреннюю перелинковку (обмен внутренними ссылками) на страницах сайта, нужно немного разобраться с тем, как поисковый бот «читает» ваш сайт.
Допустим, Google или Яндекс «увидели» одну из страниц вашего сайта, скорей всего, главную (на практике индексация начинается обычно с нее). Что происходит дальше? В коде страницы поисковый бот натыкается на ссылку на другую страницу под тем же доменом. И добавляет ее в свою базу данных как «еще одну страницу этого сайта». Далее, уже на этой странице, бот также может «увидеть» ссылку на одну или несколько других страниц сайта. И также добавляет их в базу и отрабатывает и т.д.
Меню сайта
Каким образом появляются внутренние ссылки: меню сайта – набор ссылок на все основные страницы, затем страница или специальный файл «Карта сайта», где специально для поисковых ботов собраны все возможные страницы сайта и потом ссылки с одной страницы на другую (
Внутренняя страница | htmlbook.ru
Внутренними будем называть все веб-страницы сайта кроме главной. Они основаны на двухколоночном фиксированном макете, где в правой колонке располагается навигация (ссылки по сайту) и блок с интересной информацией, а в левой текст статьи.
Двухколоночный макет
Это самый простой из существующих макетов после одноколоночного, неудивительно, что для его построения существует несколько способов. Воспользуемся сочетанием свойств float и margin-right, которые уже неоднократно упоминались в книге. Для правой колонки необходимо установить float со значением right, а для левой margin-right со значением равным ширине правой колонке и расстоянию между колонками. В коде при этом плавающий элемент идёт первым, поэтому вначале следует правая колонка.
<aside>Правая колонка</aside>
<article>Левая колонка</article>В стиле для элемента <aside> указываем его ширину (width) и включаем выравнивание по правому краю с помощью float. Для элемента <article> только указываем margin-right.
aside { /* Правая колонка */
width: 200px; /* Ширина правой колонки */
float: right; /* Обтекание */
}
article { /* Левая колонка */
margin-right: 240px; /* Отступ справа */
}Навигация на сайте
Традиционно для создания различных меню применяется список, иными словами, комбинация тегов <ul> и <li>. Это связано с тем, что маркированный список сам по себе напоминает меню, к тому же легко модифицируется с помощью стилей. Навигация на нашем учебном сайте сделана в виде вертикального меню, поэтому логично будет воспользоваться списком. Только его придётся изменить под наши нужды — убрать маркеры и выделить текущий пункт меню градиентным фоном и рисованным маркером (рис. 6.13).
Рис. 6.13. Вид меню на сайте
Код меню на всех страницах сайта практически одинаков (пример 6.20), только меняется текущий пункт.
Пример 6.20. Код меню
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><span>Допущения</span></li>
<li><a href="simple-iteration.html">Метод простых итераций</a></li>
<li><a href="random-number.html">Метод случайных чисел</a></li>
<li><a href="dixotomia.html">Метод дихотомии</a></li>
<li><a href="golden-section.html">Метод золотого сечения</a></li>
</ul>Здесь класс current предназначен для выделения текущего пункта меню фоновым рисунком. Дополнительный тег <span> нужен для установки рисунка маркера. Можно было пойти другим путём и включить маркер через свойство list style-image, но браузеры такой маркер по-разному позиционируют, поэтому воспользуемся универсальным решением и вставим маркер как фоновый рисунок. Для начала необходимо подготовить изображения. Нам понадобится градиентный рисунок размером 192х25 пикселов (рис. 6.14). Почему размер этого рисунка равен не 200 пикселов, как ширина колонки? Мы опять воспользуемся той хитростью, что у нас цвет у градиента справа совпадает с цветом фона и плавно переходит к нему. Подобное ухищрение уже применялось у нас для создания градиента основной части страницы и позволило уменьшить размер изображения.
Рис. 6.14. Градиент для меню
В качестве маркера для текущего пункта меню ставится небольшое изображение на прозрачном фоне (рис. 6.15).
Рис. 6.15. Маркер пункта меню
Стиль для создания меню показан в примере 6.21.
Пример 6.21. Меню
ul.menu {
list-style: none; /* Убираем маркеры */
margin: 40px 0; /* Отступ сверху и снизу */
padding: 0; /* Поля */
}
ul.menu li {
padding: 5px; /* Поля */
font-size: 0.8em; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
}
ul.menu a, ul.menu span {
padding: 5px; /* Поля */
}
ul.menu li span {
padding-left: 25px; /* Поле слева */
background: url(images/bullet.png) no-repeat 5px center; /* Маркер */
}
ul.menu li.current {
background: #f9f2e2 url(images/menu-gradient.png) repeat-y; /* Градиент */
}Маркер выводится фоном, поэтому текст накладывается на него сверху. Для правильного отображения текст приходится сдвигать вправо свойством padding-left. В параметрах свойства background рисунок устанавливается по центру вертикали и смещается вправо от края на пять пикселов.
Блок «Интересная информация»
Блок представляет собой цветной прямоугольник, внутри которого выводится заголовок и текст. Под блоком отображается небольшая тень (рис. 6.16).
Рис. 6.16. Вид блока
Такую тень можно вывести в виде обычного изображения или фоновой картинки. Мы стараемся сделать код более эффективным, поэтому, чем меньше тегов используется, тем лучше. По возможности оформление необходимо переносить в стили, так что тень будем выводить стилевым свойством background. В блоке кроме тени используется фоновый цвет, нужно учесть этот момент и сделать рисунок тени на белом фоне (рис. 6.17), чтобы при наложении он перекрывал фон.
Рис. 6.17. Изображение тени
Код для блока получается достаточно простым и содержит только заголовок и текст.
<div>
<h4><img src="images/interest-title.png" alt="Интересная информация"
></h4>
<p>Средний самец льва имеет длину около трех метров и весит
от 180 до 230 килограмм.</p>
<p>Львы питаются не только убитыми животными, они также не
брезгуют падалью.</p>
</div>Заголовок блока в виде рисунка помещён внутрь тега <h4>, что позволяет при отключении изображений вывести альтернативный текст увеличенного размера. Сам стиль показан ниже.
.interest {
background: #f2efe6 url(images/shadow.png) no-repeat 0 100%;
/* Параметры фона */
padding: 10px; /* Поля */
font-size: 0.9em; /* Размер шрифта */
}
.interest h4 {
margin: 0 0 -10px; /* Отступы в заголовке */
}Фоновый рисунок прижимается к нижнему краю блока, поэтому в параметрах background указываем left bottom или 0 100%, как в примере.