记录成长
分享快乐

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

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

上图是主题相关推荐的默认显示样式,采用单栏显示,右边空出好大一块,就我个人感觉不是太美观,而且右侧空间有点浪费,下面就将其修改一下,使其双栏显示。这次对主题的修改需要改变两个文件,分别是:main.cssmo_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文件上传到网站原位置,查看效果如下:

mo_posts_related.php文件修改

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

&nbsp&nbsp&nbsp<i class="fa fa-hand-o-right"></i>&nbsp&nbsp

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

echo '<li>&nbsp&nbsp&nbsp<i class="fa fa-hand-o-right"></i>&nbsp&nbsp<a href="'.get_permalink().'">'.get_the_title().get_the_subtitle().'</a></li>';

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

2017年12月30日更新:DUX4.0相关文章新增图文模式,新的FontAwesome图标添加位置改为第30行与第48行,添加完成后完整代码如下:
            if( $thumb_s ) echo '<a href="'.get_permalink().'">'._get_post_thumbnail().'</a>';
            echo '&nbsp&nbsp&nbsp<i class="fa fa-hand-o-right"></i>&nbsp&nbsp<a href="'.get_permalink().'">'.get_the_title().get_the_subtitle().'</a></li>';
            $exclude_id .= ',' . $post->ID; $i ++;

 

赞(0) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » DUX主题文章页相关推荐双栏显示
分享到: 更多 (0)

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #2

    开启图文模式后就不行了,在图文模式下错位

    amiisk   | Windows XP | Chrome 63.0.3239.132 | 6天前回复
    • @ amiisk 之后的版本好像没再调,可以尝试着加个判断试下。

      蝈蝈要安静     | Linux | Chrome 57.0.2987.132 | 6天前回复
  2. #1

    我修改了n次 为啥还是没效果

    杨洋   | Linux | Chrome 38.0.2125.102 | 9个月前 (02-27)回复
    • @ 杨洋 一步一步来,看下是什么原因。

      蝈蝈要安静     | Linux | Chrome 64.0.3282.123 | 9个月前 (02-28)回复

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