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

【追記：2024-05-09】Google APIsのQRコード生成は終了したので、代替サービスを利用します。

QRコード生成APIをGoogleからqrserver.comに変更した

ついに GoogleAPIsのQRコード生成APIが終了していたので、QR code generator（goqr.me）のAPIに変更しました。 変更前: ' . $url 変更後: ' . urlencode($url) 前提: $url = get_the_permalink(); URLをURLエンコードするのがポイントです。 QRコードが表示されていない？ このサイトの記事を印刷すると、その記事のQRコードが印刷されるように設定しています。 ところが、久しぶりに印刷...

chiilabo.com

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

• ウェブページには、リンクをたどっていくことができるメリットがあります。
• 教室では、ちいラボのブログ記事を冊子印刷にしてお渡ししているのですが、紙媒体では 関連する記事を読むことができません。
• そこで末尾に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>

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

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

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

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

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

2. フィルタ関数を追加（add_filter）

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

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

できました。

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

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

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

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

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

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

3-1. 印刷時にのみ表示するCSS（@media）

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

style.cssに追加します。

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

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

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

4. 【追記】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 );

続きはこちらから。

QRコード生成APIをGoogleからqrserver.comに変更した

ついに GoogleAPIsのQRコード生成APIが終了していたので、QR code generator（goqr.me）のAPIに変更しました。 変更前: ' . $url 変更後: ' . urlencode($url) 前提: $url = get_the_permalink(); URLをURLエンコードするのがポイントです。 QRコードが表示されていない？ このサイトの記事を印刷すると、その記事のQRコードが印刷されるように設定しています。 ところが、久しぶりに印刷...

chiilabo.com

こちらもどうぞ

ちいラボに いま できる こと （ブログミニ冊子）

この時期、特に役立つホームページ投稿をミニ冊子にして教室前に置いてみました。 もちろん、ブログをスマホからご覧いただければ、それが一番なのではありますが、とはいえ、まだまだ知られていないのも事実。 しかも、実は冊子作り（ZINE）が好きで書籍用紙で冊子印刷にしたらいい感じになりましたよ。 ぜひ、手触りだけでも試しに来てください！ こちらもどうぞ。

chiilabo.com

【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】

ウェブサイトのアクセス解析に Googleアナリティクス を使っていますが、単体では外部サイトへのクリック数を計測できません。 通常ページのクリックは、Googleタグマネージャーを使って計測できましたが、AMPページ用のコンテナにはクリックURLの 組み込み変数がなく、頓挫していました。 前回はこちら。約１年前ですね。 通常ページだけでも、傾向を掴むことはできるのですが、やはり外部リンクへのクリックの実数を確認しておきたいと思い、改めて挑戦しました。 WordPressのf...

chiilabo.com

Cocoonで注目記事ランキングのショートコードを作成した【SQLって何？からのデータベース操作】

記事のアクセスランキング（人気記事）は、なかなか上位の記事が変わらない傾向があります。 そこで、WordPressの記事のアクセス数の前週比のランキング（急上昇の記事）を作りたいと思いました。 Cocoonのコードを読んでみるとアクセスランキングは、SQLクエリで生成されていました。 完成したもの Cocoonのget_access_ranking_recordsのSQLクエリ Cocoonのアクセスランキングは、「lib/page-access/access-func.ph...

chiilabo.com

AMP用ページを見やすくしたりメニューをつけたり（note風スタイル第7弾）

cocoonのAMP機能で生成している CocoonテーマのAMP設定でAMPページを生成しています。 通常ページとAMPページの差 デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります。 ヘッダーロゴが大きい。画面を圧迫しているモバイルメニューがない。検索からの流入が他のページに移動しにくい。 そこで、メニューを追加したいと思います。 ウィジェットにナビゲーションメニューを追加 まずは、ウィジェットでナビゲーションメニューを追加します。 ただ、この...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。