WordPress（ワードプレス）の投稿画面に推奨したい「外部リンク」機能を実装する

WordPress（ワードプレス）を導入する際に「投稿機能」を新着情報として利用される企業様が多いのですが、その際によくご依頼をいただくのが「外部リンク機能」の設定。
自社で記事を書かない場合は、配布用資料やサイト内ページへの直リンクを好まれるので実装方法をメモ。

functions.php（PHP）

//メディア機能との連携処理
function enqueue_mycustomfield_script($hook){
	if('post.php' == $hook || 'post-new.php' == $hook){
		wp_enqueue_media();
		wp_enqueue_script('mypost_custom_script', get_template_directory_uri().'/js/mypost_custom.js', array('jquery'), null, true);
	}
}
add_action('admin_enqueue_scripts', 'enqueue_mycustomfield_script');

//カスタムフィールドの設定
function add_mycustomfield_post(){
	add_meta_box('mypost_link', '外部リンクURL', 'create_mypost_link', 'post', 'normal');
	add_meta_box('mypost_media', 'リンクメディア', 'create_mypost_image', 'post', 'normal');
}
add_action('add_meta_boxes', 'add_mycustomfield_post');

function create_mypost_link($post){
	$keyname = "mypost_link";
	$get_value = get_post_meta($post->ID, $keyname, true );
	if(!empty($get_value)){
		echo('<input type="text" name="'.$keyname.'" value="'.$get_value.'">');
	}else{
		echo('<input type="text" name="'.$keyname.'">');
	}
	wp_nonce_field('action-'.$keyname, 'nonce-'.$keyname);
}

function create_mypost_image($post){
	$keyname = 'mypost_image';
	$mypost_image = get_post_meta($post->ID, $keyname, true);
	if($mypost_image){
		echo('<img src="'.esc_url($mypost_image).'" id="thmb_mypost_image">');
	}else{
		echo('<img src="" style="display: none;" id="thmb_mypost_image">');
	}
	echo('<input type="hidden" name="'.$keyname.'" id="mypost_image" value="'.esc_attr($mypost_image).'" readonly="readonly">
		<button type="button" class="button mypost_image_upload_button">メディアを選択</button>
		<button type="button" class="button mypost_image_delete_button">削除</button>');
	wp_nonce_field('action-'.$keyname, 'nonce-'.$keyname);
}

//入力内容の保存処理
function save_custom_field_contents( $post_id ) {
	if(isset($_POST['mypost_image'])){
		update_post_meta($post_id, 'mypost_image', esc_url($_POST['mypost_image']));
	}

	$custom_fields = array('mypost_link');
	foreach( $custom_fields as $d ) {
		if(isset($_POST['nonce-'.$d])){
			if(wp_verify_nonce($_POST['nonce-'.$d], 'action-'.$d)){
				if(current_user_can('edit_post', $post_id)){
					if(get_post_meta($post_id, $d) == ""){
						add_post_meta($post_id, $d, $_POST[$d], true);
					}
					elseif($_POST[$d] != get_post_meta($post_id, $d, true)){
						update_post_meta($post_id, $d, $_POST[$d]);
					}elseif($_POST[$d] == ""){
						delete_post_meta($post_id, $d, get_post_meta($post_id, $d, true));
					}
				}
			}
		} 
	}
	return $post_id;
}
add_action('save_post', 'save_custom_field_contents');

mypost_custom.is（jQuery）

jQuery(document).ready(function($){
	var frame;
	$('.mypost_image_upload_button').on('click', function(e){
		e.preventDefault();
		if(frame){
			frame.open();
			return;
		}
		frame = wp.media({
			title: '画像を選択',
			button: {
				text: '選択'
			},
			multiple: false
		});
		frame.on('select', function(){
			var attachment = frame.state().get('selection').first().toJSON();
			$('#mypost_image').val(attachment.url);
			$('#thmb_mypost_image').attr('src', attachment.url).show();
		});
		frame.open();
	});

	$('.mypost_image_delete_button').on('click', function(){
		$('#mypost_image').val('');
		$('#thmb_mypost_image').attr('src', '').hide();
	});
});

「mypost_custom.js」はテーマディレクトリ直下に「js」ディレクトリを作成し、その中にアップロード

index.php（PHP）

<ul>
<?php
//出力処理
if (have_posts()) : while (have_posts()) : the_post();
if(get_post_meta($post->ID, 'mypost_link', true)){
	$link = '<a href="'.esc_url(get_post_meta($post->ID, 'mypost_link', true )).'" target="_blank">';
}else if(get_post_meta($post->ID, 'mypost_image', true)){
	$link = '<a href="'.esc_url(get_post_meta($post->ID, 'mypost_image', true )).'" target="_blank">';
}else{
	$link = '<a href="'.get_the_permalink().'">';
}
?>
<li>
<time class="news__time"><?php the_time('Y.m.j') ?></time>
<span><?php echo($link.get_the_title()); ?></a></span>
</li>
<?php endwhile; else: ?>
<?php endif; ?>
</ul>

カスタムフィールドの実装は「プラグイン（カスタムフィールドアドバンス等）」でも可能です。
プラグインでの実装はノーコードでできる良さと、テーマに依存しないことの利便性がありますが、開発元（運営会社）に依存するのと、バージョン未対応で使えなくなることがあるため、今回はテーマ適応時に自動反映できることでの流用のしやすさを考えてカスタマイズにしています。