新しいテーマを使っていたらボタンをクリックしただけで投稿のURLとタイトルをクリップボードにコピーしてくれる機能を発見しました。その後気づいてみるといくつかのページで「このページのタイトルとURLをコピー」というようなボタンを見かけるようになりました。ということで、私もこのボタンを導入してみたかったのでショートコードで簡単に使えるようにしてみました。
タイトルとURLをコピーするボタンのショートコードはこんな感じのものです
というかもうこの記事にも表示されているのですが説明しますね。
この赤矢印のボタンをクリックすると、クリップボードに
WordPressでアップデート中に起こる「WEBサイト壊れた？」というピンチのときの対処法 | ゆうそうとITブログ https://usortblog.com//wordpress-fail/
このような「タイトル＋（サイトタイトル）＋ URL」がコピーされる、という機能のショートコードです。サイトタイトルは出す、出さないをオプションで指定することができます。
またボタンに表示している「この記事のURLとタイトルをコピーする」という文字もショートコードで指定することができます。
code snippetsプラグインでインポートできるファイルを作りました
子テーマのfunctions.phpやstyle.cssに指定する方法もあるのですが、簡単なのでcode snippetsプラグインを入れておけばインポートするだけで機能が実装できるようにしました。
code snippets についてはこちらの記事をご覧下さい。
テーマによって動かない場合もあるかもしれませんが今のところSimplicityとLightningとTwenty Nineteenで動作するところまでは確認しています。
code snippetsのインポート用ファイルはこちら→
title-url-copy.code-snippets
※ すべての環境で動作確認しておりませんので、自己責任でのご利用をお願いします。
zipファイルとなってますので展開後のjsonファイルをcode snippetsでインポートしてください。インポート後、
3つのファイルを有効にすると使えるようになります。
タイトルとURLをコピーするショートコードの使い方
ショートコードは一番簡単に指定すると、
[usort_title_url_copy]
この指定だけでボタンを表示することができます。試しに下にこのコードを入れてみます。
[usort_title_url_copy]
↑こんな感じに表示されます。ボタンをクリックすると
WordPressでタイトルとURLをコピーするボタンのショートコードを作りました https://usortblog.com//url-title-copy-shortcode/
という文字がクリックボードにコピーされますので、あとは 貼り付け をすれば好きなところにタイトルとURLをコピーペーストすることができます。
オプション サイトののタイトルを付けてクリップボードにコピーさせる
オプションとしてサイトのタイトルを付けてクリップボードにコピーさせることができます。
サイトのタイトルとは、
ダッシュボード 設定をクリックしたときに表示される、
サイトのタイトルです。このブログの場合は「ゆうそうとITブログ」となります。
サイトのタイトルを付けるには、
[usort_title_url_copy blogname="y"]
こんな感じで blogname=”y” のオプションを追加します。=”y” の部分は実は何でもいいのですがなにか文字が入っていればサイトのタイトルが追加された形でクリップボードにコピーされます。
[usort_title_url_copy blogname=”y”]
↑こんな感じです。見た目は変わらないのですが貼り付けると
WordPressでタイトルとURLをコピーするボタンのショートコードを作りました | ゆうそうとITブログ https://usortblog.com//url-title-copy-shortcode/
のように、サイトのタイトルが追加されていることがわかります。
オプション ボタンに表示させる文言を変更する
何も指定しないと単に、コピーするとボタンに表示されていますがこの文言を自分の好きな文字にすることができます。
[usort_title_url_copy button="この記事のURLとタイトルをコピーする"]
このように button=”ここに表示させたい文字を書く” の形で指定すると、指定した文字がボタンに表示されます。
[usort_title_url_copy button=”この記事のURLとタイトルをコピーする”]
こんな感じです。
Simplicityでは投稿記事上ウィジェットエリアに表示してみました
このブログはテーマSimplicityを使っています。Simplicityには投稿のウィジェットが沢山あるので、その中の投稿記事上ウィジェットエリアにカスタムHTMLウィジェットを入れて、ショートコードを入れてみました。
※ 子テーマなどでテンプレートが修正できる方はテンプレートに直接入れてもいいかと思います。
Lightningにはカスタマイズしないと投稿だけに表示させるということが難しかったのでとりあえず、サイドバー（共通上部）ウィジェットに入れてみました。
こんな感じです。
簡単なコードの解説
このショートコードは3つの部分でできています。中身にご興味があれば以下をご覧下さい。
クリックしたときにクリップボードにコピーするjQuery部分
クリックしたときにjQueryでクリップボードにコピーします。このコードや後から書くHTML部分は
【拡散率アップ!?】ブログに「記事タイトルとURLコピーする」だけのボタンを実装したら色々便利でした！
こちらのページを参考にさせていただきました！ありがとうございます。
code snippetsでは、タイトルとURLをコピーというファイルになります。中身は
add_action( 'wp_footer', function () { ?>
<!-- ↓クリップボード操作のために使用するjsを読み込む ( https://clipboardjs.com/ ) -->
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.copy_btn'); //clipboard.min.jsが動作する要素をクラス名で指定
//クリックしたときの挙動
jQuery(function(){
jQuery('.copy_btn').click(function(){
jQuery(this).addClass('copied'); //ボタンの色などを変更するためにクラスを追加
jQuery(this).text('コピーしました'); //テキストの書き換え
});
});
</script>
<?php } );
こんな感じで、ほぼ参考にさせていただいたコードのままです。clipboard.min.jsというjsを使って、指定したボタン（ここでは class=”copy_btn”）をクリックしたときにクリップボードにコピーされる動作を作っています。また、クリックしたときに色などを変えられるように、copiedというクラスを追加して、コピー後のボタンのテキストもコピーしましたに変えています。コピー後のボタンの文字を変更したいときはここの文字を変更すれば変えることができます。
違うところは、code snippetsで使うために
add_action( 'wp_footer', function () {
中略
}
部分で囲っていることです。wp_footerを指定することで最後に記述されるようにしました。
コピー用のボタンを表示させるHTMLを作るPHP部分
コピー用のボタンを表示させる部分ですが、ここはphpで書いています。code snippetsではタイトルとURLをコピーショートコードファイルになります。
// 下記はショートコードがそのまま表示されてしまうときに用のコード
add_filter('widget_text', 'do_shortcode' );
/* タイトルとURLをコピーするボタン */
function usort_title_url_copy($atts) {
if (!is_single()){
return '';
}
extract( shortcode_atts( array(
'blogname' => '',
'button' => '',
), $atts ) );
// ショートコードにblogname=の指定があればブログの名前もコピーする
if ($blogname){
$blogname = sprintf(" | %s", get_bloginfo('name'));
}
$string = "%s%s %s";
$title = sprintf($string, get_the_title(), $blogname, get_permalink());
if ($button) {
} else {
$button = "コピーする";
}
$button_html = '<div class="copy_btn_outer"><div class="copy_btn" data-clipboard-text="%s ">%s</div></div>';
return sprintf($button_html,$title,$button);
}
/* ショートコードを追加する */
add_shortcode('usort_title_url_copy', 'usort_title_url_copy');
こんな感じのものです。
add_filter('widget_text', 'do_shortcode' );
はSimplicityではウィジェットでショートコードが使えたのですが、Lightningでは使えなかったためこの行を追加しました。これでウィジェットでショートコードが使えないテーマでも使えるようになります。
usort_title_url_copyファンクションでショートコード部分を作っています。最初に、
if (!is_single()){
return '';
}
と書いてあるのは、これを入れなかったときに一覧ページなどにもボタンが表示されてしまったためです。投稿の詳細ページだけで表示したかったのでこのようにしました。他のページでも表示させたいときはこの部分を目的に合わせて変えて下さい。
extractの部分ではショートコードに引数があったときに値を受け取っています。何も指定しなければ空白になるので、何も指定しなくても問題ありません。
それ以降はボタンのHTMLを組み立てている部分で、オプションがあればそれを表示させられるようになっています。サイトのタイトルをどこにどのように出すか？などを変更したい場合はこのあたりを変更して下さい。
ボタンの見た目を指定している CSS部分
コピーボタンの見た目を指定しているCSSの部分は、code snippetsではタイトルとURLをコピー用のCSSとなります。
ボタンのデザインは、
サルワカ CSSで作る！押したくなるボタンデザイン100（Web用）
の、少し浮き上がったふせん風
を参考にさせていただきました！ありがとうございます。
コードは、
add_action( 'wp_head', function () { ?>
<style>
.copy_btn_outer {
margin-top:5px;
text-align:center;
}
.copy_btn {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #f7f7f7;
border-left: solid 6px #ff7c5c;/*左線*/
color: #ff7c5c;/*文字色*/
font-weight: bold;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.copy_btn:active {
box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
transform: translateY(2px);
}
.copied {
background: #ff7c5c;
color: #f7f7f7;/*文字色*/
}
</style>
<?php } );
こんな感じです。変えたのはクラス名を今回使っているクラス名copy_btnにしたこととcopiedクラス（クリックしたときのCSS）を追加して背景色と文字色を入れ替えた、ということです。
ボタンの見た目を変えたいときはこの部分を変更してください。
code snippetsを使わずに子テーマだけで追加する場合
code snippetsを使わずに子テーマだけで追加する場合は、一番簡単な方法は、上記の3つのコードを全部子テーマのfunctions.phpにコピーペーストするだけ、です。
本来的にはPHP部分以外のCSSはstyle.cssに追加したり、jQueryについてはjsフォルダを作ってjsファイルにしてfunctions.phpからそのファイルを読み込んだりした方が良いと思われますが、そのあたりは好みの方法でということになるかと思います。
functions.phpへの記述については
こちらが参考になるかと思われます。
コメント