Przycisk na stronę kopiuj do schowka

Aby dodać przycisk z ikonką do kopiowania tekstu do schowka na blogu WordPress, można użyć prostego kodu HTML i JavaScript. Oto kroki, jak to zrobić:

1. Dodaj HTML z przyciskiem kopiowania:

W treści artykułu na WordPressie możesz dodać poniższy kod. Ikonka i przycisk będą działały tak, że po kliknięciu tekst zostanie skopiowany do schowka.

<p id="tekstDoSkopiowania">To jest tekst, który chcesz skopiować do schowka.</p>

<button onclick="skopiujDoSchowka()">
  <img src="https://example.com/icon.png" alt="Kopiuj" style="width:24px;height:24px;">
  Kopiuj tekst
</button>

W powyższym przykładzie:

<p id="tekstDoSkopiowania"> — To jest tekst, który ma być skopiowany. Zamiast tego tekstu możesz wstawić dowolną treść lub element HTML.
<img src="https://example.com/icon.png"> — To jest ikonka przycisku. Wstaw adres URL do własnej ikonki lub znajdź ikonę w internecie, np. z serwisu FontAwesome lub innego repozytorium ikon.

2. Dodaj JavaScript do kopiowania tekstu:

Aby umożliwić kopiowanie tekstu do schowka, musisz dodać ten kod JavaScript. Możesz to zrobić w sekcji nagłówkowej wpisu (jeśli Twoja skórka na to pozwala) lub bezpośrednio w edytorze WordPress, korzystając z bloku „Custom HTML”.

<script>
function skopiujDoSchowka() {
  var tekst = document.getElementById("tekstDoSkopiowania").innerText;
  var textarea = document.createElement("textarea");
  textarea.value = tekst;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
  alert("Tekst został skopiowany do schowka!");
}
</script>

Opis działania:

Funkcja skopiujDoSchowka() tworzy tymczasowy element <textarea>, umieszcza w nim tekst, który chcesz skopiować, zaznacza go, a następnie używa komendy document.execCommand("copy") do skopiowania tekstu do schowka.
Po skopiowaniu element <textarea> zostaje usunięty, aby nie był widoczny.
Na końcu pojawia się alert informujący użytkownika, że tekst został skopiowany.

3. Stylizacja ikony (opcjonalnie):

Możesz dodać własne style CSS, aby przycisk z ikoną wyglądał ładnie na Twojej stronie.

button {
  background-color: #f0f0f0;
  border: none;
  padding: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

button:hover {
  background-color: #e0e0e0;
}

4. Gotowe!

Teraz, gdy użytkownik kliknie ikonę na Twoim blogu, tekst zostanie automatycznie skopiowany do jego schowka.