使用像Bootstrap这样的CSS框架开发WordPress主题

时间:2017-10-25 作者:I am the Most Stupid Person

我将使用Underscores 和引导。

我应该抄吗all bootstrap codes 在to样式中。css或者我应该使用@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.css"); 时尚。css?

2 个回复
最合适的回答,由SO网友:Digvijayad 整理而成

在wordpress中,样式和脚本都不应该通过函数正确排队。php文件,而不是在html中对其进行硬编码。

wordpress添加新css文件的方式bootstrap.css 或任何其他用途wp_enqueue_scripts

以下代码应位于主题的functions.php

/**
* Proper way to enqueue scripts and styles
*/
function wp_theme_name_scripts() {

    // enqueue your style.css
    wp_enqueue_style(\'style-name\', get_stylesheet_uri() );

    // en-queue external style
    wp_enqueue_style( \'bootstrap\', \'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.css\' );

    // enqueue your script
    wp_enqueue_script( \'script-name\', get_template_directory_uri() .\'/js/theme_name.js\', array(), \'1.0.0\', true );

    // Other styles and scripts
}
add_action( \'wp_enqueue_scripts\', \'wp_theme_name_scripts\' );
This 是一个关于如何在wordpress中正确加载css的很好的教程。

Check out WordPress文档了解排队样式的更多信息

更新:

下划线框架已经具有中定义的功能functions.php.打开主题function.php 并找到名为yourTheme_scripts(), 并添加以下行以包括引导库。

wp_enqueue_style(\'bootstrap\', \'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.css\' );
下划线文件中的函数应如下所示:

/**
* Enqueue scripts and styles.
*/
function yourTheme_scripts() {

    wp_enqueue_style( \'yourTheme-style\', get_stylesheet_uri() );

    //Enqueue bootstrap css library
    wp_enqueue_style(\'bootstrap\', \'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.css\' );

    wp_enqueue_script( \'yourTheme-navigation\', get_template_directory_uri() . \'/js/navigation.js\', array(), \'20151215\', true );

    wp_enqueue_script( \'yourTheme-skip-link-focus-fix\', get_template_directory_uri() . \'/js/skip-link-focus-fix.js\', array(), \'20151215\', true );

   if ( is_singular() && comments_open() && get_option( \'thread_comments\' ) ) {
       wp_enqueue_script( \'comment-reply\' );
   }
}
add_action( \'wp_enqueue_scripts\', \'yourTheme_scripts\' );

SO网友:Arun Basil Lal

请不要将外部样式表复制到样式中。css。这是非常低效的做法。

也不建议通过@import加载。您应该使用wp_enqueue_style 对于CSS和wp_enqueue_script 对于JS

下面是正确的方法。将此函数添加到函数中。主题的php。

/**
 * Load CSS and JS the right way
 *
 * @refer http://millionclues.com/wordpress-tips/load-css-and-js-the-right-way/
 */
function mcabl1226_load_css_and_js() {
  // Load Boostrap CSS
  wp_enqueue_style( \'bootstrap-css\', \'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css\' );

  // Load Theme\'s style.css
  wp_enqueue_style( \'style\', get_stylesheet_uri() );

  // Load Boostrap JS
  //wp_enqueue_script( \'bootstrap-js\', \'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js\', array(\'jquery\'), \'1.0\', true);
}
add_action( \'wp_enqueue_scripts\', \'mcabl1226_load_css_and_js\' );
您很可能也需要Bootstrap JS。取消对上述函数中相应行的注释。

另一方面,如果你想用引导开发一个非常简单的入门主题,你可以查看我的Bootstrap starter theme.

结束