个性化 Twenty Nineteen 样式

自上一篇更新的文章到现在都有1年多了,趁着这次要更新 WP 5.0 也是为了换个官方主题,又准备开始了鼓捣,闲着没事把原来的数据重新倒了一遍。

换了这个二〇一九,发现其实还是挺喜欢 Twenty Seventeen 的主题的,可捯饬的地方挺多的。这个新主题,侧边栏居然弄到底下啦,还分成俩栏,确实不怎么讨喜,那就先从 Widgets 开始修整。Widgets 考虑过 float ,但是最后还是用了 absolute,主要是还是改动小,但是有bug,屏幕小的时候,标题会重叠,话说现在屏幕小的也是不多了,先留着这个有优化的空间吧。

上一篇2017的主题有个自定义的页头媒体,感觉还是挺好的,考虑放到2019上来的话,需要更换一下思路,用了css3的线性渐变,虽然是取到了整个的图,但是只影响到顶部的一小部分。 这个改动对页面来说,增加了一点点颜色,但是对于视觉认知来说,只看到图的一部分,很大可能看不懂啊。

修改了 functions.php 增加两块代码

//给 body 增加一个样式
add_filter('body_class','dyniao_class_names');
 function dyniao_class_names($classes) {
     $classes[] = 'bgimage';
     return $classes;
 }
function add_footer_code() {
     $randomimg=‘’;
     $str=file_get_contents('http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
     $j=json_decode($str,true);
     $randomimg = 'http://cn.bing.com'.$j['images'][0]['url'];
     echo "";
 }

侧边栏通过 CSS 进行了位置的调整
本站目前采用的是 position:absolute;

@media only screen and (min-width: 1168px){
#colophon .widget-column .widget {
		margin-right: calc(3 * 1rem);
		width: 100% !important;
}
	.widget-column{
		font-size:0.5em;
		max-width: calc(4 * (100vw / 12) - 28px);
		position:absolute;
		top:95px;right:10px;
	}
	.widget-column a{font-size:0.8em;}
}

问题是,标题太长会突破侧栏。

--- EOF ---
订阅本站:feed
原创文章,转载请注明来源:大洋鸟 » 《个性化 Twenty Nineteen 样式》

留下评论

电子邮件地址不会被公开。 必填项已用*标注

冀ICP备17005573号-1