WordPress テーマ作成録 #9
やったこと
- OGPを設定する
OGPを設定する
記事ページがTwitter等でシェアされたときに、記事のタイトルなどを表示してもらうためのメタデータをOGP(Open Graph Protocol)に従って記述する。メタデータは<meta>タグを使用し、header.phpの<head>内に記述していく。また、メタデータは記事ページのみに出力するためにif(is_single())で囲っている。
画像に関するメタデータは、記事にアイキャッチ画像が設定されている場合に出力するため、if(has_post_thumbnail())でアイキャッチ画像の有無を判断する。get_post_thumbnail()_idでアイキャッチ画像のIDを取得して$ecimgにセットし、画像のURLと横幅、高さを明示する。
基本的なメタデータを記述し終えたので、Twitterとfacebookの設定を追加する。Twitterでシェアされた記事の画像を大きく表示するために、Twitter Cardにsummary_large_imageと指定する。
まとめ
今回の記事はメタデータの記述が主なので裏方の作業。FacebookのアプリIDを取得するために急ごしらえでプライバシーポリシーページを作った。一応、Wordpressで用意されているので作成にはそんなに困らないけど、ウェブサイトをしっかり運営するなら時間があるときにちゃんと作っておいたほうがいいかも。
今回からコードの埋め込みにgistというサービスを利用してみた。おかげ様で今までみたいにいちいち画像化しなくて済む。Wordpressにもコードを埋め込むプラグインがあるけれど、あれもこれもプラグインを入れてページが重くなるのが嫌な人はこういう外部サービスを利用するのも一つの手だね。
やろうやろうと思っていながら1ヵ月ぶりの更新になってしまった。記事にはしていないだけでスタイルシートを変更したりなどの作業はしているけど、大きな変化がある作業はなくなってきているからそろそろテーマ作成としては完成が近づいているかな。完成させるためにそろそろ本気出す… シェアボタンの設置は次回!