WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
How to display the URL of the page you are browsing with a QR code (without plugin)

閲覧中のページのURLをQRコードで表示する方法(プラグインなし)

公開日: 使い方など

パソコンで興味のあるページを見つけて、スマホでも見たいと思ったとき、どのようにされていますか?URLを手打ちで入力するなんてことしませんよね?ソーシャルブックマークに登録しておく?はたまた自分宛にメールでURLを送っておく?共有もかねてSNSでつぶやいとく?どれもちょっと面倒な気がしますよね?私は旧人類?なので現在スマホを持っていませんから何とも言えないですが、かつて持っていた頃はメールで送る手法をとってました。

もっと簡単にスマホでアクセスできたらいいのに・・・そう思いませんか?逆に作り手からしたら、もっと簡単にモバイルでアクセスできたらもっと見てくれる人増えるんじゃないか?可能性が広がるなら、利便性が広がるなら対策しておきたいところです。

そこで今回は、Google Chart APIという無料のAPIを利用してQRコードを表示させる方法を紹介します。とはいえWordPressの機能追加でお約束のプラグインの紹介ではなく、簡単なコードをテーマ内へ追加するだけの簡単な方法を紹介していきます。

また、「QRコードだけ表示されてもそれを使ってどう案内したらいいのかわからない」という方のために、簡単な案内文を含めて表示させる方法を含めて紹介しますので、初心者の方でもすぐに実現できると思います。

まずはどんな表示ができるの?が気になるところでしょうから、今回のカスタマイズを行った場合にどんなことができるのかを画像で紹介しておきますね。(QRコードを実際に読んでいただくと、当サイトのトップページのURLが表示されます)。

↑投稿などの本文へ挿入した場合の表示例です。サイドバーウィジェットへ挿入した場合には↓のようになります

もちろん表示される文章(文字列)は変更できますし、CSSの知識があればデザインも思いのままにできます。

いかがでしょう?これいいかも・・・と思った方は続きを読んでぜひ実装してくださいね。

QRコードを含めた案内コンテンツを作成する方法

QRコード付き案内コンテンツを表示させるには

基本となるコード自体は文末の参考サイトのものをほぼそのまま流用しています。それをカスタマイズして、すぐ使えるようにしています。

任意性を重視したいことからショートコード化させていますので、

[ha-qrcode]

というショートコードを表示したい場所へ挿入するだけで、↑の画像のようにコンテンツが表示されるようにしています。これでQRコードを表示したい投稿や固定ページのみ、コンテンツを挿入することができます。

逆に、すべての投稿や固定ページで表示されたい場合は、テーマの投稿や固定ページテンプレートへ以下のコードを挿入すればOKです。

<!--QRコード表示-->
<?php echo do_shortcode( '[ha-qrcode]' ) ?>

肝心の機能追加方法は以下の通りです(2つのファイルにコードを追加します)

動作させるためのコードをテーマのfunctions.phpへ追加する

有効化しているテーマのfunctions.phpへ以下のコードを追記します。

※テーマのfunctions.phpはサイトを動作させる上で非常に重要なファイルですので、「有効化しているテーマ?functions.php?」という方には今回のカスタマイズは危険ですので、プラグイン等を探してください。

/* [ha-qrcode]ショートコードでQRコードを示すコンテンツを表示(パソコン表示時のみ) */
// QRコード出力関数
function ha_get_qrcode_tag($atts) {
if(!wp_is_mobile()) {
extract(shortcode_atts(array(
'url' => get_permalink(),
'size' => '150',
), $atts));
// イメージタグを返す
return '
<div class="qr-container">
<img class="qrc-image" src="https://chart.googleapis.com/chart?chs=' . $size . 'x' . $size . '&cht=qr&chl=' . $url . '&choe=UTF-8 " alt="QR Code"/>
<div class="qr-content">
<h3>このページはモバイル端末でもご覧いただけます</h3>
<p>左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。</p>
</div>
</div>
';
}
}
// 呼び出しの指定
add_shortcode('ha-qrcode', 'ha_get_qrcode_tag');
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

コード中の注釈にもある通り、モバイル表示の際にこのコンテンツは必要ありませんから、コンテンツを表示させるコードに対してモバイルアクセス時には出力しない(表示させない)ようにしています。もしもスマホで見たときも表示させたい場合には4行目の記述と最後の「}」の1つを削除してください。

テーマのCSSへ追記してきれいに表示させる

テーマのfunctions.phpへ追記してワクワク気分でショートコードを挿入して表示してみると・・・何とも残念な形で表示されます。これはデザイン要素が何も適用されていないからです。上の画像のような形で表示させるには、

  • 有効化しているテーマのstyle.css
  • テーマカスタマイザーの追加CSS

のいずれかに以下のコードを挿入します。

/** QRコード表示 **/
.qr-container {
min-height: 150px;
max-height: 400px;
border: 1px solid #ddd;
border-radius: 5px;
display: block;
margin-bottom:20px;
margin-top:10px;
}
img.qrc-image {
float: left;
}
.qr-content {
margin-top: 10px;
font-size: 1em;
}
.qr-content h3 {
margin: 5px;
}

※お使いのテーマによってはCSSセレクタが被って画像のような表示にならないことがありますので、適宜修正してください。

これでもう一度ショートコードを入れたページを表示してみると・・・あれ?変わらない・・・そんな時はキャッシュのリフレッシュをしてみてください(キャッシュのリフレッシュ方法はGoogle Chromeの場合、ページを表示させた状態でctrlF5を入力します)。

きちんとQRコードを読み取ったときに、ページのURLが出力されているかの確認方法

冒頭で書いた通り、私は旧人類なのでスマホを持っておらず、表示されているQRコードが果たして正しいものなのか?を確認するすべがありません。この記事を読んでいる方でも私と同じ環境の方はきっといらっしゃると思います。

そんな方のために・・・以下のサイトではスマホなどで直接読み取ってテストしなくても、以下のサイトでQRコードのテストができます。

ページ上に表示されているQRコードを右クリックして画像をパソコンへ保存した後、上記ページへ画像をアップロードすればそのQRコードに何の文字列が含まれているかが簡単に分かるようになっています。

参考にさせていただいたサイト

基本的にショートコードでの挿入部分も含め、以下のサイトのコードを使わせていただいており、QRコード表示以外の案内部分を補足させていただいて紹介しております。

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】