Использование коротких кодов с bxslider

ProgramBox

Использование коротких кодов с bxslider

Post author:admin
Запись опубликована:14 апреля, 2023
Post category:Вопросы по программированию

#php #wordpress

Вопрос:

Итак, я создаю короткий код, который я могу использовать с 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>

По какой-то причине похоже, что тег script вообще не обнаруживается, поскольку я вообще не вижу ссылки в своей консоли.

Обновить:

1. Я разместил ваш код на промежуточном сайте и вижу, что скрипт объединяется с выводом. Есть ли вероятность, что на вашем сайте есть другой плагин, использующий «slider» или «слайд»? Мне пришлось изменить фрагменты коротких кодов на «theslider» и «theslide», чтобы предотвратить конфликты пространств имен.

2. @JamesRyvenValeii огромное спасибо, Джеймс! Похоже, у меня не было bxslider в очереди — Однако, как я это делаю, я не получаю никакого контента. Я обновлю скриншотом.

3. В изображении определенно что-то есть, потому что при наведении курсора мыши на URL-адрес я вижу изображение.

4. Вы должны увидеть скрипт чуть ниже <div class=»bx-slider»></div> … этого нет на вашем скриншоте.

5. @JamesRyvenValeii, похоже, что он поставлен в очередь, поскольку я вижу <script type='text/javascript' src='https://*****/wp-content/themes/***/scripts/jquery.bxslider.min.js?ver=2.0.0'></script> в своем нижнем колонтитуле.

Ответ №1:

Проблема заключается в пустых <p> тегах перед вашими короткими кодами. Это обычная проблема с короткими кодами, введенными в редактор WP. Есть несколько способов решить эту проблему:

1. автозапуск — Вы можете изменить приоритет 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 );

Отсутствует уникальный идентификатор

Вы также не получаете уникальный идентификатор, потому что этот код пытается сгенерировать его из title передачи в короткий код:

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

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

Однако вы не передаете title атрибут в своем коротком коде и не проверяете его наличие.

Если вы хотите использовать идентификатор записи, вы можете получить его следующим образом:

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

Ответ №2:

Вы не должны использовать короткие коды внутри короткого кода, даже если кажется, что это работает, это имеет последствия редактор WordPress обрабатывает содержимое и преобразует все разрывы строк в 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');

1. Вау, попробуй это сейчас! Нужна ли мне тогда еще slide_item_shortcode функция для слайда с коротким кодом? или это включено в оболочку?

2. Хотя вложенные короткие коды усложняют ситуацию, WordPress Codex никоим образом не препятствует использованию вложенных коротких кодов: codex.wordpress.org/Shortcode_API#Limitations

3. Да, вам также следует использовать вашу вторую функцию короткого кода, я просто не стал ее менять

4. @Unbywyd, большое спасибо за помощь! Теперь все, что я вижу, это два изображения, и я вообще не могу перемещать их взад и вперед. Я вижу JS-код в консоли, и я также <script type='text/javascript' src='https://***/wp-content/themes/***/scripts/jquery.bxslider.min.js?ver=2.0.0'></script> поставлен в очередь.

5. Я вижу <идентификатор div=»bxslider» class=»bxslider»>, но уникального идентификатора нет.

Ответ №3:

Я получаю работающее слайд-шоу, используя ваш код, с некоторыми добавленными параметрами и выводами:

     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]