为单个页面覆盖 Theme 的 CSS答案

【问题标题】：Override Theme's CSS for a single page为单个页面覆盖 Theme 的 CSS
【发布时间】：2016-11-01 15:41:37
【问题描述】：

我浏览了数百个关于教程、问题论坛、youtube 视频等的网页。我尝试过编辑 header.php、创建子主题和编辑新样式表，甚至将部分 css 与此页面上的 html。似乎没有什么可以完全影响现有的 CSS 并以我希望的方式显示页面。

目标是让 wordpress 页面看起来像样式正确的页面。

我在本地主机上创建的文件中正确实现设计的照片：here

当我将 HTML 放入 wordpress 页面时，还有一张设计不正确的照片：here

这是 CSS：

body {
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
 }
 h1, h2, h4, h5, h6 {
color: #b1997b; 
font-weight: 600; !important
line-height: 1.3em; !important
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif; !important
 }

 a {
text-align: center;
text-decoration: none;
color: #b1997b;
font-size: 1em;
display: inline;
 }

 a:hover{ 
text-decoration: underline;

 }


 .input {
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif;
display: block; 
height: 3em; 
width: 20em;
margin: 0 auto;
border: none;
border-bottom: 0.05em solid #9C9B9B;
 }

 h3 {
font-size: 1em;
color: #84A0B1;
font-weight: 600;
line-height: 1.3em;
display: inline;
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif;
 }
 h2 {
margin-top: 1.3em; !important
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif; !important
 }
 b, strong {
font-weight: 600;
 }
 .buttonText {
text-align: center;
text-decoration: none;
color: #84A0B1;
font-size: 1.2em;
display: inline;
 }
 blueColor {
color: #84A0B1;
 }
 brownColor {
color: #b1997b;
 }
 hr {
display: block;
 }

 grayColor {
color: #9C9B9B;
 }
 samp {
display: none;
 }


 .submitbutton{

display: block;  /* inline for text and button */

border: 0.1em; 
border-radius: 0.5em;
background-color: #e6e5e5; 
width: 14em; 
height: 3.5em;
outline-color: #C0C0C0;


text-align: center;
text-decoration: none;
color: #84A0B1;
font-size: 0.7em;
 }

.offColor {
background-color: #c7c7c7;
 }
 .canceler {
display: block;
margin: 0.5em;
border: 0.1em;
border-radius: 0.5em;
background-color: #e6e5e5;
width: 6em;
height: 3em;
outline-color: #C0C0C0;
 }
 .linktext{
display: inline;
margin: 0.5em;
text-align: left;
color: #84A0B1;
font-size: 1em;
 }
.hidden { 
display: none; 
 }

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
display:      inherit;
margin-left:  auto;
margin-right: auto;
position:     fixed;
z-index:      1000;
top:          0;
left:         0;
height:       12.5em;
width:        10em;
border-style: none;
z-index:      1002;
}
 .centered {
  position: fixed;
  top: 50%;
  left: 50%;
 /* bring your own prefixes */
  transform: translate(-50%, -50%);
     }

.overlay {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color: #FFFFFF;
opacity:0.8;
z-index:1001;
}
.stop {display: none;}

.show {display: block;}

这是页面的html：

