簡単！QRコードを記事ごとに自動作成してブログのサイドバーに設置する方法

※ 本サイトのコンテンツには、プロモーションが含まれている場合があります。
WordPress

「パソコンで読んでいる記事の続きをスマホで読みたい！」という読者のために、今読んでいる記事に直接アクセスできるQRコードをサイドバーに設置しておくと親切なのでは？と考えました。

しかし、記事を投稿するたびにQRコード作成サービスを使い、画像を保存して貼るのは手間がかかるのが難点です。そこで、QRコードを記事ごとに自動作成してサイドバーに設置する機能を作ってみたので共有させていただきます。

Cocoon（コクーン）などのように、WordPressのウィジェット機能に対応したテーマを使用している方であれば、簡単に実装できるはずです。

WordPressテーマのカスタマイズに慣れていない方のために、コピー＆ペーストするだけで使える簡単なコードも用意したので、ぜひ活用してください。

当記事はWordPressのテーマファイルを直接編集する作業をご紹介しています。
操作を誤るとサイトが正常に動作しなくなる可能性もあるため、編集するファイルのバックアップを保存してから作業を行ってください。

QRコードはAPIでかんたんに作成できる

QRコードの自動作成には、goQR.meというサイトが提供しているQR code APIというAPIを利用します。APIと聞いて「難しそう…」と感じる人もいるかもしれませんが、後ほどご紹介する1行のコードを記述するだけです。

aruyama
aruyama

<head>タグ内でリンクファイルを読み込んだり、JavaScriptを使ってコードを記述する必要がないから簡単に使えます！

なお、goQR.meのFAQに記載がある通り、非商用、商用問わず無料で利用可能です。

The QR codes created on goQR.me are free of charge, for both non-commercial and commercial usage, e.g. by advertising agencies. So make sure to always create your QR codes with our generator.

google翻訳: goQR.meで作成されたQRコードは、非商用、商用（広告代理店など）の両方で無料で使用できます。

QR Code Generator(goQR.me)

QR code APIでQRコードを作成する方法は、QRコードを表示させたい場所に下記のコードを記述するだけです。

HTML

<img src="https://api.qrserver.com/v1/create-qr-code/?data=●●●&size=120x120" alt="">

Check!!

「●●●」の部分には推移先のURLを、「120×120」の部分には表示したいQRコードのサイズを指定します。

「●●●」の部分を当ブログのURLに設定して記述して作成されたQRコードがこちら。

QRコードを記事ごとに自動作成してサイドバーに設置する方法

それでは前項でご紹介したQR Code APIを使い、QRコードを記事ごとに自動作成してサイドバーに設置する機能を作っていきましょう。流れは以下の通り。

  • 表示中の記事URLを出力するショートコードを作成する
  • ウィジェット機能でサイドバーにQR code APIを設置する
  • （おまけ）QRコードの見た目をアレンジする

今回はWordPressテーマのCocoon（コクーン）を使って説明しますが、ウィジェット機能に対応した他のWordPressテーマでも実装していただける内容です。

コピーして貼り付けるだけで簡単に実装できるコードも掲載しています。ぜひ試してみてください！

① 表示中の記事URLを出力するショートコードを作成する

まずは、下記コードの●●●部分（URLが入る箇所）に、記事ごとにURLを自動で出力するためのショートコードを作成します。

<img src="https://api.qrserver.com/v1/create-qr-code/?data=●●●" alt="">

といっても、テーマファイルのfunctions.phpに以下のコードを貼り付けるだけで、ショートコード作成は完了です。

PHP

// 現在表示しているページのURLを返す [current_permalink]
add_shortcode('current_permalink', 'shortcode_current_permalink');
function shortcode_current_permalink()
{
  return get_the_permalink();
}

Check!!

コードを貼り付けたらfunctions,phpを上書き保存しましょう。

ショートコードが完成したので、●●●の部分を[current_permalink]に置き換えて記述するだけで、表示中の記事に飛ぶQRコードを作成できるようになりました。

<img src="https://api.qrserver.com/v1/create-qr-code/?data[current_permalink]" alt="">

② ウィジェット機能でサイドバーにQR code APIを設置する

次はWordPressのウィジェット機能を使い、サイドバーにQRコードを表示する設定を行いましょう。先述の通り、Cocoonの管理画面を例に進めていきます。

タイムラインのタイトル
  • ラベル
    WordPressの管理画面でウィジェット設定を開く
    WordPress操作画面のスクリーンショット1

    WordPressの管理画面の【外観】の中から【ウィジェット】をクリックします。

  • ラベル
    サイドバーに【テキスト（PC用）】ウィジェットを設置する
    WordPress操作画面のスクリーンショット2

    ウィジェット設定ページを開いたら、「利用できるウィジェット」一覧の中にある、【[C]テキスト（PC用）】を、【サイドバー】または【サイドバースクロール追従】のボックスにドラッグ&ドロップします。

    【サイドバースクロール追従】を選択すると、画面を下にスクロールしても、サイドバーにQRコードが常に表示されるようになります。

  • ラベル
    QR code APIのコードを入力する
    WordPress操作画面のスクリーンショット3

    持ってきたウィジェットの【テキスト】欄に、以下のコードを貼り付けてください。【タイトル】は空欄のままでも構いませんし、お好きな文言を入力しても大丈夫です。

    HTML

    <div style="text-align: center;">
<img src="https://api.qrserver.com/v1/create-qr-code/?data=[current_permalink]&size=100x100" alt="このページのQRコード">
</div>

    入力が終わったら右下にある【保存】ボタンをクリックしましょう。

  • ラベル
    QRコードが正常に表示されていれば完了！
    WordPressの投稿画面のスクリーンショット

    「ウィジェットを保存したら、記事ページを開き、QRコードが正しく表示されているか確認しましょう。その後、スマホやタブレットを使ってQRコードを実際に読み込み、表示中のページに推移するかも必ずチェックしてください。

③ （おまけ）QRコードの見た目をカスタマイズする

最後に、QR Code APIのパラメーターを使ってQRコードのデザインをカスタマイズする方法を紹介します。前項の②-3で使用したコードに少し手を加えるだけで簡単に試せるので、気に入ったカスタムがあれば試してみてください。

出力するサイズを変更

src=""の末尾に&size=パラメーターを追記することで、QRコードのサイズをpx（ピクセル）指定できます。

  • 入力例（150px✕150px）: &size=150x150

HTML

<div style="text-align: center;">
<img src="https://api.qrserver.com/v1/create-qr-code/?data=[current_permalink]&size=150x150" alt="サンプルのQRコード1">
</div>

背景色を変更

src=""の末尾に&bgcolor=パラメーターを追記することで、QRコードの背景色を設定できます。色の指定には、HEX値とRGB値が使用できます。

  • Hex入力例（赤）: &bgcolor=FF0000
  • RGB入力例（赤）: &bgcolor=255-0-0

HTML

<div style="text-align: center;">
<img src="https://api.qrserver.com/v1/create-qr-code/?data=[current_permalink]&size=150x150&bgcolor=233-184-115" alt="サンプルのQRコード2">
</div>

モジュールの色を変更

src=""の末尾に&color=パラメーターを追記することで、QRコードの模様の色を設定できます。色の指定には、HEX値とRGB値が使用できます。

  • Hex入力例（赤）: &color=FF0000
  • RGB入力例（赤）: &color=255-0-0

HTML

<div style="text-align: center;">
<img src="https://api.qrserver.com/v1/create-qr-code/?data=[current_permalink]&size=150x150&color=02706a" alt="サンプルのQRコード3">
</div>

マージンを変更

src=""の末尾に&qzone=パラメーターを追記することで、QRコードの周りに背景と同じ色の余白（クワイエットゾーン）を設定できます。

この設定は周囲にQRコードの読み取りの邪魔になるような要素がある場合に有効です。

qrzoneの値を1に設定すると、QRコードの周囲にモジュールと同じ太さの余白が生成されます。なお、QRコード規格では、周囲の余白を4モジュール幅にすることが推奨されています。

  • 入力例(推奨設定4）: &qzone=4

HTML

<div style="text-align: center;">
<img src="https://api.qrserver.com/v1/create-qr-code/?data=[current_permalink]&size=150x150&bgcolor=241-244-243&qzone=4" alt="サンプルのQRコード4">
</div>

パラメータは自由に組み合わせできる

ここまでご紹介したパラメーターは組み合わせて使用することができます。色々なアレンジを試しながら、あなたのブログにぴったりのQRコードをデザインしてみるのも楽しそうですね！

HTML

<div style="text-align: center;">
<img src="https://api.qrserver.com/v1/create-qr-code/?data=[current_permalink]&size=150x150&color=02706a&bgcolor=241-244-243&qzone=4" alt="サンプルのQRコード5">
</div>

QRコードを記事ごとに自動作成してブログのサイドバーに設置する方法まとめ

本記事では、QRコードを記事ごとに自動作成してブログのサイドバーに設置する方法をご紹介しました。

  • QRコードはQR code APIを活用すれば簡単に作成できる
  • 使用しているWordPressテーマがウィジェット機能に対応していれば実装できる
  • QR code APIのパラメーターでQRコードの見た目のカスタマイズも可能

WordPressテーマのカスタマイズに慣れていない方でも気軽に挑戦できる機能だと思います。Webデザインに詳しい方は、自由にスタイルを調整するなどして活用して貰えたら幸いです。

余談(サイドバーにQRコードを設置したきっかけ）

LANカードの取り付け方ガイドという記事を執筆した際に、本文内で「まずはパソコンの電源を切りましょう」と書いたのですが、その時ふと「この記事をパソコンで読んでいる人がいたら困るじゃん！」と思ったのがきっかけです。

今どきのブラウザにはデバイス間で表示中のページを簡単に共有できる便利な機能があるため、もしかしたら需要はそれほど無いかな？と思いながら、意外な需要があれば面白いと思い、2025年7月現在は当ブログでQRコードを表示させています。

ここまで読んでくれた方の中で、もし「こんな需要もあるよ！」といったものがありましたら、ぜひこのブログのコメントやSNSで教えていただけたら嬉しいです。

それでは今回はこの辺で失礼します！

Comments この記事に投稿されたコメント

タイトルとURLをコピーしました