スマホ画面
例えば知り合いに自分のブログページ（Webページ）を教えたい時がありませんか？ こんな時にブログページ内にQRコードを設置していれば、知り合いのスマホでQRコードを読み取ることで、簡単に当該のブログページに遷移できます。
今回は、実例の画像（スマホ画面参照）で示します様に、ページのURLに基づくQRコードを簡単に設置する方法を紹介します。
注意 (2023/1/15 改訂)
Google Chart APIによるQRコード作成が出来なくなっていました。 代替えとして、「QR code generator」API に変更しました。
「QR code generator」の公式ページURL：https://goqr.me/api/
「クイックスタートガイド」ページURL：https://goqr.me/api/doc/create-qr-code/
〜〜〜〜〜〜
もう一つの選択肢として、GitHubで公開されているQRコードジェネレータのjQueryプラグイン：jquery.qrcode.min.js を使う方法があります。 この方法を使えば、QRコードAPIサービスが停止されてQRコードが表示しなくなることはありません。（2024/5/9追記）
-
-
ブログページにQRコードを簡単に設置する方法 - その２（QRコード用jQueryプラグインを利用）
以前の記事で、「ブログページに現在ページのurlをQRコードで表示する方法」を紹介しました。 この方法は、「QR code generator」API を利用してNet経由でQRコードを描画するもので ...
WordPressのPost Snippetsプラグイン について
現在ページのQRコードを生成するため、現在ページのURLを取得する以下のPHPコードを使います。 そのため、Wordpressブログ内ではPHPを直接扱えないのでショートコードを使う必要があります。
参考記事：phpで現在のURLを取得する方法！
PHP (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ;
function.phpに書いた関数でショートコードを作ることもできますが、このブログでも何回か紹介していますPost Snippetsプラグインを使えば簡単にQRコード設置用のショートコードが作れます。
インストールや使い方は以下のブログカードを参考にしてください。
今回の事例紹介は、Post Snippetsの管理画面（下の画面）で、項目①〜⑥についての説明になります。
Post SnippetsによるQRコード設置用ショートコードの作成
Post Snippets（以下PSに略します）の管理画面の①〜⑥に対して必要事項を記述し「QRコード設置用ショートコード」を作成します。
PS-（１）
ショートコードの名前です。 今回は、QRコード にしました。
PS-（２）
以下のPHPコードを記述します。
QRコードが生成できるGoogle Chart APIから「QR code generator」API への変更に伴い、PHPコード５行目を変更しました。(2023/1/15)- ２行目コードは、現在のWebページURLを取得して、変数urlに代入しています。
- ５行目コードは、QR code generator
Google Chart APIのQRコード作成機能を呼び出すコードで、変数urlで現在ページを指定し、img要素を使ってQRコードを出力します。 QRコードのサイズは、size=136x136（136px ✕ 136px）で指定します。 QRコードのサイズを変更する場合は、この数字（px）を変更します。chldオプションを付加すれば、誤り訂正レベルと生成されるQRコードの余白を指定できます。（例：chld=L|0 ）
123456// 現在ページのURL取得$url=(empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ;// QRコードの出力echo '<img src="https://api.qrserver.com/v1/create-qr-code/?data=' . $url . '&size=136x136" alt="QR code" />';PS-（３）
無記入です。
PS-（４）
ショートコードにレ点を入れます。
PS-（５）
PHP Codeにレ点を入れます。
PS-（６）
ショートコードの説明を記述します。 例：現在ページのURLをQRコード化して配置する
以上の記述が終わったら Save ボタンを押して保存します。
WordPressのビジュアルエディタに移って、PostSnippetsボタンから、QRコードを選択すれば、ショートコードの[QRコード]が挿入され、プレビューすればQRコードが表示されると思います。
ポイント
例えば、この行の下にショートコードの[QRコード]を記述すれば、このブログ記事（URL）のQRコードが表示されます。
実際のQRコードの設置場所
このページの最下段（フッター部分）にQRコードのショートコードを設置しています。（下記 注意ポイント参照）
当ブログでは、Wordpressテーマの「AFFINGER5」を使っています。 外観 ＞ ウィジェット から、「フッター右用ウィジェット（２列目）」にカスタムHTMLで先程作成したショートコードの[QRコード]を記述しました。 これにより、固定ページや投稿ページの全てのフッター部分に夫々のページURLに対応したQRコードが表示されるようになります。
注意ポイント
全ページのフッター部分にQRコードを設置するとページ速度が低下するようです。 このため、当ブログでは設置に必要なページを除きQRコードの設置を止めました。（2020/1/24 追記・訂正）
対応策 (2022/11/27追記)
【 ページ速度の低下対策 】
Google Chart APIを極力セーブして使用することにしました。 具体的には、フッターにQRコードを表示したいページを指定してGoogle Chart APIを使い、それ以外のページはGoogle Chart APIの替わりに、Home Page（Top Page）アドレスを示すQRコード画像.pngを表示させる様にしました。
このページ速度低下策（下記 PS-（２）コード参照）で、フッターにQRコードの配置を復活させました。(2022/11/27)
前記 PS-（２）のコードを下の様に書き換えることで実現できます。
QRコードが生成できるGoogle Chart APIから「QR code generator」API への変更に伴い、12行目を変更しました。(2023/1/15)|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$inputID=[18843,13979,611,9921,2899]; // QRコードを表示にしたいページIDをカンマ区切りで指定 $postid = get_the_ID(); // 現在表示されているページIDを取得 // 現在ページのURL取得 $url=(empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ; //メインルーチン if (in_array($postid , $inputID ,true )){ //現在ページが、QRコードを表示にしたいページかの判別 echo '<div class="center" style="margin-bottom:0px;"> <p style="color:white; margin-bottom:0px;" >This Page QR</p><img src="https://api.qrserver.com/v1/create-qr-code/?data=' . $url . '&size=136x136" alt="QR code" /></div>'; } else{ //QRコードを表示にしたいページ以外は、Top PageのアドレスQRコード画像を表示させる。 echo '<div class="center" style="margin-bottom:0px;"> <p style="color:white; margin-bottom:0px;" >Home Page QR</p><img src="QRコード画像.png" alt="" width="136" height="136" /></div>'; } |
ちょっと一息
記憶によれば、Q Rコード（２次元バーコード）は日本人の発明であったと思います。
Wikipediaで調べたら、デンソーでトヨタ看板方式で使うために発明したとのこと。 特許権者のデンソーウェーブは、まずはQRコードが普及するよう敢えて特許をオープンにしたことで、原則的に誰でも使うことができます。 もはや世界標準になったQRコードは日本の誇るべき発明の一つと思います。
今回のQRコード生成は、Google APIを利用させてもらってしていますが、元を正せば日本の発明であり、大手を振ってこのQRコード・ジェネレーターを使わせて頂こうと思います。 なお、英数 (US-ASCII)では、 最大4,296文字まで読み込みができるそうです。
参照
QRコード（ウィキペディア）
https://ja.m.wikipedia.org/wiki/QRコード
以上、「ブログページにQRコードを簡単に設置する方法」でした。 QRコードは簡単にブログページを受け渡すことができますので、この記事を参考にして頂ければと思います。