为啥 wordpress 会覆盖引导程序？
Posted
技术标签:
【中文标题】为啥 wordpress 会覆盖引导程序？【英文标题】：why does wordpress override bootstrap?为什么 wordpress 会覆盖引导程序？ 【发布时间】：2021-04-18 20:06:46 【问题描述】：我正在尝试将使用 bootstrap 制作的主题放入 WordPress。我已将所有样式表排入队列，并且我的控制台没有显示任何错误。当我通过 WordPress 查看我的页面时，我的所有内容都有一个边框，并且我的带有图像的圆形圆圈现在是方形的。如何阻止 WordPress 改变这一点？
<?php
function load_stylesheets()
wp_enqueue_style('bootstrap4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap-grid.min.css');
wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
wp_enqueue_style('magnificpopup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css');
wp_register_style('custom', get_template_directory_uri() . '/css/bsite.css', array(), 1, 'all');
wp_enqueue_style('custom');
/*wp_register_style('custom', get_template_directory_uri() . '/custom.css', array(), 1, 'all');
wp_enqueue_style('custom');*/
add_action('wp_enqueue_scripts', 'load_stylesheets');
function addjs()
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.5.1.slim.min.js', array( 'jquery' ),'3.5.1', true );
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js', array( 'jquery' ),'2.6.0', true );
wp_enqueue_script( 'boot4','https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery' ),'1.1.0', true );
wp_enqueue_script( 'boot3','https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js', array( 'jquery' ),'4.5.3', true );
add_action( 'wp_enqueue_scripts', 'addjs' );
?>
<?php get_header(); ?>
<body>
<nav class="navbar navbar-expand-lg px-3" id="navBar">
<a href="#" class="navbar text-uppercase"> sites by bryan </a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#myNav"
>
<span class="navbar-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<!-- -->
<div class="collapse navbar-collapse" id="myNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a href="#navBar" class="nav-link">home</a>
</li>
<li class="nav-item">
<a href="#skills" class="nav-link">skills</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">contact</a>
</li>
</ul>
</div>
</nav>
<!-- end nav element -->
<!-- headder section -->
<header class="header" id="header">
<div class="container-fluid">
<div class="row height-max align-items-center">
<div class="col col-md-9 ml-auto text-right pr-5">
<h1 class="text-uppercase my-2 title">sites by bryan</h1>
<h3 class="text-uppercase">what can i do for you?</h3>
</div>
</div>
</div>
</header>
<!-- end headder section -->
<!-- skills section -->
<section class="skills py-5" id="skills">
<div class="container">
<!-- section title -->
<div class="row mb-5">
<div
class="col d-flex flex-wrap text-uppercase justify-content-center"
>
<h1 class="font-weight-bold align-self-center mx-1">my</h1>
<h1 class="section-title--special mx-1">skills</h1>
</div>
</div>
<!-- end of section title -->
<div class="row">
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-html5"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">html</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
clean written code and layout that includes comments to ease the
process future updates
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<svg
viewBox="-1 0 18 18"
class="bi bi-bootstrap"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12 1H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3zM4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4z"
/>
<path
fill-rule="evenodd"
d="M8.537 12H5.062V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396zM6.375 4.658v2.467h1.558c1.16 0 1.764-.428 1.764-1.23 0-.78-.569-1.237-1.541-1.237H6.375zm1.898 6.229H6.375V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377z"
/>
</svg>
</a>
<h6 class="text-uppercase font-weight-bold my-3">bootstrap</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
used for quick production to make scaleable sites that view on any
device
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-css3-alt"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">css</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
written to match the layout of the page from top to bottom in
order with coments to ease the process for future updates
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-js"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">js</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
front-end javascript to bring a site to life and give the viewer a
pleasent and smooth experience
</p>
</div>
<!-- end of single skill -->
</div>
</div>
</section>
<!-- end of skills section -->
<!-- contact section-->
<section class="contact py-5" id="contact">
<div class="container">
<div class="row">
<div class="col-8 mx-auto col-md-6">
<form>
<div class="form-group">
<input
type="email"
class="form-control contact-input p-3"
placeholder="Enter Email"
/>
</div>
<button
type="submit"
class="btn btn-outline-secondary btn-block contact-btn"
>
submit
</button>
</form>
</div>
</div>
</div>
</section>
<!-- end of contact section-->
<?php get_footer(); ?>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
:root
--mainBlue: #40acf1;
--transparentBlue: rgba(64, 172, 241, 0.7);
--mainWhite: #ffffff;
--mainBlack: #292f36;
--mainGrey: rgb(216, 214, 214);
--mainYellow: #e3b505;
body
font-family: "Roboto", sans-serif;
color: var(--mainBlack);
background: var(--mainWhite);
/* navbar */
.navbar
background: var(--mainGrey);
.navbar-icon
font-size: 2rem;
color: var(--mainBlue);
.navbar-toggler
outline-color: var(--mainBlue) !important;
.nav-link
color: var(--mainBlack);
text-transform: capitalize;
.nav-link:hover
color: var(--mainBlue);
/* header */
.header
clip-path: polygon(50% 0%, 100% 0, 100% 90%, 75% 100%, 25% 100%, 0 90%, 0 0);
color: var(--mainWhite);
overflow: hidden;
.height-max
min-height: calc(100vh - 76px);
background: url(../img/openbridge.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
animation-name: zoom;
animation-duration: 20s;
animation-delay: 5s;
animation-iteration-count: infinite;
@keyframes zoom
0%
transform: scale(1);
50%
transform: scale(1.2) translate(-5%);
100%
transform: scale(1);
/* skills section*/
.skills-icon
font-size: 3rem;
color: var(--mainYellow);
background: var(--mainGrey);
.skills-icon:hover
color: var(--mainYellow);
.skills-underline
width: 4rem;
height: 0.3rem;
background: var(--mainBlue);
margin: 1rem auto;
/*contact section*/
.contact
clip-path: polygon(25% 15%, 75% 15%, 100% 0, 100% 100%, 0 100%, 0 0);
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("../img/trainstation.jpg") center/cover fixed no-repeat;
.contact-input
font-size: 1.5rem;
text-transform: capitalize;
background: transparent;
border-color: var(--mainYellow);
color: var(--mainYellow) !important;
.contact-input::placeholder
color: var(--mainYellow);
.contact-input:focus
background: transparent;
border-color: var(--mainYellow);
.contact-btn
text-transform: uppercase;
color: var(--mainYellow);
border-color: var(--mainYellow);
.contact-btn:hover
background: var(--mainYellow);
color: var(--mainBlack);
/* footer icons */
.footer
background: var(--mainGrey);
.footer-icon
font-size: 1.5rem;
text-decoration: none;
color: var(--mainYellow);
transition: all 1s ease-in-out;
.footer-icon:hover
color: var(--mainBlue);
【问题讨论】：
developer.wordpress.org/reference/functions/wp_enqueue_script;第三个参数，依赖关系。风格也一样。它也必须进入你的function.php
另外，您显然只是在排队引导引导网格而不是整个事情@see bootstrap-grid.min.css
@amarinediary 你是救生员，谢谢！我不敢相信我做到了，甚至没有注意到。它现在看起来应该如此。
不！我也写了一个完整的答案。不要忘记接受并投票。
【参考方案1】：
以下应该可以工作，我刚刚测试过。我添加了 CDN 检查、回退和适当的必需属性（integrity 和 crossorigin）。您必须将其放在您的 function.php 文件中。您不能像在您的示例中那样在前端排队文件。
只要确保更新后备路径即可。
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts()
if( ! is_admin() )
/**
* Deregister Wordpress jquery core version
* @link https://developer.wordpress.org/reference/functions/wp_deregister_script/
*/
wp_deregister_script( 'jquery' );
/**
* Register then enqueue jquery_js
* @link https://developer.wordpress.org/reference/functions/wp_register_script/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*
* Add rel='preload prefetch' <link> and required attributes to jquery_js
* Filters the HTML link tag of an enqueued style & add required attributes
* @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_jquery_js = @fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
if( $test_jquery_js !== false )
wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js', array(), '3.5.1', false );
else
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/jquery-3.5.1.min.js', array(), '3.5.1', false );
;
wp_enqueue_script( 'jquery_js' );
add_filter( 'script_loader_tag', 'data_jquery_js', 10, 3 );
function data_jquery_js( $tag, $handle, $src )
if( $handle === 'jquery_js' )
$integrity = 'sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0='; // ... integrity key @link https://code.jquery.com/
$tag = str_replace(
array(
"<script",
"></script>",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous' async></script>",
),
$tag
);
;
return $tag;
;
/**
* Register then enqueue bootstrap_bundle_js
* Dependency to jquery_js
* @link https://developer.wordpress.org/reference/functions/wp_register_script/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*
* Add a rel='preload prefetch' <link> element and required attributes to bootstrap_bundle_js
* Filters the HTML link tag of an enqueued style & add required attributes
* @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_bootstrap_bundle_js = @fopen( 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js', 'r' );
if( $test_bootstrap_bundle_js !== false )
wp_register_script( 'bootstrap_bundle_js', '//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js', array( 'jquery_js' ), '4.5.3', true );
else
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'bootstrap_bundle_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/bootstrap.bundle.min.js', array( 'jquery_js' ), '4.5.3', true );
;
wp_enqueue_script( 'bootstrap_bundle_js' );
add_filter( 'script_loader_tag', 'data_bootstrap_bundle_js', 10, 3 );
function data_bootstrap_bundle_js( $tag, $handle, $src )
if( $handle === 'bootstrap_bundle_js' )
$integrity = 'sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx'; // ... integrity key @link https://getbootstrap.com/docs/4.5/getting-started/introduction/
$tag = str_replace(
array(
"<script",
"></script>",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous'></script>",
),
$tag
);
;
return $tag;
;
/**
* Register then enqueue magnific_popup_js
* Dependency to jquery_js
* @link https://developer.wordpress.org/reference/functions/wp_register_script/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*/
$test_magnific_popup_js = @fopen( 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', 'r' );
if( $test_magnific_popup_js !== false )
wp_register_script( 'magnific_popup_js', '//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery_js' ), '1.1.0', true );
else
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'magnific_popup_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/jquery.magnific-popup.min.js', array( 'jquery_js' ), '1.1.0', true );
;
wp_enqueue_script( 'magnific_popup_js' );
/**
* Register then enqueue bootstrap_css
* @link https://developer.wordpress.org/reference/functions/wp_register_style/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*
* Add a rel='preload prefetch' <link> element and required attributes to bootstrap_css
* Filters the HTML link tag of an enqueued style & add required attributes
* @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_bootstrap_css = @fopen( 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css', 'r' );
if( $test_bootstrap_css !== false )
wp_register_style( 'bootstrap_css', '//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css', array(), '4.5.3', 'all' );
else
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'bootstrap_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/bootstrap.min.css', array(), '4.5.3', 'all' );
;
wp_enqueue_style( 'bootstrap_css' );
add_filter( 'style_loader_tag', 'data_bootstrap_css', 10, 3 );
function data_bootstrap_css( $tag, $handle, $src )
if( $handle === 'bootstrap_css' )
$integrity = 'sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2'; // ... integrity key @link https://getbootstrap.com/docs/4.5/getting-started/introduction/
$tag = str_replace(
array(
"<link rel='stylesheet'",
"media='all' />",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='style' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<link rel='stylesheet'",
"integrity='" . $integrity . "' crossorigin='anonymous' type='text/css' media='all' />",
),
$tag
);
;
return $tag;
;
/**
* Register then enqueue fontawesome_css
* @link https://developer.wordpress.org/reference/functions/wp_register_style/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*/
$test_fontawesome_css = @fopen( 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css', 'r' );
if( $test_fontawesome_css !== false )
wp_register_style( 'fontawesome_css', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css', array(), '5.15.1', 'all' );
else
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'fontawesome_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array(), '5.15.1', 'all' );
;
wp_enqueue_style( 'fontawesome_css' );
/**
* Register then enqueue magnificpopup_css
* Dependency to bootstrap_css
* @link https://developer.wordpress.org/reference/functions/wp_register_style/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*/
$test_magnific_popup_css = @fopen( 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css', 'r' );
if( $test_magnific_popup_css !== false )
wp_register_style( 'magnific_popup_css', '//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css', array( 'bootstrap_css' ), '5.15.1', 'all' );
else
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'magnific_popup_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array( 'bootstrap_css' ), '5.15.1', 'all' );
;
wp_enqueue_style( 'magnificpopup_css' );
/**
* Register then enqueue bsite_css
* Dependency to bootstrap_css, magnificpopup_css
* @link https://developer.wordpress.org/reference/functions/wp_register_style/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*/
wp_register_style( 'bsite_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array( 'magnificpopup_css' ), '1.0.0', 'all' );
wp_enqueue_style( 'bsite_css' );
;
; ?>
【讨论】：
以上是关于为啥 wordpress 会覆盖引导程序？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 Owl Carousel 在我的 Laravel 应用程序中会破坏引导模式？