こんにちは!カスタマイズにどハマりしているせつこです。

今回は、キャンペーンコードなどを簡単にコピーできるようなカスタマイズをしていきます。

     
普通の表情のせつこさん

言葉ではわかりにくいので、完成図をみてみましょう!

ここの文言は変えられます
コピーする

どんな文言もコピーできるよ!

改行だってできます!

コピーボタンを押したら、下記のフォームに貼り付けてみてください!

コピーできるのがユーザーに分かりやすいように、上と下にコピーボタンをつけています。

色は好みで変えてみてくださいね♪

手順
  1. CSSをコピペ
    style.cssなどにコードをコピペ
  2. PHPをコピペ
    functions.phpにコードをコピペ
  3. ショートコードをコピペ
    実際に使うショートコードをコピペ
  4. 使い方を覚える
    ちょっと使い方にクセがあるので覚えて終了!

jQueryで作るテキストのコピーボタンの作成手順

では、さっそくコピーボタンを作成していきます。

1.CSSをコピペ

「外観」→「カスタマイズ」→「追加CSS」に下記をコピペします。

/*コピーボタン*/
.copy_box{
  border-left: 4px solid;
  border-right: 4px solid;
  border-bottom: 4px solid;
  border-color:#fbd26b/*カラーコードを変えると色が変わります*/
}
.copy_box_btn{
  color: #999;
  font-weight: 700;
  background: #fff;
  padding: 4px 8px;
  border-radius: 5px;
  display:inline-block;
  white-space: nowrap;
  position: relative;
}
#copytext{
  line-height: 2.2;
  padding: 1em 1.5em;
  color: #777;
  font-size: .95em;
}
#copytext p:last-child{
  margin-bottom: 0!important;
}
.copy_box_title{
  padding: .5em 120px .5em 1em;
  margin-bottom: 0;
  font-weight: 500;
  position: relative;
  background: #fbd26b;/*カラーコードを変えると色が変わります*/
  color: #fff;
  font-weight: 700;
  font-size:18px;
}
.copy_box_title > .copy_box_btn{
  position:absolute;
}
.copy_box_title > .copy_box_btn{
  right:.5em;
  top: .5em;
  font-size: .85em;
}
.copy_box_btn_footer{
  text-align:center;
  padding: 5px 0 2px;
  background: #fbd26b;/*カラーコードを変えると色が変わります*/
}
.copy_box_btn_footer .copy_box_btn{
  width:250px;
}

2.PHPをコピペ

「functions.php」に下記をコピペします。

function copy_func( $atts, $content = null ) {
extract( shortcode_atts( array(
'title' => 'コピーできます',
), $atts ) );
return do_shortcode('
<div class="copy_box"><div class="copy_box_title">'.$title.'<div class="copybtn copy_box_btn"  onclick="copybtn()">コピーする</div></div><div id="copytext">' . $content . '</div><div class="copy_box_btn_footer"><div class="copybtn copy_box_btn"  onclick="copybtn()">コピーする</div></div></div>');
}
add_shortcode('copy', 'copy_func');

function copy_box_btn() {
echo <<< EOM
<script>
function copybtn() {
var text = document.getElementById("copytext").innerText;
var area = document.createElement("textarea");
area.textContent = text;
document.body.appendChild(area);
area.select();
document.execCommand("copy");
document.body.removeChild(area);
}
</script>
EOM;
}
add_action( 'wp_print_footer_scripts', 'copy_box_btn' ); 

3.ショートコードをコピペ

「投稿ページ」や「固定ページ」で下記のショートコードをコピペします。

[copy title="ここの文言は変えられます"]どんな文言もコピーできるよ![/copy]

4.使い方を覚える

[copy title="ここの文言は変えられます"]どんな文言もコピーできるよ![/copy]

title=”この中の文言を変えることで、左上のテキストを変更することができます。”

[copy title=”ここの文言は変えられます”]この中の文言をコピーできるようになります。

改行も可能です。[/copy]

jQueryで作るテキストのコピーボタンまとめ

このページでは、「【コピペで簡単】jQueryでテキストのコピーボタンを作ろう|ショートコードで管理も簡単【WordPress】」について書きました。

たまに欲しくなるコピーボタンですが、好みのデザインのものが無かったので書いちゃいました!

     
普通の表情のせつこさん

これでキャンペーンコードなどもストレス無しでコピーできます!

最後までお読みいただきありがとうございました!

それではまたー!