EP020. “杂项调整与响应式 Meta 标签”

首页 › WordPress 开发课程 › PAGE TEMPLATE · EP020

约 6 分钟· #EP020#PAGE TEMPLATE

这一讲是几个跟着做就好的小调整，主要目的是让网站在手机等小屏幕设备上正常显示（响应式），顺便让 WordPress 自动帮忙生成几个 head 区块该有的标准标签：viewport、语言、字符集，还有给 <body> 加上一堆有用的 class。

涉及文件

wp-content/themes/fictional-university-theme/header.php （修改）

代码实现

header.php 的 <head> 和 <body> 部分新增了四处：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <header class="site-header">

新增 <meta name="viewport" ...>：告诉浏览器/设备用自己原生的宽度显示页面，而不是把整个桌面版布局缩小塞进小屏幕里（那样字会小到要用手指放大缩小才能看）。
<html> 标签里新增 <?php language_attributes(); ?>：WordPress 会根据后台设置的语言，自动生成类似 lang="en-US" 的属性。
新增 <meta charset="<?php bloginfo('charset'); ?>">：WordPress 会根据语言等设置自动输出正确的字符集（比如 UTF-8）。
<body> 标签里新增 <?php body_class(); ?>：WordPress 会根据当前页面类型自动生成一堆 class，比如首页是 home，About Us 页面是 page-template-default page page-id-16 page-parent，子页面是 page-id-22 page-child parent-pageid-16 这种，方便针对特定页面写 CSS 或 JS。

Hook / Function 速查

名称	类型	用途
`language_attributes()`	WP 内建 function	输出 `<html>` 标签需要的语言相关属性（如 `lang="en-US"`）
`bloginfo('charset')`	WP 内建 function	输出当前站点使用的字符集
`body_class()`	WP 内建 function	根据当前页面类型/ID/登录状态等，自动生成一串 `<body>` 的 class
`<meta name="viewport">`	HTML 标签（非 WP 函数）	告诉设备用自己原生宽度显示页面，是响应式设计的必要前提之一

常见坑

加了 viewport meta 标签不代表网站就自动变成响应式了，这个标签只是让设备「诚实」显示自己的原生尺寸，真正的响应式效果还是要靠自己写响应式 CSS。如果发现 CSS 明明写了响应式规则但网站在手机上还是不对，很可能就是漏了这个 meta 标签。

延伸 / 后续讲座会用到

下一讲（EP021）会讲怎么建立可以在后台「外观 - 菜单」管理的动态导航菜单。

Sources

Udemy：

Become a WordPress Developer: Unlocking Power With Code — Section 5, EP020