WordPress 添加<p>标签到我的 javascript

Question

I use philantrophy theme, in which I added sliders via shortcodes in a page then it automatically inserted p tags inside my javascript.

below code shows p tag added in my javascript code:

<script>
jQuery(function($) {
    jQuery('.main-slider, .page-header').prepend('<img src="http://localhost/projects/new_site/wp-content/uploads/2015/07/sketch.png" alt="" id="testimage" class="hidden">');
});</p>
<p>    jQuery(document).ready(function($) {</p>
<p>        jQuery('.main-carousel').prepend('<img src="http://localhost/projects/new_site/wp-content/uploads/2015/07/sketch.png" alt="" class="testimage hidden">');</p>
<p>        jQuery('.testimage').load(function(){
        jQuery(".slider-full .spinner, .slider-full .testimage").remove();
        jQuery(".main-carousel").removeClass('invisible').addClass('animated fadeIn');
    });</p>
<p>        var slider = jQuery('#myCarousel'),
                        animateClass;</p>
<p>        //Brogressbar Slider
        var percent = 0, bar = jQuery('.brogressbar'), interval = 2;</p>
<p>        function progressBarCarousel() {
                bar.css({width:percent+'%'});
                bar.css('transition', '0.2s');
                percent = percent +1;</p>
<p>        }
        var barInterval = setInterval(progressBarCarousel, interval/105);
        slider.carousel({
                interval: interval,
                pause: false
        }).on('slide.bs.carousel', function () {
                            percent=0;
                            bar.css('transition', '0s')
                    });</p>
<p>        slider.find('[data-animate-in]').addClass('animated');</p>
<p>        function animateSlide() {
                slider.find('.item').removeClass('current');</p>
<p>                slider.find('.active').addClass('current').find('[data-animate-in]').each(function () {
                        var $this = jQuery(this);
                        animateClass = $this.data('animate-in');
                        $this.addClass(animateClass);
                });</p>
<p>                slider.find('.active').find('[data-animate-out]').each(function () {
                        var $this = jQuery(this);
                        animateClass = $this.data('animate-out');
                        $this.removeClass(animateClass);
                });
        }
        function animateSlideEnd() {
            slider.find('.active [data-animate-in], .carousel-indicators, .carousel-control').each(function () {
                    var $this = jQuery(this);
                    animateClass = $this.data('animate-in');
                    $this.removeClass(animateClass);
            });
            slider.find('.active [data-animate-in], .carousel-indicators, .carousel-control').each(function () {
                    var $this = jQuery(this);
                    animateClass = $this.data('animate-out');
                    $this.addClass(animateClass);
            });
        }</p>
<p>        slider.find('.invisible').removeClass('invisible');
        animateSlide();</p>
<p>        slider.on('slid.bs.carousel', function () {
                animateSlide();
        });
        slider.on('slide.bs.carousel', function () {
                animateSlideEnd();
        });</p>
<p>        if (Modernizr.touch) {
            slider.find('.carousel-inner').swipe( {
                    swipeLeft: function() {
                        jQuery(this).parent().carousel('prev');
                    },
                    swipeRight: function() {
                        jQuery(this).parent().carousel('next');
                    },
                    threshold: 30
            });
        }
    });</p>
<p></script>

I also tried

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

inside theme's function.php Please help me out to get rid of this. thanks in advance.

Answer 1

Here are some options,

1. Take all the whitespace out of the script so that WordPress does not add <p> tags.
2. Check out this link http://codex.wordpress.org/Using_Javascript

The safe and recommended method of adding JavaScript to a WordPress generated page, and WordPress Theme or Plugin, is by using wp_enqueue_script(). This function includes the script if it hasn't already been included, and safely handles dependencies.

As stated here https://codex.wordpress.org/Function_Reference/wp_enqueue_script

This is the recommended method of linking JavaScript to a WordPress generated page.

Copy and save your script in a new file and copy it's directory.

Example Usage

wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );

Link a Theme Script Which Depends on jQuery

wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom_script.js', array( 'jquery' ));

Answer 2

There's a trick you could bypass the plugin installation if you do not have that ability.

1. Minify your JavaScript Code into one line. You can use any JS minifier available online.
2. Paste that on your page while like {minified code} to make sure everything is on one line.

Now even if the paragraph tag is added, it does not matter as the script would still execute.

Answer 3

I see its an old question, but I ran into it quite recently. I got it working without any plugins using the following approach:

<script type="text/javascript">
//<![CDATA[

your code

//]]>
</script>

Live example (2nd code listing): JavaScript in Beitrag einbetten . Not sure if it is working for all wordpress versions - worth a try I guess.