如何添加自定义字段以进行快速编辑

时间:2020-04-27 作者:Gusto

如何添加新列进行快速编辑并在其中添加自定义字段?我读过this question 但其中一个链接导致错误404。我需要为我的自定义元密钥创建一个新列,“summary和帖子类型post“和”episode“。

2 个回复
最合适的回答,由SO网友:simongcc 整理而成

创建自定义元键(假设您已经有1个)添加自定义管理列标题和数据(假设您想在列中显示自定义元键,如果没有,您还可以修改一点逻辑以实现相同的效果,因为主体是相同的)

  • 添加自定义快速编辑框
  • 添加保存逻辑
  • 加载脚本以修改原始内联编辑post函数,以支持自定义元值准备脚本文件。此示例将在post类型中添加一个快速编辑输入框Page. 通过引入函数,以下代码被证明是有效的。php

    1。创建自定义元密钥(假设您已经有1个)

    我已经准备好了自定义元密钥remark 对于职位类型page

    2。添加自定义管理列标题和数据

    对于自定义帖子类型,您可以使用

    添加列标题

    特定屏幕IDmanage_{$screen->id}_columnsmanage_pages_columnsmanage_posts_custom_column 或针对特定岗位类型manage_{$post->post_type}_posts_custom_column 添加列数据的步骤添加列内容

    通用(默认帖子或自定义帖子类型)manage_posts_columns 使用post type参数或特定post类型进行自定义post类型检查manage_{$post_type}_posts_columns 要添加列标题,以下是帖子类型页面以及自定义帖子类型+默认值的示例Post 作为多个帖子类型设置的示例。

    // add custom column title for custom meta value
    add_filter(\'manage_edit-page_columns\', \'ws365150_add_custom_columns_title\' );
    function ws365150_add_custom_columns_title( $columns ) {
        $columns[\'page_remark\'] = \'Remark\'; // you may use __() later on for translation support
    
        return $columns;
    }
    
    // add custom column data with custom meta value
    add_action(\'manage_pages_custom_column\', \'ws365150_add_custom_column_data\', 10, 2 );
    function ws365150_add_custom_column_data( $column_name, $post_id ) {
        switch ( $column_name ) {
            case \'page_remark\':
                echo get_post_meta( $post_id, \'remark\', true );
                break;
    
            default:
                break;
        }
    }
    
    以下是自定义帖子类型的示例episode + 违约Post 使用元密钥summary

    // add custom column title for custom meta value
    // \'manage_pages_columns\' or \'manage_edit-post_columns\' both works
    add_filter(\'manage_posts_columns\', \'ws365150_add_custom_columns_title_pt\', 10, 2 );
    function ws365150_add_custom_columns_title_pt( $columns, $post_type ) {
        switch ( $post_type ) {
            case \'post\':
            case \'episode\':
                $columns[\'ws365150_summary\'] = \'Summary\'; // you may use __() later on for translation support
                break;
    
            default:
    
                break;
        }
    
        return $columns;
    }
    
    // add custom column data with custom meta value for custom post types
    add_action(\'manage_posts_custom_column\', \'ws365150_add_custom_column_data_pt\', 10, 2 );
    function ws365150_add_custom_column_data_pt( $column_name, $post_id ) {
        switch ( $column_name ) {
            case \'ws365150_summary\': // specified for this column assigned in the column title
                echo get_post_meta( $post_id, \'summary\', true );
                break;
    
            default:
                break;
        }
    }
    

    3。添加自定义快速编辑框

    // for page
    add_action( \'quick_edit_custom_box\', \'ws365150_custom_edit_box\', 10, 3 );
    function ws365150_custom_edit_box( $column_name, $post_type, $taxonomy ) {
        global $post;
    
        switch ( $post_type ) {
            case \'page\':
    
            if( $column_name === \'page_remark\' ): // same column title as defined in previous step
            ?>
                    <?php // echo get_post_meta( $post->ID, \'remark\', true ); ?>
                <fieldset class="inline-edit-col-right" id="#edit-">
                    <div class="inline-edit-col">
                        <label>
                            <span class="title">Remark</span>
                            <span class="input-text-wrap"><input type="text" name="remark" class="inline-edit-menu-order-input" value=""></span>
                        </label>
                    </div>
                </fieldset>
                <?php
            endif;
                // echo \'custom page field\';
                break;
    
            default:
                break;
        }
    }
    
    // for Post + custom post type
    add_action( \'quick_edit_custom_box\', \'ws365150_custom_edit_box_pt\', 10, 3 );
    function ws365150_custom_edit_box_pt( $column_name, $post_type, $taxonomy ) {
        global $post;
    
        switch ( $post_type ) {
            case \'post\':
            case \'episode\':
    
            if( $column_name === \'ws365150_summary\' ): // same column title as defined in previous step
            ?>
                    <?php // echo get_post_meta( $post->ID, \'remark\', true ); ?>
                <fieldset class="inline-edit-col-right" id="#edit-">
                    <div class="inline-edit-col">
                        <label>
                            <span class="title">Summary</span>
                            <span class="input-text-wrap"><input type="text" name="summary" class="inline-edit-menu-order-input" value=""></span>
                        </label>
                    </div>
                </fieldset>
                <?php
            endif;
                // echo \'custom page field\';
                break;
    
            default:
                break;
        }
    }
    

    4。添加保存逻辑

    add_action( \'save_post\', \'ws365150_update_custom_quickedit_box\' );
    function ws365150_update_custom_quickedit_box() {
        // any checking logic here, skip and keep it simple for simple illustration purpose (nonce, existing of $_POST[\'remark\'], ajax save and so on
    
        // remark in Page
        if( isset( $_POST ) && isset( $_POST[\'remark\'] ) ) { // where summary is defined in the <input name="remark">
            update_post_meta($_POST[\'post_ID\'], \'remark\', $_POST[\'remark\']);
        }
    
        // summary in Post, custom post type
        if( isset( $_POST ) && isset( $_POST[\'summary\'] ) ) { // where summary is defined in the <input name="summary">
            update_post_meta($_POST[\'post_ID\'], \'summary\', $_POST[\'summary\']);
        }
    
        // for debugging purpose in inspector, not necessary, enable this will break the saving but could see the ajax return
        // wp_send_json_success( array(
        //  \'message\' => \'Save test!\',
        //  \'post_data\' => $_POST,
        // ) );
        return; // finish the function call
    }
    

    5。加载脚本以修改原始内联编辑post函数

    add_action( \'admin_enqueue_scripts\', function( $page ) {
    
        // add page checking logic, this is a simple one, you may test post type and so on...
        if ( \'edit.php\' != $page ) {
            return;
        }
    
        wp_enqueue_script( \'custom-quickedit-box\', get_stylesheet_directory_uri() . \'/ws365150_custom_quickedit_box.js\', array( \'jquery\', \'inline-edit-post\' ) );
    });
    

    6。准备脚本文件(ws365150\\u custom\\u quickedit\\u box.js,测试上述代码时,放入主题文件夹)

    ( function( $, wp ) {
        // clone from original function in inline-post-edit.js for override
        // actually no need to create an alias object, however, create an alias could be a note and mark of override without forgetting for later maintenance
        window.customInlineEditPost = window.inlineEditPost;
    
        // function override: add custom meta value, the base is copied from the source
        customInlineEditPost.edit = function(id) {
                // console.log( \'custom edit\' );
                var t = this, fields, editRow, rowData, status, pageOpt, pageLevel, nextPage, pageLoop = true, nextLevel, f, val, pw;
                t.revert();
    
                if ( typeof(id) === \'object\' ) {
                    id = t.getId(id);
                }
    
                fields = [\'post_title\', \'post_name\', \'post_author\', \'_status\', \'jj\', \'mm\', \'aa\', \'hh\', \'mn\', \'ss\', \'post_password\', \'post_format\', \'menu_order\', \'page_template\'];
                if ( t.type === \'page\' ) {
                    fields.push(\'post_parent\');
                }
    
                // Add the new edit row with an extra blank row underneath to maintain zebra striping.
                editRow = $(\'#inline-edit\').clone(true);
                $( \'td\', editRow ).attr( \'colspan\', $( \'th:visible, td:visible\', \'.widefat:first thead\' ).length );
    
                $(t.what+id).removeClass(\'is-expanded\').hide().after(editRow).after(\'<tr class="hidden"></tr>\');
    
                // Populate fields in the quick edit window.
                rowData = $(\'#inline_\'+id);
                if ( !$(\':input[name="post_author"] option[value="\' + $(\'.post_author\', rowData).text() + \'"]\', editRow).val() ) {
    
                    // The post author no longer has edit capabilities, so we need to add them to the list of authors.
                    $(\':input[name="post_author"]\', editRow).prepend(\'<option value="\' + $(\'.post_author\', rowData).text() + \'">\' + $(\'#\' + t.type + \'-\' + id + \' .author\').text() + \'</option>\');
                }
                if ( $( \':input[name="post_author"] option\', editRow ).length === 1 ) {
                    $(\'label.inline-edit-author\', editRow).hide();
                }
    
                // populate custom meta value
                if ( $( \':input[name="remark"]\', editRow ).length === 1 ) {
                    $( \':input[name="remark"]\', editRow ).val( $(\'#post-\' + id + \' .page_remark\').text() );
                }
    
                if ( $( \':input[name="summary"]\', editRow ).length === 1 ) {
                    $( \':input[name="summary"]\', editRow ).val( $(\'#post-\' + id + \' .ws365150_summary\').text() );
                }
    
                for ( f = 0; f < fields.length; f++ ) {
                    val = $(\'.\'+fields[f], rowData);
    
                    /**
                     * Replaces the image for a Twemoji(Twitter emoji) with it\'s alternate text.
                     *
                     * @returns Alternate text from the image.
                     */
                    val.find( \'img\' ).replaceWith( function() { return this.alt; } );
                    val = val.text();
                    $(\':input[name="\' + fields[f] + \'"]\', editRow).val( val );
                }
    
                if ( $( \'.comment_status\', rowData ).text() === \'open\' ) {
                    $( \'input[name="comment_status"]\', editRow ).prop( \'checked\', true );
                }
                if ( $( \'.ping_status\', rowData ).text() === \'open\' ) {
                    $( \'input[name="ping_status"]\', editRow ).prop( \'checked\', true );
                }
                if ( $( \'.sticky\', rowData ).text() === \'sticky\' ) {
                    $( \'input[name="sticky"]\', editRow ).prop( \'checked\', true );
                }
    
                /**
                 * Creates the select boxes for the categories.
                 */
                $(\'.post_category\', rowData).each(function(){
                    var taxname,
                        term_ids = $(this).text();
    
                    if ( term_ids ) {
                        taxname = $(this).attr(\'id\').replace(\'_\'+id, \'\');
                        $(\'ul.\'+taxname+\'-checklist :checkbox\', editRow).val(term_ids.split(\',\'));
                    }
                });
    
                /**
                 * Gets all the taxonomies for live auto-fill suggestions when typing the name
                 * of a tag.
                 */
                $(\'.tags_input\', rowData).each(function(){
                    var terms = $(this),
                        taxname = $(this).attr(\'id\').replace(\'_\' + id, \'\'),
                        textarea = $(\'textarea.tax_input_\' + taxname, editRow),
                        comma = inlineEditL10n.comma;
    
                    terms.find( \'img\' ).replaceWith( function() { return this.alt; } );
                    terms = terms.text();
    
                    if ( terms ) {
                        if ( \',\' !== comma ) {
                            terms = terms.replace(/,/g, comma);
                        }
                        textarea.val(terms);
                    }
    
                    textarea.wpTagsSuggest();
                });
    
                // Handle the post status.
                status = $(\'._status\', rowData).text();
                if ( \'future\' !== status ) {
                    $(\'select[name="_status"] option[value="future"]\', editRow).remove();
                }
    
                pw = $( \'.inline-edit-password-input\' ).prop( \'disabled\', false );
                if ( \'private\' === status ) {
                    $(\'input[name="keep_private"]\', editRow).prop(\'checked\', true);
                    pw.val( \'\' ).prop( \'disabled\', true );
                }
    
                // Remove the current page and children from the parent dropdown.
                pageOpt = $(\'select[name="post_parent"] option[value="\' + id + \'"]\', editRow);
                if ( pageOpt.length > 0 ) {
                    pageLevel = pageOpt[0].className.split(\'-\')[1];
                    nextPage = pageOpt;
                    while ( pageLoop ) {
                        nextPage = nextPage.next(\'option\');
                        if ( nextPage.length === 0 ) {
                            break;
                        }
    
                        nextLevel = nextPage[0].className.split(\'-\')[1];
    
                        if ( nextLevel <= pageLevel ) {
                            pageLoop = false;
                        } else {
                            nextPage.remove();
                            nextPage = pageOpt;
                        }
                    }
                    pageOpt.remove();
                }
    
                $(editRow).attr(\'id\', \'edit-\'+id).addClass(\'inline-editor\').show();
                $(\'.ptitle\', editRow).focus();
    
                return false;
        };
    })( jQuery, window.wp );
    
    以上内容用于使用快速编辑quick_edit_custom_box 钩子,您可能还需要处理批量编辑。你可以通过阅读和使用bulk_edit_custom_box.

  • SO网友:Дима Иванов

    在我刚刚添加的步骤6中,我没有重写完整的JS

    (function($){
        lesson_orders={};
        if($(\'.post_type_page\').length && $(\'.post_type_page\').val()==\'resource\'){
            $(\'#the-list tr\').each(function(){
                id=$(this).find(\'.check-column input\').val();
                val=$(this).find(\'.lesson_order\').text();
                lesson_orders[\'edit-\'+id]=val;
            });
        }
        $(document).on(\'focus\',\'.ptitle\',function(){
            id =$(this).closest(\'.inline-edit-row\').attr(\'id\');
            $(\'#\'+id+\' input[name="lesson_order"]\').val(lesson_orders[\'\'+id]);
        }); 
    })(jQuery);
    

    相关推荐