正文

WordPress is_page 实战，给指定页面换模板、加样式、藏侧边栏，新手照做就行

站长手记
站长手记 V管理员 /847阅读/3评论
0916
文章最后更新时间2026年09月16日，若文章内容或图片失效，请留言反馈！

刚装好 WordPress，用现成主题做企业站、博客、外贸站的新手；想让“关于我们”“联系我们”“服务”等页面单独换样式、换头部或隐藏侧边栏，但不会写复杂插件的人；听过 WordPress is_page，却不知道放在哪里、怎么写、为什么没生效的人。

WordPress is_page 实战，给指定页面换模板、加样式、藏侧边栏，新手照做就行

WordPress is_page 实战，给指定页面换模板、加样式、藏侧边栏，新手照做就行

先把话放这：能用一个条件判断解决的事，别急着装插件。WordPress is_page WordPress 自带的条件标签，用来判断“当前访问的是不是一个页面”，以及“是不是某个指定页面”，注意，它判断的是页面 Page，不是文章 Post，也不是分类，你把这句话记住,后面就顺了。

完整搭建步骤

第 1 步：准备基础环境

你需要：域名、主机、已经安装好的 WordPress，后台能进，固定链接建议先到“设置 > 固定链接”，选择“文章名”，保存一次，别小看这一步，很多新手后面访问 /about/ 404,就是固定链接没刷新。

第 2 步：创建测试页面

进入后台“页面 > 新建页面”,依次创建：

  • 关于我们，固定链接 slug 改成 about
  • 联系我们，slug 改成 contact
  • 服务，slug 改成 services

发布后，前台访问 你的域名/about/,能打开就继续。

第 3 步：建子主题，别直接改父主题

进入 wp-content/themes/，新建文件夹，mytheme-child，里面建 style.css：

/*
Theme Name: My Theme Child
Template: twentytwentyfour
Version: 1.0
*/

Template 后面必须写你当前父主题的文件夹名，然后新建 functions.php，开头写 <?php，到后台“外观 > 主题”启用子主题，这样父主题更新,你的代码不会丢。

第 4 步：先测试 is_page 是否生效

在子主题里新建或编辑 footer.php,临时加：

<?php
if ( is_page( 'about' ) ) {
    echo '<p>当前是关于我们页面</p>';
}
?>

保存后访问 /about/，看到这行字，说明 WordPress is_page 生效，访问其他页面看不到，就对了,测试完删掉这段临时代码。

第 5 步：给指定页面加载专属 CSS

在子主题 functions.php 里写：

add_action( 'wp_enqueue_scripts', function () {
    if ( is_page( 'about' ) ) {
        wp_enqueue_style(
            'about-style',
            get_stylesheet_directory_uri() . '/css/about.css',
            array(),
            '1.0'
        );
    }
} );

然后在子主题建 css/about.css,写你的样式，

body.page-id-42 .site-header {
    background: #0f172a;
}

页面 ID 怎么拿？后台“页面”列表，鼠标放到“关于我们”的编辑链接上，看 URL 里的 post=42，42 ID。

第 6 步：隐藏指定页面的侧边栏

找到子主题里的 page.php 或 singular.php，搜索 get_sidebar();,改成：

<?php
if ( ! is_page( 'about' ) ) {
    get_sidebar();
}
?>

如果你的主题结构复杂，找不到，就用 CSS 兜底：

body.page-id-42 .sidebar {
    display: none;
}

.sidebar 这个类名要用浏览器右键“检查”确认,不同主题可能叫别的。

第 7 步：一次判断多个页面

WordPress is_page 支持数组：

if ( is_page( array( 'about', 'contact', 'services' ) ) ) {
    // 这三个页面共用一套逻辑
}

也可以按 ID 判断，ID 最稳：

if ( is_page( array( 42, 43, 44 ) ) ) {
    // 指定 ID 页面
}

第 8 步：给关于我们换独立头部

在 page.php 顶部把：

<?php get_header(); ?>

改成：

<?php
if ( is_page( 'about' ) ) {
    get_header( 'about' );
} else {
    get_header();
}
?>

然后复制父主题 header.php 到子主题，改名 header-about.php，再修改，注意不要在 header.php 里面再调用 get_header('about'),会递归。

配置要点

  1. is_page() 无参数：判断当前是不是页面。
  2. is_page( 'about' )：判断是不是 slug 为 about 的页面。
  3. is_page( 42 )：判断是不是 ID 为 42 的页面。
  4. is_page( array( 'about', 'contact' ) )：判断多个页面。
  5. 它要放在主查询之后，wp_enqueue_scripts、模板文件里，不要直接在 functions.php 顶层裸写。
  6. 页面 slug 尽量用英文小写，别用中文或空格。
  7. 能用 page-about.php 页面模板解决的，也可以不用 is_page。is_page 更适合在通用模板里做条件分支。

常见踩坑提醒

  • 在 functions.php 最外层直接写 if ( is_page() )，基本不生效,要挂到钩子里。
  • 把 is_page 和 is_single 搞混，页面用 is_page，文章用 is_single。
  • 改了 slug，但代码里还写旧 slug，判断自然失效，重要页面建议用 ID。
  • 没建子主题，父主题一更新,代码全没。
  • 缓存插件、CDN、浏览器缓存没清,代码改了前台没变化。
  • 固定链接没刷新，访问 /about/ 404。
  • 在 pre_get_posts 里直接用 is_page() 不可靠，应该用 $query->is_page。
  • 用了 query_posts 后忘记 wp_reset_query(),后面条件判断会乱。
  • 关于我们”被设为静态首页，is_page 和 is_front_page 可能同时为真,要先判断首页优先级。

最后验收：打开 /about/，按 F12 看 about.css 是否加载；打开 /contact/，确认没加载；手机端再看一遍；清缓存再刷新，照着做，WordPress is_page 就能变成你控制页面差异化的顺手工具。