另一种加载父主题样式的方法

有些时候为个性化主题,我们会制作子主题方便修改主题功能外观,而不用修改原主题,通常我们会用:

  1. @import url( '../parent-theme-folder/style.css' );

这种方式加载父主题的样式。

详见:

  • Codex: How to create a child theme
  • Handbook: Inheriting styles in child themes
  • _s Theme: Load parent styles when child theme is activated

但使用@ import方式加载样式也有一定的缺点,比如:加载慢等。

我们可以使用另一种加载父主题样式的方法:

  1. add_action( 'wp_enqueue_scripts', 'my_parent_theme_css' );
  2. function my_parent_theme_css() {
  3.     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  4.     wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
  5. }

将代码添加到子主题functions.php 模板文件中。

还可以进一步:

  1. add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
  2. function my_enqueue_styles() {
  3.     /* If using a child theme, auto-load the parent theme style. */
  4.     if ( is_child_theme() ) {
  5.         wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css' );
  6.     }
  7.     /* Always load active theme's style.css. */
  8.     wp_enqueue_style( 'style', get_stylesheet_uri() );
  9. }

在某些特殊的情况下,你可能不希望加载父主题的样式,可以这样写:

  1. add_action( 'wp_enqueue_scripts', 'my_dequeue_styles', 11 );
  2. function my_dequeue_styles() {
  3.     wp_dequeue_style( 'parent-style' );
  4. }

原文:http://justintadlock.com/archives/2014/11/03/loading-parent-styles-for-child-themes

继续阅读
历史上的今天
十一月
9
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
  • 版权声明: 发表于 2015年11月9日15:44:52
  • 转载注明:http://xcyu.cn/1646.html
WordPress 4.4正式版发布 WordPress

WordPress 4.4正式版发布

按照WordPress官方的规划,WordPress 4.4正式版会在北京时间2015年12月9号发布,今天WordPress官方按照正式规划,发布了WordPress 4.4 正式版。 WordPr...
移动适配不成功?因为你没学到真经! 技术分享

移动适配不成功?因为你没学到真经!

近期,无数站长向平台君反馈“URL适配数据一直处在校验中”的时候,站长社区的版主三木正在得意地笑。因为他的站点移动适配非常顺利! 然而,这里究竟有什么机关诀窍?善于分享的三木版主全盘托出,供大家取经。...
网站被百度收录的一些技巧 WordPress

网站被百度收录的一些技巧

目前国内常用的搜索引擎主要有:百度,360,搜狗;当然google香港也是,但站长一般更关心前面三个; 从收录的速度来看,搜狗和360收录的速度很快,只有百度收录慢,原因也很容易解释,百度目前在国内搜...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: