スポンサーリンク
スポンサーリンク

[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】

プログラミングホームページ運用

ウェブページには、リンクをたどっていくことができるメリットがあります。

教室では、ちいラボのブログ記事を冊子印刷にしてお渡ししているのですが、紙媒体では 関連する記事を読むことができません。

そこで末尾にQRコードをつけて、スマホで簡単に元のウェブページにアクセスできるようにしました。

ポイント
  • QRコードはGoogle APIsで自動生成できる。
  • WordPressの記事URLは、<?php the_permalink(); ?>で出力できる。
  • functions.phpでは「get_the_permalink()」で文字列を取得できる。
  • ウィジェットは印刷されないので、関数で本文末尾に追加する。
スポンサーリンク

Google APIsでQRコードを生成する

QRコードを生成するには、googleのAPIが便利です。

https://chart.googleapis.com/chart?
cht=qr&
chs=200x200&
chco=000000&
chl=

chtはコードタイプ、
chsはサイズ、
chcoは色、
chlはリンクURLを指定しています。

WordPressでは、PHPコードで <?php the_permalink(); ?> と記述することで、記事のURLアドレスを取得できます。

それを組み合わせたHTMLコードがこちら。

<div class="post_qr_code"><center>
<img src="https://chart.googleapis.com/chart?cht=qr&chs=200x200&chco=000000&chl=<?php the_permalink(); ?>" height="60px" alt="<?php the_title(); ?>">
</center></div>

ウィジェットは印刷されない

さて、コードをウィジェットの「カスタムHTML」で挿入してみます。

これで、記事にQRコードを表示することはできました。

しかし、ここで問題がありました。印刷すると表示されないのです。

これは、.widget が 印刷時に「display: none」になっているからです。QRコードは、widgetの子要素になっています。親要素が非表示なので、子要素も非表示です。

フィルタ関数を追加(add_filter)

ウィジェットはいったん諦めて、functions.php にフィルタ関数を追加します。

コンテンツの最後尾にさっきのHTMLコードを追加します。

できました。

印刷画面の最後にQRコードが追加されました。

【追記】AMPページにQRコードは出力しない(2021年10月23日)

後から、フィルタ関数にAMPページの時には何もしないコードを入れました。

  if ( is_amp()) {
    return $content;
  }

どうも、AMPページでは、PHPコードが読み込めないようで、AMPエラーになっていたからです。

<amp-img>への変換がいろいろおかしくなっています。

印刷時にのみ表示するCSS(@media)

画面表示のときには、QRコードは邪魔なので非表示にします。

style.cssに追加します。

/** print_onlyクラスは、印刷時にのみ表示する*/
@media screen {
	.print_only {
		display: none;
	}
}

@media print {
	#container .print_only {
		display: block !important; 
	}
}

これで、印刷時だけQRコードは表示されます。

【追記】QRコードのURLアドレスがおかしい(2021年11月2日)

ここで、問題が発生です。

印刷したQRコードを読み込んでみると、おかしいのです。

もとのHTMLの中のphpコードでは、「the_permalink()」部分でURLを「出力」しています。

文字列として取得するために、get_the_permalink()とget_the_title()を使って書き直します。

//
// 内容の最後にQRコードを追加
//

function my_add_qrcode_after_content( $content ) {
	if ( is_amp() === true) {
    return $content;
  }
	$url = get_the_permalink();
	$title = get_the_title();
	$pattern = '
<div class="post_qr_code print_only">
QRコードを読み込むと、関連記事を確認できます。
<center>
<img src="https://chart.googleapis.com/chart?cht=qr&chs=200x200&chco=000000&chl=' . $url . '" height="60px" alt="'.$title.'">
</center></div>
  ';
  $content = $content . $pattern;
  return $content;
}
add_filter( 'the_content', 'my_add_qrcode_after_content', 999999999 );

こちらもどうぞ

ちいラボに いま できる こと ~ブログミニ冊子
この時期、特に役立つホームページ投稿をミニ冊子にして教室前に置いてみました。もちろん、ブログをスマホからご覧いただければ、それが一番なのではありますが、とはいえ、まだまだ知られていないのも事実。しかも、実は...
【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】
ウェブサイトのアクセス解析に Googleアナリティクス を使っていますが、単体では外部サイトへのクリック数を計測できません。通常ページのクリックは、Googleタグマネージャーを使って計測できましたが、AMPページ用のコンテナに...
Cocoonで注目記事ランキングのショートコードを作成した【SQLって何?からのデータベース操作】
記事のアクセスランキング(人気記事)は、上位の記事がなかなか変わらないので、あまりおもしろくありません。WordPressの記事のアクセス数の前週比のランキング(急上昇の記事)を作りたいと思って、Cocoonのコードを読んでみまし...
AMP用ページを見やすくしたりメニューをつけたり(note風スタイル第7弾)
cocoonのAMP機能で生成しているCocoonテーマのAMP設定でAMPページを生成しています。通常ページとAMPページの差デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります...
QRコードを読み込むと、関連記事を確認できます。
[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】
タイトルとURLをコピーしました