投稿に画像を扱うカスタムフィールドを追加するサンプルプラグイン

imagefield.0.md

imagefield

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

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

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

• Step1 カスタムフィールドを作成する
• Step2 画像のIDを扱う
• Step3 カスタムフィールドの見た目を調整する
• Step4 複数の画像に対応する ※ここまで

imagefield.js

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();
}

imagefield.php

<?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'); // テーマの場合        
    }
}