［Đ］【WordPress】一発コピペ！ページURLを自動取得しQRコードを生成、表示するたった一行のコード！任意のURLも可！

公開日： 2014/08/21 : 最終更新日：2015/02/17 WordPress, ブログカスタマイズ, ブログネタ

「自動」大好き、まつだい（@matsudai23）です！ｗ
久々の更新なので、ブログのカスタマイズに便利な『自動ワザ』を一つ紹介しようかと思います。

皆さん「スマホ」や「携帯電話（ガラケー）」ってお持ちですか？

もう一つ質問ですが、目の前の「PC」で見てるWebページを、スマホやガラケーで開きたいと思ったことは無いですか？？オレは有ります！
むしろ結構頻繁に有りますｗｗ

そんな時どうしてますか？URLを手打ちしてますか？ｗそれは面倒ですねｗｗ
手打ちは無くても、スマホで改めてGoogle等の検索エンジンで検索して目的のWebページを表示させるという人も少なくはないと思います。

そんな時に、PCのWebページに『QRコード』が表示されてたら便利じゃないですか？便利ですよね！そうですよね！！

しかし…、ブログ等の記事なんて何十、何百、何千ページも書いてるブロガーさんも多いじゃないですか…ｗｗｗ

その各ページのURLを調べて～、QRコードを作って～、各ページに貼っていく作業を何百回、何千回も繰り返す…。

考えただけでもハゲそうですｗｗｗ

前置きが長くなりましたが、これからご紹介するコードを一行コピペすれば、訪問者が見てるページのURLを自動で取得して、自動でQRコードを生成して表示することができるので、是非試してみて下さい。

また、もちろん任意のURLのQRコードも生成、表示することができるので、合わせてご紹介します。

ページのURLを自動取得しQRコードを生成、表示するたった一行のコード！

まず、こちらがそのコードです！↓

<img src="http://chart.apis.google.com/chart?chs=72x72&chld=l|0&cht=qr&chl=<?php the_permalink(); ?>" alt="<?php the_title(); ?>" />

1	<img src="http://chart.apis.google.com/chart?chs=72x72&chld=l\|0&cht=qr&chl=<?php the_permalink(); ?>" alt="<?php the_title(); ?>" />

WordPressをカスタマイズするような人が見ればだいたいわかるとは思いますが、URLの取得には「WordPressのテンプレートタグ」を、QRコードの生成には「Google Chart API」というGoogle Toolを使用してHTMLのimgタグで表示しているだけです。

【その他の仕様】
・「72×72」という部分がQRコードのサイズです。お好みで設定可。
・今回の例ではalt属性に記事のタイトルを設定しています。省略可。

Google Chart APIについては検索してみてください。

とにかくこのコードをWordPressの、QRコードを表示したい場所にコピペすれば開いているそのページのURLを含むQRコードが表示されます。

※ヘッダーやサイドカラム等、トップページを含む複数のページに表示される場所に貼る場合には注意＆工夫が必要です！後ほど説明します。

任意のURLのQRコードを生成、表示する方法

こっちはもっと簡単です。

<img src="http://chart.apis.google.com/chart?chs=72x72&chld=l|0&cht=qr&chl=★★★URL★★★" alt="★★★alt★★★" />

1	<img src="http://chart.apis.google.com/chart?chs=72x72&chld=l\|0&cht=qr&chl=★★★URL★★★" alt="★★★alt★★★" />

「★★★URL★★★」の部分に任意のURLを入れるだけです。
「★★★alt★★★」には何も入れなくても特に大きな問題は有りませんが、そのURLのジャンプ先のタイトルか、適当な説明でも書いといましょう。

例えばこんな使い方。

オレはいつもこのアプリでブログ書いてまーす♪

するぷろ for iOS （WordPress ＆ Movable Type ＆ライブドアブログ＆ FC2ブログエディタ）
カテゴリ: ソーシャルネットワーキング, 仕事効率化

スマホの人は↓のQRコードをスキャン！

↑みたいな感じでアプリのダウンロードリンクURLを入れたりして使えますよね！

ちょっと注意があります！

先ほど「ヘッダーやサイドカラム等、トップページを含む複数のページに表示される場所に貼る場合には注意＆工夫が必要です！」と書かせていただきました。
その理由、注意点と対策を解説しておきます。

まず先ほどのコードをもう一度御覧ください。

<img src="http://chart.apis.google.com/chart?chs=72x72&chld=l|0&cht=qr&chl=<?php the_permalink(); ?>" alt="<?php the_title(); ?>" />

1	<img src="http://chart.apis.google.com/chart?chs=72x72&chld=l\|0&cht=qr&chl=<?php the_permalink(); ?>" alt="<?php the_title(); ?>" />

ある程度WordPressをカスタマイズしている人はご存知かと思いますが、このコードの中のこの部分

<?php the_permalink(); ?>
<?php the_title(); ?>

1 2	<?php the_permalink(); ?> <?php the_title(); ?>

↑の二箇所は、トップページのURL取得及びタイトル取得には対応していません。

トップページにこのコードを貼ると、最新の投稿ページのURLを取得してしまう仕様となります。

よって、ヘッダーやサイドカラムにこのコードを貼った場合、各投稿ページでは正しいURLを自動取得してくれますが、トップページでは最新の投稿ページのURL、つまり正しいURLを取得してくれないというちょっとおかしな仕様になってしまうんです…(^_^;)

なので、ヘッダーやサイドカラム等のトップページや各投稿ページに共通した部分にQRコードを表示させたい場合は、下記のように記述してください。

<?php if (is_home()) { ?>
<img src="http://chart.apis.google.com/chart?chs=72x72&chld=l|0&cht=qr&chl=<?php bloginfo('url'); ?>" alt="<?php bloginfo('name'); ?>" />
<?php } else if (is_page()) { ?>
<?php } else { ?>
<img src="http://chart.apis.google.com/chart?chs=72x72&chld=l|0&cht=qr&chl=<?php the_permalink(); ?>" alt="<?php the_title(); ?>" />
<?php } ?>