WordPress

「テキストをただコピーするだけ」のボタンの作り方

2019年1月30日

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

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

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

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

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

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

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

【WordPress】ブログ記事の「タイトルとURLだけをコピー」するボタン

タイトルとURLだけをコピーするボタン こちらがそのボタン 記事タイトルとURLをコピー SNS以外へのシェアする際に、便利ですよね。 こちらのページを参考にしました。 参考元: ブログの記事タイトル ...

続きを見る

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

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

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

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

<div class="copy_main">

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

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

</div>

</div>

実際の挙動を確認

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

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

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

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

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

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

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

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

\記事リクエスト募集中/


【お願い】
ワーカホリックダイアリーでは「社会人に役立つ仕事術、ライフハック情報」を毎日23時50分に発信しております。

社会人の方はぜひブックマークしていただき明日もお越しいただけたら嬉しいです。

[ブックマーク手順]
iPhone Safariの方:
 下部の[↑](共有ボタン) > [ホーム画面に追加]もしくは[ブックマーク追加]

Android Chromeの方:
 右上の [︙](縦3点リーダー) > [ホーム画面に追加] もしくは[☆タップ]

パソコンの方:
 キーボードの[Ctrl]+[D] もしくは 右上の[☆クリック]

\面白かったらシェアお願いします!/
記事タイトルとURLをコピー

-WordPress
-, , , ,

Copyright© ワーカホリックダイアリー , 2019 All Rights Reserved.