Question

如何隐藏特定WordPress页面的div（包含图像）？

我相信我的网页ID是46：

enter image description here

以下是我要改变的div：

<div id="static-footer-image" style="position:absolute; bottom: -15px; z-index: 501;">
    <img src="images/background-bottom.png"/>
</div>

我主CSS文件中的相关CSS代码：

body.page-id-46 #static-footer-image{ 
     display: none; 
}

如果我删除了body.page-id-46，它会被正确地隐藏在所有页面上，所以它必须与这部分代码有关。

#static-footer-image{ 
     display: none; 
}

附件是header.php的PHP，所以它在每个页面上......

<body class="<?php hybrid_body_class(); ?>">

我做错了什么？

编辑：因为这是一个wordpress页面，所以嵌入了很多PHP，但这里是关联的HTML / PHP：

<?php
/**
 * Header Template
 *
 * The header template is generally used on every page of your site. Nearly all other
 * templates call it somewhere near the top of the file. It is used mostly as an opening
 * wrapper, which is closed with the footer.php file. It also executes key functions needed
 * by the theme, child themes, and plugins. 
 *
 * @package Hybrid
 * @subpackage Template
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
<title><?php hybrid_document_title(); ?></title>

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Add mousewheel plugin (this is optional)
<script type="text/javascript" src="/lib/jquery.mousewheel-3.0.6.pack.js"></script>
-->
<script src="<?php bloginfo('stylesheet_directory'); ?>/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<!--<script type="text/javascript" src="/js/jquery.fancybox.pack.js?v=2.0.6"></script>-->
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.fancybox.pack.js?v=2.0.6" type="text/javascript"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<!--
<script type="text/javascript" src="/js/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="/js/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
-->
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/helpers/jquery.fancybox-buttons.js?v=1.0.2" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/helpers/jquery.fancybox-media.js?v=1.0.0" type="text/javascript"></script>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<!--<script type="text/javascript" src="/js/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>-->
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/helpers/jquery.fancybox-thumbs.js?v=2.0.6" type="text/javascript"></script>

<?php do_atomic( 'head' ); // @deprecated 0.9.0. Use 'wp_head'. ?>
<?php wp_head(); // wp_head ?>


</head>

<body class="<?php hybrid_body_class(); ?>">

<?php do_atomic( 'before_html' ); // hybrid_before_html ?>

<div id="body-container">

    <?php do_atomic( 'before_header' ); // hybrid_before_header ?>

    <div id="header-container">

        <div id="header">

            <?php do_atomic( 'header' ); // hybrid_header ?>

        </div><!-- #header -->

    </div><!-- #header-container -->
    <?php do_atomic( 'after_header' ); // hybrid_after_header ?>


 <div id="homepage-container"> <!--id="uway-container"> -->
 <div id="uway-container"> <!--id="homepage-container"> --> </div>
    <div id="container">

        <?php do_atomic( 'before_container' ); // hybrid_before_container ?>

<?php
/**
 * Footer Template
 *
 * The footer template is generally used on every page of your site. Nearly all other
 * templates call it somewhere near the bottom of the file. It is used mostly as a closing
 * wrapper, which is opened with the header.php file. It also executes key functions needed
 * by the theme, child themes, and plugins. 
 *
 * @package Hybrid
 * @subpackage Template
 */
?>




        <?php do_atomic( 'after_container' ); // hybrid_after_container ?>

    </div><!-- #container -->
    <div id="static-footer-image" style="position:absolute; bottom: -15px; z-index: 501;">
        <img src="http://www.unitedway.zhi.com/wp-content/themes/hybrid-uway/images/background-bottom.png"/>
    </div>
<!--     </div> id="homepage-container"> -->

 </div> <!--id="uway-container"> -->
    <div id="footer-container">

        <?php do_atomic( 'before_footer' ); // hybrid_before_footer ?>

        <div id="footer">

            <?php do_atomic( 'footer' ); // hybrid_footer ?>

        </div><!-- #footer -->

        <?php do_atomic( 'after_footer' ); // hybrid_after_footer ?>

    </div><!-- #footer-container -->

</div><!-- #body-container -->

<?php do_atomic( 'after_html' ); // hybrid_after_html ?>
<?php wp_footer(); // wp_footer ?>

</body>
</html>

Answer 1

您无需使用body声明。

尝试：

.page-46 #static-footer-image {
    display:none;
}

您也可以通过PHP在模板文件中隐藏它，但这可能会更麻烦，值得，不是吗？如果您愿意，还可以为其添加代码。

编辑：PHP（用于wordpress）......应该可行。不过，我会说去寻找CSS。没有必要去挖掘Wordpress文件。

<?php if( !is_page('XXX') ):?>
    the code to display this div goes here.
<?php endif;?>

Answer 2

它有助于获得页面的链接或其HTML源的更详细示例，但似乎可能的是，您要隐藏的元素不是body元素的直接子元素，在这种情况下CSS摘录中给出的选择器无法正确解决。相反，尝试：

body.page-id-46 * #static-footer-image {
  display: none;
}

将解决ID static-footer-image的元素，该元素位于body元素下的任何位置，而不必是直接后代（即<body>...<div id="static-footer-image"></div>...</body>）。

Answer 3

我正在写一个答案因为我还不能发表评论。

试试这个：

.page-id-48 #static-footer-image{ display:none; }

Answer 4

以下CSS规则将隐藏所有具有从page-id-开始的类名的div：

div[class^="page-id-"] {
   display: none;
}

如果你的id一直在变化而且你没有其他具有这种类名的div，这可能是一个有用的答案。但是，在CSS中定义类似50 < id < 67

的内容是不可能的

Answer 5

我添加了

<style>
#sideshoppingcart {display: none;}
</style>

通过编辑

到购物车页面

Answer 6

这对我有用，我有一个Carrie Dils的实用工具栏，需要隐藏它。

我将它添加到我的style.css中，它的工作原理和ID为2的页面

body.page-id-2 .utility-bar { 
     display: none; 
}

在一个特定的wordpress页面上隐藏属于所有页面一部分的div

6 个答案: