こんな方におすすめ
- WordPressのコピーボタンの作り方が知りたい方
- 特定のテキストをコピーしたい方
特定のテキストを簡単にコピーさせたい
WordPressでブログを運営している方で特定の文字列をユーザーにコピーして貰いたいと思ったことありませんか？
そんなときに役立つ「テキストをコピーするだけ」のボタンの作り方をご紹介します。
①本文に下記のタグを埋め込む
まず最初に次の記事を参考に「style.css」と「footer.php」を同じように修正しておいてください。
-
WordPressで「タイトルとURLをコピーする」ボタンの作り方｜ブログ、SNS
もくじ タイトルとURLだけをコピーするボタン手順１．functions.phpに記載手順２．style.cssに記載手順３．footer.phpに記載手順４．記事にボタンを配置タイトルとURLだけを ...
続きを見る
修正が終わりましたら、本文にタグを埋め込みます。
②本文に下記のタグを埋め込む
本文に以下を記載してください。
「コピーするだけのボタン」部分はコピーさせたい文字列に変更してください。
<div class="copy_main">
<div class="copy_btn" data-clipboard-text="コピーするだけのボタン">
<i class="fa"></i>「コピーするだけのボタン」をコピー
</div>
</div>
③実際の挙動を確認
以下が実際のボタンになります。
クリックして、どこかにペーストしてみてください。
「コピーするだけのボタン」をコピー
「コピーするだけのボタン」という文字列が貼り付けられたと思います。
これでユーザに指定の文字列をコピーしてもらうことができますね。
是非参考にしてください。
※お気づきの方もいらっしゃると思いますが、各記事下部の「記事タイトルとURLをコピー」ボタンも上記ボタンを押下すると反応しております。
こちらは同じclassを利用しているためです。併用する場合はclass名を分けることをお勧めします。
以上、ワーカホリックダイアリーでした。
