MENU

WordPressのコードブロックにコードのコピーボタンを実装するjQueryでのカスタマイズ

今までプラグインを使っていたのですが、WordPressのコードブロックにコピーボタンを実装するカスタマズをしたので記録します。

ブログカスタマイズはくれぐれも気をつけながら、自己責任でお願いいたしますね。

https://igawa.co/memos/jquery-javascript-css%E3%81%A7%E3%82%B3%E3%83%94%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E5%AE%9F%E8%A3%85%E3%80%82pre%E3%81%AE%E4%B8%AD%E3%81%AEcode%E3%82%92%E3%82%B3%E3%83%94%E3%83%9A/

こちらのサイト様を参考にしてjQueryで実装しました。

[point_maker type=”simple_icon” base_color=”pearl_gray” title_icon=”info-circle-solid” title_color_background=”true” title_color_border=”true” content_type=”text” content_color_background=”false” content_color_border=”true” block_editor=”true”]

この方法は、JIN:R専用のコード用のブロックではなく、WordPressの一般のコードブロックにコピーボタンを実装するカスタマイズです。

[/point_maker]
<!-- jQueryを読み込む -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- コピーボタンの実装 -->
<script>
  $(document).ready(function() {
    // コードブロックにコピーボタンを追加
    $("pre.wp-block-code code").append("<button>copy</button>");

    // コピーボタンがクリックされたときの処理
    $("pre.wp-block-code code button").click(function() {
      const selection = window.getSelection();
      const code = this.parentNode;
      selection.selectAllChildren(code);
      selection.extend(code, code.childNodes.length - 1);
      navigator.clipboard.writeText(selection);

      // コピーボタンのテキストを切り替える
      if ($(this).text() === "copy") {
        $(this).text("copied");
      } else {
        $(this).text("copy");
      }
    });
  });
</script>


<style>
 /* コピーボタンのスタイル */
.wp-block-code {
  position: relative;
}

.wp-block-code button {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #007bff;
  border: none;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

/* コピーボタンのホバースタイル */
.wp-block-code button:hover {
  background-color: #0056b3;
}

/* コピーボタンのクリック後スタイル */
.wp-block-code button[data-copied="true"] {
  background-color: #28a745;
}
</style>

これでOKでした、CSSはお好みで調整してくださいね。よろしくお願いいたします。

よかったらシェアしてね!
  • URLをコピーしました!
目次