WordPressでQRコードを作成する方法！プラグインとコードで簡単実装

Web

「WordPressサイトにQRコードを表示したいけど、どうやって作ればいいの？」

最近では、店舗のWebサイトやイベントページ、名刺代わりのプロフィールページなど、さまざまな場面でQRコードが活用されています。スマートフォンで簡単にアクセスできるQRコードは、ユーザーにとって非常に便利ですよね。

WordPressなら、プラグインを使って簡単にQRコードを生成できます。また、少しコードを書けば、より柔軟にカスタマイズすることも可能なんです。

この記事では、WordPressでQRコードを作成するさまざまな方法を、初心者にも分かりやすく解説します。プラグインを使った簡単な方法から、コードを使った高度な実装まで、あなたに合った方法が必ず見つかるはずです。

スポンサーリンク
  1. QRコードとは？基本を理解しよう
    1. QRコードの仕組み
    2. QRコードに格納できる情報
    3. QRコードのメリット
  2. 【最も簡単】プラグインでQRコードを作成する
    1. おすすめプラグイン1：QR Code Generator
    2. おすすめプラグイン2：WP QR Code
    3. おすすめプラグイン3：Simple QR Code Generator
    4. おすすめプラグイン4：QR Code & Barcode
  3. ウィジェットでQRコードを表示する
    1. ウィジェットの設定方法
    2. HTMLウィジェットで挿入する場合
  4. コードでQRコードを生成する方法
    1. Google Chart APIを使う方法
    2. 外部APIを使う方法
    3. PHPライブラリを使う方法
  5. ショートコードを自作する
    1. functions.phpに追加するコード
    2. ショートコードの使い方
  6. QRコードのカスタマイズ方法
    1. サイズの調整
    2. 色のカスタマイズ
    3. ロゴの埋め込み
    4. CSSでスタイリング
  7. QRコードの実用的な使い方
    1. 使い方1：投稿ページにQRコードを自動表示
    2. 使い方2：イベントページに会場へのQRコード
    3. 使い方3：Wi-Fi接続情報のQRコード
    4. 使い方4：名刺代わりのプロフィールQRコード
    5. 使い方5：メールアドレスのQRコード
  8. QRコード作成時の注意点
    1. 注意点1：プライバシーとセキュリティ
    2. 注意点2：URLの変更に注意
    3. 注意点3：読み取りテストを必ず実行
    4. 注意点4：サイズとコントラスト
    5. 注意点5：SSL証明書の確認
  9. よくある質問と回答
    1. QRコードは無料で作成できる？
    2. QRコードの有効期限はある？
    3. 動的にURLが変わる場合はどうする？
    4. QRコードはSEOに影響する？
    5. カスタム投稿タイプでも使える？
  10. まとめ：目的に応じた方法でQRコードを活用しよう

QRコードとは？基本を理解しよう

まず、QRコードの基本について簡単に説明しておきましょう。

QRコードの仕組み

QRコード（Quick Response Code）は、二次元バーコードの一種です。白と黒の正方形のパターンで情報を表現し、スマートフォンのカメラで読み取ることができます。

通常のバーコードは横方向にしか情報を持ちませんが、QRコードは縦横両方向に情報を持つため、より多くのデータを格納できるんです。

QRコードに格納できる情報

QRコードには、以下のような情報を格納できます。

  • WebサイトのURL
  • メールアドレス
  • 電話番号
  • テキストメッセージ
  • Wi-Fi接続情報
  • 位置情報（地図）
  • SNSのプロフィールURL

WordPressサイトでは、主にページのURLを格納することが多いでしょう。

QRコードのメリット

QRコードを使う主なメリットは、以下の通りです。

  • 長いURLを入力する手間が省ける
  • 印刷物からデジタルコンテンツへスムーズに誘導できる
  • スマートフォンで簡単にアクセスできる
  • オフラインとオンラインをつなぐ架け橋になる

特に、チラシやポスター、名刺などの紙媒体と組み合わせると効果的ですね。

【最も簡単】プラグインでQRコードを作成する

初心者の方には、プラグインを使った方法が最もおすすめです。コードを書く必要がなく、設定画面から簡単に作成できますよ。

おすすめプラグイン1：QR Code Generator

QR Code Generatorは、シンプルで使いやすいQRコード生成プラグインです。

インストール方法

ステップ1：プラグインを検索

