การใช้รหัสย่อกับ bxslider
ดังนั้นฉันจึงสร้างรหัสย่อเพื่อใช้กับ bxSlider (https://bxslider.com/examples/image-slideshow-captions/) แต่ด้วยเหตุผลบางประการฉันไม่สามารถใช้งานจาวาสคริปต์ได้
นี่คือตัวอย่างรหัสย่อของฉัน:
[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]
นี่คือรหัสที่ฉันมีจนถึงตอนนี้:
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');
นี่คือวิธีการแสดงรหัสย่อในปัจจุบัน:
<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>
ด้วยเหตุผลบางประการดูเหมือนว่าจะไม่พบแท็กสคริปต์เลยเนื่องจากฉันไม่เห็นข้อมูลอ้างอิงในคอนโซลของฉันเลย
อัปเดต:

คำตอบ
ปัญหาเกิดจาก<p>
แท็กว่างก่อนที่คุณจะย่อโค้ด นี่เป็นปัญหาทั่วไปเกี่ยวกับรหัสย่อที่ป้อนลงในตัวแก้ไข WP มีสองสามวิธีในการแก้ไขปัญหานี้:
1. autop - คุณสามารถเปลี่ยนลำดับความสำคัญของautop
การรันในภายหลังได้โดยเพิ่มสิ่งนี้ใน functions.php ของคุณ:
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99);
2. ลบแท็ก p ว่างหากส่งผลกระทบต่อเอาต์พุตอื่นคุณสามารถใช้ฟังก์ชันนี้เพื่อลบ<p></p>
แท็กว่างออกจากเอาต์พุตของคุณ:
function my_stripemptytags($content){ $pattern = "/<p[^>]*><\\/p[^>]*>/"; // remove empty p tags
return preg_replace($pattern, '', $content);
}
add_filter( 'the_content', 'my_stripemptytags', 100 );
ไม่มีรหัสที่ไม่ซ้ำกัน
นอกจากนี้คุณยังไม่ได้รับรหัสเฉพาะเนื่องจากรหัสนี้พยายามสร้างจากtitle
การส่งผ่านไปยังรหัสย่อ:
$atts = shortcode_atts( [ 'id' => '', ], $atts, 'slider');
// NOTE: THERE IS NO $atts['title'] $id = $atts['id'] ?: rawurldecode(sanitize_title($atts['title']));
อย่างไรก็ตามคุณไม่ได้ส่งผ่านหรือตรวจสอบtitle
แอตทริบิวต์ในรหัสย่อของคุณ
หากคุณต้องการใช้รหัสโพสต์คุณสามารถรับได้ดังนี้:
global $post; $title = $post->title;
คุณไม่ควรใช้รหัสย่อภายในรหัสย่อแม้ว่าดูเหมือนว่าจะใช้งานได้ แต่ก็มีผลเนื่องจากโปรแกรมแก้ไข wordpress ประมวลผลเนื้อหาและแปลงตัวแบ่งบรรทัดทั้งหมดเป็น html และอื่น ๆ สิ่งนี้ไม่ได้รับประกันว่าคุณจะได้รับโครงสร้างที่คุณต้องการ
แต่ถ้าคุณต้องการวิธีแก้ปัญหาก็มี (ไม่แนะนำ)
1. ) แก้ไขรหัสของคุณก่อน (ทำตามความคิดเห็น)
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;
}
และใช้รหัสย่อของคุณ แต่ไม่มีช่องว่างเดียว
[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]
ฉันตรวจสอบแล้วว่าส่งคืนสิ่งที่คุณต้องการ
ผลลัพธ์:

รหัสเต็ม
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');
ฉันได้รับสไลด์โชว์ที่ใช้งานได้โดยใช้โค้ดของคุณพร้อมพารามิเตอร์และเอาต์พุตเพิ่มเติม:
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');
?>
โทรผ่าน:
[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]