Utilisation de shortcodes avec bxslider

Aug 20 2020

Je construis donc un shortcode pour pouvoir l'utiliser avec bxSlider (https://bxslider.com/examples/image-slideshow-captions/) mais pour une raison quelconque, je ne parviens pas à faire fonctionner mon javascript.

Voici l'exemple de mon 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]

Voici le code que j'ai jusqu'à présent:

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

Voici comment les codes courts sont actuellement rendus:

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

Pour une raison quelconque, il semble que la balise de script n'est pas du tout détectée, car je ne vois aucune référence dans ma console.

Mettre à jour:

Réponses

2 FluffyKitten Aug 20 2020 at 01:54

Le problème est avec les <p>balises vides avant les codes courts. Il s'agit d'un problème courant avec les codes courts entrés dans l'éditeur WP. Il existe plusieurs façons de résoudre ce problème:

1. autop - Vous pouvez changer la priorité de autoppour exécuter plus tard, en ajoutant ceci à votre functions.php:

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

2. Supprimer les balises p vides Si cela affecte une autre sortie, vous pouvez utiliser cette fonction pour supprimer les <p></p>balises vides de votre sortie:

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

Identifiant unique manquant

Vous titlen'obtenez pas non plus un identifiant unique car ce code tente de le générer à partir de sa transmission dans le shortcode:

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

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

Cependant, vous ne transmettez pas ou ne vérifiez pas un titleattribut dans votre shortcode.

Si vous cherchez à utiliser l'identifiant de publication, vous pouvez l'obtenir comme ceci:

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

Unbywyd Aug 20 2020 at 01:29

Vous ne devriez pas utiliser de shortcodes dans un shortcode, même si cela semble fonctionner, cela a des conséquences que l'éditeur wordpress traite le contenu et convertit tous les sauts de ligne en html et plus encore. Cela ne garantit pas que vous recevrez la structure dont vous avez besoin.