Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
投稿に画像を扱うカスタムフィールドを追加するサンプルプラグイン

imagefield

カスタムフィールドで画像を記事末尾に追加するプラグイン。 以下の記事のサンプルコード

[Wordpress]メディアライブラリから画像を選べるカスタムフィールドを作成する

imagefield.phpimagefield.jswp-content/plugins/imagefield/内に配置し、プラグインを有効化して使用する。

  • Step1 カスタムフィールドを作成する
  • Step2 画像のIDを扱う
  • Step3 カスタムフィールドの見た目を調整する
  • Step4 複数の画像に対応する ※ここまで
function imagefield_selectImage() {
var frame = wp.media({
title: "画像の選択", // メディアライブラリ上部に表示されるタイトル
multiple: true, // 複数選択可能にするか
library: {type: "image"} // 画像のみ
});
frame.on('open', function() {
var selection = frame.state().get('selection');
document.getElementById("imagefield_input").value.split(",").forEach(function(id) {
selection.add(wp.media.attachment(id));
})
});
frame.on('select', function() { // 画像が選択されたとき
// 選択された画像の情報を取得
var images = frame.state().get('selection').toJSON();
// 画像のIDをコンマ区切りにしてimagefieldのテキストフィールドに格納
document.getElementById("imagefield_input").value = images.map(function(image) {
return image.id;
});
// プレビューに画像をセット
var preview = document.getElementById("imagefield_preview");
preview.innerHTML = images.map(image => {
var previewImage = image.sizes.small || image;
return '<img src="' + previewImage.url + '"/>';
}).join("");
});
frame.open();
}
<?php
/*
Plugin Name: Image Custom Field Sample
Description: 投稿に画像を扱うカスタムフィールドを追加するサンプルプラグイン
Author: Hiroki Kawakami
Version: 0.1
Author URI: https://ideal-reality.com
*/
// 編集画面にカスタムフィールドの表示領域を追加する
add_action('admin_menu', 'add_image_custom_field');
function add_image_custom_field() {
add_meta_box(
'imagefield_block', // 編集画面セクションのHTML要素のID
'Imagefield', // 編集画面セクションのタイトル
'insert_imagefield', // 編集画面セクションにHTML出力する関数
'post', // 投稿タイプ
'normal' // 編集画面セクションが表示される部分
);
}
// 編集画面の表示領域に使用されるHTML
function insert_imagefield() {
global $post;
$imagefield = get_post_meta($post->ID, 'imagefield', true); ?>
<div>
<style>#imagefield_preview img { max-width: 8rem; max-height: 8rem; margin: .5rem; }</style>
<input type="hidden" name="imagefield" id="imagefield_input" value="<?php echo $imagefield; ?>"/>
<div id="imagefield_preview"> <?php
foreach (explode(",", $imagefield) as $image) {
echo wp_get_attachment_image($image, 'small');
}
?></div>
<input type="button" value="画像を選択" onclick="imagefield_selectImage()"/>
</div>
<?php }
// カスタムフィールドの値を保存する処理
add_action('save_post', 'save_imagefield');
function save_imagefield($post_id) {
if(isset($_POST['imagefield'])){
update_post_meta($post_id, 'imagefield', $_POST['imagefield']);
} else {
delete_post_meta($post_id, 'imagefield');
}
}
// 投稿内容の末尾にカスタムフィールドの内容を追加
add_filter('the_content', 'add_imagefield_content', 1);
function add_imagefield_content($content) {
$images = get_post_meta(get_the_ID(), 'imagefield', true);
if ($images) $content .= '<h2>Imagefield</h2>';
foreach (explode(",", $images) as $image) {
$content .= wp_get_attachment_image($image, 'large');
}
return $content;
}
// 編集画面でimagefield.jsを読み込む
add_action('admin_enqueue_scripts', 'add_imagefield_scripts');
function add_imagefield_scripts($hook_suffix){
global $post_type;
if ($post_type == 'post' && in_array($hook_suffix, array('post.php', 'post-new.php'))) {
wp_enqueue_script('imagefield-script', plugin_dir_url(__FILE__) . '/imagefield.js'); // プラグインの場合
// wp_enqueue_script('imagefield-script', get_template_directory_uri() . '/imagefield.js'); // テーマの場合
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.