Usando códigos cortos con bxslider

Aug 20 2020

Así que estoy construyendo un código corto para poder usarlo con bxSlider (https://bxslider.com/examples/image-slideshow-captions/) pero por alguna razón no puedo hacer funcionar mi javascript.

Aquí está el ejemplo de mi shortcode:

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

Aquí está el código que tengo hasta ahora:

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

Así es como se procesan los códigos cortos actualmente:

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

Por alguna razón, parece que la etiqueta del script no se detecta en absoluto, ya que no veo ninguna referencia en mi consola.

Actualizar:

Respuestas

2 FluffyKitten Aug 20 2020 at 01:54

El problema es con las <p>etiquetas vacías antes de los códigos cortos. Este es un problema común con los códigos cortos ingresados en el editor de WP. Hay algunas formas de abordar esto:

1. autop - Puede cambiar la prioridad de autoppara que se ejecute más tarde, agregando esto a su functions.php:

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

2. Eliminar etiquetas p vacías Si eso afecta a otra salida, puede usar esta función para eliminar las <p></p>etiquetas vacías de su salida:

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

Falta una identificación única

Tampoco está obteniendo una identificación única porque este código está tratando de generarla para que no titlese pase al código corto:

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

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

Sin embargo, no está pasando o buscando un titleatributo en su código corto.

Si está buscando usar la identificación de la publicación, puede obtenerla así:

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

Unbywyd Aug 20 2020 at 01:29

No debe usar códigos cortos dentro de un código corto, aunque parece funcionar, tiene consecuencias: el editor de wordpress procesa el contenido y convierte todos los saltos de línea a html y más. Esto no garantiza que recibirá la estructura que necesita.