WordPress

WordPressで「テキストをコピーする」ボタンの作り方

特定のテキストを簡単にコピーさせたい

「右クリックを禁止にしているサイト」を運営している方に質問です。

特定の文字列をユーザーにコピーして貰いたいと思ったことありませんか?

私も右クリックを禁止にしているけどユーザに文字列をコピーしてもらいたい時が多々あります

(プラグイン名、検索してほしい文字列、お店の住所などなど)

そんなときに役立つ「テキストをコピーするだけ」のボタンの作り方をご紹介します。

まず最初に以下の記事を参考に「style.css」と「footer.php」を同じように修正しておいてください。

WordPressで「タイトルとURLをコピーする」ボタンの作り方|ブログ、SNS

目次タイトルとURLだけをコピーするボタン手順1.functions.phpに記載手順2.style.cssに記載手順3.footer.phpに記載手順4.記事にボタンを配置 タイトルとURLだけをコ ...

続きを見る

修正が終わりましたら、本文にタグを埋め込みます。

本文に下記のタグを埋め込む

本文に以下を記載してください。

「コピーするだけのボタン」部分はコピーさせたい文字列に変更してください。

<div class="copy_main">

<div class="copy_btn" data-clipboard-text="コピーするだけのボタン">

<i class="fa"></i>「コピーするだけのボタン」をコピー

</div>

</div>

実際の挙動を確認

以下が実際のボタンになります。

クリックして、どこかにペーストしてみてください。

「コピーするだけのボタン」をコピー

「コピーするだけのボタン」という文字列が貼り付けられたと思います。

これでユーザに指定の文字列をコピーしてもらうことができますね

是非参考にしてください。

※お気づきの方もいらっしゃると思いますが、各記事下部の「記事タイトルとURLをコピー」ボタンも上記ボタンを押下すると反応しております。
こちらは同じclassを利用しているためです。併用する場合はclass名を分けることをお勧めします。

以上、ワーカホリックダイアリーでした。

---- 当サイトのPRをさせてください ----

当サイトは「社会人に役立つ仕事術、生活術、スキルアップ術」を発信しております。また来ていただけたらたいへん嬉しいです。

ぜひブックマークをお願いします。

iPhoneの方:
ブラウザ下部の[↑]ボタン > [ホーム画面に追加]もしくは[ブックマーク追加]

Androidの方:
ブラウザ右上の [︙]ボタン > [ホーム画面に追加(アプリをインストール)] もしくは[☆タップ]

PCの方:
ブラウザ 右上の[☆]ボタン、もしくはキーボード[Ctrl]+[D]

またのお越しをお待ちしております。

\面白かったらシェアお願いします/

-WordPress
-, , , ,