MENU
目次

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

当ページのリンクには広告が含まれています。
【WordPress JIN】URLとタイトルのコピーボタンを導入
  • URLをコピーしました!
こんにちは、研究職で主婦の松坂 澪(みお) (@matsuzakamio)です。ゆるけみをご覧いただき、ありがとうございます。

ゆるけみでは文才もないマーケティング経験も営業経験もない私が副業ブログを運営していくために調べたことをまとめています。

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;
}

記事内にショートコードでボタン追加

あとは、ボタンを入れたい場所に、ショートコードを記入すればボタンが表示されます。

ショートコード
[copy_btn]

[]大文字を[]小文字に変えてください。
ショートコードは単語登録をしておいたり、AddQuicktagに登録していつでも簡単に呼び出せるようにしておきます。

【セキュリティと作業効率up】WordPress JIN おすすめプラグインでカスタマイズ




目次

まとめ:コピーボタンでSNS対策

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

ブログ記事がSNSで拡散されるとうれしいですね。

あとは、シェアしたくなるような記事の作成を頑張るのみ…!

[copy_btn]
最後までご覧いただき、ありがとうございました。 ご質問等ございましたら、記事下のコメント欄よりご連絡ください。
よかったらシェア&気になったらブクマして後で読んでね。
ぜひ、Twitter(@matsuzakamio)もフォローお願いします。
おさえておきたいASP
 
【WordPress JIN】URLとタイトルのコピーボタンを導入

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次