定制Twentye11,让我们从宽度和较小标题开始

我猜是211。它有很多有趣的功能,看起来很不错。然而,有几件事我不喜欢。标题有点大。所以我需要注意这一点。另外,虽然它的宽度很灵活,但最大宽度对我的口味来说有点太窄了。另外,我需要更宽的侧边栏,我不喜欢那里看起来那么拥挤。虽然我在处理标题,但我有自己的VoodooPress徽标,无需将网站名称放在最上面。我要把它去掉,同时重新定位搜索和网站描述,以覆盖我的标题图像。最后,我喜欢我的小部件有自己的家,它们需要一个漂亮的盒子来将它们与内容分开一点。这一切都很容易完成,看看吧!

所以我需要做的第一件事是拓宽主题的最大宽度。你会在我的一些例子中注意到一些额外的css。我还减少了一些地方的利润。2011年的空白太多了,不适合我的口味。有些人喜欢这样,但嘿,这就是我喜欢的!在我们深入讨论这一点之前,请确保您已经设置了您的孩子主题。如果你忘了怎么做,就跑过来看看。请记住,这个教程是为21岁学生准备的。您只需要调整标题和导入规则,就可以引用二十位偶数。

以下是主题宽度在twenty-11's style.css中设置的位置:

/*=结构----------------------------------------------- */车身{填充:0 2em;}#第页{边距:2em自动;最大宽度:1000px;}

实际上,您只需要调整#页面中的最大宽度。这是我的最终观点:

#第页{边距:1.5em自动;最大宽度:1050px;border-top:15px纯色#bbb;-webkit-border-radius:15像素;-moz边界半径:15px;-o边半径:15px;边距:15px;}

老实说,就是这样。你会看到我在那里有一些额外的东西。我调整了边距以减少侧面的排水沟,并在顶部添加了一个考虑周全的边框。这只是为了我的视觉品味,当我从标题图像上方删除所有信息时,它看起来有点粗糙。我喜欢这样一个想法,即在顶部有一点视觉兴趣。

这样一来,我意识到,如果主题更宽,我需要更宽的标题图像。这非常简单。我刚刚在我的子主题中创建了一个functions.php文件并添加了(注意:这是用于添加过滤器的新更新代码,这是实现此目的的首选方法):

//自定义标题尺寸add_filter('twentyeven_header_image_height','voodoo_header_cheight');函数voodoo_header_height($param){返回175;}add_filter('twentyeven_header_image_width','voodoo_header_ width`);函数voodoo_header_width($param){返回1050;}

为了提供信息,下面是我用来调整标题图像的旧函数。这很有效,但我们的一位读者在评论中指出,我们没有使用最好的方法。所以我建议您使用上面的代码,下面的代码只是为了进行比较。

//自定义标题尺寸add_action('after_setup_theme','voodoochild_theme_setup');如果(!function_exists('voodoochild_theme_setup')):函数voodoochild_theme_setup(){define('HEADER_IMAGE_HIGHT',apply_filters('twentyeleven_HEADER_IMAGE_HEIGHT',175));define('HEADER_IMAGE_WIDTH',apply_filters('twentyeven_HEADER_IMAGE_WIDTH',1050));}endif;

如果您启动了一个全新的functions.php文件,不要忘记在顶部打开php标记。好的,现在使用上述函数,我将211的标题图像从1000x288px更改为1050x175px。当然,你可以只做宽度,去掉高度线,或者使用不同的值。

有了新的标题图像后,您通过标题菜单或使用特色图像上传器上传的任何新标题都将具有该大小。但我已经让VoodooPress运行了一段时间,它以前使用的是twentyen,它有不同的页眉大小。如果你已经有了带有缩略图的帖子,你的网站很可能看起来不太好。没问题,我已经帮你解决了!在这里查看这个方便的插件。它会重新生成你的缩略图,让一切看起来都很好。

最后一件事我需要处理,以使我的头球正常工作。有时我喜欢使用比页眉小的图像。默认情况下,如果您这样做,它将不会用作标题图像。嗯,我复制了211年的header.php并把它放在我的主题中。我需要进一步调整一些东西,所以我需要使用我自己的副本。我在header.php的底部找到了这段代码:

has_post_thumbnail($post->ID)&&(/*$src,$width,$height*/$image=wp_get_attachment_image_src(get_post_thumbnail_id($post->id),数组(HEADER_image_width,HEADER_image_width))&&$image[1]>=标题_image_WIDTH)://休斯顿,我们有了新的头球图像!

我刚刚删除了

&&$image[1]>=标题_image_WIDTH

所以我留下了:

has_post_thumbnail($post->ID)&&(/*$src,$width,$height*/$image=wp_get_attachment_image_src(get_post_thumbnail_id($post->id),数组(HEADER_image_width,HEADER_image_height))://休斯顿,我们有了新的头球图像!

这使得小于最小尺寸的特色图像仍然可以使用。因此,我们在这里已经非常接近好的状态了。我们有一个更宽的主题,更宽的标题图像来适应主题,还有更多的标题图像大小选项。明天,我们将完成这项工作。调整剩余的空白区域,重新调整标题,并重新整理小部件区域。之后,我会贴上我的header.php和style.css代码,以防我忘了什么,这样你就可以查看我目前的成品了。一旦我按照自己的喜好完成了一个不错的基本儿童主题,就是时候寻找新的乐趣了。

留下回复

您的电子邮件地址将不会被发布。已标记必填字段*