Php 在bxslider中使用短代码

因此，我正在构建一个短代码，以便可以与bxSlider（）一起使用，但由于某些原因，我无法使用javascript

以下是我的短代码示例：

[slider]
[slide headline="Hack Your Newsfeed" image="/wp-content/uploads/2019/10/M2020DayOne.jpg" body="<p>Test.</p>" link="Learn How Now|https://www.howtogeek.com/665935/how-to-sort-your-facebook-feed-by-most-recent/"]
[slide headline="Branch Out" image="/wp-content/uploads/2019/10/M2020DayOne.jpg" body="<p>Test</p>" link="Facebook|https://facebook.com" link="Instagram|https://instagram.com"]
[/slider]

$atts = shortcode_atts(
        [
            'id' => '',
        ], $atts, 'slider');

// NOTE: THERE IS NO $atts['title']
$id = $atts['id'] ?: rawurldecode(sanitize_title($atts['title']));

[滑块]
[slide headline=“Hack Your Newsfeed”image=“/wp content/uploads/2019/10/M2020DayOne.jpg”body=“测试。
”link=“立即学习|https://www.howtogeek.com/665935/how-to-sort-your-facebook-feed-by-most-recent/"]
[slide headline=“Branch Out”image=“/wp content/uploads/2019/10/M2020DayOne.jpg”body=“Test
”link=“Facebook|https://facebook.com“link=”Instagram|https://instagram.com"]
[/滑块]

以下是我目前掌握的代码：

function slider_wrapper_shortcode($atts, $content = null)
{
    $atts = shortcode_atts(
            [
                'id' => '',
            ], $atts, 'slider');

    $id = $atts['id'] ?: rawurldecode(sanitize_title($atts['title']));

    $cleaned_content = wpautop(trim($content));

    $output = '<div id="bxslider' . $id . '" class="bxslider">';
    $output .= do_shortcode($cleaned_content);
    $output .= '</div>';

    $output .= '<script type="text/javascript">
                    jQuery(document).ready(function() {
                        jQuery(".bxslider").bxSlider({
                            pager: false,
                            auto: true,
                            pause: 3000,
                            captions: false,
                        })
                    })
                </script>';

    return $output;
}
add_shortcode('slider', 'slider_wrapper_shortcode');

function slide_item_shortcode($atts, $content = null)
{
    extract(shortcode_atts([
            "image" => 'image',
        ], $atts)
    );

    return '<div><img src="' . home_url(esc_url($image)) . '" alt="" /></div>';
}
add_shortcode('slide', 'slide_item_shortcode');

function slider\u wrapper\u shortcode（$atts，$content=null）
{
$atts=短码\附加(
[
“id'=>”，
]，$atts，'slider'）；
$id=$atts['id']？：rawurldecode（sanitize_title（$atts['title']）；
$cleaned_content=wpautop（修剪（$content））；
$output=''；
$output.=do_短代码（$cleaned_content）；
$output.=''；
$output.='
jQuery（文档）.ready（函数（）{
jQuery（“.bxslider”）.bxslider({
传呼机：错，
是的，
暂停：3000，
标题：错，
})
})
';
返回$output；
}
添加_短代码（'slider'、'slider_wrapper_短代码'）；
函数幻灯片\项目\短代码（$atts，$content=null）
{
提取（短码）([
“图像”=>“图像”，
]，$atts）
);
返回“”；
}
添加_短代码（“幻灯片”、“幻灯片_项目_短代码”）；

以下是短代码当前的渲染方式：

<div id="bxslider" class="bxslider">
<p></p><div><img src="https://*****.com.local/wp-content/uploads/2019/10/M2020DayOne.jpg" alt=""></div>
<p></p>
<p></p><div><img src="https://*****.com.local/wp-content/uploads/2019/10/M2020DayOne.jpg" alt=""></div>
<p></p>
</div>

出于某种原因，似乎根本没有检测到脚本标记，因为我在控制台中根本看不到引用

更新：

---

您不应该在短代码中使用短代码，即使它似乎有效，但它会产生后果，wordpress编辑器会处理内容并将所有换行符转换为html等。这并不保证您将收到所需的结构

但是如果你想要一个解决方案，那么有（不推荐）

1.）首先更正代码（按照注释进行操作）

我检查过，它会返回您需要的内容

---

结果:

完整代码

function slider_wrapper_shortcode($atts, $content = null)
{
    $atts = shortcode_atts(
            [
                'id' => '',
            ], $atts, 'slider');

    $title = isset($atts['title']) ? $atts['title'] : "";

    $id = !empty($atts['id']) ? $atts['id'] : rawurldecode(sanitize_title($title));
    $cleaned_content = trim($content); // wpautop

    $output = '<div id="bxslider_' . $id . '" class="bxslider">';
    $output .= do_shortcode($cleaned_content);
    $output .= '</div>';

    $output .= '<script type="text/javascript">
                                    (function($) {
                    $(document).ready(function() {
                        // Check if plugin exists
                        if ($.fn.bxSlider) {
                           // don`t use class, you must use a unique id
                           $("#bxslider_'.$id.'").bxSlider({
                               pager: false,
                               auto: true,
                               pause: 3000,
                               captions: false,
                           })
                        }
                    });
                  })(jQuery);
                </script>';

    return $output;
}
add_shortcode('slider', 'slider_wrapper_shortcode');

function slide_item_shortcode($atts, $content = null)
{
    extract(shortcode_atts([
            "image" => 'image',
        ], $atts)
    );

    return '<div><img src="' . home_url(esc_url($image)) . '" alt="" /></div>';
}
add_shortcode('slide', 'slide_item_shortcode');

function slider\u wrapper\u shortcode（$atts，$content=null）
{
$atts=短码\附加(
[
“id'=>”，
]，$atts，'slider'）；
$title=isset（$atts['title']）？$atts['title']：“”；
$id=！empty（$atts['id']）？$atts['id']：rawurldecode（sanitize_title（$title））；
$cleaned_content=trim（$content）；//wpautop
$output=''；
$output.=do_短代码（$cleaned_content）；
$output.=''；
$output.='
（函数（$）{
$（文档）.ready（函数（）{
//检查插件是否存在
if（$.fn.bxSlider）{
//不要使用类，必须使用唯一的id
$（“#bxslider.'$id.”）.bxslider({
传呼机：错，
是的，
暂停：3000，
标题：错，
})
}
});
})（jQuery）；
';
返回$output；
}
添加_短代码（'slider'、'slider_wrapper_短代码'）；
函数幻灯片\项目\短代码（$atts，$content=null）
{
提取（短码）([
“图像”=>“图像”，
]，$atts）
);
返回“”；
}
添加_短代码（“幻灯片”、“幻灯片_项目_短代码”）；

