WordPress5.2から搭載されたclipboard.jsで記事タイトルとURLコピーボタンを実装する

Web制作 - WordPress
この記事は約 2 分で読めます ( 約 1165 文字 )

WordPress 5.2 から JavaScript ( JS ファイル ) で clipboard.js が搭載されて、クリップボードへのコピー機能の実装が容易になりました。

 

WordPress に 記事タイトルとURLコピーボタン を実装するためには別途に clipboard.js.com から JS ファイルのダウンロードと設定が必要でしたが、WordPress 搭載のものを利用してコピーボタンを実装する方法を紹介します。

 

 

目次

記事タイトルと URL コピーボタンの実装に必要なソース構成

 

実装に必要なソースは以下で構成されます。

 

  1. WordPress 搭載の clipboard.js
  2. コピーボタンの動作用 JavaScript
  3. コピーボタンの HTML
  4. コピーボタンの CSS

 

 

記事タイトルと URL コピーボタンの実装方法

 

紹介する実装方法は WordPress 5.2 以上が必須ですのでご注意ください。

 

  • 実装は 自己責任 でお願いします
  • テーマのための関数 ( functions.php ) など数種類のファイルを編集します。記述を間違うと画面が真っ白になる場合があります

 

 

【 1 】WordPress 搭載の clipboard.js 設定

 

テーマのための関数 ( functions.php ) に次を記述して clipboard.js を読み込みます。

 

 

 

【 2 】コピーボタンの動作用 JavaScript 設定

 

テーマフッター ( footer.php ) の </body> の上に次を記述する。

 

 

  • クラス名 copy-button でのサンプルとなります
  • クラス名は任意値でも可ですが HTML / CSS も変更が必要です

 

 

【 3 】コピーボタンの HTML 設定

 

個別投稿 ( single.php ) の 任意の場所に次を記述する。

 

 

 

【 4 】コピーボタンの CSS 設定

 

スタイルシート ( style.css ) に次を記述する。

 

 

上記 CSS での表示サンプル

記事タイトルとURLをコピーする

 

 

ワードレステーマ:カエテンシリーズの対応

 

カエテングラフカエテンWP は予めコピーボタンを実装していますのでカスタマイズは不要です。

 

設定する場所・表示フレーズとデザイン変更を自由にできるようにカエテンでは ショートコード でご用意しています。

 

設定マニュアルに従ってお好みの場所にショートコードを設定するだけでコピーボタンを表示できます。

 

 

無料ブログで実装するとき

 

関連記事
記事はありませんでした
    パンくずリスト
  • ホーム
  • Web制作
  • WordPress
  • WordPress5.2から搭載されたclipboard.jsで記事タイトルとURLコピーボタンを実装する