過去記事「WordPress：プラグインなしでカスタムフィールドを追加する」ではカスタムフィールドを使ってメタディスクリプション、メタキーワードを head 内に挿入しましたが、同時に OGP タグも挿入しようと思います。
「テーマをゼロから作ってみる」プロジェクトの追加補足です。
01ゼロから作るWordPressテーマ
現在は Genesis Framework を使って構築しているサイト「そんなには褒めないよ。映画評」のテーマをゼロから作ってみようというプロジェクトです。
サイト構成は、基本ブログですので日々書いていく映画のレビューである個別記事中心のサイトです。ですので、現在のサイト構成は次のようになっています。
- ホームページ（個別ページ, front_page.php）
- 投稿ページ（single.php）
- ブログページ（個別ページ, index.php）
- カテゴリーページ（index.php）
という条件下でやっていますので、汎用にするにはどのコードも少し手を加える必要があります。
02get_imz_metadata
これまでは、次のコードでメタディスクリプション、メタキーワードを入れていました。
function get_imz_meta_description($id){
$description = get_post_meta($id, '_imz_description', true);
$keywords = get_post_meta($id, '_imz_keywords', true);
if($description){
echo '<meta name="description" content="' . esc_attr($description) . '" />' . PHP_EOL; メタ
}
if($keywords){挿入
echo '<meta name="keywords" content="' . esc_attr($keywords) . '" />' . PHP_EOL;
}
}HTML出力は、
<?php get_imz_meta_description(get_the_ID()); ?>としていました。
03メタ OGP タグの追加挿入
これをアクションフック wp_head を使って挿入する方法に変更します。
OGP タグの挿入は、ホームページと投稿記事のみです。また、ホームページは個別ページをあてていますので、タイトル、ディスクリプション、キーワードはカスタムフィールドに登録可能という条件です。
function get_imz_metadata() {
if(!is_single() && !is_front_page()) return;
// Getting Title, Description, Keywords
$id = get_the_ID();
$title = get_post_meta($id, '_imz_title', true);
$description = get_post_meta($id, '_imz_description', true);
$keywords = get_post_meta($id, '_imz_keywords', true);
if(!$description && is_single()){
$excerpt = get_the_excerpt();
$description = mb_strstr($excerpt, '{', true);
if(!$description) $description = $excerpt;
}
echo '<meta name="description" content="' . esc_attr($description) . '" />' . PHP_EOL; add_action('wp_head', 'get_imz_metadata');
if($keywords){
echo '<meta name="keywords" content="' . esc_attr($keywords) . '" />' . PHP_EOL;
}
$type = '';
$url = '';
$image = get_the_post_thumbnail_url();
if (is_single()) {を使って挿入する方法に変更します。
if(!$title) $title = get_the_title();add_action('wp_head', 'get_imz_metadata');
$type = 'article';
$url = get_permalink();
}else if(is_front_page()){
if(!$title) $title = get_bloginfo('name');
$type = 'website';
$url = home_url('/');
}
// Open Graph
echo '<!-- imz Open Graph -->' . PHP_EOL;
echo '<meta property="og:title" content="' . esc_attr($title) . '">' . PHP_EOL;
echo '<meta property="og:type" content="' . esc_attr($type) . '">' . PHP_EOL;
echo '<meta property="og:url" content="' . esc_url($url) . '">' . PHP_EOL;
echo '<meta property="og:description" content="' . esc_attr($description) . '">' . PHP_EOL;
echo '<meta property="og:image" content="' . esc_url($image) . '">' . PHP_EOL;
// Twitter Card
echo '<meta name="twitter:card" content="summary_large_image">' . PHP_EOL;
echo '<meta name="twitter:site" content="@ausnichts" />' . PHP_EOL;
}
add_action('wp_head', 'get_imz_metadata');04OGP タグのチェック
OGP チェッカーは Facebook や Twitter サイトにもありますが、「ogpチェッカー」で検索すれば一括でチェックできるサイトがたくさんあります。
デモサイト（現在停止中）のホームページは次のように評価されました。
