>>初心者ブロガーこそやるべきドメインパワー対策はこちら

コピーボタンの導入方法!タイトルとURLを一括コピー。[SANGO]

導入した実際のボタン
記事タイトルとURLをコピー
  
なべはぴ
なべはぴ

今回はSANGOを少しだけいじってみました。

注意

カスタマイズは自己責任です。
誤って重要なコードを消してしまうと、ブログが表示されなくなる可能性があります。

多くのブログサイトでは、記事の冒頭や最後に SNSのシェアボタンが実装されています。

ただし、僕はあまり使用したことがなく、URLやタイトルをかんたんにコピーしたいと思うことの方が多くありました。

そこで、URLとタイトルのコピーボタンを導入しようとしたところ、ある問題が…

なべはぴ
なべはぴ

SANGOに実装されていない…

そのため、自分でボタンを設置することにしました。

ボタンイメージ
ボタンイメージ
この記事はこんな方にオススメ

SANGOでタイトルとURLのコピーボタンを実装したい方

本記事では、コピペするだけで誰でもかんたんにコピーボタンを設置する方法を解説します。

タイトルとURLのコピーボタン導入した理由

ブログを読むひとの大半はスマートフォンを使用しています。

スマートフォンでは、シェアボタンを使わずとも、かんたんに共有できてしまいます。

スマホ共有

また、シェアボタンではTwitterなどで複数アカウントを持っていた場合、いま使っていたアカウントでしか共有できず、わずらわしい思いをすることもあります。

そのため、タイトルとURLのコピーボタンを導入し、使い勝手を良くしようとしました。

なべはぴ
なべはぴ

このボタンを使ってURLをコピーし、僕のブログを被リンクしてね(笑)

SANGO にタイトルとURLのコピーボタンを設置する手順

注意

カスタマイズする前に必ずバックアップをとってください。
また、子テーマ(SANGO Child)を導入して編集するようにしてください。

functions.phpにコードを追記
footer.phpにコードを追記
style.cssにコード追記

STEP1. functions.phpにコード追記

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

/こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。/の下に下記コードを入力。

コード
/*タイトルと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');
/*END タイトルとURL取得のショートコード*/

STEP2. footer.phpにコード追記

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

</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>
    <!-- リンクコピーボタン追加 ここまで-->

STEP3. style.cssにコード追記

外観→テーマエディタ→スタイルシート(style.css)

/こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。/の下に下記コードを入力。
※サイトに合わせて、文字色や背景色などを変更してください。

コード
/*--------------------------------------
記事URLコピーボタン
--------------------------------------*/
.copy_main {
	margin: 5px 0 2.4em;
}
.copy_btn {/*ボタンデザイン*/
	width: 100%; !important;/*ボタンの横幅*/
	margin: auto;
	padding: 10px 0;
	border: dashed 2px  #778899;/*ボタンの枠線*/
	border-radius: 5px;/*角丸*/
	color: #778899;/*ボタンの文字色*/
	text-align: center;
	font-size: 20px;
	background: #fff;/*ボタンの背景色*/
	cursor: pointer;
	box-shadow: 0 0 0 5px #fff;/*ボタン背景色*/
	transition: .3s;
}
.copy_btn:hover {/*ホバーエフェクト*/
	border: dashed 2px #778899;
	background: #dcdcdc;/*ボタン背景色*/
	color: #778899;/*ボタンの文字色*/
	box-shadow: 0 0 0 5px #fff;/*ボタン背景色*/
}
.copy_btn i:before {
	display: inline-block;
	margin-right: 8px;
	content: '\f0c5';
	font-size: 25px;
	vertical-align: middle;
}
.copy_btn.copied {/*コピー成功時*/
	border: dashed 2px #fff;
	box-shadow: 0 0 0 5px #ffc679;/*ボタン背景色*/
	background: #ffc679;/**//*ボタン背景色*/
	color: #fff;/*ボタンの文字色*/
	pointer-events: none;
}
.copy_btn.copied i:before {
	content: '\f00c';
}
.copy_btn.not-copied {/*コピー失敗時*/
	border: dashed 2px #fff;
	box-shadow: 0 0 0 5px #e27061;/*ボタン背景色*/
	background: #e27061;/**//*ボタン背景色*/
	color: #fff;/*ボタンの文字色*/
	pointer-events: none;
}
.copy_btn.not-copied i:before {
	content: '\f06a';
}

@media (max-width:575px) {/*スマホ表示*/
.copy_btn span {
	font-size: 16px;
}
.copy_btn.copied span {
	font-size: 18px;
}
}
/*--------------------------------------
記事URLコピーボタン ここまで
--------------------------------------*/

ショートコードで下記を入力すると、ボタンが出てきます。

[copy_btn]

まとめ:タイトルとURLのコピーボタンの導入方法

タイトルとURLのコピーボタンを設置する方法はたったの3ステップです。

  1. functions.phpにコード追記
  2. footer.phpにコード追記
  3. style.cssにコード追記

このたった3ステップで、下記のようなエフェクトのコピーボタンをつけることができます。

この下に、再度実装したボタンを表示しましたので、クリックしてみてください。

コピーしてシェア

記事タイトルとURLをコピー
  

 

なべはぴ
なべはぴ

これで快適なSANGO生活に1歩近づきました!

\ほかにもカスタマイズしてます/

Preloaderの設定方法WordPressでローディング画面をかんたんにおしゃれにするプラグイン”Preloader”の導入方法。
にほんブログ村 にほんブログ村へ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA