Menggunakan shortcode dengan bxslider
Jadi saya membuat kode pendek agar bisa saya gunakan dengan bxSlider (https://bxslider.com/examples/image-slideshow-captions/) tetapi untuk beberapa alasan saya tidak dapat membuat javascript saya berfungsi.
Berikut contoh shortcode saya:
[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]
Berikut kode yang saya miliki sejauh ini:
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');
Berikut adalah bagaimana shortcode dirender saat ini:
<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>
Untuk beberapa alasan, sepertinya tag skrip tidak terdeteksi sama sekali, karena saya tidak melihat referensi sama sekali di konsol saya.
Memperbarui:
Jawaban
Masalahnya adalah dengan <p>tag kosong sebelum Anda melakukan shortcode. Ini adalah masalah umum dengan shortcode yang dimasukkan ke editor WP. Ada beberapa cara untuk mengatasinya:
1. autop - Anda dapat mengubah prioritas autopuntuk dijalankan nanti, dengan menambahkan ini ke functions.php Anda:
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99);
2. Hapus tag p kosong Jika itu mempengaruhi keluaran lain, Anda dapat menggunakan fungsi ini untuk menghapus <p></p>tag kosong dari keluaran Anda:
function my_stripemptytags($content){ $pattern = "/<p[^>]*><\\/p[^>]*>/"; // remove empty p tags
return preg_replace($pattern, '', $content);
}
add_filter( 'the_content', 'my_stripemptytags', 100 );
ID unik tidak ada
Anda juga tidak mendapatkan id unik karena kode ini mencoba membuatnya agar titletidak diteruskan ke shortcode:
$atts = shortcode_atts( [ 'id' => '', ], $atts, 'slider');
// NOTE: THERE IS NO $atts['title'] $id = $atts['id'] ?: rawurldecode(sanitize_title($atts['title']));
Namun Anda tidak meneruskan atau memeriksa titleatribut di kode pendek Anda.
Jika Anda ingin menggunakan id posting, Anda bisa mendapatkannya seperti ini:
global $post; $title = $post->title;
Anda tidak boleh menggunakan kode pendek di dalam kode pendek, meskipun tampaknya berfungsi, itu memiliki konsekuensi editor wordpress memproses konten dan mengubah semua jeda baris menjadi html dan banyak lagi. Ini tidak menjamin bahwa Anda akan menerima struktur yang Anda butuhkan.
tetapi jika Anda menginginkan solusi, maka ada (tidak disarankan)
1.) perbaiki kode Anda terlebih dahulu (Ikuti komentar)
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;
}
Dan gunakan kode pendek Anda tetapi tanpa spasi
[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]
Saya memeriksanya mengembalikan apa yang Anda butuhkan
Hasil:
Kode lengkap
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');
Saya mendapatkan tayangan slide yang berfungsi menggunakan kode Anda, dengan beberapa parameter dan keluaran tambahan:
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');
?>
Dipanggil melalui:
[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]