在我的页眉中包含带有插件的HTML(Bootstrap Modal Box)

时间:2016-10-06 作者:cgee

我想包括一些HTML,特别是一个引导模式框。

这是我的HTML部分函数:

public function dmd_fav_modal_box() {

   $content = \'<div class="modal fade" id="dmd_favorite_modal" tabindex="-1" role="dialog" aria-labelledby="dmd_favorite_modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <p>Test</p>
                </div>
                <!--div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div-->
            </div>
        </div>
    </div>\';
    return $content;
}
在我的构造函数中,我尝试了一些过滤器和操作。

E、 g。

add_action( \'wp_head\',  array($this, \'dmd_fav_modal_box\') );
add_filter( \'the_content\',  array($this, \'dmd_fav_modal_box\') );
但什么都不管用。谁能帮帮我吗?

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

您只需要使用\\u内容过滤器来添加模式,但需要引导。js是使其工作所必需的。

add_action(\'wp_enqueue_scripts\', array($this, \'enqueue_bootstrap\');

public function enqueue_bootstrap(){
    wp_register_script( \'bootstrap\', plugins_url( \'your-plugin/assets/js/bootstrap.min.js\' ) );
    wp_enqueue_script( \'bootstrap\' );
}
编辑:

您需要向函数中添加$content参数。正如法典所说

请注意,过滤功能必须在完成处理后返回内容,否则网站访问者将看到一个空白页面,其他插件也会过滤内容,可能会产生错误。

在您的情况下:

public function dmd_fav_modal_box($content) {

    $modal = \'<div class="modal fade" id="dmd_favorite_modal" tabindex="-1" role="dialog" aria-labelledby="dmd_favorite_modalLabel">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <p>Test</p>
            </div>
            <!--div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div-->
        </div>
    </div>
</div>\';
return $modal.$content;

SO网友:mattkrupnik

刚刚进来__construct 添加此add add_action(\'wp_footer\', \'\'array( $this, \'dmd_fav_modal_box\') ); 然后html部分将添加到页脚部分,应该可以工作,但也不确定,因为当您将其添加到wp_head 它也应该起作用,但不建议使用此解决方案。你能在这里发布所有课程吗?