堆栈内存溢出
  繁体   English   中英

为什么 wordpress 会覆盖引导程序？

[英]why does wordpress override bootstrap?

 原文  2021-01-13 18:58:30  4   1    html/ jquery/ css/ wordpress/ bootstrap-4

问题描述

我正在尝试将我用 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' );

  };
}; ?>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么ID在启动时不覆盖类？ 为什么Bootstrap会为非Bootstrap ID覆盖我的CSS定义？ Bootstrap CSS是否覆盖主题？ 为什么引导程序覆盖内部样式？ 我自己的 css 不会覆盖 bootstrap css 自定义CSS不会覆盖Wordpress主题上的Bootstrap 在WordPress主题中添加引导程序似乎会覆盖导航样式 输入按钮在 Wordpress (Bootstrap) 中不起作用 为什么 class 属性不会覆盖通用属性？ Wordpress 子主题不会覆盖父主题 css
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM