お手軽WordPress Tips:URLやサイズを指定出来るQRコードをショートコードで作れるようにする

Ads

ご質問頂いたのでついでに記事にします。
WordPressでURLとかサイズを指定出来る
QRコードをショートコードで作成したい、
というもの。情報系のサイトだと、ユー
ザーが携帯で閲覧したい事も多々ありそう
なので割りと汎用性はあるんじゃないかな
と思います。

というわけでショートコードでQRコードを作れるようにする方法です。APIが手軽なのでAPI使います。

コード

普通にショートコード作る方法と変わりません。functions.phpに以下を追記します。

function add_qrcode_in_this_article($atts) {
	extract(shortcode_atts(array(
		'url' => 'http://example.com',
		'size' => '80',
	), $atts));
	return '<img src="http://api.qrserver.com/v1/create-qr-code/?size=' . $size . 'x' . $size . '&amp;data=' . $url . '" alt="QR Code"/>';
}
add_shortcode('myqrcode', 'add_qrcode_in_this_article');

APIはQRserverっていう所のを使ってますがGoogleでも別にいいです。これで

[myqrcode url=”https://kachibito.net” size=”150″]

とか書けば縦横150pxサイズのQRコードを記事内に作成出来ます。

GoogleのAPIを使いたいなら

https://chart.googleapis.com/chart?chs=' . $size . 'x' . $size . '&cht=qr&chl=' . $url . '&choe=UTF-8

とかでいいんじゃないでしょうか。デフォルト値は便宜変更してください。

蛇足:記事のQRを常に出したい

おまけ。記事そのもののQRコードを毎回出すならテーマファイルに埋め込んだ方がいいですね。

<img src="http://api.qrserver.com/v1/create-qr-code/?size=100x100&amp;data=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/>

書いてないけど、サイズも毎回別にしたいならカスタムフィールドでも使えばいいと思います。条件分岐で手軽にデフォルトサイズも設定出来ますし。

蛇足:jQueryで処理したい

jQueryスニペットに書いた。

理屈は一緒です。

$("#qrcode").QR({
    url: "<?php the_permalink(); ?>"
});

以上です。参考になれば幸いです。