How to add a new text tag in Wordpress?

Question

WordPress

Good afternoon, when you select text with a certain tag in WordPress, it copies this tag to the clipboard, how to implement it has already been suggested here: Copying text by clicking on the text itself? how to embed this in wordpress? How to make your own tag, let's say there is text on the site, and then the text enclosed in , which will be copied to the clipboard.

Answer 1

how to embed this in wordpress?

WordPress has a simple page editor (not visual, but a simple HTML editor).
Accordingly, the implementation is as follows:

Click me to view the code

<script type="text/javascript">
const copyContent = document.querySelector(".content");
copyContent.addEventListener("click", function (e) {
  copyContent.classList.add("animated");
  setTimeout(() => copyContent.classList.remove("animated"), 500);
  let area = document.createElement("textarea");
  area.value = copyContent.textContent;
  document.body.appendChild(area).select();
  document.execCommand("copy");
  area.remove();
});
</script>
<style>
@import url("https://fonts.googleapis.com/css?family=Exo+2:300,400,500,600,700,900|Fira+Sans+Condensed:400,500,600,700,800,900|Montserrat:400,500,600,700,800|Oswald:300,400,500,600,700|Play:400,700|Roboto+Condensed:400,700|Roboto:300,400,500,700,900&display=swap&subset=cyrillic");
* {
  box-sizing: border-box;
}
body {
  font-family: "Oswald", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #191717;
  margin: 0;
}
.cont {
  background: white;
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 30px;
}
.content {
  font-size: 20px;
  line-height: 1.2;
  transition: color 200ms ease;
  cursor: pointer;
}
.animated {
  color: crimson;
}
</style>
<div class="cont">
  <p class="content">Бедная старушка находит на дороге горшок с золотом. Но пока она тащит его домой, золото превращается в серебро, серебро – в железо и так далее. Но старушка рада любой находке и не теряет оптимизма и хорошего настроения.</p>
</div>

If you need implementation in short codes, then the Code Snippets and Code Snippets Extended plugins will come to the rescue (if you suddenly do not find the "Easy Editing" tab)