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

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

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

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

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

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

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

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

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

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

もちろん表示される文章(文字列)は変更できますし、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');

コード中の注釈にもある通り、モバイル表示の際にこのコンテンツは必要ありませんから、コンテンツを表示させるコードに対してモバイルアクセス時には出力しない(表示させない)ようにしています。もしもスマホで見たときも表示させたい場合には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の場合、ページを表示させた状態で「Ctrl」+「F5」を入力します)。

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

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

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

QRコード読み取り(QR Code Reader)

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

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

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

コピペするだけ!WordPressでプラグインを使うことなくQRコードを貼り付ける方法

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。

年齢:40代 趣味/園芸・ペット・卓球