问题在于短代码之前的空

标记。这是输入WP编辑器的短代码的常见问题。有几种方法可以解决这个问题：

1。autop-您可以将

autop

的优先级更改为以后运行，方法是将其添加到函数中。php：

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99);

2。删除空的p标签如果这会影响其他输出，您可以使用此功能从输出中删除空的

标签：

function my_stripemptytags($content){
    $pattern = "/<p[^>]*><\\/p[^>]*>/"; // remove empty p tags
    return preg_replace($pattern, '', $content); 
}
add_filter( 'the_content', 'my_stripemptytags', 100 );

但是，您没有在短代码中传入或检查

标题
属性

如果您希望使用post id，可以这样获得：

global $post;
$title = $post->title;

我正在使用您的代码进行功能幻灯片演示，并添加了一些参数和输出：

    function slider_wrapper_shortcode($atts, $content = null)
    {
        $atts = shortcode_atts(
                [
                    'title' => '',
                    'id' => '',
                ], $atts, 'slider');

        $id = $atts['id'] ?: rawurldecode(sanitize_title($atts['title']));

        $cleaned_content = wpautop(trim($content));

        $output = '<div id="bxslider' . $id . '" class="bxslider">';
        $output .= do_shortcode($cleaned_content);
        $output .= '</div>';

        $output .= '<script type="text/javascript">
                        jQuery(document).ready(function() {
                            jQuery(".bxslider").bxSlider({
                                pager: false,
                                auto: true,
                                pause: 3000,
                                captions: false,
                            })
                        })
                    </script>';

        return $output;
    }
    add_shortcode('theslider', 'slider_wrapper_shortcode');

    function slide_item_shortcode($atts, $content = null)
    {
        extract(shortcode_atts([
                "image" => '',
                "headline" => '',
                "body" => '',
                "link" => '',
            ], $atts)
        );

        return '<div>
                <img src="' . esc_url($atts['image']) . '" alt="" />
                <p>'.$atts['headline'].'</p>
                <p>'.$atts['body'].'</p>
                <p>'.$atts['link'].'</p>
                </div>';
    }
    add_shortcode('theslide', 'slide_item_shortcode');
    ?>

