如何将Bootstrap和Less添加到已迁移的WordPress站点?

时间:2014-08-13 作者:user2761994

我正在将一个网站迁移到WordPress,它既使用引导程序,也使用较少的程序。我在网上找到了一个片段,用于启用引导和通过函数输出的CSS。php:

function theme_add_bootstrap() {
  wp_enqueue_style( \'bootstrap-css\', get_template_directory_uri() . \'/third_party/bootstrap/css/bootstrap.min.css\' );
  wp_enqueue_style( \'style-css\', get_template_directory_uri() . \'/css/custom.css\' );
  wp_enqueue_script( \'bootstrap-js\', get_template_directory_uri() . \'/third_party/bootstrap/js/bootstrap.min.js\', array(), \'3.0.0\', true );
}
这本身就成功了。也就是说,它只解释了由我的LESS预编译器输出的最终CSS,这很痛苦,因为除非我首先编译CSS,否则我无法在本地看到LESS样式的更改(使用MAMP)。

我希望在生产中使用CSS文件,在本地开发时使用较少的文件。我试图通过在上面的引导函数下面添加以下函数来实现这一点:

function less_enqueue_scripts() {
  $current_user = wp_get_current_user();

  if ( $current_user--->ID == \'1\' )
    wp_enqueue_script( \'lesscss\', get_stylesheet_directory_uri() . \'/third_party/less-1.5.0.min.js\' );
}

add_action( \'wp_enqueue_scripts\', \'less_enqueue_scripts\' );

function less_filter_stylesheet_uri( $stylesheet_uri, $stylesheet_dir_uri ) {
  $current_user = wp_get_current_user();

  if ( $current_user--->ID == \'1\' )
    $src = $stylesheet_dir_uri . \'/css/custom.less\';
  else
    $src = $stylesheet_dir_uri . \'/css/custom.css\';
  return $src;
}

add_filter( \'stylesheet_uri\', \'less_filter_stylesheet_uri\', 10, 2 );
但这会导致网站崩溃。我不确定这是因为引导函数中的第二条语句干扰了这些函数,还是另一个问题是罪魁祸首。如有任何见解,将不胜感激。

1 个回复
SO网友:cfx

您无需创建其他功能,只需重新使用现有功能并稍加调整即可:

function theme_add_bootstrap() {
  wp_enqueue_style( \'bootstrap-css\', get_template_directory_uri() . \'/third_party/bootstrap/css/bootstrap.min.css\' );
  wp_enqueue_script( \'bootstrap-js\', get_template_directory_uri() . \'/third_party/bootstrap/js/bootstrap.min.js\', array(), \'3.0.0\', true );
  if (WP_ENV === \'development\') {
    wp_enqueue_script( \'lesscss\', get_stylesheet_directory_uri() . \'/third_party/less-1.5.0.min.js\' );
    wp_enqueue_style( \'style-less\', get_template_directory_uri() . \'/css/custom.less\' );    
  } else {
    wp_enqueue_style( \'style-css\', get_template_directory_uri() . \'/css/custom.css\' );
  }
}
一旦你有了这样的设置,那就直接去你的wp-config.php 在开发机器上添加一行:

define(\'WP_ENV\', \'development\');
假设你的生产中没有这条生产线wp-config.php 那么它应该使用CSS,而不是更少。

我将此方法改编自the Roots theme 对类似的东西使用相同的方法。

结束

相关推荐

自定义帖子类型的条件CSS

我正在使用wordpress主题,该主题使用公文包项目的自定义帖子类型和“集合”对它们进行分类。当我将鼠标悬停在要编辑的“集合”上时,它会在浏览器底部显示:taxonomy=portfoliosets,&;标签id=37(&;post\\U类型=投资组合。我正试图使其标题图像将根据类别或标记而改变。我们有不同的节目,如“视频”和“杂志”等。到目前为止,我已经尝试将以下内容添加到标题中。php:<?php is_single( \'videos\' ) ?> <sty