bxslider와 함께 단축 코드 사용

Aug 20 2020

그래서 bxSlider와 함께 사용할 수 있도록 단축 코드를 만들고 있습니다 (https://bxslider.com/examples/image-slideshow-captions/) 그러나 어떤 이유로 내 자바 스크립트가 작동하지 않습니다.

내 단축 코드의 예는 다음과 같습니다.

[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를 얻지 못합니다 .

$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 등으로 변환하는 결과를 가져옵니다. 그렇다고해서 필요한 구조를받을 수 있다는 보장은 없습니다.