Ссылка html в WordPress
24.06.2018
Здравствуйте, читатели блога!
Данная статья предназначена для начинающих. В ней вы узнаете, какие могут быть ссылки в WordPress и как их сделать правильно.
В статье:
2. Ссылка WordPress текстовая на страницах
3. Ссылка WordPress текстовая в записи
5. Как сделать ссылку в комментариях
6. Ссылка картинка (изображение) и html img
7. Ссылка html в виджетах, сайдбаре, подвале сайта
Что такое ссылка
Ссылки — это неотъемлемый атрибут Интернета. Без них его просто нет.
Начиная с того, что в строке браузера вы вводите адрес сайта в форме URL, вы идёте по этой первой ссылке. В ссылке указывается адрес URL сайта и дополнительная информация.
Ссылка может стоять в строке браузера, в заголовке (header) сайта, в сайд баре (виджетов), в подвале (footer) сайта, в записях и на страницах. Ссылка в WordPress может быть внешней (ссылка направляет на другой сайт) и внутренней (ссылка направляет на другие страницы этого же сайта).
Внешние ссылки следует проставлять в действительной необходимости. Так как они могут увести не только посетителей с вашего сайта, но и роботов — поисковиков.
Ссылку в WordPress можно сделать на слово, часть текста — фразу, на картинку-изображение.
Ссылка в WordPress может быть сделана через использование редактора WordPress, либо в файлы .php выбранной вами темы. Во втором случае надо воспользоваться редактором тем, который открывается в админке WordPress следущим образом : Нажимаем Внешний вид, Редактор. Это для продвинутых сайтостроителей.
Каждая тема (шаблон WordPress) имеет своё внешнее оформление ссылок. Обратите внимание как это делается в вашей теме. Например, в некоторых темах wordpress все ссылки имеют красный цвет без подчёркивания, при подводе курсора, появляется рука, чёрный цвет и подчёркивание. Обычно заголовок сайта оформляется тоже в виде ссылки.
Это делается для того, чтобы с любой страницы посетитель мог попасть на главную страницу сайта, путём нажатия на заголовок. Все эти детали про ссылки нужны будут вам для того, чтобы продолжать дизайн вашей темы, а не ломать его.
Далее вы можете прочитать как сделать ссылку используя текст, картинку, или сделать ссылку в php шаблонах, в виджетах WordPress.
Ссылка WordPress текстовая на страницах
Заходим в админке WordPress в пункт меню Страницы.
Заранее подготовьте полный адрес ссылки ( http:// … ) , запишите его блокноте или скопируйте в буфер обмена.
Далее — Изменить, если страница существует, или Добавить, если страница только создаётся.
В открывшемся Редакторе WordPress пишем слова, на которые установим ссылку и выделяем их. Делайте это в режиме «визуально».
Находим на панели значок ссылки (цепи неразорванные, соответственно разорванные, если надо удалить ссылку), нажимаем.
В открывшемся маленьком окне вводим или копируем из буфера ссылку.
В последних версиях WordPress можно выбрать URL ссылки из списка.
Если вы хотите перенаправить посетителя временно по этой ссылке, то вы берите Цель — Новое окно.
Если вы хотите, чтобы посетитель ушёл по вашей ссылке с сайта, то введите Открыть в текущем окне. Если вы делаете внутреннюю ссылку на своём WordPress сайте, то вводите по смыслу контекста, нужно ли совсем перейти на другую страницу, или только даёте посмотреть её.
Нажмите Вставить.
Это всё. Перейдите на сайт и нажмите вашу сделанную ссылку. Вы перейдёте по ссылке.
Ссылка WordPress текстовая в записи
Заходим в админке WordPress в пункт меню Записи. Далее всё как для страницы.
Ссылка html
Начинающим пользователям wordpress рекомендую прочитать обязательно.
На странице или в записи можно сделать html ссылку в виде полного адреса URL (http:// …). После сохранения и перехода на сайт, можно убедиться, что ссылка html перенаправит вас по указанному адресу.
Напишите в Редакторе в режиме «визуально» ссылку, например, Переход на страницу
И перейдите в другой режим Редактора WordPress — HTML. В данном режиме вы видите свою страницу в виде документа на языке HTML . Найдите свою ссылку на странице в режиме HTML и просто запомните ЧТО в ней ЧТО означает. Потому что вам не раз придётся сталкиваться с этим тегом ссылки HTML.
<a href=»http://site.ru»>Переход на страницу</a>
<> — само тело тега (команда, директива на языке HTML)
a — тег означающий описание ссылки html
href= — полный адрес URL ссылки html
</> — закрытие тега, в данном случае тега a </a>
Между самим телом тега и его закрытием, находится ТО, что будет напечатано на веб-странице «Переход на сайт», то что увидят посетители сайта как ссылку. Вернувшись к предыдущему абзацу про ссылки в виде слова или части текста, и переведя режим в «HTML» , вы увидете, что выделенные вами слова когда вы сделали ссылку, находятся между телом тега и его закрытием.
Поймите это и хорошо запомните. Именно этот момент будет ключевым в ваших отношениях с HTML и вашей способности самостоятельно поддерживать свой сайт.
Как сделать ссылку в комментариях
Зайдите в окно комментария.
Напишите полный с http:// URL адреса ссылки.
Нажмите Добавить комментарий. Нажав на ссылку, вы перейдёте по ней.
Ссылка картинка (изображение) и html img
В режиме Редактора WordPress «визуально» вставьте картинку (изображение).
Щёлкните на картинку (изображении). Оно выделится.
Затем нажмите на панели Редактора WordPress на значок ссылки (цепи).
Заполните в ссылке поле полного адреса URL куда вам надо перенаправить посетителя сайта.
Выберите в Цели ( Новое окно, если вы хотите, чтобы посетитель вернулся) или текущее.
Нажмите Вставить.
Это всё. Далее сохраните и перейдите на сайт. Убедитесь , что при клике на ссылку картинку (изображение) , вы попадаете на вставленный URL ссылки.
Разберёмся в тегах ссылки HTML в данном случае.
<a href=»http://site.com» target=»_blank»>
<img title=»визитка» src=»http://site.ru/wp-content/uploads/2010/07/cveti331-150×150.j..; alt=»подпись» width=»150″ height=»150″ >
</a>
Между телом html ссылки тега а и его завершением, стоит тег html img — тег описания изображения. То есть, ТО что стоит между телом тега a и его завершением высвечивается на веб-странице и является ссылкой. В данном случае — не слово, а ссылка в виде картинки (изображения) .
Параметры html ссылки — тег img :
title — имя заголовка, будет высвечиваться при наведении посетителем курсора на изображение
src — полный URL адрес файла содержащего изображение на сервере
alt — если браузер посетителя не может вывести изображение, то вместо него по этой html ссылкебудет показан вставленный в параметр текст
width и height соответственно ширина и высота изображения в пикселях, используемого в этой html ссылке .
Ссылка html в виджетах, сайдбаре, подвале сайта
Ссылки html можно сделать во всех этих частях сайта. Вы можете сами написать ссылку HTML, а если не уверены в себе, то сделайте следующим образом.
Заведите пробную запись или страницу в WordPress , всё равно. Потом вы её удалите.
В пробной записи сделайте ссылку html с помощью значка редактора WordPress в визуальном режиме, или как слово, или как изображение, такую, какую вам надо для размещения в виджете, сайдбаре, подвале. Перейдите на сайт, проверьте её работу.
Потом перейдите в Редакторе WordPress в режим «HTML», и аккуратно скопируйте в буфер получившуюся ссылку на языке HTML.
Далее, поставив курсор в нужное вам место в виджете (ТЕХТ) вставьте html ссылку из буфера. Сохраните. Проверьте её работу перейдя на сайт.
Удалите пробную запись.
Подобным образом , я имею ввиду через пробную запись, можно аккуратно cделать html ссылки в сайдбар, подвал и другие места вашей темы.
Ссылки внутри страницы
Чтобы сделать ссылку внутри страницы, то есть на фрагмент, раздел, абзац на этой же странице, надо поставить якорь (метку, имя) перед соответствующим фрагментом текста, и в ссылке использовать его со значком #.
Пример ссылки внутри страницы:
В HTML редакторе поставьте перед фрагментом текста якорь , используя любой произвольный текст или слово, я взял слово — portfolio. Так будет выглядеть конструкция которую вам надо поставить перед фрагментом текста, чтобы сделать ссылку на него внутри этой же страницы.
<a name=»portfolio»></a>
Замечание. Сайт работает, но Валидатор даёт ошибку на такую конструкцию, Поэтому, лучше использовать другую
<a id=»portfolio»></a>
И разместите в нужном месте внутри страницы ссылку на этот якорь. Это вы можете сделать в HTML редакторе или очень просто в Визуальном.
В HTML редакторе:
<a href=»#portfolio»>текст ссылки или картинка</a>
В визуальном редакторе в форме формирования ссылок в URL поставьте #портфолио
Это всё, по поводу как сделать ссылки внутри страницы. Если вам надо сделать ссылку на другую страницу в определённое место внутри, то прежде всего поставьте якорь внутри страницы, как описано выше. А при формировании ссылки укажите полный URL страницы с добавленным /#портфолио на конце.
Например,
<a href=»http://site.com/statja/#portfolio»>текст ссылки или картинка</a>
Таким образом можно сделать ссылку наверх этой же страницы, указав
<a href=»#»>Наверх страницы</a>
Вместо текста может быть картинка
В заключение
На этом пожалуй все, что я хотел вам рассказать. Если что-то не понятно, пишите в комментариях, обсудим.
Для более подробного ознакомления смотрите видео урок:
_______________
Статью подготовил Андрей Ладыгин.
