個別記事URLのQRコードはWordPressならプラグインで、MovableTypeなら「Google Chart Tools」が便利

この記事は約4分で読めます。

個別記事URLのQRコード個別のブログ記事URLを表示するQRコード画像を実装した。当ブログはMovableTypeなので「Google Chart Tools」を利用した。WordPressブログの「蕎麦の食べ歩き北陸」ではプラグインの「QR Code Tag」を利用した。QRコードを設置した理由はスマフォ対策である。会社や自宅でもパソコンでWEBサイトを見たとしても、そのページを自分のスマフォでも見たいときに簡単にそのURLに移動できる手段を提供したい。今のところもっとも手っ取り早いのがQRコードだろう。パソコンで閲覧しているWEBサイトのURLをスマフォのQRコードリーダーで撮影すれば、自分のスマフォでも閲覧ができるようにするのがよい方法だろう。

MovableTypeでは「Google Chart Tools」を使用

当ブログはMovableType6で運営している。調べてみるとプラグインよりも「Google Chart Tools」のほうが便利そうであった。「Google Chart Tools」は、本来グラフを作成するアプリであるが、QRコード画像の生成もしてくれるのでその機能を利用することにした。

準備は
https://developers.google.com/chart/
で「Get Started」をクリックして利用開始にしておくだけ。

その後は、URL情報を入れたQRコードを画像で生成してくれるので
<img src=”//chart.apis.google.com/chart?chs=150×150&cht=qr&chl=<$mt:EntryPermalink$>” width=”150″ height=”150″ alt=”” title=”” />
と画像表示のタグを挿入するだけである。

実際に記事テンプレートに設定したのは以下のとおり。

<!– QRコード生成 –>
<p style=”clear: left”>
この記事のURL「<$mt:EntryPermalink$>」をQRコードで表示<br />
<img src=”//chart.apis.google.com/chart?chs=150×150&cht=qr&chl=<$mt:EntryPermalink$>” width=”150″ height=”150″ alt=”この記事のURL「<$mt:EntryPermalink$>」をQRコードで表示「<$mt:EntryPermalink$>」” title=”この記事のURL「<$mt:EntryPermalink$>」をQRコードで表示「<$mt:EntryPermalink$>」” /><br />
パソコンで表示されたページをスマフォでも見たい場合は、このQRコードをリーダーで読むと表示されます。
</p>

今のところMovableTypeの記事テンプレートだけに設置したが、カテゴリテンプレートにも設定は可能である。

WordPressでは「QR Code Tag」というプラグインを使用

WordPressでは「QR Code Tag」というプラグインを使用した。プラグインの新規追加で「QR Code Tag」と入力してインストールするだけなので簡単である。インストールすると、「利用できるウィジェット」一覧の中に、「QR Code Tag」というウィジェットが追加されるので、これをサイドバーエリアにドラッグ&ドロップで挿入する。これで個別記事ごとにQRコードを生成してくれる。

実装したWordPressのサイトは「蕎麦食べ歩き北陸」で、このプラグインの設定に要する時間は数分程度で簡単に終わる。

ただし、このままだと生成されたQRコード画像にウィキペディア英語版のQRコード説明へのリンクがついたままになっている。このリンクを外すには、「設定」→「QR Code setinng」で表示される管理画面で「LINK」の行を変更する。「true」を「false」に変更してその右にあるURLの欄の中身を削除してから保存すればよい。

qrcodetagsettings

なお、「Ultimate TinyMCE」というプラグインにも記事のQRコードを生成する機能があるが、数日前から画像がエラーになる不具合が発生していたようだ。この表示を外したいのなら、管理オプションのページにある「投稿でQR(クイックレスポンス)コードを有効にする」いチェクが入っている場合は、チェックを外すとよい。(不具合が収束している場合は使い続けてもかまいませんが)

コメント

  1. ワードプレスの投稿画面をカスタマイズするならUltimateTinymceが便利

    ワードプレスの投稿画面上部に並んでいるボタンには「表組み」がない。ちょっとした表を作るときは<table>~</table>タグを…