Webページにテキストをコピー出来るボタンを付けたい。【その２】

HTML
2019.11.09
スポンサーリンク

こんにちは朱夏です。

前回の続きやっていきます。

JavaScriptでの実装を目指して試行錯誤しましたが、テキストエリアの表示が出来たところまでで、肝心なコピーがうまくいきませんでした。

 



htmlでタグベタ打ちなら出てこないということは、Wordpress固有の問題っぽいですね・・・

調べてみたら、原因はこれっぽい？→リンク

しかし、functions.phpどこにあるん問題。

10分くらい探してやっと見つけました・・・

うちの場合はここにありました。

wordpress/wp-content/themes/cocoon-child-master
どうやらテーマフォルダの下にあるっぽいですね。

これでやっとと、反映させたら大惨事（汗
全てのページの改行とかが消えてしまいました・・・テキストエリアの内容はちゃんと表示されるようになったんですけどね。

というわけでロールバック。
テキストエリアの表示も元通り。

何かいい方法はないものか・・・
色々調べて、このサイトにたどり着きました。→リンク

htmlベタ打ちではちゃんと動きました。
これで解決かな・・・

 

       <span id=”span”>ここに<br>
           コピーする<br>
           内容を<br>
           書いてね<br>
        </span>
       <button type=”button” onclick=”copy()”>コピー</button>
       <script>
       function copy(){
         let range = document.createRange();
         let span = document.getElementById(‘copytext1’);
         range.selectNodeContents(span);
         let selection = document.getSelection();
         selection.removeAllRanges();
         selection.addRange(range);
         document.execCommand(‘copy’);
         alert(‘コピーしました’);
       }
       </script>

コピーされない。
またWordPressだからこその問題っぽいです。

JavaScriptは編集画面の別枠に入力欄があったのでそっちに移して、コピーしましたってポップアップだけ出るようになったけど、コピー自体は全く動かない。
ググっても解決策が出てこない・・・

ん？！
WordPress用のテキストコピー作成方法ってのがある。→リンク
JavaScriptじゃなくてPHPとCSSをいじるんですね。

で、HTMLにはこれを記載

<div class=”copy_main”>
  <div class=”copy_btn” data-clipboard-text=”ここにてきすとをかくよ”>
  <i class=”fa”></i>クリックでコピー
  </div>
</div>

これでどうだ！

クリックでコピー

出来た・・・

出来た！！

苦節2日！！
ようやく実装出来ました！

ボタンというにはちょっと大きいですが、この体裁を変更するとなると、CSSとPHPに修正を加えることになりそうなので今回はここまでにします。
次回は、3.プラグインで実装をやっていこうと思います。

ここまでに調べた限りだと無さそうなんですけどね・・・

スポンサーリンク
タイトルとURLをコピーしました