当ページのリンクには一部広告が含まれています。
うさねこ気まぐれPG開発室

【WordPress・Cocoon対応】記事URLをワンクリックでコピーするショートコードの作り方【PHP＋CSS】

広告

記事URLをワンクリックでコピーするショートコード

うさちゃん
うさちゃん

うさです🐰🌿
最近、うさねこ散歩の記事で「この記事URLをねこちゃんに送りたいけど、URLコピーがちょっと面倒…」
そんな場面があったので、ワンタップでURLをコピーできるオリジナルBOX を作ってみました✨️

ねこちゃん
ねこちゃん

よくわかんないけど、便利なら何でも取り入れましょう。

うさちゃん
うさちゃん

うっ、うん😅
URLコピーって意外と手間だったりするよね。

だからね、

  • ボタンを押すだけで URL をコピー
  • コピーできたら ポップアップでメッセージ
  • スマホでも押しやすい丸ボタン
  • 白×ミントのナチュラルデザイン

を全部そろえた「うさねこ専用のコピーBOX」 を作ってみました🌿✨

🐰🐱 このページのURL、よかったらコピーして残しておきませんか？📋

🌿 今回のURLコピーBOXのポイント

🟢 ワンタップでURLコピー（PC/スマホ対応）
🟢 コピー成功時は淡ミントのポップアップがふわっと登場
🟢 Cocoonに溶け込むやさしい白×ミントデザイン
🟢 コピーしたURLはそのままSNSに貼り付けて使える
🟢 ショートコードなので記事内の好きな場所に置ける
🟢 “usaneko”の部分は全部自由に変更OK（関数名・CSS名・ショートコード名）
🟢 メッセージ文も自由にカスタムできる

カスタマイズを前提とした作りにしてあるので、あなたのサイトカラーに合わせて自由に調整できます。

設置方法（WordPress + Cocoon）

以下の流れで簡単に設置できます。

うさねこ散歩での運用方法（functions.php から呼び出し）

当サイトでは、URLコピーBOXを PHPとCSSを分けて管理するスタイルで運用しています。
その際に採用しているのは、次のような 役割ごとにまとめた構成 です。
*functions.phpには、呼び出ししか入れない

（例：ツールの構成イメージ）
└ 子テーマ（Cocoon Child）
   ├ functions.php            ← ショートコードの登録のみ
   └ url_Copy_Tool
       ├ PHP本体（出力処理）
       └ CSS（デザイン）

①PHP ファイルの設置

URLコピープログラムとなる PHPファイル を子テーマ側へ置きます。

  1. 子テーマ内に「専用フォルダ」を作成
    例：url_Copy_Tool
  2. この中にPHP本体（出力処理）をアップロード

② CSS ファイルの設置

次に URLコピーデザインとなる CSSファイル を子テーマ側へ置きます。

  1. PHP ファイルを設定したフォルダ
  2. この中にCSS（デザイン）をアップロード

③ PHP（ショートコード本体）の追加

子テーマ（Cocoon Child） → functions.php

この functions.php の中に以下のように「PHPコード」を貼り付けてください。

/**
 * 🐰 URLコピー機能（URL-SNS ツール）
 * うさねこ専用フォルダからPHPを読み込む
 * 必須：ファイルは /url_Copy_Tool/PHP本体（実際の名前に変更）に置くこと
 */
require_once get_stylesheet_directory() . '/PHP本体（実際の名前に変更）';

functions.phpは大事なファイルなのでバックアップをとって作業しましょう。

④ 記事でショートコードを呼び出す

記事の好きな場所に次を入れるだけで表示されます。

[usaneko_url_sns]

※「usaneko」の部分はPHP・CSSの変更に合わせて自由に変更してOKです。

PHPコード

※「usaneko」の部分は自由に変更してOKです。（関数名／ショートコード名／CSS読込パス）

<?php
if (!defined('ABSPATH')) exit;

/**
 * 🐰🐱 UsaNeko URL Copy Box（URL-SNS 最新版）
 * ----------------------------------------------------
 * ■ このショートコードについて
 *   ・[usaneko_url_sns] を WordPress に貼ると、
 *     「記事URLをコピーするボタン」＋「成功モーダル」が表示されます。
 *
 * ■ 表示内容
 *   1) 上部 … 白背景 × ミント枠の説明ボックス
 *   2) 中央 … ミント色の「URLコピー」ボタン
 *   3) 下部 … コピーに成功したら出る白背景 × ミント枠のモーダル
 *
 * ■ 動作
 *   ・navigator.clipboard.writeText() でURLをコピー
 *   ・成功時のみ、かわいいモーダルが表示される
 *
 * ■ 注意
 *   
 */

