Verwenden von Shortcodes mit bxslider

Aug 20 2020

Also erstelle ich einen Shortcode, damit ich ihn mit bxSlider verwenden kann (https://bxslider.com/examples/image-slideshow-captions/) aber aus irgendeinem Grund kann ich mein Javascript nicht arbeiten lassen.

Hier ist das Beispiel meines Shortcodes:

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

Hier ist der Code, den ich bisher habe:

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

So werden die Shortcodes derzeit gerendert:

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

Aus irgendeinem Grund sieht es so aus, als würde das Skript-Tag überhaupt nicht erkannt, da ich in meiner Konsole überhaupt keinen Verweis sehe.

Aktualisieren:

Antworten

2 FluffyKitten Aug 20 2020 at 01:54

Das Problem liegt bei den leeren <p>Tags, bevor Sie Shortcodes erstellen. Dies ist ein häufiges Problem bei Shortcodes, die in den WP-Editor eingegeben wurden. Es gibt einige Möglichkeiten, dies zu beheben:

1. autop - Sie können die Priorität von ändern autop, um sie später auszuführen, indem Sie diese zu Ihrer functions.php hinzufügen:

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

2. Leere p-Tags entfernen Wenn dies Auswirkungen auf andere Ausgaben hat, können Sie mit dieser Funktion die leeren <p></p>Tags aus Ihrer Ausgabe entfernen :

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

Fehlende eindeutige ID

Sie erhalten auch keine eindeutige ID, da dieser Code versucht, sie aus titleder Übergabe an den Shortcode zu generieren :

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

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

Sie geben jedoch kein titleAttribut in Ihrem Shortcode weiter oder suchen nicht danach.

Wenn Sie die Post-ID verwenden möchten, können Sie sie folgendermaßen erhalten:

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

Unbywyd Aug 20 2020 at 01:29

Sie sollten keine Shortcodes in einem Shortcode verwenden, obwohl dies zu funktionieren scheint, hat dies Konsequenzen, dass der WordPress-Editor den Inhalt verarbeitet und alle Zeilenumbrüche in HTML und mehr konvertiert. Dies garantiert nicht, dass Sie die Struktur erhalten, die Sie benötigen.