WordPress管理画面にログインして、「プラグイン」→「新規プラグインを追加」を選択します。

検索欄に「QR Code Generator」と入力してください。

ステップ2：インストールと有効化

検索結果に表示された「QR Code Generator」の「今すぐインストール」をクリック。インストールが完了したら、「有効化」をクリックしましょう。

基本的な使い方

投稿・固定ページに挿入する場合

  1. 投稿または固定ページの編集画面を開く
  2. ブロックエディタの「+」ボタンをクリック
  3. 「QR Code」ブロックを検索して追加
  4. 設定パネルでQRコードの内容（URL）を入力
  5. サイズや色をカスタマイズ
  6. 保存して公開

これだけで、ページにQRコードが表示されます。

ショートコードで挿入する場合

テキストエディタやクラシックエディタを使っている方は、ショートコードも便利です。

[qrcode]https://example.com[/qrcode]

このように書くだけで、指定したURLのQRコードが生成されますよ。

おすすめプラグイン2：WP QR Code

WP QR Codeも人気の高いQRコード生成プラグインです。より多くのカスタマイズオプションがあります。

主な機能

  • QRコードのサイズ調整
  • 色のカスタマイズ（前景色・背景色）
  • エラー訂正レベルの設定
  • 画像形式の選択（PNG、SVG）
  • ロゴの埋め込み（Pro版）

使い方

インストール・有効化後、ウィジェットまたはショートコードで使用できます。

[wpqr-code url="https://example.com" size="200" color="#000000" bgcolor="#ffffff"]

パラメータを調整することで、見た目をカスタマイズできます。

おすすめプラグイン3：Simple QR Code Generator

Simple QR Code Generatorは、その名の通りシンプルで軽量なプラグインです。

特徴

  • 動作が軽快
  • 必要最小限の機能に絞られている
  • 初心者に優しい設定画面

ショートコード例

[simple-qr-code content="https://example.com"]

パラメータでサイズを指定することもできます。

[simple-qr-code content="https://example.com" size="300"]

おすすめプラグイン4：QR Code & Barcode

QR Code & Barcodeは、QRコードだけでなく、通常のバーコードも生成できる多機能プラグインです。

便利な機能

  • 複数のコードタイプに対応
  • 自動生成機能（投稿ごとにQRコードを自動作成）
  • ダウンロード機能
  • 一括生成機能

ECサイトや在庫管理にも使えますね。

ウィジェットでQRコードを表示する

サイドバーやフッターにQRコードを表示したい場合は、ウィジェット機能を使いましょう。

ウィジェットの設定方法

ステップ1：ウィジェット画面を開く

「外観」→「ウィジェット」を選択します。

ステップ2：QRコードウィジェットを追加

使用しているプラグインによっては、専用のウィジェットが用意されています。「QR Code」や「QRコード」という名前のウィジェットを探して、表示したいエリアにドラッグします。

ステップ3：設定を行う

ウィジェットの設定画面で、以下の項目を設定してください。

  • タイトル（例：「スマホでアクセス」）
  • QRコードの内容（URL）
  • サイズ
  • 説明テキスト

ステップ4：保存

「保存」ボタンをクリックして完了です。

HTMLウィジェットで挿入する場合

プラグインに専用ウィジェットがない場合は、「カスタムHTML」ウィジェットにショートコードを貼り付ける方法もあります。

<div class="qr-code-widget">
    <h3>スマホでアクセス</h3>

<p>スマホでQRコードを読み取ってください</p> </div>

コードでQRコードを生成する方法

プラグインを使わず、自分でコードを書いて実装したい方向けの方法です。

Google Chart APIを使う方法

Google Chart APIは、URLにパラメータを指定するだけでQRコードの画像を生成できる便利なサービスです。

基本的な使い方

テーマのテンプレートファイル（single.phpやpage.phpなど）に、以下のようなコードを追加します。

<?php
$url = get_permalink(); // 現在のページのURL
$qr_size = '300x300'; // QRコードのサイズ
$qr_api = 'https://chart.googleapis.com/chart?chs=' . $qr_size . '&cht=qr&chl=' . urlencode( $url );
?>

<div class="qr-code">
    <img src="<?php echo esc_url( $qr_api ); ?>" alt="QRコード">
</div>

これで、各ページに自動的にそのページへのQRコードが表示されます。

パラメータの説明

  • chs：QRコードのサイズ（幅x高さ）
  • cht：チャートの種類（qr = QRコード）
  • chl：QRコードに格納する内容（URLなど）

