自上一篇更新的文章到现在都有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;
 }</code></pre>

<pre class="wp-block-code"><code>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
声明:博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

标签: none

添加新评论