ブログページに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コードを記述します。

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


  • PS-③

    無記入です。


  • PS-④

    ショートコードにレ点を入れます。


  • PS-⑤

    PHP Codeにレ点を入れます。


  • PS-⑥

    ショートコードの説明を記述します。 例:現在ページのURLをQRコード化して配置する


以上の記述が終わったら Save ボタンを押して保存します。 

WordPressのビジュアルエディタに移って、PostSnippetsボタンから、QRコードを選択すれば、ショートコードの【QRコード】が挿入され、プレビューすればQRコードが表示されると思います。

ポイント

例えば、この行の下にショートコードの【QRコード】(括弧は半角)を設置すれば、このブログ記事(URL)のQRコードが表示されます。

blank

 

実際のQRコードの設置場所

このページの最下段(フッター部分)にQRコードのショートコードを設置しています。(下記 注意ポイント参照)

当ブログでは、Wordpressテーマの「AFFINGER5」を使っています。 外観 > ウィジェット から、「フッター右用ウィジェット(2列目)」にカスタムHTMLで先程作成したショートコードの【QRコード】を記述しました。 これにより、固定ページや投稿ページの全てのフッター部分に夫々のページURLに対応したQRコードが表示されるようになります。

注意ポイント

全ページのフッター部分にQRコードを設置するとページ速度が低下するようです。 このため、当ブログでは設置に必要なページを除きQRコードの設置を止めました。(2020/1/24 追記・訂正)

 

ちょっと一息

記憶によれば、Q Rコード(2次元バーコード)は日本人の発明であったと思います。 

Wikipediaで調べたら、デンソーでトヨタ看板方式で使うために発明したとのこと。 特許権者のデンソーウェーブは、まずはQRコードが普及するよう敢えて特許をオープンにしたことで、原則的に誰でも使うことができます。 もはや世界標準になったQRコードは日本の誇るべき発明の一つと思います。 

今回のQRコード生成は、Google APIを利用させてもらってしていますが、元を正せば日本の発明であり、大手を振ってこのQRコード・ジェネレーターを使わせて頂こうと思います。 なお、英数 (US-ASCII)では、 最大4,296文字まで読み込みができるそうです。

参照

QRコード(ウィキペディア)
https://ja.m.wikipedia.org/wiki/QRコード

 

以上、「ブログページにQRコードを簡単に設置する方法」でした。 QRコードは簡単にブログページを受け渡すことができますので、この記事を参考にして頂ければと思います。

 

スポンサーリンク

 

関連記事(一部広告含む)

 

 

Blog オススメ記事(コンテンツ選択)

ボタンを押してコンテンツ選択

レコード音質とハイレゾ化

CD音質と圧縮音源 AAC等

WebデザインやiPhone・PCなど

ツールと閑話ブログ

スポンサーリンク

© 2021 ハイレコのブログ Powered by AFFINGER5