ブログページにQRコードを簡単に設置する方法（WordPressプラグインのPostSnippets利用）

スマホ画面

例えば知り合いに自分のブログページ（Webページ）を教えたい時がありませんか？　こんな時にブログページ内にQRコードを設置していれば、知り合いのスマホでQRコードを読み取ることで、簡単に当該のブログページに遷移できます。

今回は、実例の画像（スマホ画面参照）で示します様に、ページのURLに基づくQRコードを簡単に設置する方法を紹介します。

WordPressのPost Snippetsプラグイン について

現在ページのQRコードを生成するため、現在ページのURLを取得する以下のPHPコードを使います。　そのため、Wordpressブログ内ではPHPを直接扱えないのでショートコードを使う必要があります。

 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コードを記述します。

  • ２行目コードは、現在のWebページURLを取得して、変数urlに代入しています。
  • ５行目コードは、Google Chart APIのQRコード作成機能を呼び出すURLを作り変数urlで現在ページを指定し、img要素を使ってQRコードを出力します。　QRコードのサイズは、chs=126x126（126px ✕ 126px）で指定します。　QRコードのサイズを変更する場合は、この数字（px）を変更します。

  PHPコード

  PHP

  // 現在ページのURL取得 $url=(empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ; // QRコードの出力 echo '<img src="https://chart.googleapis.com/chart?cht=qr&chs=126x126&chl=' . $url .'?authuser=0&choe=UTF-8" >';

  1 2 3 4 5

  // 現在ページのURL取得 $url=(empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ;   // QRコードの出力 echo '<img src="https://chart.googleapis.com/chart?cht=qr&chs=126x126&chl=' . $url .'?authuser=0&choe=UTF-8"  >';




• 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コードは簡単にブログページを受け渡すことができますので、この記事を参考にして頂ければと思います。