WordPressでタイトルとURLをコピーするボタンのショートコードを作りました

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

新しいテーマを使っていたらボタンをクリックしただけで投稿のURLとタイトルをクリップボードにコピーしてくれる機能を発見しました。その後気づいてみるといくつかのページで「このページのタイトルとURLをコピー」というようなボタンを見かけるようになりました。ということで、私もこのボタンを導入してみたかったのでショートコードで簡単に使えるようにしてみました。

タイトルとURLをコピーするボタンのショートコードはこんな感じのものです

というかもうこの記事にも表示されているのですが説明しますね。

この赤矢印のボタンをクリックすると、クリップボードに

このような「タイトル+(サイトタイトル)+ URL」がコピーされる、という機能のショートコードです。サイトタイトルは出す、出さないをオプションで指定することができます。

またボタンに表示している「この記事のURLとタイトルをコピーする」という文字もショートコードで指定することができます。

code snippetsプラグインでインポートできるファイルを作りました

子テーマのfunctions.phpやstyle.cssに指定する方法もあるのですが、簡単なのでcode snippetsプラグインを入れておけばインポートするだけで機能が実装できるようにしました。

code snippets についてはこちらの記事をご覧下さい。

仕事でホームページを制作する際にphpでコードを書いてカスタマイズをすることが多いです。その場合、「子テーマのfunctions.php...

テーマによって動かない場合もあるかもしれませんが今のところSimplicityLightningTwenty Nineteenで動作するところまでは確認しています。

code snippetsのインポート用ファイルはこちら→
title-url-copy.code-snippets
※ すべての環境で動作確認しておりませんので、自己責任でのご利用をお願いします。

zipファイルとなってますので展開後のjsonファイルをcode snippetsでインポートしてください。インポート後、

3つのファイルを有効にすると使えるようになります。

タイトルとURLをコピーするショートコードの使い方

ショートコードは一番簡単に指定すると、

この指定だけでボタンを表示することができます。試しに下にこのコードを入れてみます。

コピーする

↑こんな感じに表示されます。ボタンをクリックすると

という文字がクリックボードにコピーされますので、あとは 貼り付け をすれば好きなところにタイトルとURLをコピーペーストすることができます。

オプション サイトののタイトルを付けてクリップボードにコピーさせる

オプションとしてサイトのタイトルを付けてクリップボードにコピーさせることができます。

サイトのタイトルとは、

ダッシュボード 設定をクリックしたときに表示される、

サイトのタイトルです。このブログの場合は「ゆうそうとITブログ」となります。

サイトのタイトルを付けるには、

こんな感じで blogname=”y” のオプションを追加します。=”y” の部分は実は何でもいいのですがなにか文字が入っていればサイトのタイトルが追加された形でクリップボードにコピーされます。

コピーする

↑こんな感じです。見た目は変わらないのですが貼り付けると

のように、サイトのタイトルが追加されていることがわかります。

オプション ボタンに表示させる文言を変更する

何も指定しないと単に、コピーするとボタンに表示されていますがこの文言を自分の好きな文字にすることができます。

このように button=”ここに表示させたい文字を書く” の形で指定すると、指定した文字がボタンに表示されます。

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

こんな感じです。

Simplicityでは投稿記事上ウィジェットエリアに表示してみました

このブログはテーマSimplicityを使っています。Simplicityには投稿のウィジェットが沢山あるので、その中の投稿記事上ウィジェットエリアカスタムHTMLウィジェットを入れて、ショートコードを入れてみました。
※ 子テーマなどでテンプレートが修正できる方はテンプレートに直接入れてもいいかと思います。

Lightningにはカスタマイズしないと投稿だけに表示させるということが難しかったのでとりあえず、サイドバー(共通上部)ウィジェットに入れてみました。

こんな感じです。

簡単なコードの解説

このショートコードは3つの部分でできています。中身にご興味があれば以下をご覧下さい。

クリックしたときにクリップボードにコピーするjQuery部分

クリックしたときにjQueryでクリップボードにコピーします。このコードや後から書くHTML部分は

【拡散率アップ!?】ブログに「記事タイトルとURLコピーする」だけのボタンを実装したら色々便利でした!

こちらのページを参考にさせていただきました!ありがとうございます。

code snippetsでは、タイトルとURLをコピーというファイルになります。中身は

こんな感じで、ほぼ参考にさせていただいたコードのままです。clipboard.min.jsというjsを使って、指定したボタン(ここでは class=”copy_btn”)をクリックしたときにクリップボードにコピーされる動作を作っています。また、クリックしたときに色などを変えられるように、copiedというクラスを追加して、コピー後のボタンのテキストもコピーしましたに変えています。コピー後のボタンの文字を変更したいときはここの文字を変更すれば変えることができます。

違うところは、code snippetsで使うために

部分で囲っていることです。wp_footerを指定することで最後に記述されるようにしました。

コピー用のボタンを表示させるHTMLを作るPHP部分

コピー用のボタンを表示させる部分ですが、ここはphpで書いています。code snippetsではタイトルとURLをコピーショートコードファイルになります。

こんな感じのものです。

Simplicityではウィジェットでショートコードが使えたのですが、Lightningでは使えなかったためこの行を追加しました。これでウィジェットでショートコードが使えないテーマでも使えるようになります。

usort_title_url_copyファンクションでショートコード部分を作っています。最初に、

と書いてあるのは、これを入れなかったときに一覧ページなどにもボタンが表示されてしまったためです。投稿の詳細ページだけで表示したかったのでこのようにしました。他のページでも表示させたいときはこの部分を目的に合わせて変えて下さい。

extractの部分ではショートコードに引数があったときに値を受け取っています。何も指定しなければ空白になるので、何も指定しなくても問題ありません。

それ以降はボタンのHTMLを組み立てている部分で、オプションがあればそれを表示させられるようになっています。サイトのタイトルをどこにどのように出すか?などを変更したい場合はこのあたりを変更して下さい。

ボタンの見た目を指定している CSS部分

コピーボタンの見た目を指定しているCSSの部分は、code snippetsではタイトルとURLをコピー用のCSSとなります。

ボタンのデザインは、

サルワカ CSSで作る!押したくなるボタンデザイン100(Web用)

の、少し浮き上がったふせん風

を参考にさせていただきました!ありがとうございます。

コードは、

こんな感じです。変えたのはクラス名を今回使っているクラス名copy_btnにしたこととcopiedクラス(クリックしたときのCSS)を追加して背景色と文字色を入れ替えた、ということです。

ボタンの見た目を変えたいときはこの部分を変更してください。

code snippetsを使わずに子テーマだけで追加する場合

code snippetsを使わずに子テーマだけで追加する場合は、一番簡単な方法は、上記の3つのコードを全部子テーマのfunctions.phpにコピーペーストするだけ、です。

本来的にはPHP部分以外のCSSはstyle.cssに追加したり、jQueryについてはjsフォルダを作ってjsファイルにしてfunctions.phpからそのファイルを読み込んだりした方が良いと思われますが、そのあたりは好みの方法でということになるかと思います。

functions.phpへの記述については

今までいくつも子テーマを作ってサイトを作ったりしましたが、あるサイトのために全く新しくテーマを作りました。 WordPressだけでなく...

こちらが参考になるかと思われます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告
トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。