外部APIを使う方法

他にも、QRコード生成APIを提供しているサービスがあります。

qr-code-generator.comのAPI

<?php
$url = get_permalink();
$qr_api = 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=' . urlencode( $url );
?>

<img src="<?php echo esc_url( $qr_api ); ?>" alt="QRコード">

このAPIは、無料で使えて高速です。

パラメータのカスタマイズ

<?php
$url = get_permalink();
$size = '300x300';
$color = '000000'; // 黒
$bgcolor = 'ffffff'; // 白
$qr_api = 'https://api.qrserver.com/v1/create-qr-code/?size=' . $size . '&data=' . urlencode( $url ) . '&color=' . $color . '&bgcolor=' . $bgcolor;
?>

PHPライブラリを使う方法

より高度な実装には、PHPライブラリの使用も検討できます。

PHPQRCodeライブラリ

このライブラリを使えば、サーバー側でQRコードを生成できます。外部APIに依存しないので、プライバシーやセキュリティ面でも安心ですね。

ただし、ライブラリのインストールやコーディングの知識が必要なので、上級者向けの方法です。

ショートコードを自作する

自分でショートコードを作れば、より柔軟にQRコードを挿入できます。

functions.phpに追加するコード

テーマのfunctions.phpファイルに、以下のコードを追加してください。

function my_qrcode_shortcode( $atts ) {
    // デフォルト値を設定
    $atts = shortcode_atts(
        array(
            'url' => get_permalink(),
            'size' => '300',
        ),
        $atts
    );

    // QRコードAPIのURL
    $qr_api = 'https://api.qrserver.com/v1/create-qr-code/?size=' . $atts['size'] . 'x' . $atts['size'] . '&data=' . urlencode( $atts['url'] );

    // HTMLを生成
    $output = '<div class="my-qrcode">';
    $output .= '<img src="' . esc_url( $qr_api ) . '" alt="QRコード" width="' . esc_attr( $atts['size'] ) . '" height="' . esc_attr( $atts['size'] ) . '">';
    $output .= '</div>';

    return $output;
}
add_shortcode( 'my_qrcode', 'my_qrcode_shortcode' );

ショートコードの使い方

投稿や固定ページで、以下のように使えます。

現在のページのQRコードを表示

[my_qrcode]

特定のURLのQRコードを表示

[my_qrcode url="https://example.com"]

サイズを指定

[my_qrcode url="https://example.com" size="400"]

この方法なら、自分好みにカスタマイズできますよ。

QRコードのカスタマイズ方法

QRコードの見た目をカスタマイズして、サイトのデザインに合わせましょう。

サイズの調整

QRコードが小さすぎると読み取りにくくなります。印刷物に使う場合は特に注意が必要です。

推奨サイズ

  • Web表示：200px〜300px
  • 印刷物：最低でも2cm×2cm以上

読み取り距離にもよりますが、大きめに作っておくと安心でしょう。

色のカスタマイズ

QRコードの色は変更できますが、以下の点に注意してください。

注意点

  • 前景色（パターン）と背景色のコントラストを十分に保つ
  • 明るい色同士の組み合わせは避ける
  • 読み取りテストを必ず行う
// 黒と白（標準）
$color = '000000';
$bgcolor = 'ffffff';

// ネイビーと白
$color = '003366';
$bgcolor = 'ffffff';

ロゴの埋め込み

一部のプラグインやサービスでは、QRコードの中央にロゴを埋め込むことができます。

ただし、ロゴを大きくしすぎると読み取れなくなるので、QRコード全体の20%程度に抑えるのが安全です。

CSSでスタイリング

QRコード画像自体はカスタマイズできませんが、周囲のデザインはCSSで調整できます。

.qr-code {
    text-align: center;
    padding: 20px;
    background-color: #f5f5f5;
    border: 2px solid #ddd;
    border-radius: 10px;
    margin: 20px 0;
}

.qr-code img {
    max-width: 100%;
    height: auto;
}