function usaneko_url_sns_output() {

  /* ---------------------------------------------
   * ★ 現在のページURLを取得
   * --------------------------------------------- */
  $url     = get_permalink();       // 記事のパーマリンク（URL）
  $url_js  = esc_js($url);          // JS内に安全に埋め込むためのエスケープ
  $uniq_id = 'usaneko-URL-SNS-' . uniqid(); // 複数設置でも衝突しないように一意のID生成

  ob_start(); // ショートコードのHTMLをため込む
  

  /* ---------------------------------------------
   * ★ CSS 読み込み（キャッシュ回避のバージョン付き）
   * --------------------------------------------- */
  echo '<link rel="stylesheet" href="' .
       esc_url(get_stylesheet_directory_uri() . '/inc_URL_SNS_2026/usaneko-url-sns-style.css?ver=20260101') .
       '" />';
?>

<!-- 全体のラッパー（ユニークIDを付与） -->
<div class="usaneko-URL-SNS-wrap" id="<?php echo esc_attr($uniq_id); ?>">

  <!-- 白背景 × ミント枠の説明ボックス -->
  <div class="usaneko-URL-SNS-textbox">
    🐰🐱 このページのURL、よかったらコピーして残しておきませんか？📋
  </div>

  <!-- ミント色のコピー実行ボタン -->
  <button type="button" class="usaneko-URL-SNS-btn" data-url-sns-open>
    このページのURLをコピーする❤️
  </button>

</div>


<!-- ▼ コピー成功時に出るモーダル（最初は非表示） -->
<div class="usaneko-URL-SNS-modal usaneko-URL-SNS-hidden-force"
     id="usaneko-URL-SNS-modal-<?php echo esc_attr($uniq_id); ?>">

  <div class="usaneko-URL-SNS-modal-content">

    <!-- モーダルのタイトル部分 -->
    <div class="usaneko-URL-SNS-modal-title">🐰🐱 コピーできたよ！</div>

    <!-- 説明文 -->
    <p class="usaneko-URL-SNS-modal-text">
      URLをクリップボードに保存しました💚<br>
      いつでも貼り付けて使えるよ✨
    </p>

    <!-- 閉じるボタン -->
    <button class="usaneko-URL-SNS-modal-btn-ok" data-url-sns-close>OK</button>

  </div>
</div>


<script>
(function(){

  /* ---------------------------------------------
   * ★ JSで操作する要素を取得
   * --------------------------------------------- */

  // ショートコードの基準となる要素
  var base = document.getElementById('<?php echo esc_js($uniq_id); ?>');
  if (!base) return; // 念のため安全化

  // モーダル本体
  var modal     = document.getElementById('usaneko-URL-SNS-modal-<?php echo esc_js($uniq_id); ?>');

  // 開くボタン（URLコピーするボタン）
  var openBtn   = base.querySelector('[data-url-sns-open]');

  // モーダル内の閉じるボタン（複数の可能性もあるためまとめて取得）
  var closeBtns = modal.querySelectorAll('[data-url-sns-close]');

  // コピーするURL（PHPからJSへ安全に受け渡した文字）
  var pageURL   = '<?php echo $url_js; ?>';


  /* ---------------------------------------------
   * ★ 初期状態：モーダルは必ず非表示にする
   * --------------------------------------------- */
  document.addEventListener("DOMContentLoaded", function() {
    modal.classList.add('usaneko-URL-SNS-hidden-force'); // 強制非表示
    modal.classList.remove('active');                    // activeクラスも削除
  });


  /* ---------------------------------------------
   * ★ URLをコピーして、成功したらモーダルを表示
   * --------------------------------------------- */
  openBtn.addEventListener('click', async function(){
    try {

      // navigator.clipboard… を使ってURLをコピー
      await navigator.clipboard.writeText(pageURL);

      // ▼ コピー成功！ モーダルを開く
      modal.classList.remove('usaneko-URL-SNS-hidden-force');
      modal.classList.add('active');

    } catch(e){
      // ▼ コピーに失敗したときのフォールバック（環境依存）
      alert("コピーに失敗しました…手動でコピーしていただけると助かります。");
    }
  });


  /* ---------------------------------------------
   * ★ モーダルを閉じる（OKボタン）
   * --------------------------------------------- */
  closeBtns.forEach(btn => {
    btn.addEventListener('click', function(){
      modal.classList.remove('active');                  // 表示クラス削除
      modal.classList.add('usaneko-URL-SNS-hidden-force'); // 完全非表示へ
    });
  });

})();
</script>

<?php
  return ob_get_clean(); // ショートコードのHTMLを返す
}
add_shortcode('usaneko_url_sns', 'usaneko_url_sns_output');
?>

