WordPressでQRコードをページ毎にプラグインを使わず表示する方法

プラグインを利用すると簡単にQRコードをサイトに表示することができますが、プラグインを使わずにQRコードをサイトに表示する方法について書きます。

WordPressでQRコードをページ毎に作成する方法

WordPressでQRコードをページ毎に作成する方法

QRコードプラグインの配置

QRコード生成に使うjquery-qrcodeをダウンロードして解凍します。

解凍したファイルにある「jquery.qrcode.min.js」ファイルをWordPressで使用しているテンプレートファイルの任意の場所に配置します。（例：Twenty Twelveの場合、「wp-content\themes\twentytwelve\js\jquery.qrcode.min.js」に配置）

テンプレートの編集

Twenty Twelveを使用していることを念頭に説明していきます（他のテンプレートでも同じ要領です）。

１．functions.phpファイルを開き、twentytwelve_scripts_styles関数に下のコードを追加します。

//QRcode
wp_enqueue_script( 'qrcodejs', get_template_directory_uri() . '/js/jquery.qrcode.min.js', array('jquery'));

２．header.phpファイルを開き、<?php wp_head(); ?>の下にQRコード生成コードを追加します。

<script>
jQuery(function() {
	jQuery('#qrcode').qrcode({width:100, height:100, text:location.href});
});
</script>

QRコードの表示

サイトでQRコードを表示したい箇所に下のコードを追加すると表示されます。

<div id="qrcode"></div>

サイドバーに表示する例として、ウィジェットのテキストにdivタグを入力すると表示されます。