分享一个适用于WordPress网站7B2主题美化的教程:圈子搜索结果页面调整,将原有的一列搜索结果改为三列,取消了结果中发帖时间的显示,大家可以进一步修改以适应自己网站的风格。
1.圈子搜索结果页修改效果
修改前后对比:
2.圈子搜索结果页修改教程
在子主题的style.css文件,或者主题的样式文件均可
/wp-content/themes/b2
添加下面的代码
/*圈子搜索结果页面调整-https://www.zz2zz.com/64270.html”*/
.document-cat-item { flex-flow: initial; text-align: left; width:20%; padding: 18px 10px 18px 0;}
.document-cat-item .ym-menu{ margin-left: 28px;}
.document-top { height: 320px;}
.document-top h2 { margin: 8px auto 16px;}
.document-cat-box img { border-radius: 0; padding: 0 16px 0 0;}
.document-cat-item h2 { margin: 0 0 5px 0;}
.document-cat-item p { font-size: 14px;}
.document-content h2 { margin-top: 28px; }
.document-row-right { display:none; } /*屏蔽帖子发布日期-https://www.zz2zz.com/64270.html*/
.document-row { width: 33.3%; display: inline-block; vertical-align: top; }
@media screen and (max-width:768px){
.collection-item{ width: 100%;}
.b2-collection-img { max-width: 76px; height: 48px; }
.document-cat-item {display: inline-block; text-align: center;}
.post-type-archive-document #primary-home {margin-top: 118px;}
.document-row { width: 100%; }
.document-cat-item img { width: 38px; height: 38px; margin-left: 12px;}
}
3.进一步修改
其实就简单的css样式调整,从上面代码我们可以发现日期的类名为:document-row-right
相似的,参照下面的代码可以找到圈子名称:document-cat-rot
<div class="document-cat-rot"><span><a href="https://www.zz2zz.com/circle/bugs">老-白-博客-</a></span></div>
隐藏即可
.document-cat-rot { display:none; } /*屏蔽圈子名称*/
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。