将额外的短码HTML回显到wp_Foot

时间:2021-08-25 作者:Biyan

我正在制作一个按钮短代码,需要将额外的HTML元素附加到wp_foot 对于添加的每个短代码。

function action_button_shortcode( $atts, $content = null ) {
  extract( shortcode_atts(
    array(
      \'title\' => \'Title\',
      \'color\' => \'blue\', // blue, green
      \'url\' => \'url\',
      \'icon\' => \'arrow\',  // arrow, download, email, search, account, lock
      \'level\' => \'primary\', // primary, secondary, tertiary
      \'target\' => \'self\', // blank, self
    ),
    $atts
  ));
  if($target == \'modal\'){
    return \'<span class="byn-btn btn-\' . $level . \' bg-\' . $color . \' icon-\' . $icon . \'" data-toggle="modal" data-target="#modal\' . url_to_postid( $url ) . \'"><span>\' . $title . \'</span></span>\';
  } else {
    return \'<a href="\' . $url . \'" class="byn-btn btn-\' . $level . \' bg-\' . $color . \' icon-\' . $icon . \'" target="_\' . $target . \'"><span>\' . $title . \'</span></a>\';
  }
  $content = wpautop(trim($content));
}
add_shortcode( \'ci-action-button\', \'action_button_shortcode\' );
当用户设置\'target\' => \'modal\', 它将把这个额外的HTML添加到wp_foot. 类似于循环,因为可以在页面中添加多个按钮

<div class="modal fade" id="modal\' . url_to_postid( $url ) . \'" tabindex="-1" role="dialog" aria-labelledby="modal\' . url_to_postid( $url ) . \'Label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content subscribe-fields">
      <div class="modal-body">
        <div class="fullframe"><iframe width="100%" src="\'. $url .\'" class="fullHeight"></iframe></div>
      </div>
    </div>
  </div>
</div>
如何做到这一点?

2 个回复
SO网友:Pierre R

通常,您不需要在网站底部放置模式代码。因此,您可以直接在切换器之前或之后编写它。

如果你真的想把它放在底部,那就更复杂了。

因为我们需要从短代码中获取属性,所以不能调用wp_footer 直接勾住。因此,我们需要编写一个过滤器,在页脚中显示模式。

以下是一个示例:

function draw_footer_modal($modal_id) {
    add_action(\'wp_footer\', function () use ($modal_id) {
        ?>
        <div class="modal fade" id="<?= $modal_id; ?>" tabindex="-1" role="dialog" aria-labelledby="<?= $modal_id; ?>\'Label" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content subscribe-fields">
                    <div class="modal-body">
                        <div class="fullframe">my modal is here! </div>
                    </div>
                </div>
            </div>
        </div>
        <?php
    });
}

add_filter(\'draw_a_modal\', \'draw_footer_modal\', 10, 1);

function action_button_shortcode($atts, $content = null) {
    extract(shortcode_atts(
                    array(
                        \'title\' => \'Title\',
                        \'color\' => \'blue\', // blue, green
                        \'url\' => \'url\',
                        \'icon\' => \'arrow\', // arrow, download, email, search, account, lock
                        \'level\' => \'primary\', // primary, secondary, tertiary
                        \'target\' => \'self\', // blank, self
                    ),
                    $atts
    ));
    if ($target == \'modal\') {
        do_action(\'draw_a_modal\', \'#modal\' . url_to_postid($url)); // Apply the action here
        return \'<span class="byn-btn btn-\' . $level . \' bg-\' . $color . \' icon-\' . $icon . \'" data-toggle="modal" data-target="#modal\' . url_to_postid($url) . \'"><span>\' . $title . \'</span></span>\';
    } else {
        return \'<a href="\' . $url . \'" class="byn-btn btn-\' . $level . \' bg-\' . $color . \' icon-\' . $icon . \'" target="_\' . $target . \'"><span>\' . $title . \'</span></a>\';
    }
    $content = wpautop(trim($content));
}

add_shortcode(\'ci-action-button\', \'action_button_shortcode\');
我建议将id 变量中的属性,以避免在target 属性,而不是id 属性

SO网友:Howard E

您可以使用;“关闭”;又名;匿名函数“;在短代码内部。用这个你可以add_action(\'wp_footer\', function(){}) 并将模态传递给页脚。

function action_button_shortcode( $atts, $content = null ) {
    $atts = shortcode_atts(
        array(
            \'title\' => \'Title\',
            \'color\' => \'blue\', // blue, green
            \'url\' => \'url\',
            \'icon\' => \'arrow\',  // arrow, download, email, search, account, lock
            \'level\' => \'primary\', // primary, secondary, tertiary
            \'target\' => \'self\', // blank, self
        ),
        $atts
    );
    if($atts[\'target\'] === \'modal\'){
        add_action(\'wp_footer\', function() use ($atts){
            echo \'<div class="modal fade" id="modal\' . url_to_postid( $atts[\'url\'] ) . \'" tabindex="-1" role="dialog" aria-labelledby="modal\' . url_to_postid( $atts[\'url\'] ) . \'Label" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content subscribe-fields">
                  <div class="modal-body">
                    <div class="fullframe"><iframe width="100%" src="\'. $atts[\'url\'] .\'" class="fullHeight"></iframe></div>
                  </div>
                </div>
              </div>
            </div>\';
        });
        return \'<span class="byn-btn btn-\' . $atts[\'level\'] . \' bg-\' . $atts[\'color\'] . \' icon-\' . $atts[\'icon\'] . \'" data-toggle="modal" data-target="#modal\' . url_to_postid( $atts[\'url\'] ) . \'"><span>\' . $atts[\'title\'] . \'</span></span>\';
    } else {
        return \'<a href="\' . $atts[\'url\'] . \'" class="byn-btn btn-\' . $atts[\'level\'] . \' bg-\' . $atts[\'color\'] . \' icon-\' . $atts[\'icon\'] . \'" target="_\' . $atts[\'target\'] . \'"><span>\' . $atts[\'title\'] . \'</span></a>\';
    }
    $content = wpautop(trim($content));
}

相关推荐

Shortcode not being executed

我将以下代码放在WP“init”回调中(或加载插件时)。add_shortcode(\'my_shortcode\', function($atts, $content =\'\') { die(); } ); if (!shortcode_exists(\'my_shortcode\')) die(); 在我的页面中,我放入“[my_shortcode]“”当我查看页面时,我得到“****”知道我的代码怎么了吗?更