目次
目次

コピーボタンを追加する方法

Cocoonカスタマイズ集
この記事は約6分で読めます。
記事内に広告が含まれています。

はじめに

クーポンコードや割引コードを提供する際、ユーザーが簡単にコードをコピーできる機能を提供することは非常に重要です。

そこで、Cocoonで提供されているコピー機能を利用し、「ボタン」ブロックの次に配置されたブロックのテキストをコピーできるようにします。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

以下では、「ボタン」ブロックの次に配置された「段落」ブロックのテキストがコピーされます。
「段落」ブロックを「コード」ブロックに変更すれば、コードもコピー可能になります。

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下の手順で設定します。

    1. 「ボタン」ブロックを配置します。
    2. 高度な設定→追加CSSクラスにmy-copy copy-buttonと入力します。
  • ラベル
    PHPを追加

    以下のコードをfunctions.phpに追加します。

    add_action('wp_enqueue_scripts', function () {
  global $_MOBILE_COPY_BUTTON;
  $_MOBILE_COPY_BUTTON = true;

  ob_start();
  ?>
  jQuery(function ($) {
    $(".my-copy").each(function () {
      var txt = $(this).next().text();
      $(this).attr("data-clipboard-text", txt);
    });

    $(".body:has(.my-copy) .copy-info").text("クリップボードにコピーしました");
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());
});

解説

Cocoonでは、ライブラリ「clipboard.js」を使用してHTMLを適切に定義することで、任意のテキストをクリップボードにコピーできる仕組みが実装されています。

以下のように、copy-buttonのdata-clipboard-text属性にコピーしたいテキストを設定することで、ボタンクリックした際にそのテキストがクリップボードにコピーされます。

<button class="copy-button" data-clipboard-text="コピーするテキスト">ボタン</button>

参考：clipboard.js用いない方法

clipboard.jsを使用せず、JavaScriptのクリップボードAPIを利用してコピーすることもできます。
SSL環境ではクリップボードAPIを使用し、非SSL環境では代替処理でテキストをコピーします。

実装手順

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  // ポップアップを設定
  var $toast = $('<div id="copy-toast">クリップボードにコピーしました</div>').css({
    position: 'fixed',
    bottom: '20px',
    left: '50%',
    transform: 'translateX(-50%)',
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    color: '#fff',
    padding: '10px 20px',
    borderRadius: '5px',
    fontSize: '14px',
    zIndex: 9999,
    display: 'none'
  }).appendTo('body');

  /**
   * ポップアップ通知設定
   *
   * @returns {void}
   */
  function showToast() {
    $toast.stop(true, true).fadeIn(200).delay(1500).fadeOut(400);
  }

  /**
   * SSL環境のクリップボードコピー処理
   *
   * @param {string} text - 対象文字列
   * @returns {void}
   */
  function copySecureClipboard(text) {
    // クリップボードAPIでコピー
    navigator.clipboard.writeText(text).then(function () {
      showToast();
    });
  }

  /**
   * 非SSL環境のクリップボードコピー処理
   *
   * @param {string} text - 対象文字列
   * @returns {void}
   */
  function copyFallbackClipboard(text) {
    // コピー用の一時要素を設定
    var $textarea = $('<textarea>')
      .val(text)
      .css({ position: 'fixed', opacity: '0' })
      .appendTo('body');

    // 対象テキストを取得
    $textarea[0].select();

    try {
      document.execCommand('copy');

      showToast();
    } catch (err) {
      console.error('Copy failed', err);
    }

    // 一時要素を終了
    $textarea.remove();
  }

  /**
   * コピーボタンイベント登録
   */
  $(document).on('click', '.my-copy', function (e) {
    e.preventDefault();

    // ボタン直後のテキストを取得
    var txt = $(this).next().text();

    // SSL環境と非SSL環境を設定
    if (navigator.clipboard && window.isSecureContext) {
      copySecureClipboard(txt);
    } else {
      copyFallbackClipboard(txt);
    }
  });
});

注意事項

clipboard.jsは、クリップボードへのコピー処理に内部でexecCommand()を利用しています。

今回の方法では、SSL環境ではClipboard API、非SSL環境ではexecCommand()を利用して、環境に応じてコピー処理を切り替えています。

環境writeText()メソッドexecCommand()メソッド
HTTPS利用可能非推奨
HTTP利用不可非推奨

Document: execCommand() メソッド - Web API | MDN
execCommand メソッドは、複数の異なるコマンドを実装しています。クリップボードへのアクセスを提供するものもあれば、フォーム入力フィールドや contenteditable の要素、文書全体（デザインモードに切り替えた場合）を編集す...
developer.mozilla.org

さいごに

今回紹介した方法を使えば、ユーザーがクーポンコードや割引コードを簡単にコピーできるようになります。
Cocoonのコピー機能を活用し、より便利でユーザーに優しいサイトを作成しましょう。

タイトルとURLをコピーしました