X
Заказать услугу

Как скопировать адрес страницы в буфер обмена

Плагины и Шаблоны для Wordpress
  • 2019-09-22
  • 1264 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

Недавно создавалась новая тема для заказчика, где был поставлен вопрос как скопировать адрес страницы в буфер обмена. Нужно было добавить такую кнопку, чтобы посетитель нажав на нее получил ссылку текущей страницы. Данная функция довольно полезна, если у вас есть кнопки шаринга в социальных сетях. Кнопка с копированием ссылки хорошо впишется к ним, если человек просто хочет отправить, а среди ваших кнопок нет нужной ему социальной сети. Когда-то я уже делал подобное и у меня была заготовка. Пытался найти новый рабочий метод, но как показала практика, данный все же лучший из всех. И так приступим.

Как скопировать адрес страницы в буфер обмена

Скрипт

Работа кнопки копирования текущей ссылки зависит от файла - clipboard.js. Это такая библиотека, которая и будет совершать весь процесс. Данный файл можно подключить указав на него ссылку на сторонний источник или скопировать его содержимое в свой файл и подключить из своего хостинга. Вот собственно сам файл, можно его таким подключить:

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>

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

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

jQuery(document).ready(function($){
var url = document.location.href;
new Clipboard('.copy_link', {text: function(){ return url;}});
});

Скрипт работает так, что при нажатии на кнопку, ссылка копируется и ничего не происходит. Можно вывести сообщение об успешном копировании, чтобы посетитель понимал. что все хорошо. Тогда код будет выглядеть так:

jQuery(document).ready(function($){
var url = document.location.href;
new Clipboard('.copy_link', {text: function(){ return url;}});
$('.copy_link').click(function(){alert('Cсылка успешно скопирована в буфер обмена.');});
});

Вместо alert, можно добавить модальное окно или появление текста под кнопкой. Все зависит от вашей фантазии. Можете кастомизировать идею как хотите.

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

HTML разметка

Теперь в нужное место на сайте, где должна быть размещена кнопка, добавьте такую HTML разметку:

<span class="copy_link">Копировать ссылку</span>

Как видите тут указан тот самый класс - copy_link. Данная кнопка - простой span элемент. Можете задать ему любые стили, чтобы он вписывался в общий дизайн вашего сайта.

CSS стили

Стили могут быть любыми, как пример использовать можно эти:

.copy_link{cursor:pointer;display:inline-block;padding:0 10px;line-height:25px;background:#fc0;color:#000;}

Пример того что получится в итоге можно посмотреть и скачать тут:



Пример



Скачать

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 1, в среднем: 5 из 5
Читайте также
Комментариев нет. Оставьте первый

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

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.