[Đ]【WordPress】一発コピペ!ページURLを自動取得しQRコードを生成、表示するたった一行のコード!任意のURLも可!
「自動」大好き、まつだい(@matsudai23)です!w
久々の更新なので、ブログのカスタマイズに便利な『自動ワザ』を一つ紹介しようかと思います。
皆さん「スマホ」や「携帯電話(ガラケー)」ってお持ちですか?
もう一つ質問ですが、目の前の「PC」で見てるWebページを、スマホやガラケーで開きたいと思ったことは無いですか??オレは有ります!
むしろ結構頻繁に有りますww
そんな時どうしてますか?URLを手打ちしてますか?wそれは面倒ですねww
手打ちは無くても、スマホで改めてGoogle等の検索エンジンで検索して目的のWebページを表示させるという人も少なくはないと思います。
そんな時に、PCのWebページに『QRコード』が表示されてたら便利じゃないですか?便利ですよね!そうですよね!!
しかし…、ブログ等の記事なんて何十、何百、何千ページも書いてるブロガーさんも多いじゃないですか…www
その各ページのURLを調べて~、QRコードを作って~、各ページに貼っていく作業を何百回、何千回も繰り返す…。
考えただけでもハゲそうですwww
前置きが長くなりましたが、これからご紹介するコードを一行コピペすれば、訪問者が見てるページのURLを自動で取得して、自動でQRコードを生成して表示することができるので、是非試してみて下さい。
また、もちろん任意のURLのQRコードも生成、表示することができるので、合わせてご紹介します。
ページのURLを自動取得しQRコードを生成、表示するたった一行のコード!
まず、こちらがそのコードです!↓
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コードを生成、表示する方法
こっちはもっと簡単です。
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を入れたりして使えますよね!
ちょっと注意があります!
先ほど「ヘッダーやサイドカラム等、トップページを含む複数のページに表示される場所に貼る場合には注意&工夫が必要です!」と書かせていただきました。
その理由、注意点と対策を解説しておきます。
まず先ほどのコードをもう一度御覧ください。
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をカスタマイズしている人はご存知かと思いますが、このコードの中のこの部分
1 2 |
<?php the_permalink(); ?> <?php the_title(); ?> |
↑の二箇所は、トップページのURL取得及びタイトル取得には対応していません。
トップページにこのコードを貼ると、最新の投稿ページのURLを取得してしまう仕様となります。
よって、ヘッダーやサイドカラムにこのコードを貼った場合、各投稿ページでは正しいURLを自動取得してくれますが、トップページでは最新の投稿ページのURL、つまり正しいURLを取得してくれないというちょっとおかしな仕様になってしまうんです…(^_^;)
なので、ヘッダーやサイドカラム等のトップページや各投稿ページに共通した部分にQRコードを表示させたい場合は、下記のように記述してください。
1 2 3 4 5 6 |
<?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 } ?> |
コードがちょっと長くなりましたが、構造は単純です。あえて日本語で言うなら…
「今見てるページがトップページならブログURLのQRコード作ってalt属性にサイト名設定して表示させなさい。その他のページならそのページのURLのQRコード作ってalt属性に投稿記事タイトルを設定して表示しなさい。」
っといったところでしょうか?ww
皆さんの環境に合わせて使い分けてみて下さい。
さいごに
ちなみにオレは、画面左にスクロール追尾しているSNSボタン群のとこにQRコードを表示させてみました♪
この記事をスマホで読んでる人たちには見えてませんwwごめんなさいwww
【2015/2/17追記】
2015年2月17日現在、当サイトのスクロール追尾型SNSボタンは非表示にしてます。ご了承ください。
今回の目的がPCで見てるページをスマホで開く事だったので、読み込みの負担も考えてスマホにはQRコードは表示しなくていいと判断しましたw
※見たい人はPCか、スマホのPC表示で見てね(Chrome等)☆
それでは今回はちょっと文章は長くなってしまいましたが、カスタマイズとしてはほとんどコピペなので、一回読んでわからなかった人は何度か読めば必ず出来ると思いますので頑張ってやってみてください!
ではまた次の記事まで、さよならバイバイ~(/・ω・)/
まつだい(@matsudai23)でした。
