Question

我正在使用wordpress建立一个网站。当放入一个特定的代码块wordpress时，看似没有理由会在我的代码中添加额外的HTML来搞砸格式化。我查了过来，发现没有明显的错误会导致这种行为。这是相关的代码（我已经包含了大部分代码，因为我不知道问题究竟在哪里）

<div class = "section">
    <script type="text/javascript">
            var imageCount = 0;
            var position = 0;
            var isStopped = false;
            $( document ).ready(function() {
                imageCount =  document.getElementsByClassName("rotator").length; //Pull all elements into an array and count the number to get the count.
                //setButtons();
            });

            function nextImage() {
                    var rotationNumber = $('#imgGal').width() * imageCount; //determines when it should cycle back to the beginning
                    position += $('#imgGal').width();//position change to width of the element
                    if (position >= rotationNumber) //cycle once the end is reached
                    {
                        position = 0;
                    }

                //jquery to animate the transition
                    $( ".rotator" ).animate({
                      right: position
                    }, 1000 );
            }
            function previousImage() {
                    var rotationNumber = $('#imgGal').width() * imageCount; //determines the end

                    if (position <= 0) //cycle once the beginning is reached
                    {
                        position = rotationNumber - $('#imgGal').width();
                    }
                    else{
                        position -= $('#imgGal').width();//position change to width of the element
                    }
                    //jquery to animate the transition
                    $( ".rotator" ).animate({
                      right: position
                    }, 1000 );
            }
        </script>
<div id = "testimonials">
<a class = "controls" onclick="previousImage()"><div class = "arrow">&lt;</div></a><!--
--><div id = "imgGal">
<div class = "rotator">
<div class = "blurb">
<h3>John Doe</h3><p>"Positive Testimonial"</p>
</div>
</div><!--
--><div class = "rotator">
<div class = "blurb">
<h3>John Doe the Second</h3><p>"Positive Testimonial"</p>
</div>
</div>  
</div><!--
--><a class = "controls" onclick="nextImage()"><div class = "arrow">&gt;</div></a>
</div>
</div>
</div>

这就是发布后的样子

    <div class="section">
    <script type="text/javascript">
            var imageCount = 0;
            var position = 0;
            var isStopped = false;
            $( document ).ready(function() {
                imageCount =  document.getElementsByClassName("rotator").length; //Pull all elements into an array and count the number to get the count.
                //setButtons();
            });</p>
<p>         function nextImage() {
                    var rotationNumber = $('#imgGal').width() * imageCount; //determines when it should cycle back to the beginning
                    position += $('#imgGal').width();//position change to width of the element
                    if (position >= rotationNumber) //cycle once the end is reached
                    {
                        position = 0;
                    }</p>
<p>             //jquery to animate the transition
                    $( ".rotator" ).animate({
                      right: position
                    }, 1000 );
            }
            function previousImage() {
                    var rotationNumber = $('#imgGal').width() * imageCount; //determines the end</p>
<p>                 if (position <= 0) //cycle once the beginning is reached
                    {
                        position = rotationNumber - $('#imgGal').width();
                    }
                    else{
                        position -= $('#imgGal').width();//position change to width of the element
                    }
                    //jquery to animate the transition
                    $( ".rotator" ).animate({
                      right: position
                    }, 1000 );
            }
        </script><p></p>
<div id="testimonials">
<a class="controls" onclick="previousImage()"><p></p>
<div class="arrow">&lt;</div>
</a><p><a class="controls" onclick="previousImage()"></a><!--
--></p>
<div id="imgGal">
<div class="rotator">
<div class="blurb">
<h3>John Doe</h3>
<p>"Positive Testimonial"</p>
</div>
</div>
<p><!--
--></p>
<div class="rotator">
<div class="blurb">
<h3>John Doe the Second</h3>
<p>"Positive Testimonial"</p>
</div>
</div>
</div>
<p><!--
--><a class="controls" onclick="nextImage()"></a></p><a class="controls" onclick="nextImage()">
<div class="arrow">&gt;</div>
</a><p><a class="controls" onclick="nextImage()"></a>
</p></div>
</div>

注意元素的加倍和随机p标签的插入？我一直无法找到任何东西，所以我有点难过。如果我隔离了它正在发生的代码并且只是将它放在一个非wordpress HTML页面中，问题就不会发生。它专门用于我用来触发javascript的标签

实际存在问题的代码

从这个

开始

<a class = "controls" onclick="previousImage()"><div class = "arrow">&lt;</div></a>

<a class = "controls" onclick="nextImage()"><div class = "arrow">&gt;</div></a>

到这个

<a class="controls" onclick="previousImage()"><p></p>
<div class="arrow">&lt;</div>
</a><p><a class="controls" onclick="previousImage()"></a><!--
--></p>

<a class="controls" onclick="nextImage()"></a></p><a class="controls" onclick="nextImage()">
<div class="arrow">&gt;</div>
</a><p><a class="controls" onclick="nextImage()"></a>

Answer 1

正如@ janh2所述。这最有可能归结为＆＃39; wpautop＆＃39; - https://codex.wordpress.org/Function_Reference/wpautop

您可以通过添加以下代码来禁用它：

remove_filter( 'the_content', 'wpautop' );

或

remove_filter( 'the_excerpt', 'wpautop' );

或两者......

我不得不问，为什么要在WordPress页面内容中添加JavaScript？它不是推荐的将JavaScript代码添加到WordPress网站的方法，它应该按照WordPress Codex中的文档排队：

https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

Wordpress添加额外的HTML似乎没有理由

1 个答案: