Jetプラグインを解き明かす

JetEngineでWordPress内にQRコードを生成する方法【作り方6ステップ】

QRコードを作成するなんてなんかむずかしそう・・なんて思っていませんか?

JetEngineならとっても簡単にQRコードを作成することができます!

JetEngineのフィールドに入れた情報をサイトに動的に呼び出せば、どこのフィールドのどんな情報でもQRコードにすることができるんです!

サイトにQRコードを入れた後のサンプル画像

QRコード作成方法を紹介するにあたり、この記事のサンプルとしてサイトがモバイルアプリも持っているとしそのモバイルアプリにアクセスできるQRコードを JetEngineで作成しサイトに表示させるにはどうしたらいいかを以下で説明していきます。

Options Pagesに作成した『TOFUモバイルアプリ』という、アプリのURLが記載されたフィールドのデータを動的に呼び出しQRコードにしていきます。

  • JetEngineならどんな動的なテキストデータでもQRコードにすることができる。
  • QRコードをサイトに追加するには JetEngineで作成したどこかしらのフィールドにQRコードにしたいものの情報があることが必要。
  • サイトでQRコードを作成するにはJetEngineのダッシュボードのModulesにある『QR Code for Dynamic Field widget』を必ず『オン』にする。
  • QRコード作成までたったの6ステップで超簡単!
動画でも説明しています。

JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。

また、 JetEngineでQRコードを作成する方法を説明した動画もありますのでよかったらご覧くださいね!

①QR Code for Dynamic Field widgetをオンにする

JetEngineのダッシュボード/Modules・QR Code for Dynamic widgetをオンにし、SAVEをクリック

まず、JetEngineのダッシュボードの『Modules』の画面を開き以下の操作をします。

  1. 『QR Code for Dynamic Field widget』を『オン』にする。
  2. 『Save』をクリックする。

②Dynamic Fieldウィジェットを挿入

 Elementor proの編集画面サンプル・Dynamic Fieldウィジェットを挿入

『Dynamic Fields』ウィジェットをドラッグ&ドロップでQRコードを表示させたい箇所に挿入します。

Dynamic Fieldウィジェット挿入後の表示画面

すると上記のような表示画面になります。

※このサンプルではDynamic Fieldウィジェットを挿入した箇所に『サンプルページ』と表示されていますが、これはデフォルトで『Source』と『Object Field』で『投稿のタイトル』が表示されるように設定されているためです。

③Sourceを選択

『Source』の選択・リストからOptionを選択

『Source』でどこのソースから追加フィールドの情報を呼び出すかを選択します。

※このサンプルではOptions Pagesからデータを呼び出すので『Option』を選択します。

④Sourceの次項目でQRコードにしたい情報を選択

Sourceの次項目(このサンプルではOption)でサイトに表示させる追加フィールドの指定・動的にサイトに表示されたURL(追加フィールド)を表示した画面

『次項目』とは、このサンプルでいう『Option』(エディターのSourceの下の項目)に該当します。

※この項目は『Source』で何を選択するかにより表記が変わります。

『Option』でサイトに表示させたい追加フィールドの情報をリストより選択します。

※このサンプルでは『TOFUモバイルアプリ』(アプリのURLを記入したフィールド)を選択しました。

⑤Filter field outputをオンにする

Filter field outputをオンにする

『Filter field output』をオンにします。

するとエディターに『Callback』という項目が追加されます。

※デフォルトはFilter field outputはオフに設定されています。

⑥CallbackでQR Codeを選択

CallbackでQR Codeを選択

『Callback』のリストから『QR Code』を選択します。

動的にサイトに呼び出した情報がQRコードに変換された後の表示画面

するとこのように、簡単に追加フィールドから呼び出した情報がQRコードになりました。

QR Code Size

QR Code Sizeの説明・QRコードのサイズを最大にしたときの表示画面

『QR Code Size』ではQRコードのサイズをカーソルを左右にスライドさせることにより縮小・拡大することができます

※上記はQR Code Sizeの値を『400』(最大値)にしたときの表示画面です。

配置の変更(Widget Item Alignment)

Widget Items Alignmentの説明(カラム内での左/中央/右での配置変更)・配置を中央に設定したときの表示画面

QRコードのカラム内での配置の変更は、スタイルタブの中の『Widget Items Alignment』で『左 / 中央 / 右』から選択することができます。

※上記は『中央』に設定したときの表示画面です。

また、さらに詳細な配置変更を行いたい場合は高度な設定のマージンを使用してください。

QRコードを配置後のサイトプレビュー画面

ちなみにこちらはサイトプレビュー画面です。

リストに『QR Code』がないとき

Callbackのリストの中に『QR Code』がない!となっても焦らないでください。

その場合はJetEngineのダッシュボードの『QR Code for Dynamic Field widget』がきちんと『オン』になっているかを確認しましょう。

案外気づいたらここがオフになっていた、なんてことはよくある話です。

ローカル環境ではQRが表示されないこともある

ローカル環境でサイトを作成してるとQRコードをいざ表示させようとしてもサイトに表示されないこともあります。

そのときはきちんとサーバーにアップロードしている環境で試すようにしてください。

まとめ

JetEngineを使えば動的に呼び出した情報をなんでもQRコードにすることができます!

例えばモバイルアプリのダウンロードなど、サイトの画面から何かしらをモバイルでアクセスさせたいときにQRコードがあればQRを読み取るだけで目的のものにすぐにアクセスできるのでとても便利ですよね。

ご覧のとおりJetEngineがあれば簡単にQRコードを生成できます。
ぜひウェブ制作に役立ててくださいね!

JetEngineは良くも悪くも機能が多いので、使っていると ”あれ?何かおかしいな” となることがたまにあります。

何かがおかしかったら、まずJetEngineの設定を一から見直してみることをみなさんにオススメします。

設定で機能がただオンになかったから表示がされない、などと実はすごく単純な理由だったなんてことはよくある話なんですよ。

また、今回のサンプルのソースで使用したOptions Pageについてくわしく知りたい方は『【JetEngine】Options Pagesでサイト全体で共有できるデータを格納!クライアントがElementorの操作なしでサイトのテキスト変更もできる』の記事をご覧くださいね!

JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。

目次