こんにちは、研究職で主婦の松坂 澪(みお) (@matsuzakamio)です。ゆるけみをご覧いただき、ありがとうございます。

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

\ブログネタに困ったら悩みを知ろう/

ママリ-妊娠から育児まで女性向けQ&Aアプリ

ママリ-妊娠から育児まで女性向けQ&Aアプリ

Connehito, inc.無料

ブログ運営

【WordPress JIN&SANGO】URLとタイトルのコピーボタンを導入

【WordPress JIN】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;
}

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

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

ショートコード
[copy_btn]

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

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




ご不明な点やご質問等がございましたら、お気軽に記事下のコメント欄にコメントください。

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

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

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

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



平凡な会社員主婦ブロガーの損をしないためのMEMO

どこにでもいるふつうの会社員で主婦です。文才もないし、Web関連のIT知識もなくて、マーケティング経験もなしのブログ初心者

【完全初心者】会社員主婦がブログで月20万円の収益が出るまでの1年間に行ったこと

ブログを始めた頃はわからないことがたくさんあって苦労した…

初心者に高いお金を払わせている人になんとなくモヤッとしてるので、自分備忘録をかねて有益そうなブログ関連の情報をまとめています。

副業ブログ トップへ戻る

 

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

https://www.chemi-jyo.com/blog/blog-asp-affiliate-recommended/
この記事のURLとタイトルをコピーする
  

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA