無題ドキュメント

このページはfukaの趣味とか作業メモとか日記とかをだらだら書いています

Top Page URL QRcode

wordpress メモ 日記

WordPressにQRコードを表示してみました メモ

2019/03/20

なんとなくQRコードを表示してみたくなりました(*´ω`*)
ということでどこぞのWEBサービスを使ってQRコードの画像を作成してみたのですが、せっかくなのでページごとのURLのQRコードを表示できるようにしてみようかと(=~=b

Top Page URL QRcode
Top Page URL QRcode

お決まり:同様のことをして何が起きても責任は持ちません。使う場合は専門の人に聞いて見たりしてからテストなどをしてみて安全性が担保できてから自己責任で使用してください。

色々調べてみたらQRコード自体はGoogle Chart APIを使用して表示させることができるらしい(後から調べてみたらGoogle Chart APIは現在は非推奨みたいです。ですのですぐに使えなくなるかも・・・)
ということで参考サイトのプログラムを使用させていただくことに
そして表示しているサイトのURL取得にまたまた他のサイトのプログラムを使用させていただくことに
そして合体!こんな感じになりました(*´ω`*)

functions.phpに記述

//現在のURLを取得する関数
function get_current_link() {
        return esc_url((is_ssl() ? 'https' : 'http') . '://' . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"],(is_ssl() ? 'https' : 'http'));
}

// QRコード出力関数
function get_qrcode_tag($atts) {
        extract(shortcode_atts(array(
                'url' => get_current_link(),
                'size' => '350',
        ), $atts));

        // イメージタグを返す
        return '<img src="https://chart.googleapis.com/chart?chs=' . $size . 'x' . $size . '&cht=qr&chl=' . $url . '&choe=UTF-8 " alt="QR Code"/>';
}

// 呼び出しの指定
add_shortcode('qrcode', 'get_qrcode_tag');

そしてヴィジェット内に [ qrcode ]を記述

こんなかんじで各ページのQRコードを出力することができました(*´ω`*)
一応URLはesc_url()の関数を使いURLの無害化しているのですがどうなんでしょうか(=~=;
まだ気づいていないところがありそうでちょっと怖いです。
もしこのプログラムを使う場合は専門の人に聞いてみてから使うか判断してください。何が起こっても責任は持たないですからねー(´Д⊂ヽ

ということで思ったよりも簡単にQRコードを出すことができました。
非推奨となっているGoogle Chart APIを使用している為、そのうち他の方法にも挑戦してみたいと思います(*´ω`*)
というか1ページごとにリクエストとかだと大量にアクセスあるサイトだとAPI側にすごい負荷がかかる気がしてきた。内部で完結できる方法も考えないと、あとはアクセス解析できるぐらいの情報をAPI側に大公開している気もする・・・
まぁとりあえずこういうやり方ができるっていうのが分かっただけでもよしとしましょう( *´艸`)

20190319:
現在はこのようにイメージタグを返すところを他のサイトのAPIに変更し使用しています。※同様のことをされる方は自己責任でおねがいしますね~(*´ω`*)
return '<img src="https://api.qrserver.com/v1/create-qr-code/?size=' . $size . 'x' . $size . '&format=svg&data=' . $url . '&color=000000&qzone=4 " alt="QR Code"/>';

動作環境:
wordpress 5.0.3
PHP Version 7.2.15

参考サイト:
Google Charts Infographics QR Codes
incloop コピペするだけ!WordPressでプラグインを使うことなくQRコードを貼り付ける方法
wordpressあれこれワープレ屋 【WordPress】現在のURLを取得する方法と独自のGETパラメータを付与したURLを取得する方法
WordPress Codex 関数リファレンス/esc url

-wordpress, メモ, 日記