【WordPress】functions.phpでカスタム投稿タイプにカスタムフィールドを追加

カスタム投稿タイプにカスタムフィールドを追加 functions.php wordpress
  • URLをコピーしました!

テキストエリア、ラジオボタン、画像、チェックボックス等あらゆる入力タイプの実装テンプレあります。コピペで簡単実装可能です。

目次(クリックでジャンプ)

functions.phpでカスタム投稿タイプにカスタムフィールドを追加

functions.phpに追記する

###################################################
# 画像アップロード用のタグを出力する
###################################################
function generate_upload_image_tag($name, $value){?>
    <div id="<?php echo $name; ?>_thumbnail" class="uploded-thumbnail">
        <?php if ($value): ?>
            <img src="<?php echo $value; ?>" alt="選択中の画像" width="100px" height="auto">
        <?php endif ?>
    </div>
    <input name="<?php echo $name; ?>" type="text" value="<?php echo $value; ?>" style="display:none;"/>
    <input type="button" name="<?php echo $name; ?>_slect" value="画像選択" />
    <input type="button" name="<?php echo $name; ?>_clear" value="クリア" />
    <script type="text/javascript">
        (function ($) {
            var custom_uploader;
            $("input:button[name=<?php echo $name; ?>_slect]").click(function(e) {
                e.preventDefault();
                if (custom_uploader) {
                    custom_uploader.open();
                    return;
                }
                custom_uploader = wp.media({
                    title: "画像を選択してください",
                    library: {
                        type: "image"
                    },
                    button: {
                        text: "画像の選択"
                    },
                    multiple: false
                });
                custom_uploader.on("select", function() {
                    var images = custom_uploader.state().get("selection");
                    /* file の中に選択された画像の各種情報が入っている */
                    images.each(function(file){
                        /* テキストフォームと表示されたサムネイル画像があればクリア */
                        $("input:text[name=<?php echo $name; ?>]").val("");
                        $("#<?php echo $name; ?>_thumbnail").empty();
                        /* テキストフォームに画像の URL を表示 */
                        $("input:text[name=<?php echo $name; ?>]").val(file.attributes.sizes.full.url);
                        /* プレビュー用に選択されたサムネイル画像を表示 */
                        $("#<?php echo $name; ?>_thumbnail").append('<img src="'+file.attributes.sizes.full.url+'" width="200px" height="auto"/>');
                    });
                });
                custom_uploader.open();
            });
            /* クリアボタンを押した時の処理 */
            $("input:button[name=<?php echo $name; ?>_clear]").click(function() {
                $("input:text[name=<?php echo $name; ?>]").val("");
                $("#<?php echo $name; ?>_thumbnail").empty();
            });
        })(jQuery);
    </script>
    <?php
}
function my_admin_scripts() {
    wp_enqueue_media();
}
add_action( 'admin_print_scripts', 'my_admin_scripts' );



###################################################
# カスタムフィールドの追加
###################################################
//制作実績にフィールド追加
function insert_works_fields(){
    global $post; ?>
    <table style="width:100%">
        <tr>
            <th>チェックボックス単体</th>
            <td>
                <input type="checkbox" name="c_check" value="is-on"<?php checked( get_post_meta($post->ID,'c_check',true), 'is-on' ); ?>
            </td>
        </tr>
        <tr>
            <th>画像</th>
            <td>
                <?php generate_upload_image_tag('c_img', get_post_meta($post->ID,'c_img',true)); ?>
            </td>
        </tr>
        <tr>
            <th>テキスト</th>
            <td>
                <input type="text" name="c_title" value="<?php echo get_post_meta($post->ID,'c_title',true); ?>" placeholder="香川のメンズ脱毛サロン「LOT STYLE」 SEOキーワードを入れると良し" style="width:100%">
            </td>
        </tr>
        <tr>
            <th>説明文</th>
            <td>
                <textarea name="c_description" placeholder="" style="width:100%"><?php echo get_post_meta($post->ID,'c_description',true); ?></textarea>
            </td>
        </tr>
        <tr>
            <th>ラジオボタン</th>
            <td>
                <input type="radio" name="c_radio" value="〜1万円"<?php checked(get_post_meta($post->ID,'c_radio',true), 'ボタン1' );?>>ボタン1
                <input type="radio" name="c_radio" value="~10万円"<?php checked(get_post_meta($post->ID,'c_radio',true), 'ボタン2' );?>>ボタン2
                <input type="radio" name="c_radio" value="~20万円"<?php checked(get_post_meta($post->ID,'c_radio',true), 'ボタン3' );?>>ボタン3
            </td>
        </tr>
        <tr>
            <th>チェックボックス複数</th>
            <td>
                <?php
                $c_check_group =  get_post_meta($post->ID,'works_spec',true,[]);
                $c_check_group = isset( $works_spec ) ? (array) $works_spec : [];
                ?>
                <input type="checkbox" name="c_check_group[]" value="c_check_group_1"<?php if (in_array( 'c_check_group_1', $c_check_group )){echo 'checked';}?>>ボタン1
                <input type="checkbox" name="c_check_group[]" value="c_check_group_2"<?php if (in_array( 'c_check_group_2', $c_check_group )){echo 'checked';}?>>ボタン2
                <input type="checkbox" name="c_check_group[]" value="c_check_group_3"<?php if (in_array( 'c_check_group_3', $c_check_group )){echo 'checked';}?>>ボタン3
            </td>
        </tr>
    </table>
    <?php
}
function add_works_fields(){
    add_meta_box('meta_id', '情報', 'insert_works_fields', 'works', 'normal', 'high');
}
add_action('admin_menu', 'add_works_fields');

//カスタムフィールドの値を保存
function save_custom_fields($post_id){ $save_fields = [
    'c_check',
    'c_img',
    'c_title',
    'c_description',
    'c_radio',
    'c_check_group',
    'c_radio',
    //ここにカスタムフィールドのnameを格納していく
];
    foreach($save_fields as $value) {
        if (isset( $_POST['action'] ) && $_POST['action'] == 'inline-save') {
            return $post_id;
        }elseif (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
            return $post_id;
        }
        elseif(isset($_POST[$value])) {
            update_post_meta($post_id, $value, $_POST[$value] );
        } else {
            delete_post_meta($post_id, $value);
        }
    }
}
add_action('save_post', 'save_custom_fields');
おすすめのフリーランス向け求人・案件探しサービス

高単価案件、週3日~などフレキシブルな働きが可能な事が特徴の転職サービスです。案件をチェックするだけであれば無料の為、エンジニアやデザイナーの方は是非登録してみてください。

4275件と案件数豊富です(2024年4月現在)
カスタム投稿タイプにカスタムフィールドを追加 functions.php wordpress

この記事が気に入ったら
フォローしてね!

役に立った!と思ったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フリーランスのWebデザイナー「Kizineko」です。Webサイトのデザイン~コーディング、簡易的なプログラム実装等、Web制作に係る広くに携わっております。当ブログでは日々のメモ帳として便利なコードなどを共有しております。

目次(クリックでジャンプ)