「WordPressサイトにQRコードを表示したいけど、どうやって作ればいいの？」
最近では、店舗のWebサイトやイベントページ、名刺代わりのプロフィールページなど、さまざまな場面でQRコードが活用されています。スマートフォンで簡単にアクセスできるQRコードは、ユーザーにとって非常に便利ですよね。
WordPressなら、プラグインを使って簡単にQRコードを生成できます。また、少しコードを書けば、より柔軟にカスタマイズすることも可能なんです。
この記事では、WordPressで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」の「今すぐインストール」をクリック。インストールが完了したら、「有効化」をクリックしましょう。
基本的な使い方
投稿・固定ページに挿入する場合
- 投稿または固定ページの編集画面を開く
- ブロックエディタの「+」ボタンをクリック
- 「QR Code」ブロックを検索して追加
- 設定パネルでQRコードの内容（URL）を入力
- サイズや色をカスタマイズ
- 保存して公開
これだけで、ページに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コードを効果的に活用してみてくださいね！
