bxsliderでショートコードを使用する

Aug 20 2020

だから私はbxSliderで使用できるようにショートコードを構築しています（https://bxslider.com/examples/image-slideshow-captions/）しかし、何らかの理由で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]

これが私がこれまでに持っているコードです：

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');

現在、ショートコードがどのようにレンダリングされているかを次に示します。

<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>

何らかの理由で、コンソールに参照がまったく表示されないため、スクリプトタグがまったく検出されていないようです。

更新：

回答

2 FluffyKitten Aug 20 2020 at 01:54

問題は、<p>ショートコードする前の空のタグにあります。これは、WPエディターに入力されたショートコードの一般的な問題です。これに取り組むにはいくつかの方法があります。

1. autop-autopこれをfunctions.phpに追加することで、後で実行するように優先度を変更できます。

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

2.空のpタグを削除するそれが他の出力に影響する場合は、この関数を使用<p></p>して、出力から空のタグを削除できます。

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

一意のIDがありません

また、このコードはtitleショートコードに渡されることからIDを生成しようとしているため、一意のIDを取得していません。

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

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

ただしtitle、ショートコードの属性を渡したりチェックしたりすることはありません。

投稿IDの使用を検討している場合は、次のように取得できます。

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

Unbywyd Aug 20 2020 at 01:29

ショートコード内でショートコードを使用しないでください。機能しているように見えますが、ワードプレスエディターがコンテンツを処理し、すべての改行をhtmlなどに変換する結果になります。これは、必要な構造を受け取ることを保証するものではありません。

しかし、解決策が必要な場合は、（お勧めしません）があります

1.）最初にコードを修正します（コメントに従ってください）

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

    // You need to use isset or empty methods for data validation 
    // (you had a mistake here, you didn't have a title in the attributes of shortcode

    $title = isset($atts['title']) ? $atts['title'] : ""; // same $id = !empty($atts['id']) ? $atts['id'] : rawurldecode(sanitize_title($title)); // don`t use wpautop method $cleaned_content = trim($content); // wpautop $output = '<div id="bxslider_' . $id . '" class="bxslider">'; $output .= do_shortcode($cleaned_content); $output .= '</div>';

    $output .= '<script type="text/javascript"> // Wrap your code (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;
}

そして、あなたのショートコードを使用しますが、単一のスペースはありません

[slider][slide headline="Hack Your Newsfeed" image="/wp-content/uploads/2019/10/M2020DayOne.jpg" body="Test." 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="Test" link="Facebook|https://facebook.com" link="Instagram|https://instagram.com"][/slider]

必要なものが返されることを確認しました

結果：

完全なコード

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');

JamesRyvenValeii Aug 20 2020 at 02:11

あなたのコードを使用して、いくつかのパラメーターと出力が追加された、機能するスライドショーを取得しています。