為什么 wordpress 會覆蓋引導程序？
[英]why does wordpress override bootstrap?
問題描述
我正在嘗試將我用 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
width="1em"
height="1em"
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);
}
1 個解決方案
解決方案1
0 2021-01-13 19:53:35
以下應該有效，我剛剛測試過。 我添加了 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' );
};
}; ?>
為什么Bootstrap會為非Bootstrap ID覆蓋我的CSS定義？
[英]Why does Bootstrap override my CSS definition for a non Bootstrap id?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.