ワンクリックで記事のURLをコピーするボタンを設置する方法

2019年4月23日2021年12月23日

ブログやサイトで一般的に設置されているSNSシェアボタンだが、SNSシェアボタンの意味を理解していない読者も多く実際は利用されないことが多い。

そこでもっとわかりやすいURLコピーボタンを設置することにした。

実際に設置したボタン

[copy_btn]

ボタンを押すと記事のタイトルとURLがコピーされる。

このボタンの設置方法とカスタマイズ方法をまとめて紹介していく。

注意！

このカスタマイズはfunctions.phpを編集するので、ブログが表示されなくなっても解決できる方のみ自己責任で行なってください。

また、使用しているテーマによってはボタンが表示されなかったりデザインが崩れる場合があります。

コピペで貼り付けるコードは3つ

①functions.phpにコードを追加する

WP管理画面の「外観→テーマ編集→テーマのための関数（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');

「この記事のURLをコピーする」の部分はボタンに表示される文言なので好きに変更しても良い。

②footer.phpにコードを追加する

使用しているテーマによってはWP管理画面からfooter.phpを編集できないので、その場合はFTPソフトを使用して編集していく。

当ブログでも使用しているSANGO子テーマのPORIPUを使っている場合は、WP管理画面の「外観→テーマ編集→テーマフッター（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>

③style.cssにコードを追加する

WP管理画面の「外観→テーマ編集→スタイルシート（style.css）」に下記のコードをコピペする。

cssコード

/*--------------------------------------
記事URLコピーボタン
--------------------------------------*/
.copy_main {
	margin: 0 0 2.4em;
}
.copy_btn {/*ボタンデザイン*/
	padding: 15px 0;
	border: solid 1px #555;/*ボタンの枠線*/
	color: #555;/*ボタンの文字色*/
	text-align: center;
	font-size: 20px;
	cursor: pointer;
	background: #fff;/*ボタンの背景色*/
	transition: .3s;
}
.copy_btn:hover {/*ホバーエフェクト*/
	border: solid 1px #b5b5b5;/*ボタンの枠線*/
	background: #b5b5b5;/*ボタンの背景色*/
	color: #fff;/*ボタンの文字色*/
}
.copy_btn i:before {
	display: inline-block;
	margin-right: 8px;
	content: '\f0c5';
	font-size: 25px;
	vertical-align: middle;
}
.copy_btn.copied {/*コピー成功時*/
	border: solid 1px transparent;
	background: #74d899;/*背景色*/
	color: #fff;/*文字色*/
	pointer-events: none;
}
.copy_btn.copied i:before {
	content: '\f00c';
}
.copy_btn.not-copied {/*コピー失敗時*/
	border: solid 1px transparent;
	background: #d87f74;/*背景色*/
	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コピーボタンを設置

上記3つのコードをコピペできたらショートコードを使って実際にボタンを設置していく。

下記のショートコードを記事の中にコピペするとボタンを設置できるぞ。

ショートコード

[copy_btn]

ショートコードはAddQuicktagなどのプラグインに登録しておくと便利だ。

ウィジェットを使って一括で設置する

全ての記事に一括でボタンを設置する場合はウィジェットを活用しよう。

ウィジェットの「記事タイトル下」や「記事下」などに「カスタムHTML」を使って設置していく。

カスタムHTMLウィジェットにショートコードをコピペして保存しよう。

記事中だけでなくサイドバーなどにも設置することができる。

その他のデザインパターン

その他のデザインパターンを使用するときは③のcssコードをまるっと入れ替えするだけでOK。

ステッチデザイン

角を丸くしたステッチデザインボタンは可愛い系ブログの定番デザインでパステルカラーとの相性がとても良い。

自分のブログカラーに合わせてカラー変更してみよう。

cssコード

/*--------------------------------------
記事URLコピーボタン（ステッチデザイン）
--------------------------------------*/
.copy_main {
	margin: 5px 0 2.4em;
}
.copy_btn {/*ボタンデザイン*/
	width: 450px;/*ボタンの横幅*/
	margin: auto;
	padding: 10px 0;
	border: dashed 2px #fff;/*ボタンの枠線*/
	border-radius: 15px;/*角丸*/
	color: #fff;/*ボタンの文字色*/
	text-align: center;
	font-size: 20px;
	background: #61c2e2;/*ボタンの背景色*/
	cursor: pointer;
	box-shadow: 0 0 0 5px #61c2e2;/*ボタン背景色*/
	transition: .3s;
}
.copy_btn:hover {/*ホバーエフェクト*/
	border: dashed 2px #fff;
	background: #8bd5ef;/*ボタン背景色*/
	color: #fff;/*ボタンの文字色*/
	box-shadow: 0 0 0 5px #8bd5ef;/*ボタン背景色*/
}
.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 #61e291;/*ボタン背景色*/
	background: #61e291;/**//*ボタン背景色*/
	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;
}
}

背景&小ボタン

ボタンを小さく目立ち過ぎないデザインにしてみた。

ボタンを小さくする場合は背景を薄くつけておくとコピーボタンの存在が視覚的に認識しやすくなるのでおすすめ。

cssコード

/*--------------------------------------
記事URLコピーボタン（小ボタン&背景有り）
--------------------------------------*/
.copy_main {
	margin: 0 0 2.4em;
	padding: 20px 0;
	background: #eee;
}
.copy_btn {/*ボタンデザイン*/
	width: 300px;/*ボタンの横幅*/
	margin: auto;
	padding: 8px 0;
	color: #fff;/*ボタンの文字色*/
	text-align: center;
	font-size: 15px;
	cursor: pointer;
	background: #b5b5b5;/*ボタン背景色*/
	transition: .3s;
}
.copy_btn:hover {/*ホバーエフェクト*/
	background: #888;/*ボタン背景色*/
	color: #fff;/*文字色*/
}
.copy_btn.copied {/*コピー成功時*/
	background: #74d899;/*ボタン背景色*/
	color: #fff;/*文字色*/
	pointer-events: none;
}
.copy_btn.not-copied {/*コピー失敗時*/
	background: #d87f74;/*ボタン背景色*/
	color: #fff;/*文字色*/
	pointer-events: none;
}