【コピペで出来る】記事タイトルとURLコピーボタンの導入方法！

勉強
スポンサーリンク

sibahuです。
今回はWordPressで記事のタイトルとURLをコピーするボタンの導入方法を紹介します。
SNSシェアボタンよりも手軽に共有できるので、是非ご自分のサイトでも使ってみてください！

スポンサーリンク

「記事のタイトルとURL」コピーボタンを導入する方法

WordPress Ver 5.4Cocoon Ver 2.1.4.1Cocoon Child Ver 1.0.6

私の動作環境は上記の通りです。
Cocoon以外でもコピペする場所が違うだけで動作はしますので、安心してください。
今回は、最終的にこのようなボタンを導入します。

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

ボタンを押すと、「コピーしました」の通知と共にURLとタイトルがコピーされます。
たったの3ステップで導入できますので順番に行っていきましょう。

STEP1 : functions.phpに記載する

STEP１は、「functions.php」にコピペします。

ソースコード
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');
このソースコードをコピーするだけではインデントがずれる場合があります。
下記の画像を参考にして正しいインデント位置にしてください。
コピペする場所
外観 ＞ テーマエディタ ＞ Cocoon Childを選択
　　　　　　　　　　　
＞ functions.php

 

STEP2 : style.cssに記載する

STEP2は、「style.css」にコピペします。

ソースコード
/*************************************************************
**記事のタイトルとURLをコピーするボタン
**************************************************************/
.copy_main {
margin: 0 0 2.4em;
}
.copy_btn {
	padding: 20px 0;
	border: 2px solid #666;
	color: #333;
	text-align: center;
	font-size: 22px;
	line-height: 1em;
	cursor: pointer;
	border-radius: 50px; /*角丸の角度*/
	font-weight: 700;
}
@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: 2px solid transparent;
	background: #1e6562;/*クリック後の背景色です*/
	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;
}
クリック後の背景色や文字色は好きな色に変えてください。
コピペする場所
外観 ＞ テーマエディタ ＞ Cocoon Childを選択
　　　　　　　　　　　
＞ style.css

 

STEP3 : footer.phpに記載する

最後のSTEP3は、「footer.php」にコピペします。
私が使用しているCocoonテーマでは親テーマの「footer.php」を直接弄らなくてもいいように「footer-insert.php」というファイルが存在します。
Cocoon以外のテーマを使用している方で、「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>
コピペする場所
外観 ＞ テーマエディタ ＞ Cocoon Childを選択
　　　　　　　　　　　
＞ tmp-user ＞ footer-insert.php

「記事のタイトルとURL」コピーボタンの動作チェック

実際にボタンを配置して動作を確認してみましょう。
記事内とSNSシェアボタン上に設置する場合には記載場所が異なります。
ですので、手順を２つに分けました。

記事内に［copy_btn］の設置

記事内にショートコード［copy_btn］を好きな場所に記載するだけです。

［copy_btn］は必ず全て半角で入力してください。
全角で記載すると正常に動作しません。
この記事内では、ボタンへの変換が掛かってしまうため全角で記載しています。

SNSシェアボタン上に［copy_btn］の設置

自分は記事の中ではなくSNSシェアボタンの上に配置したいので、「投稿SNSボタン上」にショートコードを設置しています。
これで無事、「記事のタイトルとURLコピーボタン」の完成です。
記事のタイトルとURLをコピー

まとめ

今回、行った手順は以下の通りです！

・functions.phpに記載する
・style.cssに記載する
・footer.phpに記載する
・「記事のタイトルとURLコピーボタン」の設置

参考サイト

【WordPress】ブログ記事の「タイトルとURLだけをコピー」するボタン https://workaholicdiary.com/wordpress/url-and-title-copy-button

記事のタイトルとURLコピーするボタンを、WordPressで導入する方法
https://soundorbis.com/title-url-copybtn/

コメント