WordPress 5.2 から JavaScript ( JS ファイル ) で clipboard.js が搭載されて、クリップボードへのコピー機能の実装が容易になりました。
WordPress に 記事タイトルとURLコピーボタン を実装するためには別途に clipboard.js.com から JS ファイルのダウンロードと設定が必要でしたが、WordPress 搭載のものを利用してコピーボタンを実装する方法を紹介します。
記事タイトルと URL コピーボタンの実装に必要なソース構成
実装に必要なソースは以下で構成されます。
記事タイトルと URL コピーボタンの実装方法
紹介する実装方法は WordPress 5.2 以上が必須ですのでご注意ください。
- 実装は 自己責任 でお願いします
- テーマのための関数 ( functions.php ) など数種類のファイルを編集します。記述を間違うと画面が真っ白になる場合があります
【 1 】WordPress 搭載の clipboard.js 設定
テーマのための関数 ( functions.php ) に次を記述して clipboard.js を読み込みます。
|
1 |
wp_enqueue_script('clipboard'); |
【 2 】コピーボタンの動作用 JavaScript 設定
テーマフッター ( footer.php ) の </body> の上に次を記述する。
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> jQuery(document).ready(function($){ var clipboard=new ClipboardJS('.copy-button'); clipboard.on('success',function(e){ $('.copy-button').hide().fadeIn(1000).addClass('success').text('コピーしました'); }); clipboard.on('error',function(e){ $('.copy-button').hide().fadeIn(1000).addClass('error').text('ブラウザが未対応です'); }); }); </script> |
- クラス名
copy-buttonでのサンプルとなります - クラス名は任意値でも可ですが HTML / CSS も変更が必要です
【 3 】コピーボタンの HTML 設定
個別投稿 ( single.php ) の 任意の場所に次を記述する。
|
1 |
<div class="copy-button" data-clipboard-text="<?php the_title(); ?>
<?php the_permalink(); ?>">記事タイトルとURLをコピーする</div> |
【 4 】コピーボタンの CSS 設定
スタイルシート ( style.css ) に次を記述する。
|
1 2 3 |
.copy-button{display:block;margin:30px auto;padding:10px 1em;border:solid 1px #ddd;color:#333;font-size:16px;text-align:center;cursor:pointer;} .copy-button.success{background:green;border-color:green;color:#fff;} .copy-button.error{background:red;border-color:red;color:#fff;} |
上記 CSS での表示サンプル
ワードレステーマ：カエテンシリーズの対応
カエテングラフ・カエテンWP は予めコピーボタンを実装していますのでカスタマイズは不要です。
設定する場所・表示フレーズとデザイン変更を自由にできるようにカエテンでは ショートコード でご用意しています。
設定マニュアルに従ってお好みの場所にショートコードを設定するだけでコピーボタンを表示できます。
無料ブログで実装するとき