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

公開日：2020(令和2)年7月1日／最終更新日： 2020(令和2)年7月1日

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

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

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

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

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

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

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

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

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

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

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

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

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

[ha-qrcode]

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

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

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

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

動作させるためのコードをテーマの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行目の記述と最後の「}」の１つを削除してください。

テーマの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」を入力します）。