我已经搜索过这个问题,虽然有一些修正提示,但大多数都是针对主题的。我找到了一个创建print.css的链接,它有点工作,但菜单导航仍然打印在网页的内容上。我只想打印页面的内容...没有页眉,页脚,侧边栏或导航菜单。我通过链接的方向创建的样式页面如下。我还按指示添加了header.php的链接。看来print.css适用于除导航菜单之外的所有内容。在header.php中有一个名为nations-styles.css的自定义样式表,位于/ wp-content / themes / smartbusiness / css。我认为可能存在需要使用该样式表解决的其他导航问题。我是CSS的新手,所以我不确定如何使这项工作,因此他们的导航不会出现在页面的打印中。我已经尝试过#header,.nav-box {display:none}但这似乎也没有用。
非常感谢所有帮助解决此问题。
下面的print.css
@media print {
body {background:white;
font-size:10pt;
margin:0 }
#sidebar { display:none }
#header { display:none}
#header, .nav-box {display:none}
#nav {display:none}
#content{ margin-left:0;
float:none;
width:auto }
.demo .red { color:black;
font-weight:bold }
#content a { font-weight:bold;
color:#000066;
text-decoration:underline }
#content{ margin-left:0;
float:none;
width:auto }
#footer, .ad { display:none }
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
h3 { margin-left:10px;
margin-bottom:0px;
padding-bottom:0px }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }
img.centered { display: block;
margin-left: auto;
margin-right: auto; }
img.right { padding: 4px;
margin: 0 0 2px 7px;
display: inline; }
img.left { padding: 4px;
margin: 0 7px 2px 0;
display: inline; }
.right { float: right; }
.left { float: left }
img { page-break-inside:avoid;
page-break-after:avoid; }
}
下面的header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>">
<title><?php
/* Print the <title> tag based on what is being viewed. */
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'smartbusiness' ), max( $paged, $page ) );
?></title>
<?php
global $shortname;
$favicon = get_option($shortname.'_favicon');
if ($favicon) {
?>
<!-- ~~~~~~ FAVICON ~~~~~~ -->
<link rel="shortcut icon" href="<?php echo $favicon; ?>" />
<?php } ?>
<meta name="viewport" content="width=device-width, <?php if (get_option($shortname."_zoom_feature") == 'No') { echo 'initial-scale=1.0'; } else { echo 'user-scalable=yes'; } ?>">
<?php wp_head(); ?>
<?php
$theme_color_skin = strtolower(get_option($shortname."_theme_color_skin"));
?>
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/<?php echo $theme_color_skin; ?>/css/ie.css" /><![endif]-->
<!--Added to work with minify - removed from functions.php
<link id="stylesheet_custom_style-css" media="screen" type="text/css" href="/wp-content/themes/smartbusiness/functions/custom-css-main.php" rel="stylesheet"> -->
<link id="stylesheet_custom_style-css" media="screen" type="text/css" href="/wp-content/themes/smartbusiness/css/nations-styles.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />
</head>
<body <?php body_class('custom-background'); ?>>
<!-- wrapper -->
<div id="wrapper">
<div class="w1">
<div class="w2">
<!-- header -->
<header id="header">
<!-- section -->
<div class="section">
<h1 class="logo"><a href="<?php echo home_url(); ?>"><img src="<?php $custom_logo = get_option($shortname.'_logo'); echo $custom_logo; ?>" alt="<?php echo bloginfo('name'); ?>" /></a></h1>
<div class="contact-box">
<?php if (get_option($shortname."_phone_number")) { ?><strong class="phone"><?php echo get_option($shortname."_phone_number"); ?></strong><?php } ?>
<?php if (get_option($shortname."_social_links") == 'true') { ?>
<!-- social -->
<ul class="social">
<?php if (get_option($shortname."_social_links_twitter")) { ?><li><a href="<?php echo get_option($shortname."_social_links_twitter"); ?>" class="twitter tool_tip" title="<?php echo get_option($shortname."_social_links_twitter_caption"); ?>"><?php echo get_option($shortname."_social_links_twitter_caption"); ?></a></li><?php } ?>
<?php if (get_option($shortname."_social_links_facebook")) { ?><li><a href="<?php echo get_option($shortname."_social_links_facebook"); ?>" class="facebook tool_tip" title="<?php echo get_option($shortname."_social_links_facebook_caption"); ?>"><?php echo get_option($shortname."_social_links_facebook_caption"); ?></a></li><?php } ?>
<?php if (get_option($shortname."_social_links_pinterest")) { ?><li><a href="<?php echo get_option($shortname."_social_links_pinterest"); ?>" class="pinterest tool_tip" title="<?php echo get_option($shortname."_social_links_pinterest_caption"); ?>"><?php echo get_option($shortname."_social_links_pinterest_caption"); ?></a></li><?php } ?>
<?php if (get_option($shortname."_social_links_dribbble")) { ?><li><a href="<?php echo get_option($shortname."_social_links_dribbble"); ?>" class="dribbble tool_tip" title="<?php echo get_option($shortname."_social_links_dribbble_caption"); ?>"><?php echo get_option($shortname."_social_links_dribbble_caption"); ?></a></li><?php } ?>
<?php if (get_option($shortname."_social_links_vimeo")) { ?><li><a href="<?php echo get_option($shortname."_social_links_vimeo"); ?>" class="vimeo tool_tip" title="<?php echo get_option($shortname."_social_links_vimeo_caption"); ?>"><?php echo get_option($shortname."_social_links_vimeo_caption"); ?></a></li><?php } ?>
<?php if (get_option($shortname."_social_links_googleplus")) { ?><li><a href="<?php echo get_option($shortname."_social_links_googleplus"); ?>" class="google tool_tip" title="<?php echo get_option($shortname."_social_links_googleplus_caption"); ?>"><?php echo get_option($shortname."_social_links_googleplus_caption"); ?></a></li><?php } ?>
<?php if (get_option($shortname."_social_links_rss")) { ?><li><a href="<?php echo get_option($shortname."_social_links_rss"); ?>" class="rss tool_tip" title="<?php echo get_option($shortname."_social_links_rss_caption"); ?>"><?php echo get_option($shortname."_social_links_rss_caption"); ?></a></li><?php } ?>
</ul>
<?php } ?>
</div>
</div>
<!-- nav-box -->
<nav class="nav-box">
<!-- nav -->
<?php
wp_nav_menu(array(
'menu' => 'Header Menu',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => '',
'menu_id' => 'nav',
'echo' => true,
'fallback_cb' => 'fallback_default_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => '',
'theme_location' => 'header_menu'
));
//the main menu for iPhone version
dropdown_menu( array('dropdown_title' => 'Header Menu', 'indent_string' => ' - ', 'indent_after' => '','container' => '', 'container_class' => '', 'menu_id' => 'mobile-meny', 'theme_location'=>'header_menu') );
?>
</nav>
</header>
国家-styles.css的
@charset "utf-8";
/* Nations Styles */
#main .container h1 { margin-bottom:10px;}
#main .container h2 { margin-bottom:10px;}
#main .container h3 { margin-bottom:10px;}
#main .container h4 { margin-bottom:5px;}
#main .container h5 { margin-bottom:5px;}
#main .container h6 { margin-bottom:5px;}
#main .container p { margin-bottom:15px;}
.space { display: block; width:100%; height:15px;}
strong, b { font-weight: bold;}
ul.ulFloatL { overflow: auto;}
ul.ulFloatL li { float: left; width:49.5%; margin-bottom:15px; font-weight:bold; font-size:18px;}
ul.ulFloatL li img { max-width:100%; margin:0;}
.overflowH { overflow:hidden;}
.floatL { float:left;}
.iconLogo { margin: 3px 20px 3px 0;}
.grid-cols .col33 { overflow: auto;}
.imgScale { max-width:100%; width:auto;}
#sidebar .widget ~ .widget { margin-top:20px;}
h2 .divider { margin:0 0 10px; padding:0;}
h2 .divider ~ .divider { padding:13px 0 0; margin-bottom: 25px;}
.btn.red, .tp-caption.slide_button a, .comment-form .submit, .tp-caption.slide_button a.btn { background:#C7362D; border: 1px solid #b7261D !important; color:#FFE6E7; border-radius:5px !important; padding:8px 15px 7px; text-transform: uppercase; font:300 14px/16px 'Oswald',Arial,Helvetica,sans-serif;}
.btn.red:hover, .tp-caption.slide_button a:hover, .comment-form .submit:hover, .tp-caption.slide_button a.btn:hover { background:#b7261D; color:#fff;}
.tp-caption.slide_title { color:#C7362D;}
.comment-form .submit input { opacity:0;}
.fullwidthbanner-container .linklist a { font-size:24px; color:#C7362D; display: block;}
.fullwidthbanner-container .linklist a:hover, .fullwidthbanner-container .linklist a:active, .fullwidthbanner-container .linklist a:focus { color:#333;}
.nav-box #nav .sub-menu { top: 25px;}
.nav-box > ul > li > .has-drop-down-a { background-position: 100% 12px;}
.tp-leftarrow.default, .tp-rightarrow.default { top:50% !important;}
.nocomments { display:none;}
#header { background: #fff url(/wp-content/uploads/2013/10/bodyBg-grey.jpg) top center no-repeat;}
#header .section { padding:10px; border: none;}
.nav-box { padding-top:10px;}
.nav-box > ul > li { padding-bottom:11px;}
.social .twitter {background: transparent url("/wp-content/themes/smartbusiness/css/red/images/twitter-hover.png") no-repeat scroll 0 0; opacity:0.7;}
.social .facebook {background: transparent url("/wp-content/themes/smartbusiness/css/red/images/facebook-hover.png") no-repeat scroll 0 0; opacity:0.7;}
.social .rss {background: transparent url("/wp-content/themes/smartbusiness/css/red/images/rss-hover.png") no-repeat scroll 0 0; opacity:0.7;}
.social .facebook:hover, .social .twitter:hover, .social .rss:hover { opacity:1;}
.fullwidthbanner-container { background-color:#eee;}
#sidebar .current-menu-item a { color:#999;}
div.rss-output { padding:0 0 15px;}
footer .blog-links p, footer .news-contents p { line-height:16px;}
footer .news-contents div ~ div p { margin-top:10px;}
footer .news-contents .news { margin-left:0 !important;}
/* Footer Fix */
#footer, .footer-holder, .footer-frame, footer, footer .add-block { display: block !important; width:100%;}
footer .case { margin:0 auto;}
/* Home Slider */
.fullwidthbanner-container { margin-left:-2000px; float:left;}
.fullwidthbanner-container.loaded {margin-left:0; float:none;}
.fullwidthbanner-container.loaded .fullwidthbanner { max-height:300px;}
/* Theme Styles */
/* logo */
.logo { float:left; background: none; width:136px; height:80px; overflow: visible; text-indent: 0;}
html {background:#fff;}
.nav-box > ul, .nav-box > ul ul { font:18px/19px "Oswald", Arial, Helvetica, sans-serif !important; }
.nav-box > ul ul a { font-size: 14px !important; }
.nav-box > ul a { color: #FFE6E7 !important; }
.nav-box > ul a:hover { color: #ffffff !important; }
.nav-box > ul ul a { color: #333333 !important; }
.nav-box > ul ul a:hover { color: #ffffff !important; }
.nav-box {background:#C7362D; border-bottom: 1px solid #dddddd;}
h1, h2, h3, h4, h5, h6 {font-family:Oswald, Arial, Helvetica, sans-serif !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-family:Oswald, Arial, Helvetica, sans-serif !important;}
h1, h2, h3, h4, h5, h6 {color:#111111 !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#111111 !important;}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {color:#b8b8b8 !important;}
#footer h1 a, #footer h2 a, #footer h3 a, #footer h4 a, #footer h5 a, #footer h6 a {color:#b8b8b8 !important;}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {color:#ffffff !important;}
#footer h1 a, #footer h2 a, #footer h3 a, #footer h4 a, #footer h5 a, #footer h6 a {color:#ffffff !important;}
body {font-family:Arial, Arial, Helvetica, sans-serif;}
body {font-size:12px;}
body {color:#222222;}
a {color:#C7362D;}
a:hover{color:#001F5B;}
答案 0 :(得分:2)
页面底部附近有一个div,就像这样:
<div class="select-options options-hidden drop-menu drop-dropdown-menu " style="position: absolute; top: 0px; left: 0px; width: 0px;"></div>
很可能这是来自菜单插件或主题。
因此,在您的打印样式表中,添加:
.drop-holder{display: none !important; visibility:hidden !important;}
&#34;!important&#34;将有助于使风格生效。
将来,测试打印样式的一个好方法是使用Google Chrome的开发人员工具。
在Chrome中查看页面时,按F12。在底部的“模拟”选项卡中,单击“媒体”,选中“CSS媒体”旁边的框,并确保将下拉列表设置为“打印”。然后,您可以使用打印样式表查看页面。