function slider\u wrapper\u shortcode（$atts，$content=null）
{
$atts=短码\附加(
[
'标题'=>''，
“id'=>”，
]，$atts，'slider'）；
$id=$atts['id']？：rawurldecode（sanitize_title（$atts['title']）；
$cleaned_content=wpautop（修剪（$content））；
$output=''；
$output.=do_短代码（$cleaned_content）；
$output.=''；
$output.='
jQuery（文档）.ready（函数（）{
jQuery（“.bxslider”）.bxslider({
传呼机：错，
是的，
暂停：3000，
标题：错，
})
})
';
返回$output；
}
添加_短代码（“滑块”、“滑块_包装器_短代码”）；
函数幻灯片\项目\短代码（$atts，$content=null）
{
提取（短码）([
“图像”=>“”，
“标题”=>”，
“正文”=>“”，
“链接”=>“”，
]，$atts）
);
返回'
“.$atts['headline']”

“.$atts['body']”

“.$atts['link']”

';
}
global $post;
$title = $post->title;

    function slider_wrapper_shortcode($atts, $content = null)
    {
        $atts = shortcode_atts(
                [
                    'title' => '',
                    'id' => '',
                ], $atts, 'slider');

        $id = $atts['id'] ?: rawurldecode(sanitize_title($atts['title']));

        $cleaned_content = wpautop(trim($content));

        $output = '<div id="bxslider' . $id . '" class="bxslider">';
        $output .= do_shortcode($cleaned_content);
        $output .= '</div>';

        $output .= '<script type="text/javascript">
                        jQuery(document).ready(function() {
                            jQuery(".bxslider").bxSlider({
                                pager: false,
                                auto: true,
                                pause: 3000,
                                captions: false,
                            })
                        })
                    </script>';

        return $output;
    }
    add_shortcode('theslider', 'slider_wrapper_shortcode');

    function slide_item_shortcode($atts, $content = null)
    {
        extract(shortcode_atts([
                "image" => '',
                "headline" => '',
                "body" => '',
                "link" => '',
            ], $atts)
        );

        return '<div>
                <img src="' . esc_url($atts['image']) . '" alt="" />
                <p>'.$atts['headline'].'</p>
                <p>'.$atts['body'].'</p>
                <p>'.$atts['link'].'</p>
                </div>';
    }
    add_shortcode('theslide', 'slide_item_shortcode');
    ?>

    [theslider]
    [theslide headline="Title" image="https://via.placeholder.com/150" body="<p>Test.</p>" link="Learn How Now|https://www.howtogeek.com/665935/how-to-sort-your-facebook-feed-by-most-recent/"]
    [theslide headline="Branch Out" image="https://via.placeholder.com/150" body="<p>Test</p>" link="Facebook|https://facebook.com" link="Instagram|https://instagram.com"]
    [/theslider]