CSSコード

※ファイル名・クラス名の「usaneko」部分も自由に変更可能です。

/* =========================================================
   🐰 強制非表示（ページ読み込み時にモーダルが出ない保険）
   ---------------------------------------------------------
   ここは「モーダルが勝手に表示されないようにする」ための
   初期状態のスタイルです。
   JSで .active が付くまでは絶対に表示されません。
========================================================= */
.usaneko-URL-SNS-hidden-force {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
}

/* =========================================================
   🐰 ラッパ全体
   ---------------------------------------------------------
   ・中央寄せ＋全体ブロックの余白調整
   ・ボタンも説明文もこの中に入る
========================================================= */
.usaneko-URL-SNS-wrap {
  margin: 40px auto !important;
  text-align: center !important; /* ボタンなど中身を全部中央寄せ */
  width: 100% !important;
}

/* =========================================================
   🐰 説明文のボックス
   ---------------------------------------------------------
   ・白背景＋ミントのやわらかい枠線
   ・うっすら縦グラデーション
   ・影付きで「ふわっと浮いて見える」感じ
========================================================= */
.usaneko-URL-SNS-textbox {
  margin: 12px auto 20px !important;
  padding: 18px 22px !important;
  max-width: 850px !important;

  background: linear-gradient(to bottom, #f3fff5, #ffffff) !important;
  border: 2px solid #b8e6c2 !important; /* ミント枠 */
  border-radius: 18px !important;

  color: #365241 !important; /* 深めの緑グレー（読みやすい） */
  font-size: 1.18rem !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-align: center !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;

  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}

/* =========================================================
   🐰 コピー実行ボタン（ミント色・丸ボタン）
   ---------------------------------------------------------
   ・中央に配置
   ・指を置きやすい丸形
   ・hover で少し色が濃くなって気持ちいいUI
========================================================= */
.usaneko-URL-SNS-btn {
  padding: 14px 30px !important;
  border-radius: 30px !important;

  background: #e8ffe8 !important;
  border: 1px solid #9ed0a3 !important;
  color: #285036 !important;

  cursor: pointer !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  transition: 0.2s !important;

  /* 中央配置の決め手 */
  display: inline-block !important;
  margin: 0 auto !important;
}

/* hover（マウスを載せた時） */
.usaneko-URL-SNS-btn:hover {
  background: #d9f8d9 !important;
}

/* =========================================================
   🐱 モーダルの背景（黒の半透明）
   ---------------------------------------------------------
   ・画面全体を覆う
   ・中央に白いモーダルを置くための “舞台”
========================================================= */
.usaneko-URL-SNS-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;

  background: rgba(0,0,0,0.45) !important; /* 半透明の黒 */

  display: none !important; /* 初期は絶対非表示 */
  justify-content: center !important; /* 中央に配置 */
  align-items: center !important;

  z-index: 999999 !important;
  padding: 20px !important;
}

/* ---------------------------------------------------------
   🐱 モーダル表示ON
   ---------------------------------------------------------
   JSで .active が付いた時に登場
   display:flex で中央に配置される
--------------------------------------------------------- */
.usaneko-URL-SNS-modal.active {
  display: flex !important;
  animation: URLSNSfadeIn 0.25s ease-out !important;
}

/* フェードインアニメーション */
@keyframes URLSNSfadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================================================
   🐱 モーダルの本体（白背景 × ミント枠）
   ---------------------------------------------------------
   ・ポップアニメ付き
   ・影付きでかわいく浮く感じに
========================================================= */
.usaneko-URL-SNS-modal-content {
  background: #ffffff !important; /* 白背景 */
  border: 2px solid #b8e6c2 !important; /* ミント枠 */
  border-radius: 18px !important;

  padding: 24px !important;
  max-width: 380px !important;
  width: 100% !important;

  box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
  text-align: center !important;

  animation: URLSNSpop 0.25s ease-out !important; /* ふわっポップ */
}

/* ポップアニメーション */
@keyframes URLSNSpop {
  0%   { transform: scale(0.85); opacity: 0; }
 100%  { transform: scale(1);   opacity: 1; }
}

/* タイトル文（大きく・強め） */
.usaneko-URL-SNS-modal-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #3b523b !important;
  margin-bottom: 12px !important;
}

