【 WordPress】カスタムフィールドをプラグインなしで追加&管理画面投稿一覧に出力

// 追加
add_post_meta(  ページのID, カスタムフィールド名 );
// 取得
get_post_meta( ページのID, カスタムフィールド名 , true );
// アップデート
update_post_meta( ページのID, カスタムフィールド名 );
// 削除
delete_post_meta( ページのID, カスタムフィールド名 );

/**
 * Show custom field
 */
function seo_fields() {
	global $post;
	$metatitle   = get_post_meta( $post->ID, 'metatitle', true );
	$description = get_post_meta( $post->ID, 'description', true );
	?>

	<div id="resiter"  class="resister">
		<h2>タイトル</h2>
		<p><input name="metatitle" value="<?php echo attr_html( $metatitle ); ?>"  class="large-text code" placeholder="タイトル" id="metatitle"></p>
		<p><span id="titleNum"></span>文字</p>
		<p>検索された時に表示されるタイトルです。35文字から41文字以内に収めるのが理想です。</p>
		<h2>説明文</h2>
		<p><textarea name="description" class="large-text code" rows="3" placeholder="このページの説明文" id="metadescription"><?php echo attr_html( $description ); ?></textarea></p>
		<p><span id="descriptionNum"></span>文字</p>
		<p>検索された時に表示されるタイトルです。130文字以内に収めるのが理想です。</p>
	</div>
	<?php
	wp_nonce_field( 'seo', 'seo_field' );
}

/**
 * Add custom field
 */
function add_seo_fields() {
	add_meta_box( 'seo_sectionid', 'SE0情報の登録', 'seo_fields', 'post' );
	add_meta_box( 'seo_sectionid', 'SE0情報の登録', 'seo_fields', 'page' );
}
add_action( 'admin_menu', 'add_seo_fields' );

/**
 * Save data
 *
 * @param string $post_id is id.
 */
function save_seo_fields( $post_id ) {
	global $pagenow;
	if ( ! isset( $_POST['seo_field'] ) ) {
		if (! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['seo_field'] ) ), 'seo' ) ) {
			return false;
		}
		if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
			return;
		}
		if(!current_user_can('edit_post', $post_id)) {
			return;
		}
		if ( ! empty( $_POST['metatitle'] ) ) {
			$metatitle = sanitize_text_field( wp_unslash( $_POST['metatitle'] ) );
			update_post_meta( $post_id, 'metatitle', $metatitle );
		} else {
			if ( is_admin() || ( 'post.php' === $pagenow ) ) {
				delete_post_meta( $post_id, 'metatitle' );
			}
		}
		if ( ! empty( $_POST['description'] ) ) {
			$description = sanitize_text_field( wp_unslash( $_POST['description'] ) );
			update_post_meta( $post_id, 'description', $description );
		} else {
			if ( is_admin() || ( 'post.php' === $pagenow ) ) {
				delete_post_meta( $post_id, 'description' );
			}
		}
	}
}
add_action( 'save_post', 'save_seo_fields' );

/**
 * Add column for voice list admin page
 *
 * @param string $columns is voice.
 */
function add_seo_posts_columns( $columns ) {
	if ( 'post' === get_post_type() || 'page' === get_post_type() ) {
		$columns['metatitle']   = 'メタタイトル';
		$columns['description'] = 'ページの説明';

		unset( $columns['comments'] );
	}
	return $columns;
}

/**
 * Add column for Post, Page list admin page
 *
 * @param string $column_name is posts.
 * @param string $post_id is id.
 */
function seo_posts_custom_column( $column_name, $post_id ) {
	if ( 'post' === get_post_type() || 'page' === get_post_type() ) {
		if ( 'metatitle' === $column_name ) {
			$title_data = get_post_meta( $post_id, 'metatitle', true );
			if ( $title_data ) {
				echo esc_html( $title_data );
			} else {
				echo  'None';
			}
		}

		if ( 'description' === $column_name ) {
			if ( '' !== get_post_meta( $post_id, 'description', true ) ) {
				$description = get_post_meta( $post_id, 'description', true );
			} else {
				echo  'None';
			}

			echo esc_html( $description );
		}
	}
}
add_filter( 'manage_posts_columns', 'add_seo_posts_columns' );
add_action( 'manage_posts_custom_column', 'seo_posts_custom_column', 10, 2 );

/**
 * Show custom field
 */
function seo_fields() {
//省略
?>
 <!-- 省略 -->
	<script>
    const titleNum = document.getElementById('titleNum');
    const metatitle = document.getElementById('metatitle');
    const metadescription = document.getElementById('metadescription');
    const descriptionNum = document.getElementById('descriptionNum');

		titleNum.textContent = metatitle.value.length;
		if(metatitle.value.length > 41){
			titleNum.style.color = "red";
		} else {
			titleNum.style.color = "";
		}

		metatitle.addEventListener("keyup", event => {
			titleNum.textContent = metatitle.value.length;
			if(metatitle.value.length > 41){
				titleNum.style.color = "red";
			} else {
				titleNum.style.color = "";
			}
			return;
		});

		descriptionNum.textContent = metadescription.value.length;
    if(metadescription.value.length > 130){
			descriptionNum.style.color = "red";
		} else {
			descriptionNum.style.color = "";
		}

		metadescription.addEventListener("keyup", event => {
			descriptionNum.textContent = metadescription.value.length;
			if(metadescription.value.length > 130){
				descriptionNum.style.color = "red";
			} else {
				descriptionNum.style.color = "";
			}
			return;
		});
	</script>
	<?php
	//省略
}