如何使用jQuery在WordPress中获取当前页面的ID

7

如何仅使用jQuery在WordPress中获取页面ID。我计划使用自定义脚本更改某个页面的样式,因此需要了解页面ID。

7个回答

9
function get_current_page_id() {
    var page_body = $('body.page');

    var id = 0;

    if(page_body) {
        var classList = page_body.attr('class').split(/\s+/);

        $.each(classList, function(index, item) {
            if (item.indexOf('page-id') >= 0) {
                var item_arr = item.split('-');
                id =  item_arr[item_arr.length -1];
                return false;
            }
        });
    }
    return id;
}

将这个函数添加到您的代码中。 现在,您可以使用以下代码获取页面 id:

var id = get_current_page_id();

6
使用 wp_localize_script
function my_custom_vars() {

global $wp_query;
    $vars = array(
        'postID' => $wp_query->post->ID,
    );

wp_localize_script( 'myvars', 'MyScriptVars', $vars );
}  

add_action ('wp_enqueue_scripts', 'my_custom_vars');

您可以这样在脚本中使用变量。
<script type="text/javascript">
    var MyPostID = MyScriptVars.postID;
</script>

2
$(document).ready(function() {
    if ($("body").hasClass("page-id-3202")) {   
        // code here
    }
});

1
你的回答可以通过添加更多关于代码的信息以及它如何帮助提问者来改进。 - Tyler2P

2

如果你想在jQuery中获取当前页面的ID,可以按以下步骤操作:

  • 首先创建一个隐藏的输入框或隐藏的HTML标签,并通过元素id将当前页面的ID添加到其中:c_pageid,值为get_the_ID();
  • 在你的jQuery文件中,你可以通过id获取这个值:var pageId=$("#c_pageid").val();

这样可能会解决你的问题。


0
在PHP中通过添加全局JavaScript变量来实现这一目的是最好的方式。
首先,在您的page.php模板文件中添加以下脚本:
<script>
var pageId = <?php echo isset($posts[0]) ? $posts[0]->ID : 'null'; ?>;
</script>

现在在你的JavaScript代码中,你可以像这样使用这个全局变量。

<script>
if(pageId !== undefined && pageId) {
 // do some code based on pageId
}
</script>

您可以使用相同的技巧在JavaScript中使用其他WordPress变量。


0
var pageId="<?php echo get_the_ID(); ?>"

在你的脚本中使用上面的代码


0
var current_page_id = get_current_page_id();

    function get_current_page_id() {
        var page_body = $('body.page');
        var page_id = '';
        if(page_body) {
            var classList = page_body.attr('class').split(/\s+/);

            $.each(classList, function(index, item) {
                if (item.indexOf('page-id') >= 0) {
                    page_id = item;
                    return false;
                }
            });
        }
        return page_id;
    }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接