web-dev-qa-db-fra.com

Comment ajouter Bootstrap et LESS à mon site WordPress migré?

Je migre un site Web vers WordPress - il utilise à la fois Bootstrap et LESS. J'ai trouvé un extrait de code en ligne permettant d'activer Bootstrap et le CSS généré via functions.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 );
}

Cela a fonctionné avec succès seul. Cela dit, cela ne prend en compte que le CSS final généré par mon précompilateur LESS, ce qui est pénible car je ne peux pas voir mes changements de style LESS localement (à l'aide de MAMP) à moins de compiler d'abord le CSS.

J'aimerais que le fichier CSS soit utilisé en production et que le fichier LESS soit utilisé lors du développement local. J'ai tenté de le faire en ajoutant les fonctions suivantes sous la fonction Bootstrap ci-dessus:

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

Mais cela provoque la rupture du site. Je ne sais pas si c'est parce que la deuxième déclaration de la fonction Bootstrap interfère avec ces fonctions, ou si un autre problème est le coupable. J'apprécierais toute idée.

functionsfilterscssactionstwitter-bootstrap
1
user2761994

Vous n'avez pas besoin de créer de fonctions supplémentaires, il vous suffit de réutiliser ce que vous avez déjà et de le modifier un peu:

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

Une fois que vous avez cette configuration, dirigez-vous simplement vers votre wp-config.php sur votre machine de développement et ajoutez une ligne:

define('WP_ENV', 'development');

En supposant que vous n’ayez pas cette ligne dans votre code de production wp-config.php, il devrait utiliser CSS au lieu de LESS.

J'ai adapté cette méthode à partir du thème Roots qui utilise la même méthode pour quelque chose de similaire.

1
cfx