wordpressに「タイトルとURLをコピーする」ボタンを設置する

【拡散率アップ!?】ブログに「記事タイトルとURLコピーする」だけのボタンを実装したら色々便利でした！ - ウェブ企画ラボ
この記事を見て、すごく便利でいいなと思ったので、wordpressで用の書き方にしてみました。



data-clipboard-textの中の文字列がクリップボードにコピーされます。
php echo trim(wp_title('', false)); で記事のタイトルを取得。
php the_permalink();で記事のURLを取得しています。

タイトルとURLをコピーする

cssは好きにカスタマイズして使ってください。

.copy_btn {
	height: 20px;
	padding: 0 7px;
	color: #fff;
	line-height: 20px;
	border-radius: 3px;
	background: #c00;
	cursor: pointer;
}
.copied {
	background: #777;
}

jsは、jQueryとclipboardという2つを読み込みます。
あとは、クリックした時の挙動を書いています。
こちらも自由にカスタマイズして大丈夫です。