WordPress主题header.php的优化

[斜眼笑]最近发现很多用WordPress主题的同学,代码不规范,效率不高,所以准备一些系列教程,把在别的主题上看到的常见的不合理或者可以更优化地方贴出来,供大家参考。

header.php一般在主题中作为头部文件引入,没毛病吧?

优化一. js和css路径的输出[微笑]
header.php文件中,常见的问题(不是错误)就是在js和css文件的引入上,很多WordPress同学是在header.php中直接写上css或js的路径,如下:

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/theme.js" type="text/javascript" ></script>

问题:WordPress不推荐使用bloginfo的stylesheet_directory来输出主题的uri,为什么呢?[疑问]

执行bloginfo('stylesheet_directory'),首先是调用get_bloginfo('stylesheet_directory'),然后get_bloginfo函数里面根据'stylesheet_directory'参数又调用get_stylesheet_directory_uri函数,或者调用get_template_directory_uri函数。

改进:WordPress官方文档也推荐直接使用get_template_directory_uri等函数,所以改进代码:

<script src="<?php echo get_template_directory_uri(); ?>/js/theme.js" type="text/javascript" ></script>

更高级的用法:此处更高级的用法适用于你写的主题给别人用,或者发布给很多人用。

所有js和css使用wp_head钩子输出,wp默认主题也是这么做的。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '_', true, 'right' ); ?></title>
<?php wp_head(); ?>
</head>

解释

在html标签中用language_attributes函数输出语言,适用于多语言环境,也可以直接写lang="zh-CN"或者lang="en-US"

使用bloginfo( 'charset' )输出编码,直接写出charset="UTF-8"也可。

title在新的wp主题里面标签也是不要的,直接用add_theme_support函数即可。

重点是wp_head函数,这个函数调用的各个钩子,可以输出title标签,可以输出js路径,可以输出css路径......

有了wp_head函数,在functions.php文件中用如下代码即可

function ashuwp_scripts_styles() {
  //输出style.css文件
  wp_enqueue_style( 'ashuwp_style', get_stylesheet_uri(), array(), '1.0' );
  //输出其他路径的css文件
  wp_enqueue_style( 'font-awesome', get_template_directory_uri().'/css/font-awesome.min.css', array(), '1.0' );
  //输出自带的jquery
  wp_enqueue_script( 'jquery' );
  //输出其他路径的js
  wp_enqueue_script( 'ashuwp_js', get_template_directory_uri().'/js/ashuwp.js', array(), '1.0', true);
}
add_action( 'wp_enqueue_scripts', 'ashuwp_scripts_styles' );

嗯,就这些吧,咱也不敢说 咱也不敢问。都是偷来的 [斜眼笑]

上一篇 如何解决Emlog评论的Gravatar头像不显示
下一篇 Emlog IIS7.5伪静态
文章列表
1 QQ聚合登录各种对接插件下载
QQ聚合登录各种对接插件下载
2
PHP必应每日壁纸图片API接口源码
PHP必应每日壁纸图片API接口源码
3
博客恢复更新
博客恢复更新
4
大米博客陪您过年啦
大米博客陪您过年啦
5
WordPress 后台美化插件WPShapere 5.08汉化版
WordPress 后台美化插件WPShapere 5.08汉化版
大米酱

大米酱管理员

三百六十行,行行出BUG。

本月创作热力图

最新评论
学习一下
学习一下
6月29日
学习一下
ziaowan
ziaowan
6月11日
OK
ziaowan
ziaowan
6月8日
阿洋
阿洋
6月2日
感谢作者分享
2067608730
2067608730
4月11日
加油大米!quantou
评论于APINEXT