Utilizzo di shortcode con bxslider

Aug 20 2020

Quindi sto costruendo uno shortcode in modo da poterlo usare con bxSlider (https://bxslider.com/examples/image-slideshow-captions/) ma per qualche motivo non riesco a far funzionare il mio javascript.

Ecco l'esempio del mio 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]

Ecco il codice che ho finora:

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

Ecco come vengono attualmente visualizzati gli 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>

Per qualche motivo, sembra che il tag script non venga rilevato affatto, poiché non vedo affatto un riferimento nella mia console.

Aggiornare:

Risposte

2 FluffyKitten Aug 20 2020 at 01:54

Il problema è con i <p>tag vuoti prima degli shortcode. Questo è un problema comune con gli shortcode inseriti nell'editor WP. Ci sono alcuni modi per affrontare questo problema:

1. autop - Puoi cambiare la priorità di autopeseguire in seguito, aggiungendolo al tuo functions.php:

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

2. Rimuovi i tag vuoti Se questo influisce su altri output, puoi usare questa funzione per rimuovere i <p></p>tag vuoti dal tuo output:

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

ID univoco mancante

Inoltre non stai ricevendo un ID univoco perché questo codice sta cercando di generarlo per titleessere passato nello shortcode:

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

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

Tuttavia non stai passando o controllando un titleattributo nel tuo shortcode.

Se stai cercando di utilizzare l'ID del post, puoi ottenerlo in questo modo:

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

Unbywyd Aug 20 2020 at 01:29

Non dovresti usare shortcode all'interno di uno shortcode, anche se sembra funzionare, ha delle conseguenze l'editor di wordpress elabora il contenuto e converte tutte le interruzioni di riga in html e altro ancora. Questo non garantisce che riceverai la struttura di cui hai bisogno.