php 在文本和页脚中输出WordPress Shortcode的内容

vwkv1x7d  于 2023-03-21  发布在  PHP
关注(0)|答案(1)|浏览(122)

我正在使用自定义的WordPress简码向我的内容添加一个模态。模态的内容基于自定义的帖子类型。
短代码看起来像这样:

[term value="Custom Link Title" id="123"]

value=""参数用于内容中的模态链接。id=""是自定义帖子类型的ID。
在模态对话框窗口中,我根据自定义文章类型的ID显示内容。
问题是,链接和模态对话框一起输出。由于模态的<div>,WordPress关闭了它之前的每一个<p>。现在模态链接之后有一个不必要的换行符。

有没有办法在内容区显示模态链接,并将模态对话框(<div>)放在页面的页脚?

以下是我的简码:

add_shortcode('btn', 'bs_button');

// [term value="" id=""]
function shortcode_term($atts) {
   extract(shortcode_atts(array(
      'id' => '',
      'value' => '',
   ), $atts));

$modal_term = '<a href="#termModal_'.$id.'" class="" data-toggle="modal" data-target="#termModal_'.$id.'">'.$value.'</a>';

$modal_dialog = '<div class="modal fade" id="termModal_'.$id.'" tabindex="-1" role="dialog" aria-labelledby="termModal_'.$id.'_Title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="termModal_'.$id.'_Title">'.get_the_title($id).'</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="icon-remove"></i></button>
            </div>
            <div class="modal-body">
                '.get_post_field('post_content', $id).'
            </div>
        </div>
    </div>
</div>';

return $modal_term.$modal_dialog;

}

add_shortcode('term', 'shortcode_term');

如果$modal_term留在内容中,而$modal_dialog转到页面的页脚,那就太好了。
或者有没有其他方法可以防止WordPress在模态对话框之前添加</p>
以下是前端发生的事情:

<p style="text-align: center;">noraml text from the editor <a href="#termModal_123" class="" data-toggle="modal" data-target="#termModal_123">Custom Link Title</a></p>
<div class="modal fade" id="termModal_123" tabindex="-1" role="dialog" aria-labelledby="termModal_123_Title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="termModal_123_Title">Term Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="icon-remove"></i></button>
            </div>
            <div class="modal-body">
                <h2>Head</h2>
                Term Content
            </div>
        </div>
    </div>
</div>
Rest of the normal Text from the editor

<a href="">..</a>之后的</p>不会在那里。

yacmzcpb

yacmzcpb1#

您可以从shortcode函数中挂钩到wp_footer,以返回文档末尾的模态对话框标记。

function shortcode_term($atts) {
   extract(shortcode_atts(array(
      'id' => '',
      'value' => '',
   ), $atts));

$modal_term = '<a href="#termModal_'.$id.'" class="" data-toggle="modal" data-target="#termModal_'.$id.'">'.$value.'</a>';
$modal_dialog = '<div class="modal fade" id="termModal_'.$id.'" tabindex="-1" role="dialog" aria-labelledby="termModal_'.$id.'_Title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="termModal_'.$id.'_Title">'.get_the_title($id).'</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="icon-remove"></i></button>
            </div>
            <div class="modal-body">
                '.get_post_field('post_content', $id).'
            </div>
        </div>
    </div>
</div>';

add_action( 'wp_footer', function() use ( $modal_dialog ) {
  echo $modal_dialog;
} );
return $modal_term;
}

add_shortcode('term', 'shortcode_term');

相关问题