将头部中包含的一个div隐藏在单个页面中
将头部中包含的一个div隐藏在单个页面中
提问于 2014-03-22 03:04:47
我想知道如何在wordpress站点的单个页面上隐藏包含在header.php中的div。
换句话说，我想把页眉留在这个页面上，除了它容纳的这个div。理想情况下，我希望通过CSS来实现这一点，但到目前为止，我还没有成功。
我想隐藏的div是site-description
下面是header.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 Origin
* @subpackage Template
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<?php if ( hybrid_get_setting( 'origin_favicon_url' ) ) : ?>
<!-- Favicon -->
<link rel="shortcut icon" href="<?php echo hybrid_get_setting( 'origin_favicon_url' ); ?>" />
<?php endif; ?>
<!-- Title -->
<title><?php hybrid_document_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!-- WP Head -->
<?php wp_head(); ?>
</head>
<body class="<?php hybrid_body_class(); ?>">
<?php do_atomic( 'open_body' ); // origin_open_body ?>
<div id="container">
<div class="wrap">
<?php do_atomic( 'before_header' ); // origin_before_header ?>
<div id="header">
<?php do_atomic( 'open_header' ); // origin_open_header ?>
<div id="branding">
<?php origin_site_title(); ?>
</div><!-- #branding -->
<?php get_template_part( 'menu', 'primary' ); // Loads the menu-primary.php template. ?>
<?php hybrid_site_description(); ?>
<?php do_atomic( 'header' ); // origin_header ?>
<?php do_atomic( 'close_header' ); // origin_close_header ?>
</div><!-- #header -->
<?php do_atomic( 'after_header' ); // origin_after_header ?>
<?php do_atomic( 'before_main' ); // origin_before_main ?>
<div id="main">
<?php do_atomic( 'open_main' ); // origin_open_main ?>正如您可能猜到的那样，它在CSS文件中被引用为#site-description。我试图隐藏的页面ID是2。
这是我尝试过的：
body.page-id-2 #site-description { display: none !important; }但它并没有起作用。我认为我的错误与站点描述div包含在标题中的事实有关。
我已经梳理了这方面的其他线索，但就是不能收集到正确的学习，所以任何帮助都是非常感谢的。
有问题的页面的呈现HTML：
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Title -->
<title>About</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://elv8r.com/xmlrpc.php" />
<!-- WP Head -->
<meta name="generator" content="WordPress 3.8.1" />
<meta name="template" content="Origin 0.5.6" />
<link rel="alternate" type="application/rss+xml" title="ELV8R » Feed" href="http://elv8r.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="ELV8R » Comments Feed" href="http://elv8r.com/comments/feed/" />
<link rel='stylesheet' id='open-sans-css' href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='dashicons-css' href='http://elv8r.com/wp-includes/css/dashicons.min.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://elv8r.com/wp-includes/css/admin-bar.min.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='style-css' href='http://elv8r.com/wp-content/themes/origin/style.min.css?ver=0.5.6' type='text/css' media='all' />
<link rel='stylesheet' id='origin_fancybox-stylesheet-css' href='http://elv8r.com/wp-content/themes/origin/js/fancybox/jquery.fancybox-1.3.4.css?ver=1' type='text/css' media='screen' />
<link rel='stylesheet' id='font-droid-serif-css' href='http://fonts.googleapis.com/css?family=Droid+Serif&ver=1' type='text/css' media='screen' />
<link rel='stylesheet' id='myStyleSheets-css' href='http://elv8r.com/wp-content/plugins/supreme-google-webfonts/josh-font-style.css?ver=3.8.1' type='text/css' media='all' />
<script type='text/javascript' src='http://elv8r.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://elv8r.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://elv8r.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://elv8r.com/wp-includes/wlwmanifest.xml" />
<link rel='next' title='It’s entrepreneurship gold' href='http://elv8r.com/' />
<link rel='canonical' href='http://elv8r.com/about/' />
<link rel='shortlink' href='http://elv8r.com/?p=2' />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-0000000-0']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style type="text/css">
/* Font size. */
html { font-size: 17px; }
/* Font family. */
body { font-family: 'Droid Serif', serif; }
/* Link color. */
a, a:visited, #footer a:hover, .entry-title a:hover { color: #dd5424; }
#respond #submit, .button, a.button, .wpcf7-submit, #loginform .button-primary { background-color: #dd5424; }
a:hover, a:focus { color: #000; }
/* Custom CSS. */
#mainsignup { height:110px; width:600px;border-color:000000; border:5px solid; border-radius:15px;} #mainsignup:hover { background-color:#DAA520; } #mainemail { padding-top:10px; padding-bottom:10px; } h1.page-title.entry-title {text-align:center;color:#000000;} #site-description {padding-top:.1cm; padding-bottom:.1cm; } input { font-weight: bold; text-align: center; } ::-webkit-input-placeholder { font-weight: bold; text-align: center; } :-moz-placeholder { font-weight: bold; text-align: center; } #footermenu li {display: inline; padding: 20px; } #footermenu { float: center; width: 470px } .page-id-2 .site-description {display: none;}
</style>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>
</head>
<body class="wordpress ltr en_US parent-theme y2014 m03 d21 h20 friday logged-in admin-bar custom-header singular singular-page singular-page-2 page-template-custom">
<div id="container">
<div class="wrap">
<div id="header">
<div id="branding">
<div id="site-title">
<a href="http://elv8r.com" title="ELV8R" rel="Home">
<img class="logo" src="http://elv8r.com/wp-content/uploads/2014/03/cropped-ELLV8R.png" alt="ELV8R" />
</a>
</div>
</div><!-- #branding -->
<div id="site-description"><span>Lorem ipsum dolor sit amet</span></div>
<div class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb">
<span class="trail-browse">Browse:</span> <span class="trail-begin"><a href="http://elv8r.com" title="ELV8R">Home</a></span>
<span class="sep">»</span> <span class="trail-end">About</span>
</div>
</div><!-- #header -->
<div id="main">
<div id="content">
<div class="hfeed">
<div id="post-2" class="hentry page publish post-1 odd author-admin">
<h1 class='page-title entry-title'>About</h1>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet…</p>
</div><!-- .entry-content -->
<div class="entry-meta"><span class="edit"><a class="post-edit-link" href="http://elv8r.com/wp-admin/post.php?post=2&action=edit" title="Edit Page">Edit</a></span></div>
</div><!-- .hentry -->
</div><!-- .hfeed -->
</div><!-- #content -->
</div><!-- #main -->
<div id="sidebar-subsidiary" class="sidebar">
<section id="hybrid-nav-menu-2" class="widget nav-menu widget-nav-menu"><div id="footermenu" class="menu-menu-1-container"><ul id="menu-menu-1" class="nav-menu"><li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://elv8r.com/blog/">Blog</a></li><li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-18"><a href="http://elv8r.com/about/">About</a></li><li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a title="T & C" href="http://elv8r.com/terms-conditions-and-privacy/">T & C</a></li></ul></div></section>
</div><!-- #sidebar-subsidiary .aside -->
<div id="footer">
<div class="footer-content">
<p class="copyright">Copyright © 2014 <a class="site-link" href="http://elv8r.com" title="ELV8R" rel="home"><span>ELV8R</span></a></p>
<p class="credit">Powered by <a class="wp-link" href="http://wordpress.org" title="State-of-the-art semantic personal publishing platform"><span>WordPress</span></a> and <a class="theme-link" href="http://alienwp.com/themes/origin/" title="Origin WordPress Theme"><span>Origin</span></a></p>
</div>
</div><!-- #footer -->
</div><!-- .wrap -->
</div><!-- #container -->
<script type='text/javascript' src='http://elv8r.com/wp-includes/js/admin-bar.min.js?ver=3.8.1'></script>
<script type='text/javascript' src='http://elv8r.com/wp-content/themes/origin/js/fancybox/jquery.fancybox-1.3.4.pack.js?ver=1.0'></script>
<script type='text/javascript' src='http://elv8r.com/wp-content/themes/origin/js/fitvids/jquery.fitvids.js?ver=1.0'></script>
<script type='text/javascript' src='http://elv8r.com/wp-content/themes/origin/js/footer-scripts.js?ver=1.0'></script>
<script type='text/javascript' src='http://elv8r.com/wp-content/themes/origin/js/navigation.js?ver=20130228'></script>
<script type='text/javascript' src='http://elv8r.com/wp-content/themes/origin/library/js/drop-downs.min.js?ver=20130805'></script>
<script type="text/javascript">
(function() {
var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
request = true;
b[c] = b[c].replace( rcs, ' ' );
b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
}());
</script>
<div id="wpadminbar" class="nojq nojs" role="navigation">
<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0">
<ul id="wp-admin-bar-root-default" class="ab-top-menu">
<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://elv8r.com/wp-admin/about.php" title="About WordPress"><span class="ab-icon"></span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
<li id="wp-admin-bar-about"><a class="ab-item" href="http://elv8r.com/wp-admin/about.php">About WordPress</a> </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
<li id="wp-admin-bar-wporg"><a class="ab-item" href="http://wordpress.org/">WordPress.org</a> </li>
<li id="wp-admin-bar-documentation"><a class="ab-item" href="http://codex.wordpress.org/">Documentation</a> </li>
<li id="wp-admin-bar-support-forums"><a class="ab-item" href="http://wordpress.org/support/">Support Forums</a> </li>
<li id="wp-admin-bar-feedback"><a class="ab-item" href="http://wordpress.org/support/forum/requests-and-feedback">Feedback</a> </li></ul></div> </li>
<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://elv8r.com/wp-admin/">ELV8R</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
<li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://elv8r.com/wp-admin/">Dashboard</a> </li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
<li id="wp-admin-bar-themes"><a class="ab-item" href="http://elv8r.com/wp-admin/themes.php">Themes</a> </li>
<li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item" href="http://elv8r.com/wp-admin/customize.php?url=http%3A%2F%2Felv8r.com%2Fabout%2F">Customize</a> </li>
<li id="wp-admin-bar-widgets"><a class="ab-item" href="http://elv8r.com/wp-admin/widgets.php">Widgets</a> </li>
<li id="wp-admin-bar-menus"><a class="ab-item" href="http://elv8r.com/wp-admin/nav-menus.php">Menus</a> </li>
<li id="wp-admin-bar-background"><a class="ab-item" href="http://elv8r.com/wp-admin/themes.php?page=custom-background">Background</a> </li>
<li id="wp-admin-bar-header"><a class="ab-item" href="http://elv8r.com/wp-admin/themes.php?page=custom-header">Header</a> </li></ul></div> </li>
<li id="wp-admin-bar-updates"><a class="ab-item" href="http://elv8r.com/wp-admin/update-core.php" title="1 Plugin Update, 1 Theme Update"><span class="ab-icon"></span><span class="ab-label">2</span><span class="screen-reader-text">1 Plugin Update, 1 Theme Update</span></a> </li>
<li id="wp-admin-bar-comments"><a class="ab-item" href="http://elv8r.com/wp-admin/edit-comments.php" title="0 comments awaiting moderation"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a> </li>
<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://elv8r.com/wp-admin/post-new.php" title="Add New"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
<li id="wp-admin-bar-new-post"><a class="ab-item" href="http://elv8r.com/wp-admin/post-new.php">Post</a> </li>
<li id="wp-admin-bar-new-media"><a class="ab-item" href="http://elv8r.com/wp-admin/media-new.php">Media</a> </li>
<li id="wp-admin-bar-new-link"><a class="ab-item" href="http://elv8r.com/wp-admin/link-add.php">Link</a> </li>
<li id="wp-admin-bar-new-page"><a class="ab-item" href="http://elv8r.com/wp-admin/post-new.php?post_type=page">Page</a> </li>
<li id="wp-admin-bar-new-user"><a class="ab-item" href="http://elv8r.com/wp-admin/user-new.php">User</a> </li></ul></div> </li>
<li id="wp-admin-bar-edit"><a class="ab-item" href="http://elv8r.com/wp-admin/post.php?post=2&action=edit">Edit Page</a> </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
<li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://elv8r.com/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><input type="submit" class="adminbar-button" value="Search"/></form></div> </li>
<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" aria-haspopup="true" href="http://elv8r.com/wp-admin/profile.php" title="My Account">Howdy, admin<img alt='' src='http://0.gravatar.com/avatar/69ba973f89ab176694bdb0a1e59236e6?s=26&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D26&r=G' class='avatar avatar-26 photo' height='26' width='26' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class="ab-submenu">
<li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://elv8r.com/wp-admin/profile.php"><img alt='' src='http://0.gravatar.com/avatar/69ba973f89ab176694bdb0a1e59236e6?s=64&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D64&r=G' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>admin</span><span class='username'>rohan</span></a> </li>
<li id="wp-admin-bar-edit-profile"><a class="ab-item" href="http://elv8r.com/wp-admin/profile.php">Edit My Profile</a> </li>
<li id="wp-admin-bar-logout"><a class="ab-item" href="http://elv8r.com/wp-login.php?action=logout&_wpnonce=c787bd7905">Log Out</a> </li></ul></div> </li></ul> </div>
<a class="screen-reader-shortcut" href="http://elv8r.com/wp-login.php?action=logout&_wpnonce=c787bd7905">Log Out</a>
</div>
</body>
</html>回答 1
Stack Overflow用户
发布于 2014-03-22 05:08:09
下面是我尝试复制您的方法，它是一个简单的css类，用于您想要隐藏的div
css：
.hide {
display: none;
}并将" hide“类添加到您想要隐藏的任何div中(如果需要，您可以使用id )
示例：jsfiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22567440
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号