在wordpress中创建插件包括空格

Question

我正在使用ajax创建一个wordpress插件。

我的主要插件文件（myplugin.php）是：

function loadScreen(){
   wp_enqueue_style( 'files', plugin_dir_url( __FILE__ ) . 'css/style.css' );
   wp_enqueue_script( 'files', plugin_dir_url( __FILE__ ) . 'js/ajax.js' );
   require( dirname( __FILE__ ).'/html-template.php');
}

add_shortcode("loadmyplugin", "loadScreen");

和html-template.php是：

<script type='text/javascript'>    
    jQuery(document).ready(function($) {

        var option = '';
        jQuery.ajax({
            url: URL,
            dataType: 'json',
            type: 'GET',
        }).done(function(data) { 

            for(var spec in data){
                options += '<option value='+spec+'>'+data[spec]+'</option>';
            }

            jQuery('select#option-list').append(options);              
        });           
    });
</script>

<div class="et_pb_section et_section_regular">

    <div class="et_pb_row ">
        <select id="option-list"></select>
    </div>        
    ...       
</div>

我也在使用Divi构建内容页面，我想从短代码[loadmyplugin]中使用我的插件。

我的插件正在运行，唯一的问题是我的插件在页面编辑模式[image1]中包含一些空白区域，并且它在页面的开头加载[image2]，但我希望它加载我为它创建模块的地方。

我想我错过了关于add_filter或add_action的一些内容，但我不确定，有人可以帮助我吗？

image1的：

IMAGE2：

Answer 1

你的＆＃34;要求＆＃34;当调用短代码时产生输出，它应该＆＃34;返回＆＃34;相反，你的HTML。

轻松修复：

function loadScreen(){
   wp_enqueue_style( 'files', plugin_dir_url( __FILE__ ) . 'css/style.css' );
   wp_enqueue_script( 'files', plugin_dir_url( __FILE__ ) . 'js/ajax.js' );
   // start to capture output into buffer
   ob_start(); 
   require( dirname( __FILE__ ).'/html-template.php');
   // return captured output and end buffering
   return ob_get_clean();
}

add_shortcode("loadmyplugin", "loadScreen");