在本教程中，让我们谈谈header.php文件，它是任何 wordpress 主题的必备文件。我将向您展示一个头文件示例，并提供有关其中需要哪些内容和不需要哪些内容的提示。
介绍
了解 WordPress 主题中的header.php文件究竟应该包含什么对您来说很重要。
我们在这个文件中不仅有一个徽标和菜单——我们还有head标签和许多其他标签，如link、script、meta和title.
在本文的过程中，我们将创建一个演示header.php文件，我们将讨论该文件中的每个元素。
请记住，您网站的标题是显示在您网站所有页面上的内容。例如，徽标和菜单显示在您网站的所有页面上，因此它们应该包含在header.php文件中。
如果一个元素只显示在特定页面上，那么您不应该将它包含在header.php文件中。
示例代码
在本节中，我们将构建一个演示header.php文件。在下一节中，我们将通过每一段代码来了解它的作用。
但在我们实现标头之前，让我们将以下代码粘贴到wp-includes/functions.php文件的顶部。请记住根据需要修改 css 和 javascript 文件的路径。
remove_action('wp_head', 'wp_generator');
function enqueue_styles() {
/** REGISTER css/screen.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
function enqueue_scripts() {
/** REGISTER html5 Shim **/
wp_register_script( 'html5-shim', 'https://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'html5-shim' );
/** REGISTER HTML5 OtherScript.js **/
wp_register_script( 'custom-script', get_template_directory_uri() . '/js_path/customscript.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );接下来，让我们看一下示例header.php文件。你应该在wp-content/themes/theme-name/header.php创建这个文件。 当然，您需要使用主题的实际名称调整主题名称部分。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Keywords">
<meta name="author" content="Name">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/path/favicon.ico" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />
<?php //comments_popup_script(); // off by default ?>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<!--=== WP_HEAD() ===-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="rap">
<h1 id="header">
<!-- HERE GOES YOUR HEADER MARKUP, LIKE LOGO, MENU, SOCIAL ICONS AND MORE -->
</h1>
<div id="content">
<!-- end header -->一般来说，header.php文件必须包含几个元素，例如：
文档类型
<html>标签
元标记
头部标签
网站图标、RSS 和 pingback
标题
wp_enqueue_script使用andwp_enqueue_style函数添加的脚本和样式
在下一节中，我们将了解到目前为止我们为构建自定义header.php文件所实现的内容。
详细的functions.php文件
让我们从functions.php文件开始。我们在文件中添加了这些行：
remove_action('wp_head', 'wp_generator');
function enqueue_styles() {
/** REGISTER css/screen.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
function enqueue_scripts() {
/** REGISTER HTML5 Shim **/
wp_register_script( 'html5-shim', 'https://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'html5-shim' );
/** REGISTER HTML5 OtherScript.js **/
wp_register_script( 'custom-script', get_template_directory_uri() . '/js_path/customscript.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );删除元生成器标签
以下行删除了元生成器标签，因为它显示了 WordPress 版本号。公开您的 WordPress 版本号是不明智的，这可能会使您容易受到与版本相关的攻击。因此，我们已将其删除。
remove_action( 'wp_head' , 'wp_generator' );
添加你的 CSS
function enqueue_styles() {
/** REGISTER css/screen.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );在本例中，我们创建了将标签添加到header.phpenqueue_styles文件的函数。官方 WordPress 文档说添加样式表（.css）和脚本（.js）的最佳方法是使用and函数。您可以在我们的文章如何在您的 WordPress 主题和插件中包含 JavaScript 和 CSS 中了解更多信息。
linkwp_enqueue_scriptwp_enqueue_style
首先，我们创建了一个名为的函数enqueue_styles，然后我们调用了该add_action函数，它告诉 WordPress 必须在wp_enqueue_scripts触发钩子时调用我们的函数，这发生在我们调用header.phpwp_head()文件的过程中。
在我们的函数中，我们有以下几行：
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' ); wp_enqueue_style( 'screen-style' );
首先，我们注册我们的 CSS 并将其添加到 WordPress 队列中。
我们已经使用该wp_register_style函数来注册我们的自定义样式，并且该函数具有以下参数：
$handle：您可以选择的名称——例如mystyle,mediaqueries等。
$src:文件路径
$deps: dependencies，在这个文件之前需要加载的样式文件的名字
$ver：资产版本
$media：将加载此样式表的媒体
然后，我们调用了wp_enqueue_style函数，并在函数的第一个参数中传递了我们的样式名称wp_enqueue_style，因此它将被添加到队列中。
要添加更多样式，只需复制这两行并修改名称、目录和其他参数。
添加脚本
接下来，我们将看到添加脚本的函数。
function enqueue_scripts() {
/** REGISTER HTML5 Shim **/
wp_register_script( 'html5-shim', 'https://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'html5-shim' );
/** REGISTER HTML5 OtherScript.js **/
wp_register_script( 'custom-script', get_template_directory_uri() . '/js_path/customscript.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );在这种情况下，过程也几乎相同——唯一的区别是我们使用了不同的函数来添加脚本。
为了添加脚本，我们使用了wp_register_scriptandwp_enqueue_script函数。该wp_register_script函数需要以下参数：
$handle:一个你可以选择的名字——比如 jquery、dojo 等等。
$src:文件路径
$deps: dependencies，在这个文件之前需要加载的脚本文件名
$ver：资产版本
$in_footer:是否在之前</body>而不是在<head>
然后，我们调用了wp_enqueue_script函数，并在函数的第一个参数中传递了脚本的名称wp_enqueue_script，因此它将被添加到队列中。
要添加更多脚本，只需复制这两行并修改名称、目录和其他参数。
了解 header.php 文件
这doctype
所有页面都应以声明开头，doctype如以下代码段所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
<html>标签_
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
这是html文档的根。还需要注意的是，我们已经使用该language_attributes函数为html标签添加了必要的语言属性。
<meta>标签_
元标记非常重要，因为它们将某些信息传递给浏览器以确保正确呈现您的主题。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
上面的代码确保浏览器不会使用 quirks 模式，这非常有用，因为这种渲染模式会破坏布局。
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />上面的行为charset浏览器设置了，避免未知字符！
<meta name="description" content="Keywords"><meta name="author" content="Name">
在上面的代码片段中，我们添加了一些基本的元标记，可以帮助改善您网站的 SEO。您可以添加描述您的网站的关键字并输入您的姓名或公司名称。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
如果您正在使用响应式布局，上述标签将删除并重置 ipad 和 iphone 等移动设备的任何默认缩放。
<link>标签_
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/path/favicon.ico" />
上面的代码片段为您的页面添加了一个网站图标图标，为您的网站提供更专业的触感。
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />上面的代码片段添加了一个指向您网站的 RSS 提要的链接。
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />最后，您可以使用上面的代码段添加指向您网站的 pingback URL 的链接。
<title>标签_
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>标题标签非常重要，因为它取代了默认标题，有助于提高您在搜索引擎中的排名。
wp_head()功能_
<?php wp_head(); ?>
这是一个非常重要的函数——你必须调用这个函数！通过此功能，WordPress 添加来自插件、其他 javaScript 库等的代码。
标题部分
最后，对于显示网站徽标和主菜单的通用标题，您可以使用div以下代码段中所示的标签。
<h1 id="header"> <!-- HERE GOES YOUR HEADER MARKUP, LIKE LOGO, MENU, SOCIAL ICONS AND MORE --> </h1>
结论
这就是您可以使用header.php文件在 WordPress 主题中准备公共标题的方法。
- 删除元生成器标签
- 添加你的 CSS
- 添加脚本
- 这doctype
- <html>标签_
- <meta>标签_
- <link>标签_
- <title>标签_
- wp_head()功能_
- 标题部分
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
发表评论