如何在特定的Wordpress页面上运行JavaScript函数？

Question

I'm trying to run the following script on a specific Wordpress page, but it's not working. The script does work but when not applied to the specific page. Yes the page id is correct. What did I do wrong? Thanks in advance.

<?php if (is_page('page-id-48857') ):?>
    <script>
        jQuery(document).ready(function ($) {
        $(function () {
            var $content = $('#jsonContent');
            var data = {
                rss_url: 'https://inside.calpoly.edu/feed'
            };
            $.get('https://api.rss2json.com/v1/api.json', data, function (response) {
                if (response.status == 'ok') {
                    var output = '';
                    $.each(response.items, function (k, item) {

                        output += '<div class="post-card category-medium published">';
                        //output += '<h3 class="date">' + $.format.date(item.pubDate, "dd<br>MMM") + "</h4>";
                        var tagIndex = item.description.indexOf('<img'); // Find where the img tag starts
                        var srcIndex = item.description.substring(tagIndex).indexOf('src=') + tagIndex; // Find where the src attribute starts
                        var srcStart = srcIndex + 5; // Find where the actual image URL starts; 5 for the length of 'src="'
                        var srcEnd = item.description.substring(srcStart).indexOf('"') + srcStart; // Find where the URL ends
                        var src = item.description.substring(srcStart, srcEnd); // Extract just the URL
                        output += '<p class="post-meta">';
                        //output += '<span class="published">' + item.pubDate + '</span>';
                        output += '<a href="https://inside.calpoly.edu/" target="_blank">@inside.calpoly.edu</span></a>';
                        output += '</p>';

                        output += '<h2 class="entry-title">' + item.title + '</h2>';
                        //output += '<div class="post-meta"><span>By ' + item.author + '</span></div>';
                        var yourString = item.description.replace(/<img[^>]*>/g,""); //replace with your string.
                        var maxLength = 300 // maximum number of characters to extract
                        //trim the string to the maximum length
                        var trimmedString = yourString.substr(0, maxLength);
                        //re-trim if we are in the middle of a word
                        trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))

                        output += '<div class="excerpt">'+trimmedString + '</div>';
                        output += '<a href="'+ item.link + '" class="more-link cpc-button activeghostdark small">Read More</a>';
                        output += '<a class="entry-featured-image-url" href="'+ item.link + '"><img src="' + src + '"></a>';

                        output += '</div>';
                        return k < 1;
                    });
                    $content.html(output);
                }
            });
        });
    </script>

<?php endif; ?>

Answer 1

You are passing in an invalid ID to the is_page() function.

Based off of your code sample, you should be using an integer for your post ID and not a string and also not the 'page-id' portion.

https://developer.wordpress.org/reference/functions/is_page/

Here's some example usages:

// When any single Page is being displayed.
is_page();

// When Page 42 (ID) is being displayed.
is_page( 42 );

// When the Page with a post_title of "Contact" is being displayed.
is_page( 'Contact' );

// When the Page with a post_name (slug) of "about-me" is being displayed.
is_page( 'about-me' );

In your case you should be using:

<?php if (is_page(48857) ):?>

Answer 2

WordPress' is_page() function requires a "Page ID, title, slug, or array of such.". 'page-id-48857' is the body class, you need to just use is_page( 48857 ) since the actual ID is just 48857 .

Also note that you should seriously consider using wp_enqueue_script() instead of coding in a custom script tag. It will save you countless headaches in the future.