为啥 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 检查、回退和适当的必需属性(integritycrossorigin)。您必须将其放在您的 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 会覆盖引导程序?的主要内容,如果未能解决你的问题,请参考以下文章

为啥添加css代码后模态窗口会隐藏? (引导程序)

为啥 Owl Carousel 在我的 Laravel 应用程序中会破坏引导模式?

为啥我只会看到 jmap -permstat 中的“死”类加载器(引导程序除外)?

Wordpress 下拉菜单(引导程序)

将引导程序包含到 wordpress 插件前端

错误:自动覆盖加载(引导程序)(laravel 5.2)