web-dev-qa-db-ja.com

移行したWordPressサイトにBootstrapとLESSを追加するにはどうすればよいですか？

私はウェブサイトをWordPressに移行しています - それはBootstrapとLESSの両方を使います。 Bootstrapを有効にするためのスニペットと、functions.php経由で出力されたCSSを見つけました。

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を先にコンパイルしない限り（MAMPを使って）私のLESSスタイルの変更をローカルに見ることができないので痛みです。

CSSファイルをプロダクションで使用し、LESSファイルをローカルで開発するときに使用したいと思います。上記のBootstrap関数の下に次の関数を追加してこれを試みました。

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 );

しかし、それはサイトを壊しています。 Bootstrap関数の2番目のステートメントがこれらの関数を妨害しているのか、または別の問題が原因であるのかどうかはわかりません。任意の洞察をいただければ幸いです。

functionsfilterscssactionstwitter-bootstrap
1
user2761994

追加の関数を作成する必要はなく、既に持っているものを再利用して少し調整するだけです。

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にその行がない場合、LESSではなくCSSを使用する必要があります。

このメソッドを The Roots theme から採用しました。これは、似たようなものに同じメソッドを使用します。

1
cfx