【WordPress JIN&SANGO】URLとタイトルのコピーボタンを導入する方法・仕方

2020年6月6日

当ページのリンクには広告が含まれています。

URLをコピーしました！

JINとSANGOでもURLとタイトルをコピーするボタンを使いたい。

そこでいろいろ調べて、JINとSANGOでコピーボタンを実装できたので、その方法をまとめてみました。

この記事では

WordPress JINとSANGOでURLとタイトルをコピーできるボタンを実装する方法をまとめました。

JINとSANGOにURLとタイトルをコピーするボタンを作る

URLとタイトルをコピーするボタンは下のようなやつです。

記事を少しでもシェアしてもらうためにはソーシャルボタン付けた方がいいのは明らかなのですが、何気なく知り合いの若い女性に「Twitterのシェアボタンって使う？」と何気なく聞いてみたところ、「使わない」とのこと。
若い女性のほうがTwitterを利用しているとのデータもありますし私にとってはかなり意外な回答だったので「どうして？」と聞いてみたところ、
「押してもログインしないといけないし面倒」
とのこと。そのとき「確かに！」と思ってしまいました。「ではどのようにシェアするの？」と聞いたところ、
URLをコピー
↓
アプリを起動
↓
貼り付け
とするそう。でもよく考えたらそのほうがどんなアプリでも共有できるし楽ですよね。
➢ 【拡散率アップ!?】ブログに「記事タイトルとURLコピーする」だけのボタンを実装したらいろいろ便利でした！

「かんたんにURLをコピーできるとSNSで拡散されやすい」と言われています。

AFFINGER5やCocoonには最初からボタンが実装されています。

そこで、JINとSANGOでもコピーボタンを使うためのカスタマイズを行ったので、流れをまとめてみました。

本当はJINのオリジナルアイコンを使いたかったのですが、うまくできませんでした。

今回のカスタマイズはphpをいじるので、必ずバックアップを取ってから実施してください。

カスタマイズをする前に必ずバックアップをとってください。

コピーボタンを作成するにあたって、以下の記事を参考にさせていただきました。

参考　➢ ブログの記事タイトルとURLをコピーするボタン。エラーメッセージも表示
参考　➢ 【WordPress】ブログ記事の「タイトルとURLだけをコピー」するボタン

functions.phpにコードを追記

functions.phpに以下のコードを追記します。

追加する場所

外観→テーマエディタ→テーマのための関数(functions.php)

functions.php

//タイトルとURL取得のショートコード
function myshortcode_copy_btn() {
$title = wp_get_document_title();
$url = get_permalink();

return '
 <div class="copy_main">
 <div class="copy_btn" data-clipboard-text="'.$title.' '.$url.'">
 <span>この記事のURLとタイトルをコピーする</span>
</div>
　　</div>';
}
add_shortcode('copy_btn', 'myshortcode_copy_btn');

SANGO用にFont Awesomeを使う場合は、以下のコードを追加します。

functions.php

//タイトルとURL取得のショートコード
function myshortcode_copy_btn() {
$title = wp_get_document_title();
$url = get_permalink();

return '
 <div class="copy_main">
 <div class="copy_btn" data-clipboard-text="'.$title.' '.$url.'">
 <i class="fa"></i><span>この記事のURLとタイトルをコピーする</span>
</div>
　　</div>';
}
add_shortcode('copy_btn', 'myshortcode_copy_btn');

HTMLタグ設定の【bodyタグの終わり】にコードを追記

フッダーに以下のコードを追記します。

追加する場所

HTMLタグ設定→【bodyタグの終わり】

HTMLタグ設定の【bodyタグの終わり】

<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.copy_btn');
    clipboard.on('success', function(e) {
    jQuery(".copy_btn").addClass('copied');
    jQuery(".copy_btn span").text('コピーしました');
    jQuery(".copy_text").slideDown('slow');
});
    clipboard.on('error', function(e) {
    jQuery(".copy_btn").addClass('copied not-copied');
    jQuery(".copy_btn span").text('コピーできませんでした');
    jQuery(".copy_text").slideDown('slow');
});
</script>
<script>
jQuery('#copy_textbox').on('click', function(e) {
  e.target.setSelectionRange(0, e.target.value.length);
});
</script>

SANGOのPORIPU tearsの場合はフッターのphpに以下のコードを追記します。

追加する場所

外観→テーマエディター→テーマフッター(footer.php)

テーマフッター(footer.php)

<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.copy_btn');
    clipboard.on('success', function(e) {
    jQuery(".copy_btn").addClass('copied');
    jQuery(".copy_btn span").text('コピーしました');
    jQuery(".copy_text").slideDown('slow');
});
    clipboard.on('error', function(e) {
    jQuery(".copy_btn").addClass('copied not-copied');
    jQuery(".copy_btn span").text('コピーできませんでした');
    jQuery(".copy_text").slideDown('slow');
});
</script>
<script>
jQuery('#copy_textbox').on('click', function(e) {
  e.target.setSelectionRange(0, e.target.value.length);
});
</script>

CSSにコード追記

CSSに以下のコードを追記します。

追加する場所

外観→CSS編集

CSS

/*タイトルとURLをコピーする*/

.copy_main {
  margin: 0 0 2.4em;
}

.copy_btn {
  padding: 20px 0;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  color: #333;
  text-align: center;
  font-size: 22px;
  line-height: 1em;
  cursor: pointer;
}

@media (max-width:575px) {
  .copy_btn span {
    font-size: 16px;
  }
  .copy_btn.copied span {
    font-size: 18px;
  }
}

.copy_btn i:before {
  display: inline-block;
  margin-right: 8px;
  content: '\f0c5';
  font-size: 28px;
}

.copy_btn:hover {
  opacity: .7;
}

.copy_btn.copied {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  background: #0095d9;
  color: #fff;
  pointer-events: none;
}

.copy_btn.copied {
  cursor: auto
}

.copy_btn.copied i:before {
  content: '\f00c';
}

.copy_btn.not-copied {
  background: #d90028;
}

.copy_btn.not-copied i:before {
  content: '\f06a';
}

.copy_text {
  display: none;
  overflow: hidden;
}

.copy_text div {
  margin: 15px 8px 0;
  font-size: 13px;
  line-height: 1.2em;
}

.copied+.copy_text div {
  display: none;
}

.not-copied+.copy_text div {
  display: block;
}

#copy_textbox {
  margin-top: 10px;
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 3px;
  font-size: 16px;
}