WPの

～ワードプレス関連～

カスタム投稿タイプのクイック編集でカスタムフィールドを表示・編集・保存する方法

      2020/04/25

WordPressのクイック編集をカスタマイズする

今回、WordPressでショップ機能のない商品の在庫表をカスタム投稿タイプで作成する案件がありました。
在庫数のカスタムフィールドがあり、いちいち個別で記事の編集を開き、在庫数を書き換えるのは面倒なので、一覧でクイック編集できるようカスタマイズしました。

手順

カスタム投稿タイプのクイック編集へカスタムフィールド項目を追加する手順です。
編集と作成するファイルは2つ。

  • 有効化しているテーマ/functions.php
  • 有効化しているテーマ/js/admin-edit.js

functions.php

テーマ直下のfunctions.phpの一番下に追記します。 

//↓カスタム投稿タイプ一覧の項目
function my_customtype_columns( $defaults ) {
    $defaults[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"]['カスタムフィールドのスラッグ'] = '項目名';
 
    return $defaults;
}
add_filter( 'manage_カスタム投稿タイプのスラッグ_posts_columns', 'my_customtype_columns' );
//↑カスタム投稿タイプ一覧の項目

//↓カスタム投稿タイプ一覧の項目へ値を表示
function my_customtype_posts_custom_column( $column, $post_id ) {
    switch ( $column ) {
        case 'カスタムフィールドのスラッグ':
            $post_meta = get_post_meta( $post_id, 'カスタムフィールドのスラッグ', true );
            if ( $post_meta ) {
                echo $post_meta;
            } else {
                echo ''; //値が無い場合の表示
            }
            break;
    }
}
add_action( 'manage_カスタム投稿タイプのスラッグ_posts_custom_column' , 'my_customtype_posts_custom_column', 10, 2 );
//↑カスタム投稿タイプ一覧の項目へ値を表示

//↓カスタム投稿タイプ一覧のクイック編集を開いた時のフィールドを追加
function display_my_custom_quickedit( $column_name, $post_type ) {
    static $print_nonce = TRUE;
    if ( $print_nonce ) {
        $print_nonce = FALSE;
        wp_nonce_field( 'quick_edit_action', $post_type . '_edit_nonce' ); //CSRF対策
    }
 
    ?>
    

        

            
        

    

';
    }
}
add_action('admin_footer-edit.php', 'my_admin_edit_foot');
//↑カスタム投稿タイプ一覧のクイック編集を開いた時のフィールドへ値を表示するjQueryを指定

//↓カスタム投稿タイプ一覧のクイック編集を開いた時のフィールド値を書き換えた後に保存
function save_custom_meta( $post_id ) {
    $slug = 'カスタム投稿タイプのスラッグ';
 
    if ( $slug !== get_post_type( $post_id ) ) {
        return;
    }
    if ( !current_user_can( 'edit_post', $post_id ) ) {
        return;
    }
 
    $_POST += array("{$slug}_edit_nonce" => '');
    if ( !wp_verify_nonce( $_POST["{$slug}_edit_nonce"], 'quick_edit_action' ) ) {
        return;
    }
 
    if ( isset( $_REQUEST['カスタムフィールドのスラッグ'] ) ) {
        update_post_meta( $post_id, 'カスタムフィールドのスラッグ', $_REQUEST['カスタムフィールドのスラッグ'] );
    }
 
  
}
add_action( 'save_post', 'save_custom_meta' );
//↑カスタム投稿タイプ一覧のクイック編集を開いた時のフィールド値を書き換えた後に保存

複数箇所に登場する「カスタム投稿タイプのスラッグ」と「カスタムフィールドのスラッグ」は、それぞれ同じ値です。

任意のJSファイル

functions.phpで「カスタム投稿タイプ一覧のクイック編集を開いた時のフィールドへ値を表示するjQueryを指定」の部分の通りに、
有効化しているテーマの直下に「js」フォルダを作成し、中にadmin-edit.jsを用意します。
JSファイルの中身は以下のとおりです。

(function($) {
    var $wp_inline_edit = inlineEditPost.edit;
 
    inlineEditPost.edit = function( id ) {
        $wp_inline_edit.apply( this, arguments );
 
        var $post_id = 0;
        if ( typeof( id ) == 'object' )
            $post_id = parseInt( this.getId( id ) );
 
        if ( $post_id > 0 ) {
            var $edit_row = $( '#edit-' + $post_id );
            var $post_row = $( '#post-' + $post_id );
 
            var $カスタムフィールドのスラッグ = $( '.column-カスタムフィールドのスラッグ', $post_row ).html();
            $( ':input[name="カスタムフィールドのスラッグ"]', $edit_row ).val( $カスタムフィールドのスラッグ );
 
        }
    };
 
})(jQuery);

以上をアップロードして完成です。

カスタム投稿タイプのクイック編集をカスタマイズ

コチラを参考にさせて頂きました→[WordPress]カスタムフィールドをクイック編集で保存する方法について

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

 - WordPress