/* 説明文（読みやすいサイズ） */
.usaneko-URL-SNS-modal-text {
  font-size: 1rem !important;
  color: #445544 !important;
  margin-bottom: 18px !important;
  line-height: 1.6 !important;
}

/* OKボタン（ミント丸ボタン） */
.usaneko-URL-SNS-modal-btn-ok {
  padding: 10px 26px !important;
  border-radius: 30px !important;

  border: 1px solid #9ed0a3 !important;
  background: #e8ffe8 !important;
  color: #285036 !important;

  cursor: pointer !important;
  font-size: 1rem !important;
  font-weight: 600 !important;

  transition: 0.2s !important;
}

/* hover（マウスを載せた時） */
.usaneko-URL-SNS-modal-btn-ok:hover {
  background: #d9f8d9 !important;
}

/* =========================================================
   📱 スマホ対応（最大480px）
   ---------------------------------------------------------
   ・文字を少し小さめに
   ・余白を調整して読みやすく
========================================================= */
@media (max-width: 480px) {

  .usaneko-URL-SNS-textbox {
    font-size: 1rem !important;
    padding: 14px 16px !important;
    margin: 10px 12px 18px !important;
  }

  .usaneko-URL-SNS-btn {
    width: 100% !important;
    max-width: 340px !important;
    padding: 12px 18px !important;
    font-size: 1rem !important;
  }

  .usaneko-URL-SNS-modal-content {
    padding: 20px !important;
    border-radius: 14px !important;
    margin: 0 10px !important;
  }
}

🍀 まとめ

うさちゃん
うさちゃん

この「URLコピーBOX」は、という、読者さんにやさしい便利ショートコードです🐰💚
ブログの見やすさ・使いやすさがちょっとアップするので、標準機能とは別に作りたい方は、ぜひあなたのサイトにも置いてみてくださいね🌿✨

WordPress＋Cocoonを始めるなら「エックスサーバー」がおすすめ！

「これからWordPress＋Cocoonでブログを作りたい！」という方には、
国内シェアNo.1の高速レンタルサーバー エックスサーバーがぴったりです。

  • 🚀 WordPressクイックスタート対応（最短10分でブログ開設）
  • 🪄 Cocoonテーマの自動インストールにも対応
  • 🔒 無料独自SSL／高セキュリティ／自動バックアップ完備
  • ☁️ 高速SSD・安定稼働率99.99%以上
  • 💰️ スタンダード 月額料金　990円～ 　693円～(キャンペーン中なら)　2025/11現在

「WordPress × Cocoon」を最もスムーズに始められる環境が整っています。
👉 今すぐチェック：レンタルサーバー エックスサーバー

免責事項

本記事のサンプルプログラムは動作・結果を保証するものではありません。 利用により発生したいかなるトラブル・損害についても、当方は責任を負いません。

同じカテゴリ人気記事
1
Excel VBA 複数「列」を非表示にする
Excel VBA 複数「列」を非表示にする
2
Excel VBA 複数列にSum関数で合計を作成する 
Excel VBA 複数列にSum関数で合計を作成する 
3
Excel VBA 複数「列」を高速削除「Range・Union」使用で高速化する
Excel VBA 複数「列」を高速削除「Range・Union」使用で高速化する
麻雀 多面待ちの待ち牌判定ツール｜何待ち？を数字牌1〜9で練習（7枚待ち対応）
麻雀 多面待ちの待ち牌判定ツール｜何待ち？を数字牌1〜9で練習（7枚待ち対応）
Excel VBAで全シートへのリンク付き目次を作る方法｜全シート一覧を一括作成コード
Excel VBAで全シートへのリンク付き目次を作る方法｜全シート一覧を一括作成コード
Excel VBA Match関数を使用して値を探す・エラー判定方法
Excel VBA Match関数を使用して値を探す・エラー判定方法
Excel VBA 表の最終列・最終行を取得する
Excel VBA 表の最終列・最終行を取得する
【ツール】Excel 列番号↔列記号変換（A↔1）｜COLUMN/ROWで「何行目・何列目」を表示
【ツール】Excel 列番号↔列記号変換（A↔1）｜COLUMN/ROWで「何行目・何列目」を表示
広告
うさねこ散歩

※本文中に記載の会社名・製品名・サービス名等は、各社の商標または登録商標であり、権利は各社に帰属します。

サンプルはテストはしていますが動作を保証するものではありません。

※本記事のスペック・価格等は執筆時点の情報です。最新の仕様・対応状況はメーカー公式サイトをご確認ください。