【プラグイン/画像不要】QRコードを動的生成してWordPressで簡単に表示する方法

この記事は、だいたい 5 分ぐらいで読めます。多分。

ツクモ
ツクモ

どうも、「ゆとれば。」管理人のツクモ(@yutoreba)です。

最近はQRコード決済って言葉をよく聞くようになりましたよね。

ブログ内にQRコードを埋め込みたい……ってこと、たまーにあると思います。

もちろん、QRコードの画像を作るサイトもありますし、同様のWordpressプラグインもあるのですが、たくさんのQRコードを作るとなると結構な手間ですし、URLリンクの差し替えとなると=画像の貼り直しとなったり、結構手間なんですよね。

ということでこの記事では、QRコードを動的に生成して、簡単にWordPressに埋め込む方法を解説しています。

この記事を読むと分かること

・プラグイン不要のQRコードの動的生成

・動的に生成したWordPressでの表示方法

・QRコードのカスタマイズ方法&内容に日本語を指定する方法

スポンサーリンク

APIを使ってQRコードを動的生成する

海外のQRコードを生成するWEBツール「QR Code Generator」がAPI(QR Code API)を用意しており、それを利用してQRコード画像を動的に生成することができます。APIを叩くと言っても、難しい操作は全くありません。

https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=Yutoreba.com
size=150×150QRコードの画像サイズ ※この場合は150x150px
data=Yutoreba.comQRコードのデータ(文字列やURLなど)

ちょっと長い、けど一見普通に見えるこのURLにアクセスするだけです。実際にこのURLをコピーしてアドレスバーに貼付け、アクセスしていただくとQRコードが表示されるかと思います。

勿論、あなたのサイトのURLなどにする場合は、「data=Yutoreba.com」のイコールより右側(Yutoreba.comの部分)を編集するだけです。これで、QRコードの動的生成は完璧ですね。

動的生成したQRコードをWordPressに貼り付けるには?

察しの良い方は既にお気付きだと思いますが、この画像とは思えないURL、画像として表示することができます。つまり、imgタグとしてHTMLでサイトやブログ記事に表示することも可能です。

<img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=Yutoreba.com" alt="ゆとればQRコード">

WordPressなら、もっと簡単に表示させることができます。つまり、Gutenbergで設置するならこうです。

画像ブロックを追加
画像ブロックを追加
URLに先述のQRコードURLを指定
URL欄にQRコード生成URL↓を指定
https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=Yutoreba.com

試しに表示させてみるとこんな感じです。

試しに表示させてみるとこんな感じ
300px四方だと大きすぎた……。

この方法だと、メリットがかなり大きいです。

  • 画像をわざわざ用意する必要がない
  • 画像サイズやQRコードのデータ(文字列やURL)の差し替えが用意
  • (WordPressなら)QRコードのセンタリングやテキストの回り込みも容易

デメリットを挙げるなら、このAPIサービスが終了した時に今までに設置したQRコードが全てチーンしてしまうということでしょうか……。

一応、同様に「GoogleChartsAPI」を使用する方法もあります。サンプルはこちら。

https://chart.apis.google.com/chart?cht=qr&chs=300×300&chl=Yutoreba.com

……はい、ほとんど一緒ですね。ただ、このGoogleChartsAPIを使用する方法は、結構以前から非推奨とされているようですので、今回はQR Code APIによる方法をご紹介いたしました。

その他補足やQRコードのカスタマイズ方法について。

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

上述のサイズや内容の他にも、QRコードのカラーや背景色などを変更することが可能です(QR Code APIでのカスタマイズの指定方法)

dataQRコードの内容となるデータ
sizeQRコードのサイズ(px)、QRコードは正方形なのでxを挟む左右は同じ値
format QRコードの画像の種類、jpg、png、gif、svgなどが指定可能
colorQRコードのカラー、RGB(255-255-255)、16進数(FFFFFF)などで指定可能
bgcolorQRコードの背景カラー、カラー選択方法については上記colorと同様

(サンプル)

https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=Yutoreba.com&color=0984e3&bgcolor=FFEAA7&format=svg
QRコードのカスタマイズのサンプル

日本語を内容として指定する場合は、変換が必要

日本語の文字列を内容としてしたい場合や、URLの指定でURL内に日本語が含まれている場合などは、URLエンコードを行ってから指定する必要があります。

URLエンコードに関しては、こちらのサイト様のようなエンコードツールを使うと便利です。

(サンプル)

https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=%E3%82%86%E3%81%A8%E3%82%8C%E3%81%B0
日本語のQRコードのサンプル
ゆとれば

※QR Code APIの場合、文字コードはデフォルトでUTF-8となっています。

最後に

この記事では、QR Code APIを使用し、QRコードを動的に生成、WordPressの記事内に表示する方法を解説しました。 画像よりもラクーにQRコードを表示できるのでおすすめの方法です。

個人的には、ベクター画像のSVG形式で出力できるのは結構大きいかと。レスポンシブ対応の一環で拡大縮小させたとしても、画像が劣化しませんからね。

QRコードをブログやサイトに表示させたくなった時は、是非お試しください。

この記事を書いた人
ツクモ

ゆとり世代は失敗作扱いされるけど、むしろ皆ゆとってしまえば良いと思っている目付きが悪いメガネ。

夢は宝くじを当てるか、空から降ってきたお金でネオニートになること。

……そうだね、ゆとり世代じゃなくても失敗作だね。

ツクモをフォローする
サイト構築系
スポンサーリンク
スポンサーリンク
ツクモをフォローする
スポンサーリンク
ゆとれば。

コメント