1. David Wu首页
  2. WordPress
  3. WordPress安装教程

DUX主题文章页相关推荐双栏显示

DUX 主题是 themebetter 原创开发的一款基于 wordpress 程序的多功能主题,响应式布局,不同设备不同展示效果,简洁大气 ,多设备支持、优化 SEO,适用于垂直站点、科技博客、个人站,目前我站点使用的就是 DUX 主题,作为一个喜欢折腾的站长,对主题的修改优化自然是免不了的,DUX 主题默认文章页的相关推荐是只显示一列数据的,本次教程是将原来的一列改为两列显示,这样显示的会更多一点而且页面也不会太长。
DUX主题文章页相关推荐双栏显示-云模板上图是主题相关推荐的默认显示样式,采用单栏显示,右边空出好大一块,就我个人感觉不是太美观,而且右侧空间有点浪费,下面就将其修改一下,使其双栏显示。这次对主题的修改需要改变两个文件,分别是:main.css 与 mo_posts_related.php。本次教程是将原来的一列改为两列显示,这样显示的会更多一点而且页面也不会太长。在修改主题文件前我们最好先备份一下需要修改的文件,如果修改失败,可以直接使用源文件替换掉修改文件来进行恢复。教程非常简单,找到 dux 的样式文件 main.css,main.css 文件是我们这次对 DUX 主题修改的重中之重,我们就是通过修改它内部的样式文件来实现相关推荐文章双栏显示的。首先,打开文件后 CTRL+F 搜索.relates ul,在函数后面添加 overflow: hidden;语句,修改完成后的代码显示应该是这样的:

  1. .relates ul{
  2. 	list-style: disc;
  3. 	margin-left: 18px;
  4. 	color: #bbb;
  5. 	margin-bottom: 30px;
  6. 	overflow: hidden;
  7. }

然后在 main.css 文件的最后加上如下的代码:

  1. /*相关文章推荐使用双栏*/
  2. .relates ul li {
  3.     width: 50%;
  4.     float: left;
  5.     word-break: break-all;
  6.     white-space: nowrap;
  7.     overflow: hidden;
  8.     text-overflow: ellipsis;
  9. }

你可以将 main.css 文件上传到网站原位置,查看效果如下:
DUX主题文章页相关推荐双栏显示-云模板好了,到这一步相关文章双栏显示基本上就结束了,如果有什么不懂的地方可以在下方留言评论也可以联系站长。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/94875

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

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