文字列をタッチでコピーできる機能をWordPressに追加

文字列コピー

【文字列コピー】

「コピーする」ボタンを押すと自動的にクリップボードにコピーされます。

もちろんiPhone、スマホでも使えます。

コピーした後はボタンの文字列を変更し、数秒後また戻るようにしています。

このように、ボタンをクリック、タッチすると表示されている文字列をコピーできる機能を実装します。jQuery の Clipboard 機能を使うことで簡単に使えます。

  • コードなどの配布
  • メールアドレスなどのコピー

など短い文字列をコピーしてもらいたいときに便利です。

文字列を自動でコピーできることのメリットは、キーの打ち間違え、文字列を写すめんどうさを和らげることが期待できます。特にスマホではコピペしにくいですからね。

ソースコードのような長い行が必要なものはシンタックスハイライターなど別のプラグインを使ったほうがスマートに表示できると思います。(たびくもではprism.jsを使用)

この機能を実現する方法はいくつかあると思いますが、今回はWordPress 子テーマファイル内の以下のファイルに追記もしくは新しく作成します。

  • footer.php
  • style.css
  • scripts.js (←新規追加)

FTPやSFTPでサーバーに接続

Filezilla などのクライアントソフトを使ってサーバーへ接続したら、子テーマフォルダへ移動します。

style.css にコードを追加

子テーマ内の style.css に以下のコードを追加してください。

style.css

/* jQuery コピーボタン */
input[id*="clip_copy"] {
  margin: 1em auto;
  color: #555;
  font-weight: bold;
  }

.clip_copy { /*ボタン*/
  border:2px solid skyblue;/*ボタン枠線色*/
  font-weight: bold;
  border-radius: 5px;
  background: skyblue; /*ボタンの色*/
  color: white; /*文字の色*/
  transition-duration: 500ms;
}

.clip_copy:hover { /*ボタンホバー時*/
  border:2px solid skyblue; /*ボタン枠線色*/
  color: skyblue; /*文字の色*/
  background: white; /*ボタンの色*/
}

.copied, .copied:hover { /*タッチされた時*/
  border-color: #76CA83; /*ボタン枠線色*/
  color:white; /*文字の色*/
  background:#76CA83; /*ボタンの色*/
  
}

scripts.js を新規作成

scripts.js というファイルを新しく作成して、子テーマフォルダ内にアップロードします。.jsはJavascriptファイルです。

scripts.js

$(function () {
  var clipboard = new Clipboard('.clip_copy');
  $("button.clip_copy").click(function(){
    $(this).text("コピーしました").addClass('copied');
    setTimeout(function(){
      $("button.clip_copy").text("コピーする").removeClass('copied');
    }, 5000);
  });
});

setTimeout で 文字列がもとに戻る時間をしています。初期値を5000にしていますがこれは5000ms で 5秒になります。3秒にしたい場合は 3000を指定してください。

footer.php に追記

子テーマ内の footer.php の </body> 直前にコードを追記します。 footer.php がない場合は、親テーマから子テーマへコピーして使います。

さきほど作成した scripts.js の場所を指定する箇所があるので、自分のブログのURLと子テーマフォルダ名に修正してください。

 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
<script src="https://xxx.com/wp-content/themes/子テーマ名/scripts.js"></script>

記事に挿入する内容

コピー機能を実装したい記事の場所に以下のコードを挿入してください。

コピペ文字列

<input type="text" id="clip_copy_1" value="明日は晴れのちくもり" readonly="readonly">
<button class="clip_copy" data-clipboard-target="#clip_copy_1">コピーする</button>

id=”clip_copy_1” と data-clipboard-target=”#clip_copy_1” の文字列は同一になるようにします。これが一致していないとコピーができません。

文字列が一致していれば別の名前に変えてOKです。コピーする機能を複数設置する場合は、この文字列をそれぞれ別のものに変更してください。

命名規則はclip_copy_xx などと「clip_copy」を含む文字列にしてください。(CSSで指定しているため)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です