如何在WordPress中创建自定义域作为编辑?

时间:2021-01-23 作者:Naren Verma

我必须在WordPress管理面板中添加自定义字段,我尝试了,它正在显示。下面是屏幕截图。

enter image description here

我正在使用以下代码。

function wordpress_add_metaboxes() {
    add_meta_box(
        \'wordpress_register_fields\',
        \'Information\',
        \'wordpress_register_fields\',
        \'product\',
        \'normal\',
        \'default\'
    );  
}

add_action( \'add_meta_boxes\', \'wordpress_add_metaboxes\' );

function wordpress_register_fields() {
    global $post;
    // Nonce field to validate form request came from current site
    wp_nonce_field( basename( __FILE__ ), \'layout\' );
    // Output the field
    echo \'<div class="create_custom_layout"><div class="row">
    <div class="col-md-6">
         <h4>Description</h4>
         <input type="text" name="description" value="\' . esc_textarea( get_post_meta( $post->ID, \'Description\', true ) )  . \'" class="widefat">
    </div>

    <div class="col-md-6">
            <h4>Banner image</h4>
            <input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" style="padding: 8px 10px; height: auto; line-height: normal;"/>
            <input type="hidden" name="client_image" id="meta-image" class="meta_image" value="\'.get_post_meta(get_the_ID(), \'client_image\', true ).\'" /><br />
            <img style="width: 100px;height: 100px;object-fit: cover;" id="meta-image-preview" src="\'.get_post_meta(get_the_ID(), \'client_image\', true ).\'" />

    </div>
</div></div>
<style>
.create_custom_layout .row{display: flex;flex-wrap: wrap;}
.create_custom_layout .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
}
</style>
      <script>
     jQuery("#meta-image-button").click(function() {
            var send_attachment_bkp = wp.media.editor.send.attachment;
            wp.media.editor.send.attachment = function(props, attachment) {
        jQuery("#meta-image").val(attachment.url);
            jQuery("#meta-image-preview").attr("src",attachment.url);
                wp.media.editor.send.attachment = send_attachment_bkp;
            }
            wp.media.editor.open();
            return false;
        });
        </script>\';
}
现在我的问题是,如何使用描述字段的编辑器?

enter image description here

1 个回复
最合适的回答,由SO网友:Tony Djukic 整理而成

纳伦,

classic/TinyMCE编辑器的实际设置相对简单,我已经更新了wordpress_register_fields() 使用必要的行进行操作。对于wp_editor() 要工作,您需要获取内容(如果有保存的内容),标识字段,然后提供设置参数。(https://developer.wordpress.org/reference/functions/wp_editor/)

function wordpress_register_fields() {
    global $post;
    // Nonce field to validate form request came from current site
    wp_nonce_field( basename( __FILE__ ), \'layout\' );
    // Output the field
    echo \'<div class="create_custom_layout"><div class="row">\';
        echo \'<div class="col-md-6">\';
            echo \'<h4>Description</h4>\';
            //We first get the post_meta from the DB if there\'s any there.
            $description        = get_post_meta( $post->ID, \'Description\', true );
            //Second ID the field.
            $description_field  = \'Description\';
            //Provide the settings arguments for this specific editor in an array
            $description_args   = array( \'media_buttons\' => false, \'textarea_rows\' => 12, \'textarea_name\' => \'description\',
            \'editor_class\' => \'description-editor widefat\', \'wpautop\' => true );
            wp_editor( $description, $description_field, $description_args );
        echo \'</div>\';

        echo \'<div class="col-md-6">
            <h4>Banner image</h4>
            <input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" style="padding: 8px 10px; height: auto; line-height: normal;"/>
            <input type="hidden" name="client_image" id="meta-image" class="meta_image" value="\'.get_post_meta(get_the_ID(), \'client_image\', true ).\'" /><br />
            <img style="width: 100px;height: 100px;object-fit: cover;" id="meta-image-preview" src="\'.get_post_meta(get_the_ID(), \'client_image\', true ).\'" />

        </div>
    </div>
</div>
<style>
    .create_custom_layout .row{display: flex;flex-wrap: wrap;}
    .create_custom_layout .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
</style>
<script>
    jQuery("#meta-image-button").click(function() {
        var send_attachment_bkp = wp.media.editor.send.attachment;
        wp.media.editor.send.attachment = function(props, attachment) {
    jQuery("#meta-image").val(attachment.url);
        jQuery("#meta-image-preview").attr("src",attachment.url);
            wp.media.editor.send.attachment = send_attachment_bkp;
        }
        wp.media.editor.open();
        return false;
    });
</script>\';
}
对于这种直截了当的事情,我通常不喜欢使用插件和膨胀网站的代码库,而另一种选择实际上只是利用WordPress已经拥有的东西,并用额外的3-5行代码来实现它。

我唯一的建议可能是想出一个比description 因为这很普通。