前回、カスタムフィールドとショートコードを使って、JavaScriptの影響を受けずにコードを表示できるようにしました。
と思っていただいたとして、
前回の表示ですと、マウス等を動かして、コードを選んでコピーしなければなりませんでした。
短ければまだしも、
コードが長かったら、大変ですね。
今回は、ボタン1つでコード（div内のテキスト）がコピーできるようにしたいと思います。
処理の流れ
ボタン1つでコード（div内のテキスト）がコピーできるようにするには、以下の流れで処理をさせる必要があります。
①div内のテキストを選択する。
②選択範囲をコピーする。
上記をボタンクリックでできるようにするため、以下2点の追加が必要となります。
- HTMLにボタンを追加
- ボタンで呼び出すJavaScriptを追加
まずはJavaScriptの作り方から確認したいと思います。
JavaScriptを追加しよう
JavaScriptの追加手順
※Simple Custom CSS and JSプラグインを利用し、JavaScriptを追加します。
①Simple Custom CSS and JSプラグインで、「カスタムJSの追加」をクリックする。
②任意のタイトルをつけ、以下コードを追加する。
function copy(){
//範囲を指定
let range = document.createRange();
let cpdata = document.getElementById('cpbtn');
range.selectNodeContents(cpdata);
//指定した範囲を選択状態にする
let selection = document.getSelection();
selection.removeAllRanges();
selection.addRange(range);
//コピー
document.execCommand('copy');
selection.removeAllRanges();
alert('コピーしました');
}
③オプションの表示位置を「フッター」にし、「公開」ボタンをクリックする。
コードの意味を確認しよう
追加したJavaScriptの意味を確認しておきましょう。
- function copy(){
- ～～～
- }
copyという関数を作成しています。
- let range = document.createRange();
createRange()で、空の範囲を作成しています。
- let cpdata = document.getElementById(‘cpbtn’);
cpbtnという名前の要素を取得し、cpdataに格納します。
- range.selectNodeContents(cpdata);
引数で渡されたデータを選択します。
- let selection = document.getSelection();
選択した範囲をselection に格納します。
- selection.removeAllRanges();
念のため、全ての選択範囲を一度解除します。
- selection.addRange(range);
範囲を選択し、selectionに追加します。
- //コピー
- document.execCommand(‘copy’);
選択している文字列をコピーします。
- alert(‘コピーしました’);
画面上に「コピーしました」の文字をポップアップ表示させます。
投稿画面にコピーボタンを追加しよう
設定したJavaScriptを呼び出すボタンを投稿画面に設定します。
ボタンの追加手順
①投稿画面を開き、ボタンを入れたい場所で以下コードを追加する。
＜button class="btn-square-slant" type="button"＞クリップボードへコピー＜/button＞
※＜＞は半角に変えてください。
②カスタムフィールドを呼び出すショートコードの前に以下を追記する。
＜div id="cpbtn" class="in_code"＞
③カスタムフィールドを呼び出すショートコードの後ろに以下を追記する。
＜/div＞
ボタンのデザインを変更しよう
必要に応じて、ボタンのデザインを変えましょう。
JavaScriptの追加手順
※Simple Custom CSS and JSプラグインを利用し、JavaScriptを追加します。①Simple Custom CSS and JSプラグインで、「カスタムCSSの追加」をクリックする。
②任意のタイトルをつけ、以下コードを追加する。
.btn-square-slant {
display: inline-block;
position: relative;
padding: 0.5em 1.4em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 5px #36528c;/*ボタン色より暗めに*/
border-right: solid 5px #5375bd;/*ボタン色より暗めに*/
}
.btn-square-slant:before {
content: " ";
position: absolute;
bottom: -5px;
left: -1px;
width: 0;
height: 0;
border-width: 0 6px 6px 0px;
border-style: solid;
border-color: transparent;
border-bottom-color: #FFF;
}
.btn-square-slant:after {
content: " ";
position: absolute;
top: -1px;
right: -5px;
width: 0;
height: 0;
border-width: 0px 6px 6px 0px;
border-style: solid;
border-color: #FFF;
border-bottom-color: transparent;
}
.btn-square-slant:active {
/*ボタンを押したとき*/
border:none;
-webkit-transform: translate(6px,6px);
transform: translate(6px,6px);
}
.btn-square-slant:active:after, .btn-square-slant:active:before {
content: none;/*ボタンを押すと線が消える*/
}
③オプションの表示位置を「フッター」にし、「公開」ボタンをクリックする。
※btn-square-slantは、投稿画面で設定したボタンにつけたクラス名です。
クラス名を変更した場合は、CSS側でも変更してください。
この方法の問題点
投稿画面に表示したカスタムフィールドの値をコピーできるようになりましたが、
以下2つの問題点があります。
まとめ
画面にコピー項目が1つの場合は、問題なく利用できますので、
よければ活用ください★
現在の問題点については、
後日対応して、また掲載したいと思います。
