Bootstrap Integtration

时间:2020-02-12 作者:ahmet kaya

我想知道如何只集成bootstrap 4网格系统,而不是:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
尝试此操作,我从以下链接下载源代码:

https://v4-alpha.getbootstrap.com/getting-started/download/

我补充道

bootstrap-4.0.0-alpha。6/dist/css/bootstrap网格。最小css

但它毁了我的网站。

此外,我还想将我的重新加载jquery保存到wordpress

我在某处读到wordpress包含self jquery-我的jquery版本:

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
最后一个问题是如何将css和jquery更好地集成到wordpress中?谢谢

也可以给wordpress添加bootstap 4标签。stackexchange。com,因为它是经常使用的标记。

1 个回复
最合适的回答,由SO网友:Patrice Poliquin 整理而成

Including only Bootstrap Grid System

如果您不熟悉SaSS,只需使用他们的自定义工具生成CSS文件即可。

Customize Bootstrap\'s components

之后您可以将其排队(见下文)。


Take a new version of jQuery with wp_enqueue_script()

文档:https://developer.wordpress.org/reference/functions/wp_register_script/

WordPress有一个名为wp_head() 它允许您在文件中工作以将文件排队。

在你身上functions.php 文件或WordPress主题的其他配置文件中,您可以创建如下内容。

$handle

(字符串)(必需)脚本的名称。应该是唯一的。

$src

(string | bool)(必需)脚本的完整URL,或脚本相对于WordPress根目录的路径。如果source设置为false,则script是它所依赖的其他脚本的别名。

$deps

(数组)(可选)已注册脚本的数组处理此脚本所依赖的。

默认值:array()

$ver

(string | bool | null)(可选)指定脚本版本号(如果有)的字符串,该字符串作为查询字符串添加到URL中,用于缓存破坏。如果版本设置为false,则会自动添加与当前安装的WordPress版本相同的版本号。如果设置为null,则不添加任何版本。

默认值:false

$in_footer

(bool)(可选)是否在之前而不是在中对脚本排队。默认值为“false”。

默认值:false

下面是可以添加到函数中的示例代码WPScripts_enqueue.

// Removing default jQuery
wp_deregister_script( \'jquery\' );
    
// Enqueue the new jQuery
wp_enqueue_script(\'jquery\', \'https://code.jquery.com/jquery-3.2.1.slim.min.js\', false, \'3.2.1\', false);

Integrating CSS with wp_enqueue_style()

文档:https://developer.wordpress.org/reference/functions/wp_enqueue_style/

$handle

(字符串)(必需)样式表的名称。应该是唯一的。

$src

(字符串)(可选)样式表的完整URL,或相对于WordPress根目录的样式表路径。默认值:“”

$deps

(数组)(可选)已注册样式表的数组处理此样式表所依赖的。

默认值:array()

$ver

(string | bool | null)(可选)指定样式表版本号(如果有)的字符串,该字符串作为查询字符串添加到URL中,以用于缓存破坏。如果版本设置为false,则会自动添加与当前安装的WordPress版本相同的版本号。如果设置为null,则不添加任何版本。

默认值:false

$media(字符串)(可选)已定义此样式表的媒体。接受“全部”、“打印”和“屏幕”等媒体类型,或接受“方向:纵向”和“最大宽度:640px”等媒体查询。

默认值:“全部”

以下是可以添加到上一个函数的示例代码WPScripts_enqueue.

wp_enqueue_style(\'css_style_name\', get_template_directory_uri() . \'/dist/css/styles.css\', array(), false, \'all\');

Final result

最终结果应如下所示functions.php 文件

if ( ! function_exists( \'WPScripts_enqueue\' ) ) {
    function WPScripts_enqueue() {
        
        // Removing default jQuery
        wp_deregister_script( \'jquery\' );
        
        // Enqueue the new jQuery
        wp_enqueue_script(\'jquery\', \'https://code.jquery.com/jquery-3.2.1.slim.min.js\', false, \'3.2.1\', false);

        // Enqueue custom Bootstrap file
        wp_enqueue_style(\'bootstrap\', get_template_directory_uri() . \'/css/bootstrap.css\', array(), false, \'all\');

    }
}
add_action(\'wp_enqueue_scripts\', \'WPScripts_enqueue\');
注意:从技术上讲,注册脚本或样式不是必需的,但强烈建议注册。阅读文档了解更多信息。

希望它能帮助和指导你的发展!

相关推荐

是否添加了带有`is_page()`WP函数的CSS类

我有导航<li> 我添加的项目page_active 访问子菜单页时的CSS类。当其中一个页面被访问时,这一切正常,但当第二个子菜单页面被访问时,我无法让它添加类。使用下面的代码,如果您访问“我们的团队”子菜单页,“关于”父菜单项具有CSS类page_active 已添加。<li class=\"td menu-item menu-item-2 underline-about <?php if (is_page(\'Our-Team\')){echo \"page_active\"