【WordPress】プラグイン不要！functions.phpでメタ情報・OGP設定する方法

/* * ================================================== * メタ情報とOGPタグを動的に出力する * ================================================== */
function my_custom_meta_and_ogp_tags() { // --- 基本設定 ------------------------------------------ $ogp_title = ''; $ogp_description = ''; $meta_description = ''; $ogp_url = ''; // デフォルトのOGP画像。アイキャッチがない場合などに使われます。 // 事前にメディアライブラリへアップロードし、そのURLを貼り付けてください。 $ogp_image = 'https://example.com/default-image.jpg'; $ogp_type = 'website'; // サイト名 $ogp_site_name = get_bloginfo('name'); // Facebook App ID (任意) // $facebook_app_id = 'YOUR_FACEBOOK_APP_ID'; // --- ページごとの設定 ------------------------------------ // 投稿ページ・固定ページの場合 if ( is_singular() ) { // is_single()とis_page()をまとめた条件分岐 $post_id = get_the_ID(); $ogp_title = get_the_title(); $ogp_url = get_permalink(); $ogp_type = 'article'; // descriptionの設定 (抜粋があれば優先的に使用) if ( has_excerpt( $post_id ) ) { $meta_description = get_the_excerpt( $post_id ); } else { // 抜粋がなければ本文の先頭を110文字切り出す $content = wp_strip_all_tags( get_the_content() ); $meta_description = mb_substr( $content, 0, 110 ) . '...'; } // OGP画像の設定 (アイキャッチ画像があれば優先的に使用) if ( has_post_thumbnail( $post_id ) ) { $image_id = get_post_thumbnail_id( $post_id ); $ogp_image = wp_get_attachment_image_url( $image_id, 'full' ); } } // トップページの場合 else { $ogp_title = get_bloginfo('name'); $meta_description = get_bloginfo('description'); // 「キャッチフレーズ」 $ogp_url = home_url(); } // descriptionをOGP用にも流用 $ogp_description = $meta_description; // --- HTMLタグの出力 ------------------------------------ // 値を安全に出力するためにエスケープ処理 $ogp_title = esc_attr($ogp_title); $ogp_description = esc_attr($ogp_description); $meta_description = esc_attr($meta_description); $ogp_url = esc_url($ogp_url); $ogp_image = esc_url($ogp_image); $ogp_site_name = esc_attr($ogp_site_name); ?> <meta name="description" content="<?php echo $meta_description; ?>"> <meta property="og:title" content="<?php echo $ogp_title; ?>"> <meta property="og:description" content="<?php echo $ogp_description; ?>"> <meta property="og:url" content="<?php echo $ogp_url; ?>"> <meta property="og:image" content="<?php echo $ogp_image; ?>"> <meta property="og:type" content="<?php echo $ogp_type; ?>"> <meta property="og:site_name" content="<?php echo $ogp_site_name; ?>"> <meta property="og:locale" content="ja_JP"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="<?php echo $ogp_title; ?>"> <meta name="twitter:description" content="<?php echo $ogp_description; ?>"> <meta name="twitter:image" content="<?php echo $ogp_image; ?>"> <?php // Facebook App ID があれば出力 // if ( isset($facebook_app_id) ) { // echo '<meta property="fb:app_id" content="' . $facebook_app_id . '">' . "\n"; // } ?><?php
}
// wp_headアクションフックに登録
add_action( 'wp_head', 'my_custom_meta_and_ogp_tags' );

// ... is_singular()の中 ...
$post_id = get_the_ID();
// --- ▼▼▼ ここから変更・追記 ▼▼▼ ---
// カスタムフィールドから値を取得
$custom_ogp_title = get_post_meta($post_id, 'ogp_title_custom', true);
$custom_ogp_desc = get_post_meta($post_id, 'ogp_desc_custom', true);
$custom_ogp_image = get_post_meta($post_id, 'ogp_image_custom', true);
// OGPタイトルの設定（カスタムフィールドがあれば優先）
$ogp_title = !empty($custom_ogp_title) ? $custom_ogp_title : get_the_title();
$ogp_url = get_permalink();
$ogp_type = 'article';
// descriptionの設定（カスタムフィールドがあれば最優先）
if ( !empty($custom_ogp_desc) ) { $meta_description = $custom_ogp_desc;
} elseif ( has_excerpt( $post_id ) ) { $meta_description = get_the_excerpt( $post_id );
} else { $content = wp_strip_all_tags( get_the_content() ); $meta_description = mb_substr( $content, 0, 110 ) . '...';
}
// OGP画像の設定（カスタムフィールドがあれば最優先）
if ( !empty($custom_ogp_image) ) { $ogp_image = $custom_ogp_image;
} elseif ( has_post_thumbnail( $post_id ) ) { $image_id = get_post_thumbnail_id( $post_id ); $ogp_image = wp_get_attachment_image_url( $image_id, 'full' );
}
// --- ▲▲▲ ここまで変更・追記 ▲▲▲ ---
// ... 以降のコードは同じ ...