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

本站资源均为站长亲测,真实有效,本站不发表未经验证的资源,请放心参与体验

DUX主题是themebetter原创开发的一款基于WordPress程序的多功能主题,响应式布局,不同设备不同展示效果,简洁大气  ,多设备支持、优化SEO,适用于垂直站点、科技博客、个人站,目前我站点使用的就是DUX主题,作为一个喜欢折腾的站长,对主题的修改优化自然是免不了的,这次我们就来改一下DUX主题默认的相关文章功能,并使其双栏显示。

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

上图是主题相关推荐的默认显示样式,采用单栏显示,右边空出好大一块,就我个人感觉不是太美观,而且右侧空间有点浪费,下面就将其修改一下,使其双栏显示。这次对主题的修改需要改变两个文件,分别是:main.css与mo_posts_related.php在修改主题文件前我们最好先备份一下需要修改的文件,如果修改失败,可以直接使用源文件替换掉修改文件来进行恢复。

main.css文件修改

main.css文件是我们这次对DUX主题修改的重中之重,我们就是通过修改它内部的样式文件来实现相关推荐文章双栏显示的,对main.css文件的修改主要包括以下几步:

首先,打开文件后CTRL F搜索.relates ul,在函数后面添加overflow: hidden;语句,修改完成后的代码显示应该是这样的:

.relates ul{
	list-style: disc;
	margin-left: 18px;
	color: #bbb;
	margin-bottom: 30px;
	overflow: hidden;
}

然后,滑动鼠标哦至文件最后,插入如下代码:

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

好了,到这一步相关文章双栏显示基本上就结束了,你可以将main.css文件上传到网站原位置,查看效果如下:

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

mo_posts_related.php文件修改

修改完成后,相关文章双栏显示了,基本的功能也已经达到了,但是如果只是这么单纯的显示似乎不太美观,接下来我们就用Font Awesome字体图标美化一下。找到主题的mo_posts_related.php文件,在改文件下有两个’.get_the_title().get_the_subtitle().\\’语句,分别在文件的第27行与42行,找到并在前面添加如下代码:

&nbsp&nbsp&nbsp&nbsp&nbsp

修改成功后的代码应该显示如下:

echo \'
\';

注意,这地方的图标可以自己定义,具体使用方法请参考我之前的文章:Font Awesome——为站点添加个性化图标 配置完成后上传文件即可查看显示效果如下:

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

2017年12月30日更新:DUX4.0相关文章新增图文模式,新的FontAwesome图标添加位置改为第30行与第48行,添加完成后完整代码如下:

 if( $thumb_s ) echo \'\'._get_post_thumbnail().\'\';
            echo \'&nbsp&nbsp&nbsp&nbsp&nbsp\'.get_the_title().get_the_subtitle().\'\';
            $exclude_id .= \',\' . $post->ID; $i   ;

 

这篇文章如果帮到了你 打赏
分享到: 更多 (0)
0
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • 每个IP自定义时间弹窗转跳广告代码
    分享一段网页自定义ip时间转跳弹窗的广告代码,支持自定义设置用户IP重复转跳网址的时间,做到每个用户,每个IP一定时间内不重复弹窗的功能。 许多站长接广告的时候,因为弹窗价格比较高,所以经常会选择弹窗广告,不过这样对用户体验非常的差。 但是...
  • 怎样做一个合格的站长
    想要成为一个合格的站长,或许真的需要把站长当成一份工作来做,如果是个半兼职的状况的话,估计工作一忙,就忘记了打理网站,也就成了一个不太称职的站长了,我一直以来的梦想就是成为一个全职的站长,有一个属于自己的站点,每天产生一些属于自己的内容,然...
  • Fliqlo(1.3.3)翻页时钟屏幕保护程序 简单大次上档气
    windows系统适用,使用windows的时候又会羡慕mac上的一些东西,比如AppStore就有一些翻页时钟样式的屏保程序,对于windows来说,使用Fliqlo也可以实现翻页时钟屏幕保护程序,妹子觉的逼格非常高。  
  • FTP软件FileZilla的使用方法
    玩网站的大牛小神都知道FTP的作用是上传和下载,是本地和服务器端运输的桥梁。 对建站新手来讲,一切并不是那么容易,特为对FTP使用懵懂的人准备此文,主要解决FTP的基本使用。为了更好更容易的了解,我们将通过FTP热门软件FileZilla来...
  • 配置本地的虚拟主机的方法过程
    我新建了一个项目,名Hello,位于:I:\wamp\www目录下。 想访问这个项目,需要在地址栏上输入localhost/hello,但是我不想这样,我想要在地址栏输入local.hello.com就可以访问到我这个项目。具体步骤,如下:...
  • 网站标题和描述如何修改不会被降权?
    经常会有朋友向我咨询关于网站的title和description修改会不会导致网站被降权,以及如何修改网站的标题和描述才能避免网站被降权的一系列问题,那么今天我们就这些问题做一下分享吧! 一、频繁修改网站标题和描述会被降权么 1、很多人都喜...
  • 爱奇艺QSV转换神器免费下载
    今天给大家分享的是一款叫做QsvExporter的QSV格式转换器,实测效果超级棒棒,如果你无法忍受上次推荐的那个迅捷转换器,强烈建议收藏此软件。 不要好奇软件为什么是繁体的呢,因为这是由我国台湾省一位叫做鸚鵡的小哥哥做的软件,之前推荐的迅...
  • Win10开始菜单增强工具StartIsBack++2.7.3 完美破解版
    StartIsBack,StartIsBack++,是一款专为Windows 10/Windows 8.1所设计的开始菜单恢复工具,可以有效的完美恢复成完整功能的Windows 7风格开始菜单,含各种菜单样式、配置等自定义修改功能,使用最新...
  • 酷狗浮浮雷达短视频歌曲识别神器
    作为一款悬浮识曲App,无论你是在看电影、听电台、玩直播、刷抖音等,只要听见喜欢的音乐,一键点击“浮浮雷达”的悬浮图标便能自动识别歌曲。除了可以迅速get到歌名,点击试听还可立即跳转到酷狗音乐试听全曲,简直是搜歌必备神器。 纵观目前市场上的...
  • WordPress 5.0 换回原有”Classic Editor”经典编辑器的三种方法
    WordPress 5.0 正式采用了全新的“Block Editor”编辑器,从而替换了原有“Classic Editor”编辑器,相信有很多人都不习惯或者不喜欢新编辑器,那么新版 WordPress 该如何换回原来的 WordPress...
  • Android Speedtest(网速测试)v4.3.1 破解版
    安卓测速哪家强,当然是这个Speedtest最为强大了。一款好的测速软件,要的是服务器要跟上,如果服务器不好,测速就不准,很多测速软件都只有一个测速服务器,所以测试效果与真实网速是有很大差别的。这个软件在全国乃至世界都有很多测速节点,测试的...
  • WordPress函数add_image_size修改缩略图大小
    在做主题的时候,总有一些细节的东西,需要我们去慢慢体验并优化,就像add_image_size()这个函数,是用来设置 WordPress 中上传图片缩略图大小的一个函数,此函数的得当设置,可以很好的配合你主题内容区域的图片展示,省去你在写...

评论 抢沙发



觉得文章有用就赞赏支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