wordpress

「『記事タイトルとURLコピーする』だけのボタン」をWordPressで実装したコード公開

更新日:

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

まいど、ボブです。

先日下記記事が公開されていましたが、皆様ご覧になりましたでしょうか?

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

超絶便利だったので、早速自分のブログに反映させました。

で、先方の記事にWordPress用のコードがなかったので今回の記事でまとめてみました。

なお、実装はご自身の責任のもとにお願いいたします。

ボタン部分

まずはボタン部分です。
下記のコードを設定しました。

コピーされたい方はこちらからどうぞ
https://gist.github.com/kimidentity/7b5e65562cd909eeb13e54bb8c3da7d0

なおこのブログではアフィンガー4を使っているのですが、設定した場所は<div class="mainbox">の直後に設定しました。

記事下の場所については、好きな場所に設定すればいいかなと思います。

CSS

こちらは、先方が公開されていたでもサイトに記載されていたものから拝借しました。

で、管理画面の「外観」→「CSS編集」に実装しました。

2016/11/08追記:
コピー後のボタンの色をもう少し鮮やかな青にしたかったので、CSSをいじりました。

あと、コピー後のフォントの色を白にしました。内容は下記のとおりです。

コピーされたい方はこちらからどうぞ。
https://gist.github.com/kimidentity/9e3b1e5d061551431bb612d614e2a1d7

なお、その過程でカラーコードを検索したら下記のようなリッチスニペットが出てきました。

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3

どんどん便利になっていきますね・・・。

jQuery

こちらは先方が公開されていたものを、</body>の直前に設定しました。

なるべくソース上部に置きたくなかったのでフッターに置いたのですが、特に問題なく動いています。

まとめ

以上、「『記事タイトルとURLコピーする』だけのボタン」をWordPressに実装する方法でした。

簡単にできますので、ぜひやってみて下さい。

なお「こうやって設定したほうが上手く行ったよ!」というフィードバックがあれば、ぜひ教えてください。

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

-wordpress

Copy Protected by Chetan's WP-Copyprotect.

Copyright© とある浪速の調査雑記 , 2017 AllRights Reserved.