<body>  
            <!-- Locations --!>
        <h2 class = "h2 locations"  style = "text-align: center;">look for your location</h2>



        <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>


        <p class="locations" style = "display: block; text-align: center">california</p>

             <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block" >beverly hills</h3>
                        <p class="locations" style = "display: block">9873 S. Santa Monica Blvd.<br> Beverly Hills, CA 90212</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="beverlyHills" id = "beverly hills"><p class = "buttonText">select</p></button>
                </div>
            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block"">dana point</h3>
                        <p class="locations" style = "display: block">34241 E. Pacific Coast Hwy, Ste. 201 <br> Dana Point, CA 92629 </p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="danaPoint" id = "dana point"><p class = "buttonText">select</p></button>   
                </div>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">manhattan beach</h3>
                        <p class="locations" style = "display: block">3713 Highland Ave, 2nd Floor<br> Manhattan Beach, CA 90266</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="manhattanBeach" id = "manhattan beach"><p class = "buttonText">select</p></button>
                </div>
            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">newport beach</h3>
                        <p class="locations" style = "display: block">2744 East Coast Hwy, 2nd Floor <br>Newport Beach, CA 92625</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="newportBeach" id = "newport beach"><p class = "buttonText">select</p></button>
                </div>
            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">santa monica</h3>
                        <p class="locations" style = "display: block">1229 Montana Ave, 2nd Floor<br> Santa Monica, CA 90403</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="santaMonica" id = "santa monica"><p class = "buttonText">select</p></button>
                </div>




            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>


        <p class="locations" style = "display: block; text-align: center">new york</p>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">union square</h3>
                        <p class="locations" style = "display: block">114 4th Ave.<br> New York, NY 10003 </p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="unionSquare" id = "union square"><p class = "buttonText">select</p></button>
                </div>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>



        <p class="locations" style = "display: block; text-align: center">pennsylvania</p>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">philadelphia</h3>
                        <p class="locations" style = "display: block">1120 Walnut St. <br> Philadelphia, PA 19107</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="philadelphia" id = "philadelphia"><p class = "buttonText">select</p></button>
                </div>


    </body>

【问题讨论】：

标签： html css wordpress themes styling

【解决方案1】：

您可以尝试在页面正文中添加一个作用域类<body class="this-page-class">...</body>，并设置仅适用于该类作用域的那些类的规则。

【讨论】：

具体来说，使用WordPress的body_class() function
好吧，所以我在我的 html 周围添加了，然后在样式表中我用 .booking {} 包围了整个内容，但无济于事@mevius跨度>
您现在拥有它的方式是，您的样式表将在具有预订类的内容中查找正文标记，而不是应用于具有类booking 的正文。为了使其适用，您可能必须执行body.booking 并确保任何其他主体不在其中。

【解决方案2】：

我一遍又一遍地阅读您的问题（投反对票恐惧症），为什么不回到简单的方式。

您说过，仅覆盖单个页面，不是吗？您是否尝试过在您的functions.php 底部使用wp_enqueue_style 注册您的自定义单页样式表？像这样：

function your_single_page_stylesheet(){

  if($this_is_your_page_id_or_slug){
    //run
    wp_enqueue_style( 'page-custom', get_template_directory_uri() . '/page-custom.css' );
  }

}
add_action( 'wp_enqueue_scripts', 'your_single_page_stylesheet', 100);

或者，您可以使用 dequeue 这样的函数取消注册您的父/默认样式表，

function your_single_page_stylesheet(){

  if($this_isi_your_page_id_or_slug){
    //first dequeue 
    wp_dequeue_style( 'default-stylesheet' );

    //enqueue new style
    wp_enqueue_style( 'page-custom', get_template_directory_uri() . '/page-custom.css' );
  }

}
add_action( 'wp_enqueue_scripts', 'your_single_page_stylesheet', 100);

【讨论】：

您可以将$this_isi_your_page_id_or_slug 更改为is_home()、is_page() 或其他。

【解决方案3】：

我认为在类中围绕新页面的主体不起作用的原因是因为这只是使其更加具体，因此 CSS 表中的所有规则仍然适用于该类中的所有内容。我建议删除它并添加一个新的样式表作为解决方案。

在您的“header.PHP”文件中，您可以将 if 语句添加到 CSS 表的链接以获得所需的结果。 If/then 语句也可以。

这样的事情会为常见的“page.php”页面调用一个样式表，而为由“newpage.php”操作的页面调用一个不同的样式表：

<?php
if ( is_page_template('page.php')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
<?php } ?>
<?php
if ( is_page_template('newpage.php')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/newpage.css" />
<?php } ?>

下面是更详细的博文： https://wordpress.org/support/topic/how-to-have-a-separate-stylecss-for-each-page-template

【讨论】：