WordPressで「クリックでコピー」機能を実装する方法｜表示とコピーを1か所で管理する設計術

AIプロンプトを読者に試してほしいブロガーさんのための記事です

この記事は、自作の長文AIプロンプトを読者に試してほしいブロガーの方のための記事です。🙂🖊️

今、読者のほとんどはスマホで記事を読んでいます。📱

スマホで記事内のプロンプトを試そうとすると、
文字を選択し、始点を先頭まで動かし、
終点を最後まで動かしてからコピーする、という作業が必要になります。😅📋

この手間が、意外と大きなハードルになります。😓⛰️

その結果、せっかく作ったあなたのプロンプトが、
実際にはほとんど試されないまま終わってしまうことがあります。😢

この記事でできるようになること（“使うまでの導線”を整える方法）

重要なのは、プロンプトの内容だけでなく、
「使うまでの導線」です。🤔🚪

この記事では、ワンクリックでコピーできる仕組みを作ります。👍⚡

プロンプトには中核になる部分もあれば、細かな補足部分もあります。🙂🧩

読者にすべてを読ませる必要はありません。🙂📖

まずは中核になるプロンプトだけを記事で提示し、
すぐに試してもらえる状態を作ります。👍🚀

完成形のイメージ（読者へのシンプルメッセージ＆隠しワンクリックコピー）

まずは、この記事の完成形を見てみましょう。
【例】マークダウン形式で書かれた「どりのイラスト作成依頼プロンプト」です。

①下の【どりのイラスト作成依頼（←ここをタップ）】をタップ（ＰＣのときはクリック）
②【コピー】をタップ
③メモアプリや生成ＡＩプロンプト入力部へペースト（貼り付け）

どりのイラスト作成依頼（←ここをタップ） 
# どりの全身イラスト作成依頼
## どり – キャラクター概要
– ブログのキャラクター
– ブログの主役
– 記事の雰囲気や感情を視覚的に伝える存在
## どりの特徴 – デザイン方針
– 二頭身のキャラクター
– シンプルで親しみやすいデザイン
– 感情は分かりやすいが、やりすぎない
– 子ども向けすぎず、大人のブログにも使える
– 表情やポーズごとの違いが一目で分かる
## イラスト仕様 – 画像形式
– PNG形式
– 背景透過
## ファイル名ルール – 基本構造
– [usage]_[character]_[part]_[expression_or_purpose]_[direction].png
### ファイル名例 – サンプル
– dori_body_basic.png
– dori_body_happy.png
– dori_body_troubled.png
### 命名ルール – 詳細
– すべて英語表記
– 小文字で統一
– 単語はアンダースコア（_）区切り
### expression / purpose 例 – 表情・用途
– basic（基本・無表情寄り）
– happy
– shy（照れ・気まずい）
– trouble
– panic
– sad_cry（悲しくて泣く）
– emotional_cry（感動して泣く）
– laugh_tear（笑い泣き）
– party（祝う・盛り上がり）
– love（好意・ときめき）
– dizzy（混乱・放心）
## 出力必須項目 – 作成物
– 名前（英語・ファイル名と対応）
  – 例：dori_body_shy
– 代替テキスト（日本語）
  – 状況と感情が自然に伝わる文章
  – 「どりの全身イラスト」という表現を含める
  – ポーズ・表情・小物（帽子、涙、汗など）があれば具体的に記述する
### 代替テキスト例 – 記述サンプル
– とんがり帽子をかぶり、満面の笑顔で手足を大きく広げて跳ねているどりの全身イラスト
## 補足ルール – 設計思想
– 感情の方向（悲しみ・感動・笑い）を表情名で明確に区別する
– 将来イラストが増えても検索しやすい命名を最優先する

設置手順（functions.php → style.css → 投稿）

functions.php

次のコードを → 外観 → テーマファイルエディター → テーマのための関数（functions.php） で追加

/* ===========================================================
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　　クリックでコピー（表示＋コピーを本文1つで）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
=========================================================== */
// フロント側にJSを読み込む
add_action('wp_enqueue_scripts', function() {

  // 空のスクリプトハンドルを作成して、インラインJSを差し込む
  wp_register_script('dori-copy-code', '', [], null, true);
  wp_enqueue_script('dori-copy-code');

  $js = <<<JS
(function () {

  function fallbackCopy(text) {
    var ta = document.createElement('textarea');
    ta.value = text;
    ta.setAttribute('readonly', '');
    ta.style.position = 'fixed';
    ta.style.top = '-9999px';
    document.body.appendChild(ta);
    ta.select();
    try { document.execCommand('copy'); } catch (e) {}
    document.body.removeChild(ta);
  }

  document.addEventListener('click', async function (e) {
    // data-copy-target のみ対応
    var btn = e.target.closest('[data-copy-target]');
    if (!btn) return;

    var original = btn.textContent;

    var sel = btn.getAttribute('data-copy-target');
    var el = sel ? document.querySelector(sel) : null;
    var text = el ? el.textContent : '';

    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(text);
      } else {
        fallbackCopy(text);
      }

      btn.textContent = 'コピーおけ(^^)v';
      setTimeout(function () {
        btn.textContent = original;
      }, 1200);

    } catch (err) {
      fallbackCopy(text);
      btn.textContent = 'コピーしたよ(^^)v';
      setTimeout(function () {
        btn.textContent = original;
      }, 1200);
    }
  });

})();
JS;

  wp_add_inline_script('dori-copy-code', $js);
});


// ショートコード：本文を1回書くだけで「表示（コードブロック）」＋「コピー」
add_shortcode('copy_code', function($atts, $content = null) {

  $atts = shortcode_atts([
    'label' => 'クリックしてコピー',
  ], $atts, 'copy_code');

  $raw = is_null($content) ? '' : $content;

  // WPが勝手に挿入した段落・改行タグだけを「生テキスト」に戻す
  $raw = shortcode_unautop($raw);
  $raw = preg_replace('~<br\\s*/?>~i', "\n", $raw);  // <br> → 改行（環境差で入る場合あり）
  $raw = preg_replace('~</p>\\s*<p>~i', "\n", $raw);
  $raw = preg_replace('~</?p[^>]*>~i', "", $raw);

  // 念のためタグは全部除去
  $raw = wp_strip_all_tags($raw);

  // 改行コードを統一
  $raw = str_replace(["\r\n", "\r"], "\n", $raw);

  // 3連以上の改行は最大2連に（空行増殖対策）
  $raw = preg_replace("/\n{3,}/", "\n\n", $raw);

  // 先頭末尾の余計な空白だけ削る（本文の中身は壊さない）
  $raw = trim($raw, "\n\t ");

  // 表示用（HTMLとして解釈させない）
  $escaped = esc_html($raw);

  // このブロック専用ID（ボタンが参照）
  $id = wp_unique_id('dori_copy_code_');

  $label = esc_html($atts['label']);

  return
    '<div class="dori-copy-wrap">' .
      '<button type="button" class="dori-copy-btn" data-copy-target="#' . esc_attr($id) . '">' . $label . '</button>' .
      '<pre class="wp-block-code"><code id="' . esc_attr($id) . '">' . $escaped . '</code></pre>' .
    '</div>';
});

/* ===========================================================
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　　クリックでコピー（表示＋コピーを本文1つで）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
=========================================================== */

style.css

次のコードを → 外観 → テーマファイルエディター → スタイルシート（style.css） で追加

/************************************
** コピー用ボタン用CSS
************************************/

.dori-copy-btn {
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  background: #ffffff;
  font-size: 14px;
  transition: 0.2s;
}

.dori-copy-btn:hover {
  opacity: 0.8;
}

/************************************
** コピー用ボタン用CSS ここまで
************************************/

投稿

次のコードを → 投稿（コードエディター） へコピペして、編集

<!-- wp:details -->
<details class="wp-block-details">
  <summary>★テスト★</summary>
  <!-- wp:paragraph -->
  <p>
  [copy_code label="【コピー】"]
  ◆ここにコピーさせたい本文を書く
  Markdownでも普通の文章でもOK◆
  [/copy_code]
  </p>
  <!-- /wp:paragraph -->
</details>
<!-- /wp:details -->

まとめ（配布が楽になる＝記事の価値が上がる）

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