增加您的标题的宽度 [英] Increasing The Width Of Your Header
问题描述
我的网站是www.rosstheexplorer.com
我希望标题图片能够在整个页面上展开，但我不想让任何字母从'罗斯探险家的文本。
在customer-header.php中，我有这个代码
* /
函数penscratch_custom_header_setup（）{
add_theme_support（'custom-header'，apply_filters（'penscratch_custom_header_args'，array（
'default-image'=&';'，
'默认文字颜色'=>'666666'，
'width'=> 937，
'height'=> 300，
'flex-height'=> true ，
'wp-head-callback'=>'penscratch_header_style'，
'admin-head-callback'=>'penscratch_admin_header_style'，
'admin-preview-callback'=> ;'penscratch_admin_header_image'，
）））;
}
我改变了
'width'=> 937，
至
'width'= 100％，
这会产生灾难性后果，您可以阅读关于这里我在哪里可以下载Wordpress Penscratch主题文件？和在Wordpress Penscratch主题中找到文件中的custom-header.php 。
3天后，我设法解决了这个问题。
我有两个标题图片，一个用于移动设备。我有与header.php和其他CSS中的标题图像相关的代码。
在header.php中，代码是
< body<？php body_class（）; ？>>
< div id =pageclass =hfeed site>
< a class =skip-link screen-reader-texthref =＃content><？php _e（'Skip to content'，'penscratch'）; ？>< / A>
< img class =mobile-header-imgsrc =https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017 /05/Cover-Photo-Mobile-Test.jpg\">
在额外的CSS中，代码是
@media screen and（min-width：661px）{
.mobile-header-img {
display：none;
宽度：100％;
}
}
@media screen and（max-width：660px）{
.header-img {
display：none;
code
$ b我不确定是否需要在PHP文件或在其他CSS。在我上次的实验后，我遇到了重大问题，我不愿意自己做更多的实验。有人可以提供一些指导吗？
根据以下评论，我现在的代码如下：
其他CSS
@media screen and（min-width：661px）{
.mobile-header-img {
显示：无;
宽度：100％;
最大宽度：无;
}
}
@media screen and（max-width：660px）{
.header-img {
display：none;
宽度：100％;
最大宽度：无;
}
}
Header.PHP
< body<？php body_class（）; ？>>
< a class =skip-link screen-reader-texthref =＃content><？php _e（'Skip to content'，'penscratch'）; ？>< / A>
< img class =mobile-header-imgsrc =https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017 /05/Cover-Photo-Mobile-Test.jpg\">
< div id =pageclass =hfeed site>
这实现了我的目标，直到浏览器的宽度大于1300px，然后开始出现空白在标题的右侧。
解决方案您的图片不会展开为页面的整个宽度，因为它们位于具有最大宽度的包装中。你可以把你的图像放在包装外面（见下文）。您也可以在图片上应用 position：absolute ，但这会导致一系列其他问题。
< body<？php body_class（）; ？>>
< a class =skip-link screen-reader-texthref =＃content><？php _e（'Skip to content'，'penscratch'）; ？>< / A>
< div class =header>
< img class =header-imgsrc =https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2 .JPG>
< img class =mobile-header-imgsrc =https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile -Test.jpg>
< / div>
< div id =pageclass =hfeed site>
您还必须添加此CSS来强制图像展开超出其自然尺寸，但是，
.header img {
max-width：none;
宽度：100％;
}
My website is www.rosstheexplorer.com
I want the header image to stretch across the whole page but I do not want any letters to be chopped off the 'Ross The Explorer' text.
In customer-header.php I had this code
*/
function penscratch_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( 'penscratch_custom_header_args', array(
'default-image' => '',
'default-text-color' => '666666',
'width' => 937,
'height' => 300,
'flex-height' => true,
'wp-head-callback' => 'penscratch_header_style',
'admin-head-callback' => 'penscratch_admin_header_style',
'admin-preview-callback' => 'penscratch_admin_header_image',
) ) );
}
I changed
'width' => 937,
to
'width' = 100%,
This had disastrous consequences which you can read about here Where Can I Download The Wordpress Penscratch Theme Files? and Finding custom-header.php in file manage on Wordpress Penscratch theme.
After 3 days I managed to fix the damage.
I have two header images, one for mobile devices. I have code relating to the header images in header.php and Additional CSS.
In header.php the code is
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
In additional CSS the code is
@media screen and (min-width: 661px) {
.mobile-header-img {
display: none;
width: 100%;
}
}
@media screen and (max-width: 660px) {
.header-img {
display: none;
}
}
I am unsure if I need to make modifications in the php files or in Additional CSS. After my last experiment caused me major problems I am reluctant to do any more experimenting on my own. Could someone provide a bit of guidance?
Based on comments below my code is now as follows
Additional CSS
@media screen and (min-width: 661px) {
.mobile-header-img {
display: none;
width: 100%;
max-width: none;
}
}
@media screen and (max-width: 660px) {
.header-img {
display: none;
width: 100%;
max-width: none;
}
}
Header.PHP
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
<div id="page" class="hfeed site">
This achieves my aims up till the width of the browser is greater than 1300px, then white space starts appearing to the right of the header.
解决方案 Your images will not expand to the full width of the page, because they are inside a wrapper with a max-width. You could take your images outside of the wrapper (see below). You could also apply position:absolute to the images, but that would cause a whole other set of problems.
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<div class="header">
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
</div>
<div id="page" class="hfeed site">
You would also have to add this CSS to force the image to expand beyond it's natural size, however this would start to blur the image a bit.
.header img {
max-width: none;
width: 100%;
}
这篇关于增加您的标题的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
