2

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

我相信我的页面 id 是 46：

在此处输入图像描述

这是我要更改的 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>
4

6 回答 6

5

您不需要使用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;?>
于 2013-07-23T15:39:28.310 回答
1

有一个指向该页面的链接或更详细的 HTML 源代码示例会有所帮助，但似乎您要隐藏的元素不是 body 元素的直接子元素，在这种情况下，选择器给定在您的 CSS 摘录中将无法正确解决它。相反，请尝试：

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

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

于 2013-07-23T15:35:23.077 回答
1

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

试试这个：

.page-id-48 #static-footer-image{ display:none; }
于 2013-07-23T15:41:27.773 回答
1

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

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

如果您的 id 一直在更改并且您没有其他具有此类名称的 div，这可能是一个有用的答案。但是，不可能在 CSS 中定义类似50 < id < 67

于 2013-07-23T15:45:29.183 回答
0

我加了

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

通过编辑器进入购物车页面

于 2014-01-02T04:57:24.007 回答
0

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

我将此添加到我的 style.css 中，并且它的 ID 为 2 的页面有效：

body.page-id-2 .utility-bar { 
     display: none; 
}
于 2015-02-18T07:22:22.890 回答