.qr-code p {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

QRコードの実用的な使い方

WordPressサイトでQRコードをどう活用できるか、具体例を紹介します。

使い方1：投稿ページにQRコードを自動表示

ブログ記事の下部に、その記事へのQRコードを自動表示する方法です。

single.phpに追加

<?php if ( is_single() ) : ?>
<div class="article-qrcode">
    <h3>この記事をシェア</h3>
    <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=<?php echo urlencode( get_permalink() ); ?>" alt="記事のQRコード">
    <p>スマートフォンで読み取ってシェアできます</p>
</div>
<?php endif; ?>

使い方2：イベントページに会場へのQRコード

イベント情報ページに、会場の地図URLのQRコードを表示します。

[my_qrcode url="https://maps.google.com/?q=東京タワー"]

来場者がスマホで読み取れば、すぐにナビゲーションを開始できますね。

使い方3：Wi-Fi接続情報のQRコード

店舗サイトなどで、Wi-Fi接続情報をQRコードにすると便利です。

Wi-Fi情報の形式：

WIFI:T:WPA;S:ネットワーク名;P:パスワード;;
[my_qrcode url="WIFI:T:WPA;S:MyWiFi;P:password123;;"]

お客様が読み取れば、自動的にWi-Fiに接続できます。

使い方4：名刺代わりのプロフィールQRコード

著者プロフィールページへのQRコードを生成して、名刺に印刷すれば、紙とデジタルをつなげられます。

<?php
$author_url = get_author_posts_url( get_the_author_meta( 'ID' ) );
?>
[my_qrcode url="<?php echo $author_url; ?>" size="250"]

使い方5：メールアドレスのQRコード

問い合わせ先のメールアドレスをQRコードにすれば、ユーザーが簡単にメールを送信できます。

[my_qrcode url="mailto:info@example.com"]

QRコード作成時の注意点

QRコードを作成・使用する際の注意点をまとめておきます。

注意点1：プライバシーとセキュリティ

外部APIを使う場合、QRコードに格納する情報がそのサービスに送信されます。

機密情報や個人情報を含むURLは、外部APIではなくサーバー側で生成する方法を検討しましょう。

注意点2：URLの変更に注意

印刷物にQRコードを使う場合、後からURLを変更できません。

URLは慎重に決定し、変更の可能性がある場合は、リダイレクト設定ができる短縮URLサービスの利用も検討してください。

注意点3：読み取りテストを必ず実行

QRコードを公開する前に、必ず複数のデバイスで読み取りテストを行いましょう。

  • iPhone（標準カメラアプリ）
  • Android（標準カメラアプリまたはQRコードリーダーアプリ）
  • タブレット

異なる環境でテストすることで、問題を事前に発見できます。

注意点4：サイズとコントラスト

小さすぎるQRコードや、コントラストが低い配色では読み取れません。

特に印刷物では、解像度が十分か確認してくださいね。

注意点5：SSL証明書の確認

QRコードに格納するURLは、可能な限りHTTPS（SSL対応）にしましょう。

セキュリティの観点から、HTTPSのURLの方が信頼性が高いです。

よくある質問と回答

QRコードは無料で作成できる？

はい、ほとんどのプラグインやAPIは無料で使えます。商用利用も可能なものが多いですよ。

QRコードの有効期限はある？

QRコード自体に有効期限はありません。ただし、格納されているURLのページが削除されると、アクセスできなくなります。

動的にURLが変わる場合はどうする？

短縮URLサービスを使えば、QRコードは固定のまま、リンク先のURLを後から変更できます。Bitlyなどのサービスが便利です。

QRコードはSEOに影響する？

QRコード画像自体はSEOに直接影響しませんが、画像のalt属性を適切に設定することは良い実践です。

カスタム投稿タイプでも使える？

はい、どの投稿タイプでも使えます。get_permalink() は現在の投稿のURLを取得するので、投稿タイプに関係なく動作します。

まとめ：目的に応じた方法でQRコードを活用しよう

WordPressでQRコードを作成するさまざまな方法を紹介しました。

重要なポイントをおさらい

  • 初心者にはプラグイン「QR Code Generator」がおすすめ
  • ショートコードで簡単に挿入できる
  • コードを書けば、より柔軟にカスタマイズ可能
  • 外部APIを使えば、プラグインなしでも実装できる
  • 読み取りテストを必ず実施する
  • 印刷物に使う場合は、URLの変更に注意

QRコードは、オフラインとオンラインをつなぐ強力なツールです。店舗サイト、イベントページ、名刺、チラシなど、活用の場面は無限にあります。

この記事を参考に、あなたのWordPressサイトでもQRコードを効果的に活用してみてくださいね！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク
タイトルとURLをコピーしました